180cc8bc02
- serializer: track search, reorder module files
- autocomplete: allow simple string value selection
- playlist editor:
- ui & flow improve
- init data
- save user settings
- autocomplete
- fix bugs
- discard changes
136 lines
6.2 KiB
HTML
136 lines
6.2 KiB
HTML
{% comment %}List item for a source.{% endcomment %}
|
|
{% load i18n %}
|
|
|
|
<section class="box"><div class="columns is-desktop">
|
|
<div class="column">
|
|
<h5 class='title is-5' :class="{'has-text-danger': source.isPlaying, 'has-text-warning': source.isPaused}">
|
|
<span>
|
|
<span v-if="source.isPlaying" class="fas fa-play"></span>
|
|
<span v-else-if="source.isPaused" class="fas fa-pause"></span>
|
|
</span>
|
|
[[ source.id ]]
|
|
|
|
<small v-if="source.isPaused || source.isPlaying">([[ source.remainingString ]])</small>
|
|
|
|
<a v-if="source.data.program !== undefined"
|
|
:href="'{% url 'admin:aircox_program_change' "$$" %}'.replace('$$', source.data.program)"
|
|
title="{% translate "Edit related program" %}">
|
|
<span class="icon">
|
|
<span class="fas fa-edit"></span>
|
|
</span>
|
|
</a>
|
|
</h5>
|
|
|
|
<div>
|
|
<button class="button" @click="source.sync()"
|
|
title="{% translate "Synchronize source with Liquidsoap" %}">
|
|
<span class="icon is-small">
|
|
<span class="fas fa-sync"></span>
|
|
</span>
|
|
<span>{% translate "Synchronise" %}</span>
|
|
</button>
|
|
<button class="button" @click="source.restart()"
|
|
title="{% translate "Restart current track" %}">
|
|
<span class="icon is-small">
|
|
<span class="fas fa-step-backward"></span>
|
|
</span>
|
|
<span>{% translate "Restart" %}</span>
|
|
</button>
|
|
<button class="button" @click="source.skip()"
|
|
title="{% translate "Skip current file" %}">
|
|
<span>{% translate "Skip" %}</span>
|
|
<span class="icon is-small">
|
|
<span class="fas fa-step-forward"></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="source.isQueue">
|
|
<hr>
|
|
<h6 class="title is-6">{% translate "Add sound" %}</h6>
|
|
<form @submit.prevent="source.push($event.target.elements['sound_id'].value); $event.target.reset()">
|
|
<div class="field is-grouped">
|
|
{# TODO: select station => change the shit #}
|
|
<a-autocomplete class="control is-expanded"
|
|
url="{% url "aircox:sound-list" %}?station={{ station.pk }}&search=${query}"
|
|
name="sound_id" :model="Sound" value-field="id" label-field="name"
|
|
placeholder="{% translate "Select a sound" %}">
|
|
<template v-slot:item="{item}">
|
|
[[ item.data.name ]]
|
|
<span class="is-size-7 is-italic has-text-info">[[ item.data.file ]]</span>
|
|
</template>
|
|
</a-autocomplete>
|
|
<div class="control">
|
|
<button type="submit" class="button is-primary">
|
|
<span class="icon">
|
|
<span class="fas fa-plus"></span>
|
|
</span>
|
|
<span>{% translate "Add" %}</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="help">
|
|
{% translate "Add a sound to the queue (queue may start playing)" %}
|
|
</p>
|
|
{# TODO: help text about how it works #}
|
|
</form>
|
|
|
|
<div v-if="source.queue.length">
|
|
<h6 class="title is-6 is-marginless">{% translate "Sounds in queue" %}</h6>
|
|
<table class="table is-fullwidth"><tbody>
|
|
<tr v-for="[index, request] in source.queue.entries()">
|
|
<td :class="{'has-text-weight-semibold': index==0 }">
|
|
<span v-if="index==0" class="far fa-play-circle"></span>
|
|
<span>[[ request.data.uri ]]</span>
|
|
</td>
|
|
</tr>
|
|
</tbody></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-two-fifths">
|
|
<h6 class="subtitle is-6 is-marginless">Metadata</h6>
|
|
<table class="table has-background-transparent">
|
|
<tbody>
|
|
<tr><th class="has-text-right has-text-nowrap">
|
|
{% translate "Status" %}
|
|
</th>
|
|
<td :class="{'has-text-danger': source.isPlaying, 'has-text-warning': source.isPaused}">
|
|
<span v-if="source.isPlaying" class="fas fa-play"></span>
|
|
<span v-else-if="source.data.status" class="fas fa-pause"></span>
|
|
[[ source.data.status_verbose || "—" ]]
|
|
</td>
|
|
</tr>
|
|
<tr v-if="source.data.air_time">
|
|
<th class="has-text-right has-text-nowrap">
|
|
{% translate "Air time" %}
|
|
</th><td>
|
|
<span class="far fa-clock"></span>
|
|
<time :datetime="source.date">
|
|
[[ source.data.air_time.toLocaleDateString() ]],
|
|
[[ source.data.air_time.toLocaleTimeString() ]]
|
|
</time>
|
|
</td>
|
|
<tr v-if="source.remaining">
|
|
<th class="has-text-right has-text-nowrap">
|
|
{% translate "Time left" %}
|
|
</th><td>
|
|
<span class="far fa-hourglass"></span>
|
|
[[ source.remainingString ]]
|
|
</td>
|
|
</tr>
|
|
<tr v-if="source.data.uri">
|
|
<th class="has-text-right has-text-nowrap">
|
|
{% translate "Data source" %}
|
|
</th><td>
|
|
<span class="far fa-play-circle"></span>
|
|
<template v-if="source.data.uri.length > 64">...</template>[[ (source.data.uri && source.data.uri.slice(-64)) || '—' ]]
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div></section>
|
|
|