233 lines
9.8 KiB
HTML
233 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Choriosity Liederwahl</title>
|
|
|
|
<link rel="apple-touch-icon" href="https://choriosity.de/assets/images/apple-touch-icon.png" type="image/png">
|
|
<link rel="alternate icon" href="https://choriosity.de/assets/images/favicon.png" type="image/png">
|
|
<link rel="shortcut icon" href="https://choriosity.de/assets/images/favicon.svg" type="image/svg+xml">
|
|
|
|
<link rel="stylesheet" type="text/css" href="/static/site.css">
|
|
{% if veto_mode %}
|
|
<style type="text/css">
|
|
.comment {
|
|
width: 100%;
|
|
margin-top: 0.3em;
|
|
font-size: 1.2em;
|
|
border: 1px solid white;
|
|
border-radius: 0.2em;
|
|
padding: 0.1em;
|
|
}
|
|
|
|
.not_singable {
|
|
background-color: color-mix(in srgb, #e1412f 30%, #f0f0f0);
|
|
}
|
|
</style>
|
|
{% endif %}
|
|
|
|
<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
|
|
<script type="text/javascript">
|
|
const session_id = "{{ session_id }}";
|
|
|
|
var spotify_embed_controller;
|
|
|
|
window.onSpotifyIframeApiReady = (IFrameAPI) => {
|
|
const element = document.getElementById('spotify-embed');
|
|
const options = {
|
|
width: '640',
|
|
height: '360'
|
|
};
|
|
const callback = (EmbedController) => {
|
|
spotify_embed_controller = EmbedController;
|
|
};
|
|
IFrameAPI.createController(element, options, callback);
|
|
};
|
|
|
|
var is_playing = -1;
|
|
|
|
function stop() {
|
|
if (is_playing !== -1) {
|
|
document.querySelector("#song-" + is_playing + " .cover-container .overlay img").setAttribute("src", "/static/play.svg");
|
|
}
|
|
|
|
document.querySelector("#yt-player").style.display = "none";
|
|
document.querySelector("#spotify-player").style.display = "none";
|
|
document.querySelector("#close-player").style.display = "none";
|
|
document.querySelector("#yt-player").innerHTML = "";
|
|
|
|
spotify_embed_controller.pause();
|
|
is_playing = -1;
|
|
}
|
|
|
|
function playYt(song_id, yt_id) {
|
|
if (is_playing == song_id) {
|
|
stop();
|
|
} else {
|
|
stop();
|
|
|
|
is_playing = song_id;
|
|
|
|
document.querySelector("#song-" + song_id + " .cover-container .overlay img").setAttribute("src", "/static/stop.svg");
|
|
|
|
document.querySelector("#yt-player").style.display = "flex";
|
|
document.querySelector("#close-player").style.display = "block";
|
|
|
|
iframe_code = '<iframe src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1" title="" width="640" height="360" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>';
|
|
document.querySelector("#yt-player").innerHTML = iframe_code;
|
|
}
|
|
}
|
|
|
|
function playSpfy(song_id, spfy_id) {
|
|
if (is_playing == song_id) {
|
|
stop();
|
|
} else {
|
|
stop();
|
|
|
|
is_playing = song_id;
|
|
|
|
document.querySelector("#song-" + song_id + " .cover-container .overlay img").setAttribute("src", "/static/stop.svg");
|
|
|
|
document.querySelector("#spotify-player").style.display = "flex";
|
|
document.querySelector("#close-player").style.display = "block";
|
|
spotify_embed_controller.loadUri("spotify:track:" + spfy_id);
|
|
spotify_embed_controller.play();
|
|
}
|
|
}
|
|
|
|
function openUrl(song_id, url) {
|
|
stop();
|
|
window.open(url, '_blank').focus();
|
|
}
|
|
|
|
async function vote(song_id, vote) {
|
|
|
|
response = await fetch(
|
|
"/songs/" + song_id + "/vote?session_id=" + encodeURIComponent(session_id) + "&vote=" + vote, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
|
|
if (response.ok) {
|
|
no_button = document.querySelector("#song-" + song_id + " .button-no");
|
|
yes_button = document.querySelector("#song-" + song_id + " .button-yes");
|
|
neutral_button = document.querySelector("#song-" + song_id + " .button-neutral");
|
|
|
|
no_button.classList.remove("selected")
|
|
yes_button.classList.remove("selected")
|
|
neutral_button.classList.remove("selected")
|
|
|
|
switch (vote) {
|
|
case 0:
|
|
neutral_button.classList.add("selected")
|
|
{% if veto_mode %}
|
|
document.querySelector("#song-" + song_id).classList.remove("not_singable")
|
|
{% endif %}
|
|
break;
|
|
case 1:
|
|
yes_button.classList.add("selected")
|
|
{% if veto_mode %}
|
|
document.querySelector("#song-" + song_id).classList.remove("not_singable")
|
|
{% endif %}
|
|
break;
|
|
case -1:
|
|
no_button.classList.add("selected")
|
|
{% if veto_mode %}
|
|
document.querySelector("#song-" + song_id).classList.add("not_singable")
|
|
{% endif %}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
{% if veto_mode %}
|
|
async function updateComment(song_id, el) {
|
|
comment = el.value
|
|
|
|
response = await fetch(
|
|
"/songs/" + song_id + "/comment?session_id=" + encodeURIComponent(session_id) + "&comment=" + encodeURIComponent(comment), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
});
|
|
}
|
|
{% endif %}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
{% if veto_mode %}
|
|
<h1>Vorschau Modus</h1>
|
|
<div class="text">Du kannst ungeeignete Vorschläge durch eine Nein-Stimme markieren und Kommentare zu allen Liedern
|
|
abgeben.
|
|
</div>
|
|
{% else %}
|
|
<header>
|
|
<img id="title-logo" src="https://choriosity.de/assets/images/logo-choriosity_weiss.svg">
|
|
<h1 id="title">Liederwahl</h1>
|
|
</header>
|
|
|
|
<div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen. Mit
|
|
einem Klick auf das Thumbnail kannst du das Lied abspielen.
|
|
</div>
|
|
{% endif %}
|
|
<div id="songs">
|
|
{% for main_category, songs in songs_by_category.items() %}
|
|
<h2 style="--hue: {{ all_categories[main_category] / all_categories|length }};">{{ main_category }}</h2>
|
|
{% for song in songs -%}
|
|
<div style="--hue: {{ all_categories[main_category] / all_categories|length }};" class="song{% if (song.vote == -1) or (not song.vote and not song.singable) %} not_singable{% endif %}"
|
|
id="song-{{ song.id }}">
|
|
<div class="cover-container">
|
|
<img src="{{ song.thumbnail }}" class="cover">
|
|
<div class="overlay"
|
|
onclick="{% if song.yt_id %}playYt({{ song.id }}, '{{ song.yt_id }}'){% else %}{% if song.spfy_id %}playSpfy({{ song.id }}, '{{ song.spfy_id }}'){% else %}openUrl({{ song.id }}, '{{ song.url }}'){% endif %}{% endif %}">
|
|
<img src="/static/{% if song.yt_id or song.spfy_id %}play{% else %}open{% endif %}.svg">
|
|
</div>
|
|
</div>
|
|
<div class="song-title">{{ song.title }}</div>
|
|
<div class="song-artist">{% if song.og_artist %}{{ song.og_artist }}{% if song.aca_artist and
|
|
song.aca_artist != song.og_artist %} / {{ song.aca_artist
|
|
}}{% endif %}{% else %}{{ song.aca_artist }}{% endif %}</div>
|
|
<div class="categories" id="container">{% for category_name, is_in_category in song.categories.items() %}{%
|
|
if is_in_category %}<span style="--hue: {{ all_categories[category_name] / all_categories|length }};">{{
|
|
category_name }}</span>{%
|
|
endif %}{% endfor %}<span style="--main-color: transparent;"> </span>
|
|
</div>
|
|
<div class="vote-buttons">
|
|
<div class="button button-no {% if (song.vote == -1) or (not song.vote and not song.singable) %}selected{% endif %}"
|
|
onmousedown="vote({{ song.id }}, -1); return false;" onclick="return false;"><img
|
|
src="/static/no.svg">
|
|
</div>
|
|
<div class="button button-neutral {% if song.vote == 0 %}selected{% endif %}"
|
|
onmousedown="vote({{ song.id }}, 0); return false;" onclick="return false;"><img
|
|
src="/static/neutral.svg"></div>
|
|
<div class="button button-yes {% if song.vote == 1 %}selected{% endif %}"
|
|
onmousedown="vote({{ song.id }}, 1); return false;" onclick="return false;"><img
|
|
src="/static/yes.svg">
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
{% if veto_mode %}
|
|
<input type="text" class="comment"
|
|
value="{% if song.vote_comment %}{{ song.vote_comment }}{% else %}{% endif %}"
|
|
placeholder="{% if song.comment %}{{ song.comment }}{% else %}Kommentar{% endif %}"
|
|
onchange="updateComment({{ song.id }}, this);">
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
<div id="spotify-player">
|
|
<div id="spotify-embed"></div>
|
|
</div>
|
|
<div id="yt-player"></div>
|
|
<div id="close-player" onclick="stop(); return false;"><img src="/static/no.svg"></div>
|
|
</body>
|
|
|
|
</html> |