From 276e65e0b4c6f9b8b55b6a10fe46e118dde2a26a Mon Sep 17 00:00:00 2001
From: bkfox <thomas bkfox net>
Date: Fri, 16 Dec 2022 15:31:50 +0100
Subject: [PATCH] player lists display

---
 aircox/static/aircox/js/chunk-common.js | 2 +-
 assets/src/components/APlayer.vue       | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/aircox/static/aircox/js/chunk-common.js b/aircox/static/aircox/js/chunk-common.js
index 74983bd..96b03d1 100644
--- a/aircox/static/aircox/js/chunk-common.js
+++ b/aircox/static/aircox/js/chunk-common.js
@@ -205,7 +205,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: \"player\"\n};\nconst _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", {\n  class: \"menu-label\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-thumbtack\"\n})]), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(\" Pinned \")], -1 /* HOISTED */);\nconst _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", {\n  class: \"menu-label\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-list\"\n})]), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(\" Playlist \")], -1 /* HOISTED */);\nconst _hoisted_4 = {\n  class: \"player-bar media\"\n};\nconst _hoisted_5 = {\n  class: \"media-left\"\n};\nconst _hoisted_6 = [\"title\", \"aria-label\"];\nconst _hoisted_7 = {\n  key: 0,\n  class: \"fas fa-pause\"\n};\nconst _hoisted_8 = {\n  key: 1,\n  class: \"fas fa-play\"\n};\nconst _hoisted_9 = {\n  key: 0,\n  class: \"media-left media-cover\"\n};\nconst _hoisted_10 = [\"src\"];\nconst _hoisted_11 = {\n  class: \"media-content\"\n};\nconst _hoisted_12 = {\n  class: \"media-right\"\n};\nconst _hoisted_13 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-size-6 has-text-danger\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-circle\"\n})], -1 /* HOISTED */);\nconst _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Live\", -1 /* HOISTED */);\nconst _hoisted_15 = [_hoisted_13, _hoisted_14];\nconst _hoisted_16 = {\n  key: 0,\n  class: \"is-size-6\"\n};\nconst _hoisted_17 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-thumbtack\"\n})], -1 /* HOISTED */);\nconst _hoisted_18 = {\n  key: 0,\n  class: \"is-size-6\"\n};\nconst _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-list\"\n})], -1 /* HOISTED */);\n\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_APlaylist = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"APlaylist\");\n  const _component_AProgress = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"AProgress\");\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\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['player-panels', $data.panel ? 'is-open' : ''])\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_APlaylist, {\n    ref: \"pin\",\n    class: \"player-panel menu\",\n    name: \"Pinned\",\n    actions: ['page'],\n    editable: true,\n    player: $options.self,\n    set: $data.sets.pin,\n    onSelect: _cache[0] || (_cache[0] = $event => $options.togglePlay('pin', $event.index)),\n    listClass: \"menu-list\",\n    itemClass: \"menu-item\"\n  }, {\n    header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [_hoisted_2]),\n    _: 1 /* STABLE */\n  }, 8 /* PROPS */, [\"player\", \"set\"]), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.panel == 'pin']]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_APlaylist, {\n    ref: \"queue\",\n    class: \"player-panel menu\",\n    actions: ['page'],\n    editable: true,\n    player: $options.self,\n    set: $data.sets.queue,\n    onSelect: _cache[1] || (_cache[1] = $event => $options.togglePlay('queue', $event.index)),\n    listClass: \"menu-list\",\n    itemClass: \"menu-item\"\n  }, {\n    header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [_hoisted_3]),\n    _: 1 /* STABLE */\n  }, 8 /* PROPS */, [\"player\", \"set\"]), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.panel == 'queue']])], 2 /* CLASS */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    class: \"button\",\n    onClick: _cache[2] || (_cache[2] = $event => $options.togglePlay()),\n    title: $props.buttonTitle,\n    \"aria-label\": $props.buttonTitle\n  }, [$options.playing ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_7)) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_8))], 8 /* PROPS */, _hoisted_6)]), $options.current && $options.current.data.cover ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"img\", {\n    src: $options.current.data.cover,\n    class: \"cover\"\n  }, null, 8 /* PROPS */, _hoisted_10)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"content\", {\n    loaded: $data.loaded,\n    live: $data.live,\n    current: $options.current\n  }), $data.loaded && $data.duration ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_AProgress, {\n    key: 0,\n    value: $data.currentTime,\n    max: this.duration,\n    format: $options.displayTime,\n    class: \"pt-1 is-size-7\",\n    onSelect: _cache[3] || (_cache[3] = $event => $data.audio.currentTime = $event)\n  }, null, 8 /* PROPS */, [\"value\", \"max\", \"format\"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_12, [$data.loaded ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n    key: 0,\n    class: \"button has-text-weight-bold\",\n    onClick: _cache[4] || (_cache[4] = $event => $options.play())\n  }, _hoisted_15)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    ref: \"pinPlaylistButton\",\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.playlistButtonClass('pin')),\n    onClick: _cache[5] || (_cache[5] = $event => $options.togglePanel('pin'))\n  }, [$data.sets.pin.length ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.sets.pin.length), 1 /* TEXT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), _hoisted_17], 2 /* CLASS */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.playlistButtonClass('queue')),\n    onClick: _cache[6] || (_cache[6] = $event => $options.togglePanel('queue'))\n  }, [$data.sets.queue.length ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_18, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.sets.queue.length), 1 /* TEXT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), _hoisted_19], 2 /* CLASS */)])])]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/APlayer.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: \"player\"\n};\nconst _hoisted_2 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", {\n  class: \"menu-label\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-thumbtack\"\n})]), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(\" Pinned \")], -1 /* HOISTED */);\nconst _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"p\", {\n  class: \"menu-label\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-list\"\n})]), /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(\" Playlist \")], -1 /* HOISTED */);\nconst _hoisted_4 = {\n  class: \"player-bar media\"\n};\nconst _hoisted_5 = {\n  class: \"media-left\"\n};\nconst _hoisted_6 = [\"title\", \"aria-label\"];\nconst _hoisted_7 = {\n  key: 0,\n  class: \"fas fa-pause\"\n};\nconst _hoisted_8 = {\n  key: 1,\n  class: \"fas fa-play\"\n};\nconst _hoisted_9 = {\n  key: 0,\n  class: \"media-left media-cover\"\n};\nconst _hoisted_10 = [\"src\"];\nconst _hoisted_11 = {\n  class: \"media-content\"\n};\nconst _hoisted_12 = {\n  class: \"media-right\"\n};\nconst _hoisted_13 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon is-size-6 has-text-danger\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-circle\"\n})], -1 /* HOISTED */);\nconst _hoisted_14 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", null, \"Live\", -1 /* HOISTED */);\nconst _hoisted_15 = [_hoisted_13, _hoisted_14];\nconst _hoisted_16 = {\n  key: 0,\n  class: \"is-size-6\"\n};\nconst _hoisted_17 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-thumbtack\"\n})], -1 /* HOISTED */);\nconst _hoisted_18 = {\n  key: 0,\n  class: \"is-size-6\"\n};\nconst _hoisted_19 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"icon\"\n}, [/*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"span\", {\n  class: \"fa fa-list\"\n})], -1 /* HOISTED */);\n\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n  const _component_APlaylist = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"APlaylist\");\n  const _component_AProgress = (0,vue__WEBPACK_IMPORTED_MODULE_0__.resolveComponent)(\"AProgress\");\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\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)(['player-panels', $data.panel ? 'is-open' : ''])\n  }, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_APlaylist, {\n    ref: \"pin\",\n    class: \"player-panel menu\",\n    name: \"Pinned\",\n    actions: ['page'],\n    editable: true,\n    player: $options.self,\n    set: $data.sets.pin,\n    onSelect: _cache[0] || (_cache[0] = $event => $options.togglePlay('pin', $event.index)),\n    listClass: \"menu-list\",\n    itemClass: \"menu-item\"\n  }, {\n    header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [_hoisted_2]),\n    _: 1 /* STABLE */\n  }, 8 /* PROPS */, [\"player\", \"set\"]), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.panel == 'pin' && $data.sets.pin.length]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)(_component_APlaylist, {\n    ref: \"queue\",\n    class: \"player-panel menu\",\n    actions: ['page'],\n    editable: true,\n    player: $options.self,\n    set: $data.sets.queue,\n    onSelect: _cache[1] || (_cache[1] = $event => $options.togglePlay('queue', $event.index)),\n    listClass: \"menu-list\",\n    itemClass: \"menu-item\"\n  }, {\n    header: (0,vue__WEBPACK_IMPORTED_MODULE_0__.withCtx)(() => [_hoisted_3]),\n    _: 1 /* STABLE */\n  }, 8 /* PROPS */, [\"player\", \"set\"]), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.panel == 'queue' && $data.sets.queue.length]])], 2 /* CLASS */), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_4, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_5, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    class: \"button\",\n    onClick: _cache[2] || (_cache[2] = $event => $options.togglePlay()),\n    title: $props.buttonTitle,\n    \"aria-label\": $props.buttonTitle\n  }, [$options.playing ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_7)) : ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_8))], 8 /* PROPS */, _hoisted_6)]), $options.current && $options.current.data.cover ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"div\", _hoisted_9, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"img\", {\n    src: $options.current.data.cover,\n    class: \"cover\"\n  }, null, 8 /* PROPS */, _hoisted_10)])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_11, [(0,vue__WEBPACK_IMPORTED_MODULE_0__.renderSlot)(_ctx.$slots, \"content\", {\n    loaded: $data.loaded,\n    live: $data.live,\n    current: $options.current\n  }), $data.loaded && $data.duration ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createBlock)(_component_AProgress, {\n    key: 0,\n    value: $data.currentTime,\n    max: this.duration,\n    format: $options.displayTime,\n    class: \"pt-1 is-size-7\",\n    onSelect: _cache[3] || (_cache[3] = $event => $data.audio.currentTime = $event)\n  }, null, 8 /* PROPS */, [\"value\", \"max\", \"format\"])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true)]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"div\", _hoisted_12, [$data.loaded ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"button\", {\n    key: 0,\n    class: \"button has-text-weight-bold\",\n    onClick: _cache[4] || (_cache[4] = $event => $options.play())\n  }, _hoisted_15)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    ref: \"pinPlaylistButton\",\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.playlistButtonClass('pin')),\n    onClick: _cache[5] || (_cache[5] = $event => $options.togglePanel('pin'))\n  }, [$data.sets.pin.length ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_16, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.sets.pin.length), 1 /* TEXT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), _hoisted_17], 2 /* CLASS */), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.sets.pin.length]]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.withDirectives)((0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementVNode)(\"button\", {\n    class: (0,vue__WEBPACK_IMPORTED_MODULE_0__.normalizeClass)($options.playlistButtonClass('queue')),\n    onClick: _cache[6] || (_cache[6] = $event => $options.togglePanel('queue'))\n  }, [$data.sets.queue.length ? ((0,vue__WEBPACK_IMPORTED_MODULE_0__.openBlock)(), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createElementBlock)(\"span\", _hoisted_18, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($data.sets.queue.length), 1 /* TEXT */)) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)(\"v-if\", true), _hoisted_19], 2 /* CLASS */), [[vue__WEBPACK_IMPORTED_MODULE_0__.vShow, $data.sets.queue.length]])])])]);\n}\n\n//# sourceURL=webpack://aircox-assets/./src/components/APlayer.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/assets/src/components/APlayer.vue b/assets/src/components/APlayer.vue
index a94500a..8fcd3e1 100644
--- a/assets/src/components/APlayer.vue
+++ b/assets/src/components/APlayer.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="player">
         <div :class="['player-panels', panel ? 'is-open' : '']">
-            <APlaylist ref="pin" class="player-panel menu" v-show="panel == 'pin'"
+            <APlaylist ref="pin" class="player-panel menu" v-show="panel == 'pin' && sets.pin.length"
                 name="Pinned"
                 :actions="['page']"
                 :editable="true" :player="self" :set="sets.pin" @select="togglePlay('pin', $event.index)" 
@@ -13,7 +13,7 @@
                     </p>
                 </template>
             </APlaylist>
-            <APlaylist ref="queue" class="player-panel menu" v-show="panel == 'queue'"
+            <APlaylist ref="queue" class="player-panel menu" v-show="panel == 'queue' && sets.queue.length"
                 :actions="['page']"
                 :editable="true" :player="self" :set="sets.queue" @select="togglePlay('queue', $event.index)" 
                 listClass="menu-list" itemClass="menu-item">
@@ -51,13 +51,13 @@
                     <span>Live</span>
                 </button>
                 <button ref="pinPlaylistButton" :class="playlistButtonClass('pin')"
-                        @click="togglePanel('pin')">
+                        @click="togglePanel('pin')" v-show="sets.pin.length">
                     <span class="is-size-6" v-if="sets.pin.length">
                         {{ sets.pin.length }}</span>
                     <span class="icon"><span class="fa fa-thumbtack"></span></span>
                 </button>
                 <button :class="playlistButtonClass('queue')"
-                        @click="togglePanel('queue')">
+                        @click="togglePanel('queue')" v-show="sets.queue.length">
                     <span class="is-size-6" v-if="sets.queue.length">
                         {{ sets.queue.length }}</span>
                     <span class="icon"><span class="fa fa-list"></span></span>