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

work on player ui

Browse Source
This commit is contained in:
bkfox
2018-02-09 18:11:04 +01:00
parent d80322dd15
commit e05cdb343d
7 changed files with 196 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
aircox_cms/templates/aircox_cms/sections/playlist.html
View File

@ -9,16 +9,21 @@
<a-playlist class="playlist" id="{{ playlist_id }}">
<noscript>
{% for track in tracks %}
<li class="item">
<span class="name">{{ track.name }} ({{ track.duration|date:"H\"i's" }}): </span>
<div class="item">
<span class="name">
{{ track.data.name }}
{% if track.data.duration %}
({{ track.data.duration_str }})
{% endif %}
</span>
<span class="podcast">
{% if not track.embed %}
{% if not track.data.embed %}
<audio src="{{ track.url|escape }}" controls>
{% else %}
{{ track.embed|safe }}
{% endif %}
</span>
</li>
</div>
{% endfor %}
</noscript>
<script>

87
aircox_cms/templates/aircox_cms/vues/player.html
View File

@ -2,7 +2,9 @@
{% load i18n %}
<script type="text/x-template" id="template-sound">
<div class="sound">
<div class="component sound flex_row"
:state="state"
>
<audio preload="metadata" ref="audio"
@pause="state = State.Stop"
@playing="state = State.Play"
@ -11,29 +13,41 @@
>
<source v-for="source in track.sources" :src="source">
</audio>
<img :src="track.cover" v-if="track.cover" class="icon cover">
<button class="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>
<h3>
<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>
<span v-if="track.duration" class="info">
[[ (track.duration[0] && track.duration[0] + '"') || '' ]]
[[ track.duration[1] + "'" + track.duration[2] ]]
</span>
<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"
@ -47,35 +61,28 @@
v-else
>+</a>
</div>
<div class="content flex_row" v-show="track.duration != null">
<span v-if="seek_position !== null">[[ seek_position ]]</span>
<span v-else>[[ position ]]</span>
<progress class="flex_item progress" ref="progress"
v-show="track.duration"
v-on:click.prevent="progress_clicked"
v-on:mousemove = "progress_mouse_move"
v-on:mouseout = "progress_mouse_out"
:value="position" :max="duration"
></progress>
</div>
</div>
</script>
<script type="text/x-template" id="template-playlist">
<div class="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"
/>
<div v-show="tracks.length > 1" class="playlist_footer">
<input type="checkbox" class="single" id="[[ playlist ]]_single_mode"
value="true" v-model="single_mode">
<label for="[[ playlist ]]_single_mode" class="info"
title="{% trans "Enable and disable single mode" %}">↻</label>
</div>
<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>