81 lines
2.4 KiB
HTML
81 lines
2.4 KiB
HTML
{% extends "Base.html" %}
|
|
|
|
{% block window-title %}
|
|
Stemmen
|
|
{% endblock %}
|
|
|
|
{% block main-content %}
|
|
{% if track %}
|
|
<div id="vote-box" hx-target="body">
|
|
{% if error %}<div class="error">{{ error }}</div>{% endif %}
|
|
<div id="embed"></div>
|
|
<div id="album">
|
|
{% if track.album.image_url %}
|
|
<img src="{{track.album.image_url}}" />
|
|
{% else %}
|
|
<img src="https://kagi.com/proxy/windows-95-logo-png-1.png?c=xjdP8sWN58YWflc6NcGN5ZvzREJyOwtrou-TSsaXxcx37J0VVJbSeycOcAptMJEUpzzvqmbKQ3JRuSmPN8HCK43OxjkRe_cQvncxVzlCblc%3D" />
|
|
{% endif %}
|
|
<h1>{{track.name}}</h1>
|
|
<h2>{{track.artist}}</h2>
|
|
</div>
|
|
<input id="seek" type="range" min="0" step="0.1" max="100" value="0" />
|
|
<button id="playpause">⏵️</button>
|
|
|
|
<div
|
|
id="vote-buttons"
|
|
hx-vals='{"spotify_id": "{{ track.id }}"}'
|
|
style="margin-top:10px;"
|
|
>
|
|
<fieldset>
|
|
<legend>Dit vind ik een leuk nummer!</legend>
|
|
<button
|
|
hx-vals='{"vote": "2"}'
|
|
hx-post="{% url 'vote' %}"
|
|
>Helemaal mee eens</button>
|
|
<button
|
|
hx-vals='{"vote": "1"}'
|
|
hx-post="{% url 'vote' %}"
|
|
>Mee eens</button>
|
|
<button
|
|
hx-vals='{"vote": "0"}'
|
|
hx-post="{% url 'vote' %}"
|
|
>Neutraal</button>
|
|
<button
|
|
hx-vals='{"vote": "-1"}'
|
|
hx-post="{% url 'vote' %}"
|
|
>Niet mee eens</button>
|
|
<button
|
|
hx-vals='{"vote": "-2"}'
|
|
hx-post="{% url 'vote' %}"
|
|
>Helemaal niet mee eens</button>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
window.onSpotifyIframeApiReady = (IFrameAPI) => {
|
|
let element = document.getElementById('embed');
|
|
let options = {
|
|
uri: 'spotify:track:{{track.id}}'
|
|
};
|
|
const callback = (EmbedController) => {
|
|
document.getElementById("playpause").addEventListener('click', () => {
|
|
EmbedController.togglePlay()
|
|
});
|
|
EmbedController.addListener('playback_update', e => {
|
|
document.getElementById('seek').value = `${parseInt(e.data.position) / parseInt(e.data.duration) * 100}`;
|
|
})
|
|
};
|
|
IFrameAPI.createController(element, options, callback);
|
|
};
|
|
</script>
|
|
{% else %}
|
|
<p hx-boost="true">
|
|
Je hebt niets meer om te stemmen. Lekker bezig!
|
|
<a href="{% url 'nominate' %}">Nomineer zelf iets</a>, als je nog quota hebt.
|
|
</p>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block clippy %}
|
|
{% include "Clippy.html" with body=track.banter img="img/draakje/draakje-headphones3.gif" %}
|
|
{% endblock %} |