forked from rc/aircox
49 lines
2.0 KiB
HTML
49 lines
2.0 KiB
HTML
{% load i18n aircox %}
|
|
{% comment %}
|
|
The audio player
|
|
{% endcomment %}
|
|
|
|
<br>
|
|
|
|
<div class="box is-fullwidth is-fixed-bottom is-paddingless player"
|
|
role="{% trans "player" %}"
|
|
aria-description="{% trans "Audio player used to listen to the radio and podcasts" %}">
|
|
<noscript>
|
|
<audio src="{{ audio_streams.0 }}" controls>
|
|
{% for stream in audio_streams %}
|
|
<source src="{{ stream }}" />
|
|
{% endfor %}
|
|
</audio>
|
|
{# TODO: live infos #}
|
|
</noscript>
|
|
|
|
<a-player ref="player"
|
|
:live-args="{url: '{% url "api:live" %}', timeout:10, src: {{ audio_streams|json }} || []}"
|
|
button-title="{% trans "Play or pause audio" %}">
|
|
<template v-slot:content="{ loaded, live }">
|
|
<h4 v-if="loaded" class="title is-4">
|
|
[[ loaded.name ]]
|
|
</h4>
|
|
<h4 v-else-if="live && live.current && live.current.data.type == 'track'"
|
|
class="title is-4" aria-description="{% trans "Track currently on air" %}">
|
|
<span class="has-text-info is-size-3">♬</span>
|
|
<span>[[ live.current.data.title ]]</span>
|
|
<span class="has-text-grey-dark has-text-weight-light">
|
|
— [[ live.current.data.artist ]]
|
|
<i v-if="live.current.data.info">([[ live.current.data.info ]])</i>
|
|
</span>
|
|
</h4>
|
|
<div v-else-if="live && live.current && live.current.data.type == 'diffusion'">
|
|
<h4 class="title is-4" aria-description="{% trans "Diffusion currently on air" %}">
|
|
<a :href="live.current.data.url">[[ live.current.data.title ]]</a>
|
|
</h4>
|
|
<div class="">[[ live.current.data.info ]]</div>
|
|
</div>
|
|
<h4 v-else class="title is-4" aria-description="{% trans "Currently playing" %}">
|
|
{{ request.station.name }}
|
|
</h4>
|
|
</template>
|
|
</a-player>
|
|
</div>
|
|
|