Skip to content
Snippets Groups Projects
Verified Commit 9711f740 authored by Georg Krause's avatar Georg Krause
Browse files

Only animate progress when playing

parent 31c0b91b
No related branches found
No related tags found
No related merge requests found
...@@ -7,7 +7,7 @@ ...@@ -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 { ...@@ -727,6 +727,9 @@ export default {
expandQueue, expandQueue,
addArtistContentFilter addArtistContentFilter
} }
},
animationActive () {
return this.progress && this.playing;
} }
}, },
watch: { watch: {
......
...@@ -76,10 +76,14 @@ ...@@ -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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment