From 0abf71095cf040bd45e4e364da5ce7aff1c6931e Mon Sep 17 00:00:00 2001
From: Georg Krause <mail@georg-krause.net>
Date: Thu, 21 Oct 2021 10:22:30 +0200
Subject: [PATCH] Revert progress bar changes, see #1381
---
changes/changelog.d/1381.enhancement | 1 -
front/src/components/Queue.vue | 2 +-
front/src/components/audio/Player.vue | 2 +-
front/src/store/player.js | 2 +-
front/src/style/components/_player.scss | 4 +---
front/src/style/components/_queue.scss | 3 ---
front/tests/unit/specs/store/player.spec.js | 2 +-
7 files changed, 5 insertions(+), 11 deletions(-)
delete mode 100644 changes/changelog.d/1381.enhancement
diff --git a/changes/changelog.d/1381.enhancement b/changes/changelog.d/1381.enhancement
deleted file mode 100644
index 417ef322a0..0000000000
--- a/changes/changelog.d/1381.enhancement
+++ /dev/null
@@ -1 +0,0 @@
-Make player progress transtition smoother (#1381)
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 1e49b471af..232346bb14 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -57,7 +57,7 @@
:class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
@click="touchProgress">
<div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
- <div class="position bar" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></div>
+ <div class="position bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
</div>
</div>
<div class="progress-area" v-else>
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index fc3afa1b22..633ec13e34 100644
--- a/front/src/components/audio/Player.vue
+++ b/front/src/components/audio/Player.vue
@@ -7,7 +7,7 @@
<div
:class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']">
<div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div>
- <div class="position bar" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></div>
+ <div class="position bar" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
</div>
<div class="controls-row">
diff --git a/front/src/store/player.js b/front/src/store/player.js
index e7baef5800..1129ef5d4a 100644
--- a/front/src/store/player.js
+++ b/front/src/store/player.js
@@ -88,7 +88,7 @@ export default {
return time.parse(Math.round(state.currentTime))
},
progress: state => {
- return state.currentTime / state.duration
+ return Math.round((state.currentTime / state.duration * 100) * 10) / 10
}
},
actions: {
diff --git a/front/src/style/components/_player.scss b/front/src/style/components/_player.scss
index b63bdaa1c7..c261bb07f3 100644
--- a/front/src/style/components/_player.scss
+++ b/front/src/style/components/_player.scss
@@ -75,9 +75,7 @@
.ui.progress:not([data-percent]):not(.indeterminate)
.bar.position:not(.buffer) {
background: var(--vibrant-color);
- width: 100%;
- transition: transform 1.1s linear 0s;
- transform-origin: left center 0px;
+ min-width: 0;
}
.track-controls {
diff --git a/front/src/style/components/_queue.scss b/front/src/style/components/_queue.scss
index 8ec6ba0d99..b2bcde76b6 100644
--- a/front/src/style/components/_queue.scss
+++ b/front/src/style/components/_queue.scss
@@ -174,9 +174,6 @@
.ui.progress:not([data-percent]):not(.indeterminate)
.bar.position:not(.buffer) {
background: var(--vibrant-color);
- width: 100%;
- transition: transform 1.1s linear 0s;
- transform-origin: left center 0px;
}
.indicating.progress .bar {
diff --git a/front/tests/unit/specs/store/player.spec.js b/front/tests/unit/specs/store/player.spec.js
index 4c527a67e3..b406428426 100644
--- a/front/tests/unit/specs/store/player.spec.js
+++ b/front/tests/unit/specs/store/player.spec.js
@@ -98,7 +98,7 @@ describe('store/player', () => {
})
it('progress', () => {
const state = { currentTime: 4, duration: 10 }
- expect(store.getters['progress'](state)).to.equal(0.4)
+ expect(store.getters['progress'](state)).to.equal(40)
})
})
describe('actions', () => {
--
GitLab