forked from rc/aircox
work on player
This commit is contained in:
bkfox
@ -1,32 +1,94 @@
|
||||
<template>
|
||||
<div class="media">
|
||||
<div class="media-left">
|
||||
<div class="button" @click="toggle()"
|
||||
:title="buttonTitle" :aria-label="buttonTitle">
|
||||
<span class="fas fa-pause" v-if="playing"></span>
|
||||
<span class="fas fa-play" v-else></span>
|
||||
</div>
|
||||
<audio ref="audio" @playing="onChange" @ended="onChange" @pause="onChange">
|
||||
<div class="player">
|
||||
<List ref="queue" class="player-panel menu" v-show="panel == 'queue' && queue.length"
|
||||
:set="queue" @select="onSelect"
|
||||
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>
|
||||
<template v-slot:item="{item,index,set}">
|
||||
<SoundItem activeClass="is-active" :data="item" :player="self" :set="set"
|
||||
:actions="['remove']">
|
||||
<template v-slot:actions="{active,set}">
|
||||
<!-- TODO: stop player if active -->
|
||||
|
||||
</template>
|
||||
</SoundItem>
|
||||
</template>
|
||||
</List>
|
||||
<List ref="history" class="player-panel menu" v-show="panel == 'history' && history.length"
|
||||
:set="history" @select="onSelect"
|
||||
listClass="menu-list" itemClass="menu-item">
|
||||
<template v-slot:header>
|
||||
<p class="menu-label">
|
||||
<span class="icon"><span class="fa fa-clock"></span></span>
|
||||
History
|
||||
</p>
|
||||
</template>
|
||||
<template v-slot:item="{item,index,set}">
|
||||
<SoundItem activeClass="is-active" :data="item" :player="self" :set="set"
|
||||
:actions="['queue','remove']">
|
||||
</SoundItem>
|
||||
</template>
|
||||
</List>
|
||||
<div class="player-bar media">
|
||||
<div class="media-left">
|
||||
<div 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>
|
||||
</div>
|
||||
<audio ref="audio" preload="metadata"
|
||||
@playing="onState" @ended="onState" @pause="onState">
|
||||
</audio>
|
||||
<slot name="sources"></slot>
|
||||
</audio>
|
||||
</div>
|
||||
<div class="media-left media-cover" v-if="current && current.cover">
|
||||
<img :src="current.cover" class="cover" />
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<slot name="content" :current="current"></slot>
|
||||
</div>
|
||||
<div class="media-right">
|
||||
<button class="button" v-if="active" @click="load() && play()">
|
||||
<span class="icon has-text-danger">
|
||||
<span class="fa fa-broadcast-tower"></span>
|
||||
</span>
|
||||
<span>Live</span>
|
||||
</button>
|
||||
|
||||
<button class="button" v-if="history.length"
|
||||
@click="togglePanel('history')"
|
||||
:class="[panel == 'history' ? 'is-info' : '']" >
|
||||
<span class="icon">
|
||||
<span class="fa fa-clock"></span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button" v-if="queue.length"
|
||||
@click="togglePanel('queue')"
|
||||
:class="[panel == 'queue' ? 'is-info' : '']" >
|
||||
<span class="mr-2 is-size-6">{{ queue.length }}</span>
|
||||
<span class="icon"><span class="fa fa-list"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media-left media-cover" v-if="onAir && onAir.cover">
|
||||
<img :src="onAir.cover" class="cover" />
|
||||
</div>
|
||||
<div class="media-content" v-if="onAir && onAir.type == 'track'">
|
||||
<slot name="track" :onAir="onAir" :liveInfo="liveInfo"></slot>
|
||||
</div>
|
||||
<div class="media-content" v-else-if="onAir && onAir.type == 'diffusion'">
|
||||
<slot name="diffusion" :onAir="onAir" :liveInfo="liveInfo"></slot>
|
||||
</div>
|
||||
<div class="media-content" v-else><slot name="empty"></slot></div>
|
||||
<div v-if="progress">
|
||||
<span :style="{ width: progress }"></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import LiveInfo from './liveInfo';
|
||||
import Vue, { ref } from 'vue';
|
||||
import Live from './live';
|
||||
import List from './list';
|
||||
import SoundItem from './soundItem';
|
||||
import Sound from './sound';
|
||||
import {Set} from './model';
|
||||
|
||||
|
||||
export const State = {
|
||||
paused: 0,
|
||||
@ -38,43 +100,80 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
state: State.paused,
|
||||
liveInfo: new LiveInfo(this.liveInfoUrl, this.liveInfoTimeout),
|
||||
active: null,
|
||||
live: this.liveArgs ? new Live(this.liveArgs) : null,
|
||||
panel: null,
|
||||
queue: Set.storeLoad(Sound, "player.queue", { max: 30, unique: true }),
|
||||
history: Set.storeLoad(Sound, "player.history", { max: 30, unique: true }),
|
||||
}
|
||||
},
|
||||
|
||||
props: {
|
||||
buttonTitle: String,
|
||||
liveInfoUrl: String,
|
||||
liveInfoTimeout: { type: Number, default: 5},
|
||||
src: String,
|
||||
liveArgs: Object,
|
||||
},
|
||||
|
||||
computed: {
|
||||
paused() { return this.state == State.paused; },
|
||||
playing() { return this.state == State.playing; },
|
||||
loading() { return this.state == State.loading; },
|
||||
self() { return this; },
|
||||
|
||||
onAir() {
|
||||
return this.liveInfo.items && this.liveInfo.items[0];
|
||||
current() {
|
||||
return this.active || this.live && this.live.current;
|
||||
},
|
||||
|
||||
progress() {
|
||||
let audio = this.$refs.audio;
|
||||
return audio && Number.isFinite(audio.duration) && audio.duration ?
|
||||
audio.pos / audio.duration * 100 : null;
|
||||
},
|
||||
|
||||
buttonStyle() {
|
||||
if(!this.onAir)
|
||||
if(!this.current)
|
||||
return;
|
||||
return { backgroundImage: `url(${this.onAir.cover})` }
|
||||
}
|
||||
return { backgroundImage: `url(${this.current.cover})` }
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
load(src) {
|
||||
const audio = this.$refs.audio;
|
||||
audio.src = src;
|
||||
audio.load()
|
||||
togglePanel(panel) {
|
||||
this.panel = this.panel == panel ? null : panel;
|
||||
},
|
||||
|
||||
play(src) {
|
||||
if(src)
|
||||
this.load(src);
|
||||
isActive(item) {
|
||||
return item && this.active && this.active.src == item.src;
|
||||
},
|
||||
|
||||
_load(src) {
|
||||
const audio = this.$refs.audio;
|
||||
if(src instanceof Array) {
|
||||
audio.innerHTML = '';
|
||||
for(var s of src) {
|
||||
let source = document.createElement(source);
|
||||
source.setAttribute('src', s);
|
||||
audio.appendChild(source)
|
||||
}
|
||||
}
|
||||
else {
|
||||
audio.src = src;
|
||||
}
|
||||
audio.load();
|
||||
},
|
||||
|
||||
load(item) {
|
||||
if(item) {
|
||||
this._load(item.src)
|
||||
this.history.push(item);
|
||||
}
|
||||
else
|
||||
this._load(this.live.src);
|
||||
this.$set(this, 'active', item);
|
||||
},
|
||||
|
||||
play(item) {
|
||||
if(item)
|
||||
this.load(item);
|
||||
this.$refs.audio.play().catch(e => console.error(e))
|
||||
},
|
||||
|
||||
@ -82,31 +181,47 @@ export default {
|
||||
this.$refs.audio.pause()
|
||||
},
|
||||
|
||||
toggle() {
|
||||
console.log('tooogle', this.paused, '-', this.$refs.audio.src)
|
||||
//! Play/pause
|
||||
togglePlay() {
|
||||
if(this.paused)
|
||||
this.play()
|
||||
else
|
||||
this.pause()
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
//! Push item to queue
|
||||
push(item) {
|
||||
this.queue.push(item);
|
||||
this.panel = 'queue';
|
||||
},
|
||||
|
||||
onState(event) {
|
||||
const audio = this.$refs.audio;
|
||||
this.state = audio.paused ? State.paused : State.playing;
|
||||
|
||||
if(event.type == 'ended' && this.active) {
|
||||
this.queue.remove(this.active);
|
||||
if(this.queue.length)
|
||||
this.$refs.queue.select(0);
|
||||
else
|
||||
this.load();
|
||||
}
|
||||
},
|
||||
|
||||
onSelect({item,index}) {
|
||||
if(!this.isActive(item))
|
||||
this.play(item);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.liveInfo.refresh()
|
||||
this.sources = this.$slots.sources;
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
this.liveInfo.drop()
|
||||
components: {
|
||||
List, SoundItem,
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user