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

Only animate progress when playing

This commit is contained in:
Georg Krause 2021-09-29 14:47:54 +02:00
parent 31c0b91bac
commit 9711f740bc
No known key found for this signature in database
GPG Key ID: FD479B9A4D48E632
2 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
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" :class="{ 'animation': animationActive }" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></div>
</div> </div>
<div class="controls-row"> <div class="controls-row">
@ -727,6 +727,9 @@ export default {
expandQueue, expandQueue,
addArtistContentFilter addArtistContentFilter
} }
},
animationActive () {
return this.progress && this.playing;
} }
}, },
watch: { watch: {

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

@ -76,10 +76,14 @@
.bar.position:not(.buffer) { .bar.position:not(.buffer) {
background: var(--vibrant-color); background: var(--vibrant-color);
width: 100%; width: 100%;
transition: transform 1.1s linear 0s; transition: transform 0s linear 0s;
transform-origin: left center 0px; transform-origin: left center 0px;
} }
.animation {
transition-duration: 1.01s !important;
}
.track-controls { .track-controls {
display: flex; display: flex;
align-items: center; align-items: center;