diff --git a/changes/changelog.d/1381.enhancement b/changes/changelog.d/1381.enhancement deleted file mode 100644 index 417ef322a0826a1448c38bee6f9b31a4430ede2d..0000000000000000000000000000000000000000 --- 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 1e49b471af00feda0ad6c9e5b053d4511e593bb2..232346bb14cb337cd50403730bc9e9f5c9e29fbd 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 fc3afa1b22de0e57e433abfd79fba522ce39671a..633ec13e3494ed631de51f1b5de810d9eee49232 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 e7baef5800294984085e32d25ccb8d210bcb6269..1129ef5d4a9e95774cdd67ec6f27e7428217516a 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 b63bdaa1c78bc1a072872fc996a6918bde17015d..c261bb07f34ca4b08ffcc7207391c6ae4604d507 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 8ec6ba0d99ea39bace1281bb5ad58b4484561ba3..b2bcde76b696334397129ca1ff9619bb5f536aa6 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 4c527a67e3a4511bd626fd9a0915d69dbec1f501..b40642842612976bde41bc55b4676d97bc82e816 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', () => {