|
@ -9851,6 +9851,8 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 0em;
|
margin: 0em;
|
||||||
padding: 0em;
|
padding: 0em;
|
||||||
|
}
|
||||||
|
.a-progress:hover {
|
||||||
background-color: var(--progress-bg);
|
background-color: var(--progress-bg);
|
||||||
}
|
}
|
||||||
.a-progress .a-progress-bar-container {
|
.a-progress .a-progress-bar-container {
|
||||||
|
@ -9913,7 +9915,6 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
||||||
|
|
||||||
.a-player {
|
.a-player {
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
}
|
||||||
.a-player a {
|
.a-player a {
|
||||||
color: var(--highlight-color-2);
|
color: var(--highlight-color-2);
|
||||||
|
@ -9939,27 +9940,28 @@ preview-header:not(.no-cover) .preview-card-headings .heading {
|
||||||
}
|
}
|
||||||
|
|
||||||
.a-player-progress {
|
.a-player-progress {
|
||||||
background: var(--player-bar-bg);
|
|
||||||
height: 0.4em;
|
height: 0.4em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.a-player-progress time {
|
.a-player-progress time {
|
||||||
display: none;
|
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;
|
height: 2em;
|
||||||
}
|
}
|
||||||
.a-player-progress:hover time {
|
.a-player-progress:hover time, .a-player-panels.is-open + .a-player-progress time {
|
||||||
display: unset;
|
display: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.a-player-bar {
|
.a-player-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: var(--player-bar-bg);
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-top: 1px hsl(0deg, 0%, 71%) solid;
|
|
||||||
height: 3.75em !important;
|
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 > * {
|
.a-player-bar > * {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -235,7 +235,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
||||||
\***********************************************************************************************************************************************************************************************************************************************************************/
|
\***********************************************************************************************************************************************************************************************************************************************************************/
|
||||||
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
/***/ (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");
|
||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
|
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
|
|
||||||
{% if object.podcasts %}
|
{% if object.podcasts %}
|
||||||
|
{% spaceless %}
|
||||||
<section class="container no-border">
|
<section class="container no-border">
|
||||||
<h3 class="title is-3">{% translate "Podcasts" %}</h3>
|
<h3 class="title is-3">{% translate "Podcasts" %}</h3>
|
||||||
<a-playlist v-if="page" :set="podcasts"
|
<a-playlist v-if="page" :set="podcasts"
|
||||||
|
@ -25,12 +26,20 @@
|
||||||
@select="player.playItems('queue', $event.item)">
|
@select="player.playItems('queue', $event.item)">
|
||||||
</a-playlist>
|
</a-playlist>
|
||||||
</section>
|
</section>
|
||||||
|
{% endspaceless %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if tracks %}
|
{% if tracks %}
|
||||||
<section class="container">
|
<section class="container">
|
||||||
<h3 class="title is-3">{% translate "Playlist" %}</h3>
|
<h3 class="title is-3">{% translate "Playlist" %}</h3>
|
||||||
<table class="table is-hoverable is-fullwidth">
|
<table class="table is-hoverable is-fullwidth">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th></th>
|
||||||
|
<th>{% translate "Artist" %}</th>
|
||||||
|
<th>{% translate "Title" %}</th>
|
||||||
|
<th></th>
|
||||||
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% for track in tracks %}
|
{% for track in tracks %}
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -679,7 +679,10 @@ nav li {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 0em;
|
margin: 0em;
|
||||||
padding: 0em;
|
padding: 0em;
|
||||||
background-color: var(--progress-bg);
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--progress-bg);
|
||||||
|
}
|
||||||
|
|
||||||
.a-progress-bar-container {
|
.a-progress-bar-container {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
@ -761,7 +764,6 @@ nav li {
|
||||||
//-- player
|
//-- player
|
||||||
.a-player {
|
.a-player {
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
box-shadow: 0em 1.5em 2.5em rgba(0, 0, 0, 0.6);
|
|
||||||
|
|
||||||
a { color: var(--highlight-color-2); }
|
a { color: var(--highlight-color-2); }
|
||||||
}
|
}
|
||||||
|
@ -786,13 +788,13 @@ nav li {
|
||||||
}
|
}
|
||||||
|
|
||||||
.a-player-progress {
|
.a-player-progress {
|
||||||
background: var(--player-bar-bg);
|
|
||||||
height: 0.4em;
|
height: 0.4em;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
time { display: none; }
|
time { display: none; }
|
||||||
|
|
||||||
&:hover {
|
&:hover, .a-player-panels.is-open + & {
|
||||||
|
background: var(--player-bar-bg);
|
||||||
height: 2em;
|
height: 2em;
|
||||||
time { display: unset; }
|
time { display: unset; }
|
||||||
}
|
}
|
||||||
|
@ -800,12 +802,13 @@ nav li {
|
||||||
|
|
||||||
.a-player-bar {
|
.a-player-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
background: var(--player-bar-bg);
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
height: 3.75em !important;
|
||||||
|
|
||||||
border-top: 1px $grey-light solid;
|
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%; }
|
> * { height: 100%; }
|
||||||
|
|
||||||
|
|
|
@ -2,20 +2,18 @@
|
||||||
<div class="a-playlist">
|
<div class="a-playlist">
|
||||||
<div class="header"><slot name="header"></slot></div>
|
<div class="header"><slot name="header"></slot></div>
|
||||||
<ul :class="listClass">
|
<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">
|
:key="index">
|
||||||
<a :class="player.isPlaying(item) ? 'is-active' : ''">
|
<ASoundItem
|
||||||
<ASoundItem
|
:data="item" :index="index" :set="set" :player="player_"
|
||||||
:data="item" :index="index" :set="set" :player="player_"
|
@togglePlay="togglePlay(index)"
|
||||||
@togglePlay="togglePlay(index)"
|
:actions="actions">
|
||||||
:actions="actions">
|
<template v-slot:actions="{}">
|
||||||
<template v-slot:actions="{}">
|
<button class="button" v-if="editable" @click.stop="remove(index,true)">
|
||||||
<button class="button" v-if="editable" @click.stop="remove(index,true)">
|
<span class="icon is-small"><span class="fa fa-close"></span></span>
|
||||||
<span class="icon is-small"><span class="fa fa-close"></span></span>
|
</button>
|
||||||
</button>
|
</template>
|
||||||
</template>
|
</ASoundItem>
|
||||||
</ASoundItem>
|
|
||||||
</a>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user