player: progress bar position

assets/src/assets/styles.scss

@@ -173,9 +173,11 @@ a.navbar-item.is-active {
 
     --player-panel-bg: var(--highlight-color-alpha);
     --player-bar-bg: var(--highlight-color);
-    --progress-border: 1px var(--highlight-color-2) solid;
-    --progress-bg-color: transparent;
-    --progress-bar-color: var(--highlight-color-2);
+    --progress-border-size: 1px;
+    --progress-border: var(--progress-border-size) var(--highlight-color-2) solid;
+    --progress-bg: transparent;
+    --progress-bar-bg: var(--highlight-color-2);
+    --progress-bar-color: var(--highlight-color);
 }
 
 
@@ -341,6 +343,15 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
     font-size: unset !important
 }
 
+.list-urls {
+    margin-top: $mp-3;
+    text-align: right;
+    font-size: $text-size-medium;
+
+    a:not(:last-child) {
+        margin-right: $mp-3;
+    }
+}
 
 .vc-weekday-1, .vc-weekday-7 {
     color: var(--highlight-color-2) !important;
@@ -668,16 +679,21 @@ nav li {
     flex-direction: row;
     margin: 0em;
     padding: 0em;
-    background-color: var(--progress-bg-color);
+    background-color: var(--progress-bg);
 
     .a-progress-bar-container {
         flex-grow: 1;
-        margin: 0em $mp-3;
-        border: var(--progress-border);
+        margin: 0em;
+    }
+
+    > time, .a-progress-bar {
+        height: 100%;
+        padding: $mp-2;
     }
 
     .a-progress-bar {
-        background-color: var(--progress-bar-color);
+        background-color: var(--progress-bar-bg);
+        color: var(--progress-bar-color)
     }
 }
 
@@ -769,6 +785,18 @@ nav li {
     }
 }
 
+.a-player-progress {
+    background: var(--player-bar-bg);
+    height: 0.4em;
+    overflow: hidden;
+
+    time { display: none; }
+
+    &:hover {
+        height: 2em;
+        time { display: unset; }
+    }
+}
 
 .a-player-bar {
     display: flex;

assets/src/components/APlayer.vue

@@ -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);

assets/src/components/AProgress.vue

@@ -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>