remove jquery dependency
This commit is contained in:
@@ -27,37 +27,9 @@
|
||||
{% endif %}
|
||||
|
||||
<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("unload", 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) => {
|
||||
@@ -75,12 +47,15 @@
|
||||
var is_playing = -1;
|
||||
|
||||
function stop() {
|
||||
$("#song-" + is_playing + " .cover-container .overlay img").attr("src", "/static/play.svg");
|
||||
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 = "";
|
||||
|
||||
$("#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;
|
||||
}
|
||||
@@ -93,12 +68,13 @@
|
||||
|
||||
is_playing = song_id;
|
||||
|
||||
$("#song-" + song_id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
|
||||
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";
|
||||
|
||||
$("#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);
|
||||
document.querySelector("#yt-player").innerHTML = iframe_code;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -110,10 +86,10 @@
|
||||
|
||||
is_playing = song_id;
|
||||
|
||||
$("#song-" + song_id + " .cover-container .overlay img").attr("src", "/static/stop.svg");
|
||||
document.querySelector("#song-" + song_id + " .cover-container .overlay img").setAttribute("src", "/static/stop.svg");
|
||||
|
||||
$("#spotify-player").css("display", "flex");
|
||||
$("#close-player").css("display", "block");
|
||||
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();
|
||||
}
|
||||
@@ -124,38 +100,42 @@
|
||||
window.open(url, '_blank').focus();
|
||||
}
|
||||
|
||||
function vote(song_id, vote) {
|
||||
async function vote(song_id, vote) {
|
||||
|
||||
$.ajax({
|
||||
url: "/songs/" + song_id + "/vote?" + $.param({ session_id: session_id, vote: vote }),
|
||||
method: "POST",
|
||||
success: function (data, textStatus) {
|
||||
response = await fetch(
|
||||
"/songs/" + song_id + "/vote?session_id=" + encodeURIComponent(session_id) + "&vote=" + vote, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
no_button = $("#song-" + song_id).find(".button-no")
|
||||
yes_button = $("#song-" + song_id).find(".button-yes")
|
||||
neutral_button = $("#song-" + song_id).find(".button-neutral")
|
||||
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.removeClass("selected")
|
||||
yes_button.removeClass("selected")
|
||||
neutral_button.removeClass("selected")
|
||||
no_button.classList.remove("selected")
|
||||
yes_button.classList.remove("selected")
|
||||
neutral_button.classList.remove("selected")
|
||||
|
||||
switch (vote) {
|
||||
case 0:
|
||||
neutral_button.addClass("selected")
|
||||
neutral_button.classList.add("selected")
|
||||
{% if veto_mode %}
|
||||
$("#song-" + song_id).removeClass("not_singable")
|
||||
document.querySelector("#song-" + song_id).classList.remove("not_singable")
|
||||
{% endif %}
|
||||
break;
|
||||
case 1:
|
||||
yes_button.addClass("selected")
|
||||
yes_button.classList.add("selected")
|
||||
{% if veto_mode %}
|
||||
$("#song-" + song_id).removeClass("not_singable")
|
||||
document.querySelector("#song-" + song_id).classList.remove("not_singable")
|
||||
{% endif %}
|
||||
break;
|
||||
case -1:
|
||||
no_button.addClass("selected")
|
||||
no_button.classList.add("selected")
|
||||
{% if veto_mode %}
|
||||
$("#song-" + song_id).addClass("not_singable")
|
||||
document.querySelector("#song-" + song_id).classList.add("not_singable")
|
||||
{% endif %}
|
||||
break;
|
||||
default:
|
||||
@@ -163,20 +143,19 @@
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
{% if veto_mode %}
|
||||
function updateComment(song_id, el) {
|
||||
async function updateComment(song_id, el) {
|
||||
comment = el.value
|
||||
$.ajax({
|
||||
url: "/songs/" + song_id + "/comment?" + $.param({ session_id: session_id, comment: comment }),
|
||||
method: "POST"
|
||||
})
|
||||
|
||||
response = await fetch(
|
||||
"/songs/" + song_id + "/comment?session_id=" + encodeURIComponent(session_id) + "&comment=" + encodeURIComponent(comment), {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
}
|
||||
{% endif %}
|
||||
</script>
|
||||
@@ -189,8 +168,10 @@
|
||||
abgeben.
|
||||
</div>
|
||||
{% else %}
|
||||
<h1 id="title"><img id="title-logo" src="https://choriosity.de/assets/images/logo-choriosity_weiss.svg"> Liederwahl</h1>
|
||||
<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.
|
||||
<h1 id="title"><img id="title-logo" src="https://choriosity.de/assets/images/logo-choriosity_weiss.svg"> Liederwahl
|
||||
</h1>
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user