Verified Commit 0abf7109 authored by Georg Krause's avatar Georg Krause
Browse files

Revert progress bar changes, see #1381

parent 77bffa20
Make player progress transtition smoother (#1381)
......@@ -57,7 +57,7 @@
:class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']"
@click="touchProgress">
<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" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
</div>
</div>
<div class="progress-area" v-else>
......
......@@ -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" :data-percent="progress" :style="{ 'width': progress + '%' }"></div>
</div>
<div class="controls-row">
......
......@@ -88,7 +88,7 @@ export default {
return time.parse(Math.round(state.currentTime))
},
progress: state => {
return state.currentTime / state.duration
return Math.round((state.currentTime / state.duration * 100) * 10) / 10
}
},
actions: {
......
......@@ -75,9 +75,7 @@
.ui.progress:not([data-percent]):not(.indeterminate)
.bar.position:not(.buffer) {
background: var(--vibrant-color);
width: 100%;
transition: transform 1.1s linear 0s;
transform-origin: left center 0px;
min-width: 0;
}
.track-controls {
......
......@@ -174,9 +174,6 @@
.ui.progress:not([data-percent]):not(.indeterminate)
.bar.position:not(.buffer) {
background: var(--vibrant-color);
width: 100%;
transition: transform 1.1s linear 0s;
transform-origin: left center 0px;
}
.indicating.progress .bar {
......
......@@ -98,7 +98,7 @@ describe('store/player', () => {
})
it('progress', () => {
const state = { currentTime: 4, duration: 10 }
expect(store.getters['progress'](state)).to.equal(0.4)
expect(store.getters['progress'](state)).to.equal(40)
})
})
describe('actions', () => {
......
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