rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

player: progress bar position

Browse Source
This commit is contained in:
bkfox
2023-11-24 21:39:20 +01:00
parent 69d77e1d0c
commit 9661e98a70
5 changed files with 38 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
aircox/static/aircox/css/chunk-common.css
View File

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

2
aircox/static/aircox/js/chunk-common.js
View File

@ -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");
/***/ }), /***/ }),

9
aircox/templates/aircox/episode_detail.html
View File

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

13
assets/src/assets/styles.scss
View File

@ -679,7 +679,10 @@ nav li {
flex-direction: row; flex-direction: row;
margin: 0em; margin: 0em;
padding: 0em; padding: 0em;
&:hover {
background-color: var(--progress-bg); 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%; }

4
assets/src/components/APlaylist.vue
View File

@ -2,9 +2,8 @@
<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)"
@ -15,7 +14,6 @@
</button> </button>
</template> </template>
</ASoundItem> </ASoundItem>
</a>
</li> </li>
</ul> </ul>
<slot name="footer"></slot> <slot name="footer"></slot>