ctactic/aircox-radiocampus
1
0
Fork 0
forked from rc/aircox
Code Issues 10 Pull Requests Activity

work on player

Browse Source
This commit is contained in:
bkfox
2020-10-27 20:52:46 +01:00
parent 2a0d0b1758
commit 063d1f194e
14 changed files with 477 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
assets/public/soundItem.vue
View File

@ -1,32 +1,29 @@
<template>
<a :class="[active ? activeClass : '']" @click="actions.indexOf('play') == -1 && play()">
<div class="media">
<div class="media-left" v-if="hasAction('play')">
<button class="button" @click="play()">
<div class="icon">
<span class="fa fa-pause" v-if="playing || loading"></span>
<span class="fa fa-play" v-else></span>
</div>
</button>
</div>
<div class="media-content">
<slot name="content" :player="player" :item="item" :active="active">
<h4 class="title is-4 is-inline-block">
{{ name || item.name }}
</h4>
</slot>
</div>
<div class="media-right">
<button class="button" v-if="hasAction('queue')" @click.stop="player.push(item)">
<span class="icon is-small"><span class="fa fa-list"></span></span>
</button>
<button class="button" v-if="hasAction('remove')" @click.stop="set.remove(item)">
<span class="icon is-small"><span class="fa fa-minus"></span></span>
</button>
<slot name="actions" :player="player" :item="item" :active="active"></slot>
</div>
<div class="media">
<div class="media-left" v-if="hasAction('play')">
<button class="button" @click="$emit('togglePlay')">
<div class="icon">
<span class="fa fa-pause" v-if="playing || loading"></span>
<span class="fa fa-play" v-else></span>
</div>
</button>
</div>
</a>
<div class="media-content">
<slot name="content" :player="player" :item="item" :loaded="loaded">
<h4 class="title is-4 is-inline-block">
{{ name || item.name }}
</h4>
</slot>
</div>
<div class="media-right">
<button class="button" v-if="player.$refs.pin != $parent" @click.stop="player.togglePin(item)">
<span class="icon is-small">
<span :class="(pinned ? '' : 'has-text-grey-light ') + 'fa fa-thumbtack'"></span>
</span>
</button>
<slot name="actions" :player="player" :item="item" :loaded="loaded"></slot>
</div>
</div>
</template>
<script>
import Model from './model';
@ -37,36 +34,25 @@ export default {
data: {type: Object, default: x => {}},
name: String,
cover: String,
set: Object,
player: Object,
page_url: String,
activeClass: String,
actions: {type:Array, default: x => []},
index: {type:Number, default: null},
},
computed: {
item() { return this.data instanceof Model ? this.data : new Sound(this.data || {}); },
active() { return this.player && this.player.isActive(this.item) },
playing() { return this.player && this.player.playing && this.active },
paused() { return this.player && this.player.paused && this.active },
loading() { return this.player && this.player.loading && this.active },
loaded() { return this.player && this.player.isLoaded(this.item) },
playing() { return this.player && this.player.playing && this.loaded },
paused() { return this.player && this.player.paused && this.loaded },
loading() { return this.player && this.player.loading && this.loaded },
pinned() { return this.player && this.player.sets.pin.find(this.item) },
},
methods: {
hasAction(action) {
return this.actions && this.actions.indexOf(action) != -1;
},
play() {
if(this.player && this.active)
this.player.togglePlay()
else
this.player.play(this.item);
},
push_to(playlist) {
this.player.playlists[playlist].push(this.item, {unique_key:'id'});
},
}
}
</script>