add download link; update player and pages layout

This commit is contained in:
bkfox
2022-10-07 16:15:32 +02:00
parent a24afd114e
commit 156b0afcb9
16 changed files with 13000 additions and 145 deletions

View File

@ -1,5 +1,5 @@
<template>
<div>
<div class="playlist">
<slot name="header"></slot>
<ul :class="listClass">
<li v-for="(item,index) in items" :class="itemClass" @click="!hasAction('play') && select(index)"
@ -9,9 +9,9 @@
:data="item" :index="index" :set="set" :player="player_"
@togglePlay="togglePlay(index)"
:actions="actions">
<template v-slot:actions="{}">
<template v-slot:extra-right="{}">
<button class="button" v-if="editable" @click.stop="remove(index,true)">
<span class="icon is-small"><span class="fa fa-minus"></span></span>
<span class="icon is-small"><span class="fa fa-close"></span></span>
</button>
</template>
</ASoundItem>

View File

@ -1,19 +1,16 @@
<template>
<div class="media sound-item">
<div class="media-left">
<div class="media-left" @click.stop="$emit('togglePlay')">
<img class="cover is-tiny" :src="item.data.cover" v-if="item.data.cover">
</div>
<div class="media-left">
<button class="button" @click.stop="$emit('togglePlay')">
<div class="icon">
<span class="fa fa-pause" v-if="playing"></span>
<span class="fa fa-play" v-else></span>
</div>
</button>
</div>
<div class="media-content">
<slot name="content" :player="player" :item="item" :loaded="loaded">
<h4 class="title is-4">{{ name || item.name }}</h4>
<h4 class="title is-5" @click.stop="$emit('togglePlay')">
<span class="icon is-small is-size-7 blink" v-if="playing">
<span class="fa fa-play"></span>
</span>
{{ name || item.name }}
</h4>
<a class="subtitle is-6 is-inline-block" v-if="hasAction('page') && item.data.page_url"
:href="item.data.page_url">
{{ item.data.page_title }}
@ -21,6 +18,12 @@
</slot>
</div>
<div class="media-right">
<a class="button" v-if="item.data.is_downloadable"
:href="item.data.url" target="_blank">
<span class="icon is-small">
<span class="fa fa-download"></span>
</span>
</a>
<button class="button" v-if="player && player.sets.pin != $parent.set" @click.stop="player.togglePin(item)">
<span class="icon is-small">
<span :class="(pinned ? '' : 'has-text-grey-light ') + 'fa fa-thumbtack'"></span>
@ -28,6 +31,7 @@
</button>
<slot name="actions" :player="player" :item="item" :loaded="loaded"></slot>
</div>
<slot name="extra-right" :player="player" :item="item" :loaded="loaded"></slot>
</div>
</template>
<script>