From 9711f740bc83b7e165454d733df9eafa073f30bf Mon Sep 17 00:00:00 2001
From: Georg Krause <mail@georg-krause.net>
Date: Wed, 29 Sep 2021 14:47:54 +0200
Subject: [PATCH] Only animate progress when playing
---
front/src/components/audio/Player.vue | 5 ++++-
front/src/style/components/_player.scss | 6 +++++-
2 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index fc3afa1b22..aadecb619c 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 b63bdaa1c7..cc45729759 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;
--
GitLab