189 lines
7.5 KiB
HTML
189 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>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">
|
|
<script src="https://open.spotify.com/embed/iframe-api/v1" async></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
|
<script type="text/javascript">
|
|
const session_id = "{{ session_id }}";
|
|
|
|
function activate_session() {
|
|
$.ajax({
|
|
url: "/session/" + session_id,
|
|
method: "PUT"
|
|
})
|
|
}
|
|
|
|
function deactivate_session() {
|
|
$.ajax({
|
|
url: "/session/" + session_id,
|
|
method: "DELETE"
|
|
})
|
|
}
|
|
|
|
$(window).on("load", activate_session);
|
|
|
|
$(window).on("beforeunload", deactivate_session);
|
|
$(window).on("pagehide", deactivate_session);
|
|
$(document).on('visibilitychange', function () {
|
|
if (document.visibilityState == 'hidden') {
|
|
deactivate_session();
|
|
} else {
|
|
activate_session()
|
|
}
|
|
});
|
|
|
|
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() {
|
|
$("#song-" + is_playing + " .cover-container .overlay img").attr("src", "/static/play.svg");
|
|
|
|
$("#yt-player").css("display", "none");
|
|
$("#spotify-player").css("display", "none");
|
|
$("#close-player").css("display", "none");
|
|
$("#yt-player").html("");
|
|
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;
|
|
|
|
$("#song-" + song_id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
|
|
|
|
$("#yt-player").css("display", "flex");
|
|
$("#close-player").css("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>';
|
|
$("#yt-player").html(iframe_code);
|
|
}
|
|
}
|
|
|
|
function playSpfy(song_id, spfy_id) {
|
|
if (is_playing == song_id) {
|
|
stop();
|
|
} else {
|
|
stop();
|
|
|
|
is_playing = song_id;
|
|
|
|
$("#song-" + song_id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
|
|
|
|
$("#spotify-player").css("display", "flex");
|
|
$("#close-player").css("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();
|
|
}
|
|
|
|
function vote(song_id, vote) {
|
|
no_button = $("#song-" + song_id).find(".button-no")
|
|
yes_button = $("#song-" + song_id).find(".button-yes")
|
|
neutral_button = $("#song-" + song_id).find(".button-neutral")
|
|
|
|
no_button.removeClass("selected")
|
|
yes_button.removeClass("selected")
|
|
neutral_button.removeClass("selected")
|
|
|
|
switch (vote) {
|
|
case 0:
|
|
neutral_button.addClass("selected")
|
|
break;
|
|
case 1:
|
|
yes_button.addClass("selected")
|
|
break;
|
|
case -1:
|
|
no_button.addClass("selected")
|
|
default:
|
|
break;
|
|
}
|
|
|
|
$.ajax({
|
|
url: "/songs/" + song_id + "/vote?" + $.param({ session_id: session_id, vote: vote }),
|
|
method: "POST"
|
|
})
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Hallo :)</h1>
|
|
<div class="text">Du kannst die Liederwahl jederzeit unterbrechen und zu einem späteren Zeitpunkt weitermachen.
|
|
</div>
|
|
<div id="songs">
|
|
{% for main_category, songs in songs_by_category.items() %}
|
|
<h1 style="--hue: {{ all_categories[main_category] / all_categories|length }};">{{ main_category }}</h1>
|
|
{% for song in songs -%}
|
|
<div class="song" 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 %}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>
|
|
</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> |