forked from rc/aircox
Chris Tactic
55123c386d
cfr #121 Co-authored-by: Christophe Siraut <d@tobald.eu.org> Co-authored-by: bkfox <thomas bkfox net> Co-authored-by: Thomas Kairos <thomas@bkfox.net> Reviewed-on: rc/aircox#131 Co-authored-by: Chris Tactic <ctactic@noreply.git.radiocampus.be> Co-committed-by: Chris Tactic <ctactic@noreply.git.radiocampus.be>
55 lines
2.3 KiB
HTML
55 lines
2.3 KiB
HTML
{% load i18n aircox %}
|
|
{% comment %}
|
|
The audio player
|
|
{% endcomment %}
|
|
|
|
<br>
|
|
|
|
<div class="is-fullwidth is-fixed-bottom is-paddingless player-container"
|
|
role="{% translate "player" %}"
|
|
aria-description="{% translate "Audio player used to listen to the radio and podcasts" %}">
|
|
<noscript>
|
|
<audio src="{% if request.station.streams %}{{ request.station.streams.0 }}{% endif %}"
|
|
controls>
|
|
{% for stream in request.station.streams %}
|
|
<source src="{{ stream }}" />
|
|
{% endfor %}
|
|
</audio>
|
|
{# TODO: live infos #}
|
|
</noscript>
|
|
|
|
<a-player ref="player"
|
|
:live-args="{% player_live_attr %}"
|
|
:playlists="{pin: ['{% translate "Bookmarks" %}', 'fa fa-star'], queue: ['{% translate 'Playlist' %}', 'fa fa-list']}"
|
|
button-title="{% translate "Play or pause audio" %}">
|
|
<template v-slot:content="{ loaded, live, current }">
|
|
<h4 v-if="loaded" class="title">
|
|
<a v-if="current?.data?.page_url" :href="current.data.page_url">
|
|
[[ loaded.name ]]
|
|
</a>
|
|
<template v-else>[[ loaded.name ]]</template>
|
|
</h4>
|
|
<h4 v-else-if="current && current.data.type == 'track'"
|
|
class="title" aria-description="{% translate "Track currently on air" %}">
|
|
<span class="icon secondary-color mr-3">
|
|
<i class="fas fa-music"></i>
|
|
</span>
|
|
<span>[[ current.data.title ]]</span>
|
|
<span class="has-text-grey-dark has-text-weight-light">
|
|
— [[ current.data.artist ]]
|
|
<i v-if="current.data.info">([[ current.data.info ]])</i>
|
|
</span>
|
|
</h4>
|
|
<h4 v-else-if="live && current && current.data.type == 'diffusion'"
|
|
class="title"
|
|
aria-description="{% translate "Diffusion currently on air" %}">
|
|
<a :href="current.data.url" v-if="current.data.url">[[ current.data.title ]]</a>
|
|
<template v-else>[[ current.data.title ]]</template>
|
|
</h4>
|
|
<h4 v-else class="title is-4" aria-description="{% translate "Currently playing" %}">
|
|
{{ request.station.name }}
|
|
</h4>
|
|
</template>
|
|
</a-player>
|
|
</div>
|