Commit 9bef2304 authored by Georg Krause's avatar Georg Krause
Browse files

Update track progress bars with css transitions

parent e9de6863
...@@ -57,7 +57,7 @@ ...@@ -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>
......
...@@ -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="{ '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">
......
...@@ -88,7 +88,7 @@ export default { ...@@ -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: {
......
...@@ -75,7 +75,9 @@ ...@@ -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 {
......
...@@ -174,6 +174,9 @@ ...@@ -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 {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment