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

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

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

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

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