forked from rc/aircox
cfr #121 Co-authored-by: Christophe Siraut <d@tobald.eu.org> Co-authored-by: bkfox <thomas bkfox net> Co-authored-by: Thomas Kairos <thomas@bkfox.net> Reviewed-on: rc/aircox#131 Co-authored-by: Chris Tactic <ctactic@noreply.git.radiocampus.be> Co-committed-by: Chris Tactic <ctactic@noreply.git.radiocampus.be>
This commit is contained in:
@ -1,69 +1,63 @@
|
||||
<template>
|
||||
<div class="player">
|
||||
<div :class="['player-panels', panel ? 'is-open' : '']">
|
||||
<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)"
|
||||
listClass="menu-list" itemClass="menu-item">
|
||||
<template v-slot:header="">
|
||||
<p class="menu-label">
|
||||
<span class="icon"><span class="fa fa-thumbtack"></span></span>
|
||||
Pinned
|
||||
</p>
|
||||
</template>
|
||||
</APlaylist>
|
||||
<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">
|
||||
<template v-slot:header="">
|
||||
<p class="menu-label">
|
||||
<span class="icon"><span class="fa fa-list"></span></span>
|
||||
Playlist
|
||||
</p>
|
||||
</template>
|
||||
</APlaylist>
|
||||
<div class="a-player">
|
||||
<div :class="['a-player-panels', panel ? 'is-open' : '']">
|
||||
<template v-for="(info, key) in playlists" v-bind:key="key">
|
||||
<APlaylist
|
||||
:ref="key" class="a-player-panel a-playlist"
|
||||
v-show="panel == key && sets[key].length"
|
||||
:actions="['page', key != 'pin' && 'pin' || '']"
|
||||
:editable="true" :player="self" :set="sets[key]"
|
||||
@select="togglePlay(key, $event.index)"
|
||||
listClass="menu-list" itemClass="menu-item">
|
||||
<template v-slot:header="">
|
||||
<div class="title is-flex-grow-1">
|
||||
<span class="icon">
|
||||
<i :class="info[1]"></i>
|
||||
</span>
|
||||
{{ info[0] }}
|
||||
</div>
|
||||
<button class="action button no-border">
|
||||
<span class="icon" @click.stop="togglePanel()">
|
||||
<i class="fa fa-close"></i>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</APlaylist>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="player-bar media">
|
||||
<div class="media-left">
|
||||
<button class="button" @click="togglePlay()"
|
||||
:title="buttonTitle" :aria-label="buttonTitle">
|
||||
<span class="fas fa-pause" v-if="playing"></span>
|
||||
<span class="fas fa-play" v-else></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="media-left media-cover" v-if="current && current.data.cover">
|
||||
<img :src="current.data.cover" class="cover" />
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="a-player-progress" v-if="loaded && duration">
|
||||
<AProgress v-if="loaded && duration" :value="currentTime" :max="this.duration"
|
||||
:format="displayTime"
|
||||
@select="audio.currentTime = $event"></AProgress>
|
||||
</div>
|
||||
<div class="a-player-bar button-group">
|
||||
<button class="button" @click="togglePlay()"
|
||||
:title="buttonTitle" :aria-label="buttonTitle">
|
||||
<span class="fas fa-pause" v-if="playing"></span>
|
||||
<span class="fas fa-play" v-else></span>
|
||||
</button>
|
||||
<div :class="['a-player-bar-content', loaded && duration ? 'has-progress' : '']">
|
||||
<slot name="content" :loaded="loaded" :live="live" :current="current"></slot>
|
||||
<AProgress v-if="loaded && duration" :value="currentTime" :max="this.duration"
|
||||
:format="displayTime" class="pt-1 is-size-7"
|
||||
@select="audio.currentTime = $event"></AProgress>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<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-thumbtack"></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>
|
||||
<template v-if="sets">
|
||||
<template v-for="(info, key) in playlists" v-bind:key="key">
|
||||
<button :class="playlistButtonClass(key)"
|
||||
@click="togglePanel(key)"
|
||||
v-show="sets[key] && sets[key].length">
|
||||
<span class="is-size-6">{{ sets[key] && sets[key].length }}</span>
|
||||
<span class="icon">
|
||||
<i :class="info[1]"></i>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -101,6 +95,11 @@ export default {
|
||||
let live = this.liveArgs ? reactive(new Live(this.liveArgs)) : null;
|
||||
live && live.refresh();
|
||||
|
||||
const sets = {}
|
||||
for(const key in this.playlists)
|
||||
sets[key] = Set.storeLoad(Sound, 'playlist.' + key,
|
||||
{max: 30, unique: true})
|
||||
|
||||
return {
|
||||
audio, duration: 0, currentTime: 0, state: State.paused,
|
||||
live,
|
||||
@ -112,16 +111,15 @@ export default {
|
||||
//! current playing playlist name
|
||||
playlistName: null,
|
||||
//! players' playlists' sets
|
||||
sets: {
|
||||
queue: Set.storeLoad(Sound, "playlist.queue", { max: 30, unique: true }),
|
||||
pin: Set.storeLoad(Sound, "player.pin", { max: 30, unique: true }),
|
||||
}
|
||||
sets,
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
buttonTitle: String,
|
||||
liveArgs: Object,
|
||||
///! dict of {'slug': ['Label', 'icon']}
|
||||
playlists: Object,
|
||||
},
|
||||
|
||||
computed: {
|
||||
@ -131,7 +129,7 @@ export default {
|
||||
loading() { return this.state == State.loading; },
|
||||
|
||||
playlist() {
|
||||
return this.playlistName ? this.$refs[this.playlistName] : null;
|
||||
return this.playlistName ? this.$refs[this.playlistName][0] : null;
|
||||
},
|
||||
|
||||
current() {
|
||||
@ -156,10 +154,9 @@ export default {
|
||||
playlistButtonClass(name) {
|
||||
let set = this.sets[name];
|
||||
return (set ? (set.length ? "" : "has-text-grey-light ")
|
||||
+ (this.panel == name ? "is-info "
|
||||
: this.playlistName == name ? 'is-primary '
|
||||
: '') : '')
|
||||
+ "button has-text-weight-bold";
|
||||
+ (this.panel == name ? "open"
|
||||
: this.playlistName == name ? 'active' : '') : '')
|
||||
+ " button";
|
||||
},
|
||||
|
||||
/// Show/hide panel
|
||||
@ -172,8 +169,8 @@ export default {
|
||||
_setPlaylist(playlist) {
|
||||
this.playlistName = playlist;
|
||||
for(var p in this.sets)
|
||||
if(p != playlist)
|
||||
this.$refs[p].unselect();
|
||||
if(p != playlist && this.$refs[p])
|
||||
this.$refs[p][0].unselect();
|
||||
},
|
||||
|
||||
/// Load a sound from playlist or live
|
||||
@ -182,7 +179,7 @@ export default {
|
||||
|
||||
// from playlist
|
||||
if(playlist !== null && index != -1) {
|
||||
let item = this.$refs[playlist].get(index);
|
||||
let item = this.$refs[playlist][0].get(index);
|
||||
if(!item)
|
||||
throw `No sound at index ${index} for playlist ${playlist}`;
|
||||
this.loaded = item
|
||||
@ -226,7 +223,7 @@ export default {
|
||||
/// Push and play items
|
||||
playItems(playlist, ...items) {
|
||||
let index = this.push(playlist, ...items);
|
||||
this.$refs[playlist].selectedIndex = index;
|
||||
this.$refs[playlist][0].selectedIndex = index;
|
||||
this.play(playlist, index);
|
||||
},
|
||||
|
||||
@ -244,6 +241,7 @@ export default {
|
||||
//! Play/pause
|
||||
togglePlay(playlist=null, index=0) {
|
||||
if(playlist !== null) {
|
||||
this.panel = null;
|
||||
let item = this.sets[playlist].get(index);
|
||||
if(!this.playlist || this.playlistName !== playlist || this.loaded != item) {
|
||||
this.play(playlist, index);
|
||||
@ -257,13 +255,14 @@ export default {
|
||||
},
|
||||
|
||||
//! Pin/Unpin an item
|
||||
togglePin(item) {
|
||||
let index = this.sets.pin.findIndex(item);
|
||||
togglePlaylist(playlist, item) {
|
||||
const set = this.sets[playlist]
|
||||
let index = set.findIndex(item);
|
||||
if(index > -1)
|
||||
this.sets.pin.remove(index);
|
||||
set.remove(index);
|
||||
else {
|
||||
this.sets.pin.push(item);
|
||||
this.$refs.pinPlaylistButton.focus();
|
||||
set.push(item);
|
||||
// this.$refs.pinPlaylistButton.focus();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user