diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue index fc3afa1b22de0e57e433abfd79fba522ce39671a..aadecb619ce7f9641af07d9be843871dede789b2 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" :class="{ 'animation': animationActive }" :data-percent="progress" :style="{ 'transform': 'scale(' + progress + ', 1)' }"></div> </div> <div class="controls-row"> @@ -727,6 +727,9 @@ export default { expandQueue, addArtistContentFilter } + }, + animationActive () { + return this.progress && this.playing; } }, watch: { diff --git a/front/src/style/components/_player.scss b/front/src/style/components/_player.scss index b63bdaa1c78bc1a072872fc996a6918bde17015d..cc45729759e21e070389fd69178665e13c96302f 100644 --- a/front/src/style/components/_player.scss +++ b/front/src/style/components/_player.scss @@ -76,10 +76,14 @@ .bar.position:not(.buffer) { background: var(--vibrant-color); width: 100%; - transition: transform 1.1s linear 0s; + transition: transform 0s linear 0s; transform-origin: left center 0px; } + .animation { + transition-duration: 1.01s !important; + } + .track-controls { display: flex; align-items: center;