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

player button & playlist header fix; timetable order

Browse Source
This commit is contained in:
bkfox
2024-01-03 19:51:39 +01:00
parent 1f6381bf07
commit 294c848415
9 changed files with 106 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
assets/src/assets/components.scss
View File

@ -24,6 +24,8 @@
--a-progress-bar-color: var(--highlight-color);
--a-progress-bar-pd: #{v.$mp-2};
--a-playlist-header-bg: var(--highlight-color-2-alpha);
--a-playlist-header-fg: var(--highlight-color);
--a-playlist-title-sz: #{v.$text-size};
--a-playlist-title-pd: #{v.$mp-3};
--a-playlist-item-border: 1px var(--highlight-color-2) solid;
@ -32,7 +34,7 @@
--a-sound-hv-bg: var(--highlight-color);
--a-sound-playing-fg: var(--highlight-color-alpha);
--a-sound-hv-fg: var(--highlight-color-2);
--a-sound-title-sz: #{v.$text-size-medium};
--a-sound-text-sz: #{v.$text-size-medium};
--a-player-url-fg: var(--highlight-color-2);
--a-player-panel-bg: var(--highlight-color);
@ -41,6 +43,7 @@
--button-fg: var(--highlight-color-2);
--button-bg: var(--highlight-color);
--button-sec-bg: var(--highlight-color-alpha);
--button-hg-fg: var(--text-color);
--button-hg-bg: var(--highlight-color);
--button-active-fg: var(--highlight-color);
@ -111,6 +114,10 @@
color: var(--button-fg);
background-color: var(--button-bg);
&.secondary {
background-color: var(--button-sec-bg);
}
.icon {
vertical-align: middle;
&:not(:only-child) {
@ -121,7 +128,6 @@
&:hover {
border-color: var(--button-hg-bg);
color: var(--button-hg-fg);
opacity: 1 !important;
}
@ -469,12 +475,17 @@
.header {
display: flex;
flex-direction: row;
}
.title {
font-size: var(--a-playlist-title-sz);
margin: 0;
padding: var(--a-playlist-title-pd);
.title, .button {
background-color: var(--a-playlist-header-bg);
color: var(--a-playlist-header-fg);
}
.title {
font-size: var(--a-playlist-title-sz);
margin: 0;
padding: var(--a-playlist-title-pd);
}
}
li {
@ -496,24 +507,24 @@
height: 3rem;
background-color: var(--a-sound-bg);
&.playing, &.playing .title {
&.playing, &.playing .label {
color: var(--a-sound-playing-fg) !important;
}
&:hover {
background-color: var(--a-sound-hv-bg);
.title {
.label {
color: var(--a-sound-hv-fg) !important;
}
}
.title:hover::before, &.playing .title::before {
.label:hover::before, &.playing .label::before {
content: "\f04b";
font-family: "Font Awesome 6 Free";
margin-right: v.$mp-3e;
}
&.playing .title:hover::before {
&.playing .label:hover::before {
content: '';
margin: 0;
}
@ -522,19 +533,22 @@
.headings > * {
}
.title {
.label {
cursor: pointer;
.icon {
padding: 0em v.$mp-3;
}
margin: 0em;
margin: 0em !important;
padding: v.$mp-3e;
font-size: var(--a-sound-title-sz);
font-size: var(--a-sound-text-sz);
font-family: var(--heading-font-family);
}
.button {
width: 3em;
font-size: var(--a-sound-text-sz);
}
}
@ -627,4 +641,5 @@
padding-top: v.$mp-3;
padding-left: v.$mp-3;
padding-right: v.$mp-3;
border-right: 1px black solid;
}

39
assets/src/components/APlayer.vue
View File

@ -53,27 +53,24 @@
<div :class="['a-player-bar-content', loaded && duration ? 'has-progress' : '']">
<slot name="content" :loaded="loaded" :live="live" :current="current"></slot>
</div>
<div>
<button class="button has-text-weight-bold" v-if="loaded" @click="play()">
<span class="icon is-size-6 has-text-danger">
<span class="fa fa-circle"></span>
</span>
<span>Live</span>
</button>
<button ref="pinPlaylistButton" :class="playlistButtonClass('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-star"></span></span>
</button>
<button :class="playlistButtonClass('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>
</button>
</div>
<button class="button has-text-weight-bold" v-if="loaded" @click="play()"
title="Live">
<span class="icon is-size-6 has-text-danger">
<span class="fa fa-circle"></span>
</span>
</button>
<button ref="pinPlaylistButton" :class="playlistButtonClass('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-star"></span></span>
</button>
<button :class="playlistButtonClass('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>
</button>
</div>
</div>
</template>

2
assets/src/components/ASoundItem.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="['a-sound-item m-0 button-group', playing && 'playing' || '']">
<slot name="title" :player="player" :item="item" :loaded="loaded">
<span :class="['title is-flex-grow-1 align-left', playing && 'blink' || '']" @click.stop="$emit('togglePlay')">
<span :class="['label is-flex-grow-1 align-left', playing && 'blink' || '']" @click.stop="$emit('togglePlay')">
{{ name || item.name }}
</span>
</slot>

7
assets/src/index.js
View File

@ -41,6 +41,8 @@ window.aircox = {
playerLoader = playerLoader || new VueLoader(playerConfig)
playerLoader.enable(false)
this.playerLoader = playerLoader
document.addEventListener("keypress", e => this.onKeyPress(e), false)
}
if(initApp) {
@ -52,6 +54,11 @@ window.aircox = {
}
},
onKeyPress(event) {
if(event.key == " ")
this.player.togglePlay()
},
/**
* Filter navbar dropdown menu items
*/