player: progress bar position

aircox/static/aircox/css/chunk-common.css

@@ -9403,9 +9403,11 @@ a.navbar-item.is-active {
   --preview-cover-small-size: 10em;
   --player-panel-bg: var(--highlight-color-alpha);
   --player-bar-bg: var(--highlight-color);
-  --progress-border: 1px var(--highlight-color-2) solid;
+  --progress-border-size: 1px;
-  --progress-bg-color: transparent;
+  --progress-border: var(--progress-border-size) var(--highlight-color-2) solid;
-  --progress-bar-color: var(--highlight-color-2);
+  --progress-bg: transparent;
+  --progress-bar-bg: var(--highlight-color-2);
+  --progress-bar-color: var(--highlight-color);
 }
 
 body {
@@ -9583,6 +9585,15 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
   font-size: unset !important;
 }
 
+.list-urls {
+  margin-top: 0.8em;
+  text-align: right;
+  font-size: 1.4em;
+}
+.list-urls a:not(:last-child) {
+  margin-right: 0.8em;
+}
+
 .vc-weekday-1, .vc-weekday-7 {
   color: var(--highlight-color-2) !important;
 }
@@ -9840,15 +9851,19 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
   flex-direction: row;
   margin: 0em;
   padding: 0em;
-  background-color: var(--progress-bg-color);
+  background-color: var(--progress-bg);
 }
 .a-progress .a-progress-bar-container {
   flex-grow: 1;
-  margin: 0em 0.8em;
+  margin: 0em;
-  border: var(--progress-border);
+}
+.a-progress > time, .a-progress .a-progress-bar {
+  height: 100%;
+  padding: 0.4em;
 }
 .a-progress .a-progress-bar {
-  background-color: var(--progress-bar-color);
+  background-color: var(--progress-bar-bg);
+  color: var(--progress-bar-color);
 }
 
 .playlist .header, .a-playlist .header {
@@ -9923,6 +9938,21 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
   background-color: transparent;
 }
 
+.a-player-progress {
+  background: var(--player-bar-bg);
+  height: 0.4em;
+  overflow: hidden;
+}
+.a-player-progress time {
+  display: none;
+}
+.a-player-progress:hover {
+  height: 2em;
+}
+.a-player-progress:hover time {
+  display: unset;
+}
+
 .a-player-bar {
   display: flex;
   background: var(--player-bar-bg);

aircox/templates/aircox/home.html

@@ -38,6 +38,13 @@
     {% for object in logs %}
         {% include "./widgets/log.html" with widget="item" %}
     {% endfor %}
+
+    <nav class="list-urls">
+        <a href="{% url "diffusion-list" %}"
+            aria-label="{% translate "Show all program's for today" %}">
+            {% translate "Today" %}
+        </a>
+    </nav>
 </section>
 {% endif %}
 
@@ -50,6 +57,13 @@
         {% page_widget "item" object open=True %}
         {% endfor %}
     </div>
+
+    <nav class="list-urls">
+        <a href="{% url "page-list" %}"
+            aria-label="{% translate "Show all publications" %}">
+            {% translate "All publications" %}
+        </a>
+    </nav>
 </section>
 {% endif %}
 {% endblock %}

aircox/templates/aircox/program_detail.html

@@ -16,12 +16,10 @@
         {% endfor %}
     </section>
 
-    <nav class="has-text-right">
+    <nav class="list-urls">
-        <li class="nav-item">
         <a href="{% url "episode-list" parent_slug=program.slug %}">
             {% translate "All episodes" %}
         </a>
-        </li>
     </nav>
 </section>
 {% endif %}
@@ -37,13 +35,11 @@
         {% endfor %}
     </section>
 
-    <nav class="has-text-right">
+    <nav class="list-urls">
-        <li class="nav-item">
         <a href="{% url "article-list" parent_slug=program.slug %}"
             aria-label="{% translate "Show all program's articles" %}">
             {% translate "All articles" %}
         </a>
-        </li>
     </nav>
 </section>
 {% endif %}

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-border-size: 1px;
-    --progress-bg-color: transparent;
+    --progress-border: var(--progress-border-size) var(--highlight-color-2) solid;
-    --progress-bar-color: var(--highlight-color-2);
+    --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;
+        margin: 0em;
-        border: var(--progress-border);
+    }
+
+    > 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>