MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: resolve progressbar issues 

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>
This commit is contained in:
Kasper Seweryn 2023-03-03 09:52:03 +01:00 committed by Marge
parent 8ce20c5621
commit 47b3bfd2c0
4 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
front/src/components/Queue.vue
View File

@ -346,39 +346,16 @@ if (!isWebGLSupported) {
</button> </button>
</div> </div>
<div class="progress-wrapper"> <div class="progress-wrapper">
<div <div class="progress-area">
v-if="currentTrack && !errored"
class="progress-area"
>
<div <div
ref="progressBar" ref="progressBar"
:class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio}, 'progress']" :class="['ui', 'small', 'vibrant', {'indicating': isLoadingAudio && !errored}, 'progress']"
@click="touchProgress" @click="touchProgress"
> >
<div <div
class="buffer bar" class="buffer bar"
:style="{ 'transform': `translateX(${bufferProgress - 100}%)` }" :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
/> />
<div
class="position bar"
:style="{
animationDuration: duration + 's',
animationPlayState: isPlaying
? 'running'
: 'paused'
}"
/>
</div>
</div>
<div
v-else
class="progress-area"
>
<div
ref="progress"
:class="['ui', 'small', 'vibrant', 'progress']"
>
<div class="buffer bar" />
<div class="position bar" /> <div class="position bar" />
</div> </div>
</div> </div>

4
front/src/components/audio/Player.vue
View File

@ -146,9 +146,7 @@ const hideArtist = () => {
class="buffer bar" class="buffer bar"
:style="{ 'transform': `translateX(${bufferProgress - 100}%)` }" :style="{ 'transform': `translateX(${bufferProgress - 100}%)` }"
/> />
<div <div class="position bar" />
class="position bar"
/>
<div <div
class="seek bar" class="seek bar"
:style="{ 'transform': `translateX(${x / screenWidth * 100 - 100}%)` }" :style="{ 'transform': `translateX(${x / screenWidth * 100 - 100}%)` }"

5
front/src/style/components/_player.scss
View File

@ -48,7 +48,6 @@
.ui.progress .bar { .ui.progress .bar {
transition: none; transition: none;
width: 100%; width: 100%;
transform: translateX(calc(var(--fw-track-progress) - 100%));
transform-origin: top left; transform-origin: top left;
will-change: transform; will-change: transform;
position: absolute; position: absolute;
@ -59,6 +58,10 @@
transition: opacity .2s ease; transition: opacity .2s ease;
mix-blend-mode: overlay; mix-blend-mode: overlay;
} }
&.position {
transform: translate3d(calc(var(--fw-track-progress) - 100%), 0, 0);
}
} }
.ui.progress:hover .bar.seek { .ui.progress:hover .bar.seek {
opacity: 0.4; opacity: 0.4;

10
front/src/style/components/_queue.scss
View File

@ -160,10 +160,14 @@
.ui.progress .bar { .ui.progress .bar {
transition: none; transition: none;
width: 100%; width: 100%;
transform: translateX(calc(var(--fw-track-progress) - 100%));
transform-origin: top left; transform-origin: top left;
will-change: transform; will-change: transform;
&.position {
transform: translate3d(calc(var(--fw-track-progress) - 100%), 0, 0);
}
} }
.ui.progress .buffer.bar { .ui.progress .buffer.bar {
position: absolute; position: absolute;
background-color: rgba(255, 255, 255, 0.15); background-color: rgba(255, 255, 255, 0.15);
@ -189,6 +193,10 @@
animation-duration: 2s; animation-duration: 2s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
&:not(.buffer) {
background: transparent !important;
}
} }
.ui.progress { .ui.progress {
margin: 0.5rem 0; margin: 0.5rem 0;