90 lines
3.3 KiB
HTML
90 lines
3.3 KiB
HTML
{% load staticfiles %}
|
|
{% load i18n %}
|
|
|
|
<script type="text/x-template" id="template-sound">
|
|
<div class="component sound flex_row"
|
|
:state="state"
|
|
>
|
|
<audio preload="metadata" ref="audio"
|
|
@pause="state = State.Stop"
|
|
@playing="state = State.Play"
|
|
@ended="ended"
|
|
@timeupdate="timeUpdate"
|
|
>
|
|
<source v-for="source in track.sources" :src="source">
|
|
</audio>
|
|
<div class="cover button">
|
|
<img :src="track.cover" v-if="track.cover">
|
|
<button @click="play_stop">
|
|
<img class="icon pause"
|
|
src="{% static "aircox/images/pause.png" %}"
|
|
title="{% trans "Click to pause" %}"
|
|
v-if="state === State.Play" >
|
|
<img class="icon loading"
|
|
src="{% static "aircox/images/loading.png" %}"
|
|
title="{% trans "Loading... Click to pause" %}"
|
|
v-else-if="state === State.Loading" >
|
|
<img class="icon play"
|
|
src="{% static "aircox/images/play.png" %}"
|
|
title="{% trans "Click to play" %}"
|
|
v-else >
|
|
</button>
|
|
</div>
|
|
<div class="content flex_item">
|
|
<h3 class="flex_item">
|
|
<a :href="detail_url">[[ track.name ]]</a>
|
|
</h3>
|
|
<div v-if="track.duration" class="info">
|
|
<span v-if="seek_position !== null">
|
|
[[ format_time(seek_position) ]] /
|
|
</span>
|
|
<span v-else-if="state == State.Play">[[ format_time(position) ]] /</span>
|
|
[[ format_time(track.duration) ]]
|
|
</div>
|
|
<progress ref="progress"
|
|
v-show="state == State.Play && track.duration"
|
|
v-on:click.prevent="progress_clicked"
|
|
v-on:mousemove = "progress_mouse_move"
|
|
v-on:mouseout = "progress_mouse_out"
|
|
:value="seek_position" :max="duration"
|
|
></progress>
|
|
</div>
|
|
<div class="actions">
|
|
<a class="action remove"
|
|
title="{% trans "Remove from playlist" %}"
|
|
v-if="this.$parent.modifiable"
|
|
@click="remove"
|
|
>✖</a>
|
|
<a class="action add"
|
|
title="{% trans "Add to my playlist" %}"
|
|
@click="add_to_playlist"
|
|
v-else
|
|
>+</a>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
|
|
<script type="text/x-template" id="template-playlist">
|
|
<div class="component playlist">
|
|
<a-sound v-for="track in tracks" ref="sounds"
|
|
:id="track.id" :track="track"
|
|
@ended="sound_ended"
|
|
@beforeDestroy="sound_ended"
|
|
/>
|
|
|
|
<footer v-show="tracks.length > 1" class="info">
|
|
<span v-show="read_all">{% trans "read all" %}</span>
|
|
<input type="checkbox" class="read_all"
|
|
:id="read_all_id"
|
|
value="true" v-model="read_all">
|
|
<label :for="read_all_id"
|
|
title="{% trans "Read all the playlist" %}">
|
|
<img src="{% static "aircox/images/list.png" %}" class="small icon">
|
|
</label>
|
|
</footer>
|
|
</div>
|
|
</script>
|
|
|
|
|