From 9661e98a702c10114e81ebb9fff189278c4fe706 Mon Sep 17 00:00:00 2001
From: bkfox <thomas bkfox net>
Date: Fri, 24 Nov 2023 21:39:20 +0100
Subject: [PATCH] player: progress bar position

---
 aircox/static/aircox/css/chunk-common.css   | 14 ++++++------
 aircox/static/aircox/js/chunk-common.js     |  2 +-
 aircox/templates/aircox/episode_detail.html |  9 ++++++++
 assets/src/assets/styles.scss               | 15 +++++++------
 assets/src/components/APlaylist.vue         | 24 ++++++++++-----------
 5 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/aircox/static/aircox/css/chunk-common.css b/aircox/static/aircox/css/chunk-common.css
index bb75074..fb8be55 100644
--- a/aircox/static/aircox/css/chunk-common.css
+++ b/aircox/static/aircox/css/chunk-common.css
@@ -9851,6 +9851,8 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
   flex-direction: row;
   margin: 0em;
   padding: 0em;
+}
+.a-progress:hover {
   background-color: var(--progress-bg);
 }
 .a-progress .a-progress-bar-container {
@@ -9913,7 +9915,6 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
 
 .a-player {
   z-index: 10000;
-  box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
 }
 .a-player a {
   color: var(--highlight-color-2);
@@ -9939,27 +9940,28 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
 }
 
 .a-player-progress {
-  background: var(--player-bar-bg);
   height: 0.4em;
   overflow: hidden;
 }
 .a-player-progress time {
   display: none;
 }
-.a-player-progress:hover {
+.a-player-progress:hover, .a-player-panels.is-open + .a-player-progress {
+  background: var(--player-bar-bg);
   height: 2em;
 }
-.a-player-progress:hover time {
+.a-player-progress:hover time, .a-player-panels.is-open + .a-player-progress time {
   display: unset;
 }
 
 .a-player-bar {
   display: flex;
-  background: var(--player-bar-bg);
   flex-direction: row;
   justify-content: center;
-  border-top: 1px hsl(0deg, 0%, 71%) solid;
   height: 3.75em !important;
+  border-top: 1px hsl(0deg, 0%, 71%) solid;
+  background: var(--player-bar-bg);
+  box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
 }
 .a-player-bar > * {
   height: 100%;
diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js
index 5d25dbb..b29e035 100644
--- a/aircox/static/aircox/js/chunk-common.js
+++ b/aircox/static/aircox/js/chunk-common.js
@@ -235,7 +235,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \***********************************************************************************************************************************************************************************************************************************************************************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n  class: \"a-playlist\"\n};\nconst _hoisted_2 = {\n  class: \"header\"\n};\nconst _hoisted_3 = [\"onClick\"];\nconst _hoisted_4 = [\"onClick\"];\nconst _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-close\"\n})], -1 /* HOISTED */);\nconst _hoisted_6 = [_hoisted_5];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_ASoundItem = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"ASoundItem\");\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"header\")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"ul\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(_ctx.listClass)\n  }, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(_ctx.items, (item, index) => {\n    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"li\", {\n      class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(_ctx.itemClass),\n      onClick: $event => !$options.hasAction('play') && _ctx.select(index),\n      key: index\n    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"a\", {\n      class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($props.player.isPlaying(item) ? 'is-active' : '')\n    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_ASoundItem, {\n      data: item,\n      index: index,\n      set: _ctx.set,\n      player: $options.player_,\n      onTogglePlay: $event => $options.togglePlay(index),\n      actions: $props.actions\n    }, {\n      actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(({}) => [$props.editable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n        key: 0,\n        class: \"button\",\n        onClick: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withModifiers)($event => _ctx.remove(index, true), [\"stop\"])\n      }, _hoisted_6, 8 /* PROPS */, _hoisted_4)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]),\n      _: 2 /* DYNAMIC */\n    }, 1032 /* PROPS, DYNAMIC_SLOTS */, [\"data\", \"index\", \"set\", \"player\", \"onTogglePlay\", \"actions\"])], 2 /* CLASS */)], 10 /* CLASS, PROPS */, _hoisted_3);\n  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"footer\")]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/APlaylist.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   render: function() { return /* binding */ render; }\n/* harmony export */ });\n/* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.esm-bundler.js\");\n\nconst _hoisted_1 = {\n  class: \"a-playlist\"\n};\nconst _hoisted_2 = {\n  class: \"header\"\n};\nconst _hoisted_3 = [\"onClick\"];\nconst _hoisted_4 = [\"onClick\"];\nconst _hoisted_5 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-small\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-close\"\n})], -1 /* HOISTED */);\nconst _hoisted_6 = [_hoisted_5];\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_ASoundItem = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"ASoundItem\");\n  return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_1, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_2, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"header\")]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"ul\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(_ctx.listClass)\n  }, [((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(vue__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderList)(_ctx.items, (item, index) => {\n    return (0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"li\", {\n      class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)([_ctx.itemClass, $props.player.isPlaying(item) ? 'is-active' : '']),\n      onClick: $event => !$options.hasAction('play') && _ctx.select(index),\n      key: index\n    }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_ASoundItem, {\n      data: item,\n      index: index,\n      set: _ctx.set,\n      player: $options.player_,\n      onTogglePlay: $event => $options.togglePlay(index),\n      actions: $props.actions\n    }, {\n      actions: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(({}) => [$props.editable ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n        key: 0,\n        class: \"button\",\n        onClick: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withModifiers)($event => _ctx.remove(index, true), [\"stop\"])\n      }, _hoisted_6, 8 /* PROPS */, _hoisted_4)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]),\n      _: 2 /* DYNAMIC */\n    }, 1032 /* PROPS, DYNAMIC_SLOTS */, [\"data\", \"index\", \"set\", \"player\", \"onTogglePlay\", \"actions\"])], 10 /* CLASS, PROPS */, _hoisted_3);\n  }), 128 /* KEYED_FRAGMENT */))], 2 /* CLASS */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"footer\")]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/APlaylist.vue?./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use%5B0%5D!./node_modules/vue-loader/dist/templateLoader.js??ruleSet%5B1%5D.rules%5B3%5D!./node_modules/vue-loader/dist/index.js??ruleSet%5B0%5D.use%5B0%5D");
 
 /***/ }),
 
diff --git a/aircox/templates/aircox/episode_detail.html b/aircox/templates/aircox/episode_detail.html
index 3c6a39d..fa0634f 100644
--- a/aircox/templates/aircox/episode_detail.html
+++ b/aircox/templates/aircox/episode_detail.html
@@ -16,6 +16,7 @@
     {{ block.super }}
 
     {% if object.podcasts %}
+    {% spaceless %}
     <section class="container no-border">
         <h3 class="title is-3">{% translate "Podcasts" %}</h3>
         <a-playlist v-if="page" :set="podcasts"
@@ -25,12 +26,20 @@
             @select="player.playItems('queue', $event.item)">
         </a-playlist>
     </section>
+    {% endspaceless %}
     {% endif %}
 
     {% if tracks %}
     <section class="container">
         <h3 class="title is-3">{% translate "Playlist" %}</h3>
         <table class="table is-hoverable is-fullwidth">
+            <thead>
+                <tr>
+                    <th></th>
+                    <th>{% translate "Artist" %}</th>
+                    <th>{% translate "Title" %}</th>
+                    <th></th>
+            </thead>
             <tbody>
                 {% for track in tracks %}
                 <tr>
diff --git a/assets/src/assets/styles.scss b/assets/src/assets/styles.scss
index c17fbd9..f0266ad 100644
--- a/assets/src/assets/styles.scss
+++ b/assets/src/assets/styles.scss
@@ -679,7 +679,10 @@ nav li {
     flex-direction: row;
     margin: 0em;
     padding: 0em;
-    background-color: var(--progress-bg);
+
+    &:hover {
+        background-color: var(--progress-bg);
+    }
 
     .a-progress-bar-container {
         flex-grow: 1;
@@ -761,7 +764,6 @@ nav li {
 //-- player
 .a-player {
     z-index: 10000;
-    box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
 
     a { color: var(--highlight-color-2); }
 }
@@ -786,13 +788,13 @@ nav li {
 }
 
 .a-player-progress {
-    background: var(--player-bar-bg);
     height: 0.4em;
     overflow: hidden;
 
     time { display: none; }
 
-    &:hover {
+    &:hover, .a-player-panels.is-open + & {
+        background: var(--player-bar-bg);
         height: 2em;
         time { display: unset; }
     }
@@ -800,12 +802,13 @@ nav li {
 
 .a-player-bar {
     display: flex;
-    background: var(--player-bar-bg);
     flex-direction: row;
     justify-content: center;
+    height: 3.75em !important;
 
     border-top: 1px $grey-light solid;
-    height: 3.75em !important;
+    background: var(--player-bar-bg);
+    box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
 
     > * { height: 100%; }
 
diff --git a/assets/src/components/APlaylist.vue b/assets/src/components/APlaylist.vue
index 6319419..1957eb6 100644
--- a/assets/src/components/APlaylist.vue
+++ b/assets/src/components/APlaylist.vue
@@ -2,20 +2,18 @@
     <div class="a-playlist">
         <div class="header"><slot name="header"></slot></div>
         <ul :class="listClass">
-            <li v-for="(item,index) in items" :class="itemClass" @click="!hasAction('play') && select(index)"
+            <li v-for="(item,index) in items" :class="[itemClass, player.isPlaying(item) ? 'is-active' : '']" @click="!hasAction('play') && select(index)"
                 :key="index">
-                <a :class="player.isPlaying(item) ? 'is-active' : ''">
-                    <ASoundItem
-                        :data="item" :index="index" :set="set" :player="player_"
-                        @togglePlay="togglePlay(index)"
-                        :actions="actions">
-                        <template v-slot:actions="{}">
-                            <button class="button" v-if="editable" @click.stop="remove(index,true)">
-                                <span class="icon is-small"><span class="fa fa-close"></span></span>
-                            </button>
-                        </template>
-                    </ASoundItem>
-                </a>
+                <ASoundItem
+                    :data="item" :index="index" :set="set" :player="player_"
+                    @togglePlay="togglePlay(index)"
+                    :actions="actions">
+                    <template v-slot:actions="{}">
+                        <button class="button" v-if="editable" @click.stop="remove(index,true)">
+                            <span class="icon is-small"><span class="fa fa-close"></span></span>
+                        </button>
+                    </template>
+                </ASoundItem>
             </li>
         </ul>
         <slot name="footer"></slot>