rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

player: progress bar position

Browse Source
This commit is contained in:
bkfox
2023-11-24 21:27:59 +01:00
parent 62ada47352
commit 69d77e1d0c
7 changed files with 111 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/src/components/APlayer.vue
View File

@ -36,6 +36,11 @@
</APlaylist>
</div>
<div class="a-player-progress" v-if="loaded && duration">
<AProgress v-if="loaded && duration" :value="currentTime" :max="this.duration"
:format="displayTime"
@select="audio.currentTime = $event"></AProgress>
</div>
<div class="a-player-bar button-group">
<button class="button" @click="togglePlay()"
:title="buttonTitle" :aria-label="buttonTitle">
@ -47,9 +52,6 @@
</div>
<div :class="['a-player-bar-content', loaded && duration ? 'has-progress' : '']">
<slot name="content" :loaded="loaded" :live="live" :current="current"></slot>
<AProgress v-if="loaded && duration" :value="currentTime" :max="this.duration"
:format="displayTime" class="pt-1 is-size-7"
@select="audio.currentTime = $event"></AProgress>
</div>
<div>
<button class="button has-text-weight-bold" v-if="loaded" @click="play()">
@ -251,6 +253,7 @@ export default {
//! Play/pause
togglePlay(playlist=null, index=0) {
if(playlist !== null) {
this.panel = null;
let item = this.sets[playlist].get(index);
if(!this.playlist || this.playlistName !== playlist || this.loaded != item) {
this.play(playlist, index);

9
assets/src/components/AProgress.vue
View File

@ -1,11 +1,16 @@
<template>
<div class="a-progress m-0">
<time class="time-now">
<slot name="value" :value="valueDisplay" :max="max">{{ format(valueDisplay) }}</slot>
<slot name="value" :value="value" :max="max">{{ format(value) }}</slot>
</time>
<div ref="bar" class="a-progress-bar-container" @click.stop="onClick" @mouseleave.stop="onMouseMove"
@mousemove.stop="onMouseMove">
<div :class="progressClass" :style="progressStyle">&nbsp;</div>
<div :class="progressClass" :style="progressStyle">
<time>
{{ hoverValue && format(hoverValue) || "))))"}}
</time>
&nbsp;
</div>
</div>
<time class="time-total">
<slot name="value" :value="valueDisplay" :max="max">{{ format(max) }}</slot>