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

Update track progress bars with css transitions

This commit is contained in:
Georg Krause 2021-09-20 11:08:31 +02:00
parent e9de6863c8
commit 9bef230499
5 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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="{ 'width': progress + '%' }"></div> <div class="position bar" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></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="{ 'width': progress + '%' }"></div> <div class="position bar" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></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 Math.round((state.currentTime / state.duration * 100) * 10) / 10 return state.currentTime / state.duration
} }
}, },
actions: { actions: {

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

@ -75,7 +75,9 @@
.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);
min-width: 0; width: 100%;
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,6 +174,9 @@
.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 {