MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revert progress bar changes, see #1381

This commit is contained in:
Georg Krause 2021-10-21 10:22:30 +02:00
parent 77bffa20ac
commit 0abf71095c
No known key found for this signature in database
GPG Key ID: FD479B9A4D48E632
7 changed files with 5 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changes/changelog.d/1381.enhancement
View File

@ -1 +0,0 @@
Make player progress transtition smoother (#1381)

2
front/src/components/Queue.vue
View File

@ -57,7 +57,7 @@
:class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']" :class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
@click="touchProgress"> @click="touchProgress">
<div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div> <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> </div>
<div class="progress-area" v-else> <div class="progress-area" v-else>

2
front/src/components/audio/Player.vue
View File

@ -7,7 +7,7 @@
<div <div
:class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']"> :class="['ui', 'top attached', 'small', 'inverted', {'indicating': isLoadingAudio}, 'progress']">
<div class="buffer bar" :data-percent="bufferProgress" :style="{ 'width': bufferProgress + '%' }"></div> <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="controls-row"> <div class="controls-row">

2
front/src/store/player.js
View File

@ -88,7 +88,7 @@ export default {
return time.parse(Math.round(state.currentTime)) return time.parse(Math.round(state.currentTime))
}, },
progress: state => { progress: state => {
return state.currentTime / state.duration return Math.round((state.currentTime / state.duration * 100) * 10) / 10
} }
}, },
actions: { actions: {

4
front/src/style/components/_player.scss
View File

@ -75,9 +75,7 @@
.ui.progress:not([data-percent]):not(.indeterminate) .ui.progress:not([data-percent]):not(.indeterminate)
.bar.position:not(.buffer) { .bar.position:not(.buffer) {
background: var(--vibrant-color); background: var(--vibrant-color);
width: 100%; min-width: 0;
transition: transform 1.1s linear 0s;
transform-origin: left center 0px;
} }
.track-controls { .track-controls {

3
front/src/style/components/_queue.scss
View File

@ -174,9 +174,6 @@
.ui.progress:not([data-percent]):not(.indeterminate) .ui.progress:not([data-percent]):not(.indeterminate)
.bar.position:not(.buffer) { .bar.position:not(.buffer) {
background: var(--vibrant-color); background: var(--vibrant-color);
width: 100%;
transition: transform 1.1s linear 0s;
transform-origin: left center 0px;
} }
.indicating.progress .bar { .indicating.progress .bar {

2
front/tests/unit/specs/store/player.spec.js
View File

@ -98,7 +98,7 @@ describe('store/player', () => {
}) })
it('progress', () => { it('progress', () => {
const state = { currentTime: 4, duration: 10 } 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', () => { describe('actions', () => {