update frontend

app/models.py

@@ -15,6 +15,7 @@ class Song(BaseModel):
     aca_artist: Optional[str]
     title: str
     yt_url: Optional[str]
+    thumbnail: Optional[str]
     is_aca: bool
     arng_url: Optional[str]
     categories: dict[str, bool]

app/routers/admin.py

@@ -4,6 +4,8 @@ from app.dependencies import session
 from app.routers.user import get_current_user
 import pandas as pd
 import numpy as np
+import re
+import requests
 
 router = APIRouter(
     prefix="/admin",
@@ -20,6 +22,27 @@ def get_main_category(categories) -> int:
     else:
         return np.argmax(categories != None, axis=0)
 
+def youtube_url_validation(url):
+    youtube_regex = (
+        r'(https?://)?(www\.)?'
+        '(youtube|youtu|youtube-nocookie)\.(com|be)/'
+        '(watch\?v=|embed/|v/|.+\?v=)?([^&=%\?]{11})')
+
+    youtube_regex_match = re.match(youtube_regex, url)
+    if youtube_regex_match:
+        return youtube_regex_match
+
+    return False
+
+def get_thumbnail(url):
+    m = youtube_url_validation(url)
+    if m:
+        thumbnail_url = "https://img.youtube.com/vi/" + m.group(6) + "/mqdefault.jpg"
+        return thumbnail_url
+    elif "spotify" in url:
+        return re.findall(r'(https?://i.scdn.co/image[^"]+)', requests.get(url).text)[0]
+    else:
+        return "/static/cover.jpg"
 
 @router.post("/process_file")
 async def create_upload_file(link_share: str):
@@ -36,6 +59,7 @@ async def create_upload_file(link_share: str):
                     aca_artist=row[1],
                     title=row[2],
                     yt_url=row[3],
+                    thumbnail=get_thumbnail(row[3]),
                     is_aca=row[4] == "ja",
                     arng_url=row[5],
                     categories={n: v for n, v in zip(

app/sql_models.py

@@ -10,6 +10,7 @@ class SqlSong(Base):
     aca_artist = Column(String)
     title = Column(String)
     yt_url = Column(String)
+    thumbnail = Column(String)
     is_aca = Column(Boolean)
     arng_url = Column(String)
     

requirements.txt

@@ -8,3 +8,4 @@ passlib[bcrypt]
 python-multipart
 jinja2
 openpyxl
+requests

static/colors.css

@@ -1,90 +1,90 @@
 .cat-1 { 
- background-color: #1f77b4; 
+ --main-color: #1f77b4; 
 }
 .cat-2 { 
- background-color: #ff7f0e; 
+ --main-color: #ff7f0e; 
 }
 .cat-3 { 
- background-color: #2ca02c; 
+ --main-color: #2ca02c; 
 }
 .cat-4 { 
- background-color: #d62728; 
+ --main-color: #d62728; 
 }
 .cat-5 { 
- background-color: #9467bd; 
+ --main-color: #9467bd; 
 }
 .cat-6 { 
- background-color: #8c564b; 
+ --main-color: #8c564b; 
 }
 .cat-7 { 
- background-color: #e377c2; 
+ --main-color: #e377c2; 
 }
 .cat-8 { 
- background-color: #7f7f7f; 
+ --main-color: #7f7f7f; 
 }
 .cat-9 { 
- background-color: #bcbd22; 
+ --main-color: #bcbd22; 
 }
 .cat-10 { 
- background-color: #17becf; 
+ --main-color: #17becf; 
 }
 .cat-11 { 
- background-color: #a1c9f4; 
+ --main-color: #a1c9f4; 
 }
 .cat-12 { 
- background-color: #ffb482; 
+ --main-color: #ffb482; 
 }
 .cat-13 { 
- background-color: #8de5a1; 
+ --main-color: #8de5a1; 
 }
 .cat-14 { 
- background-color: #ff9f9b; 
+ --main-color: #ff9f9b; 
 }
 .cat-15 { 
- background-color: #d0bbff; 
+ --main-color: #d0bbff; 
 }
 .cat-16 { 
- background-color: #debb9b; 
+ --main-color: #debb9b; 
 }
 .cat-17 { 
- background-color: #fab0e4; 
+ --main-color: #fab0e4; 
 }
 .cat-18 { 
- background-color: #cfcfcf; 
+ --main-color: #cfcfcf; 
 }
 .cat-19 { 
- background-color: #fffea3; 
+ --main-color: #fffea3; 
 }
 .cat-20 { 
- background-color: #b9f2f0; 
+ --main-color: #b9f2f0; 
 }
 .cat-21 { 
- background-color: #001c7f; 
+ --main-color: #001c7f; 
 }
 .cat-22 { 
- background-color: #b1400d; 
+ --main-color: #b1400d; 
 }
 .cat-23 { 
- background-color: #12711c; 
+ --main-color: #12711c; 
 }
 .cat-24 { 
- background-color: #8c0800; 
+ --main-color: #8c0800; 
 }
 .cat-25 { 
- background-color: #591e71; 
+ --main-color: #591e71; 
 }
 .cat-26 { 
- background-color: #592f0d; 
+ --main-color: #592f0d; 
 }
 .cat-27 { 
- background-color: #a23582; 
+ --main-color: #a23582; 
 }
 .cat-28 { 
- background-color: #3c3c3c; 
+ --main-color: #3c3c3c; 
 }
 .cat-29 { 
- background-color: #b8850a; 
+ --main-color: #b8850a; 
 }
 .cat-30 { 
- background-color: #006374; 
+ --main-color: #006374; 
 }

static/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Hello jQuery</title>
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-        <script src="hello.js"></script>
-    </head>
-
-    <body>
-        <div>
-            <p class="greeting-id">The ID is </p>
-            <p class="greeting-content">The content is </p>
-        </div>
-    </body>
-</html>

static/landing_script.js

@@ -5,4 +5,5 @@ $(document).ready(function () {
         localStorage.setItem('session_id', s_id)
     }
     $('.vote-from-existing').attr('href', '?session_id=' + s_id);
+    window.location.href = "/?session_id=" + s_id;
 });

static/site.css

@@ -2,10 +2,9 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-}
-
-body {
-    padding: 0.5em;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 @media only screen and (min-resolution: 200dpi) {
@@ -24,7 +23,8 @@ body {
     border-radius: 0.5em;
     width: 30em;
     font-family: sans-serif;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
+    margin-left: 0.5em;
 }
 
 
@@ -34,12 +34,21 @@ body {
     height: 6em;
     float: left;
     margin-right: 1em;
+    text-align: center;
+    background-color: white;
 }
 
 .cover {
     display: block;
-    width: 100%;
-    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    transition: .3s ease;
 }
 
 
@@ -64,6 +73,10 @@ body {
     filter: drop-shadow(0px 0px 1em black);
 }
 
+.cover-container:hover .cover {
+    filter: brightness(0.6);
+}
+
 .overlay img {
     height: 50%;
     position: absolute;
@@ -86,7 +99,7 @@ body {
 }
 
 .button {
-    height: 2em;
+    height: 1.5em;
     width: 3em;
     display: inline-block;
     text-align: center;
@@ -160,7 +173,7 @@ body {
     white-space: nowrap;
     font-size: 0.7em;
     line-height: 1.2em;
-    margin-top: 0.2em;
+    margin-top: 0.3em;
 }
 
 .categories span {
@@ -171,14 +184,66 @@ body {
     color: white;
     max-width: 10em;
     overflow: clip;
+    background-color: var(--main-color);
 }
 
 .vote-buttons {
     margin-top: 0.5em;
 }
 
-.song-data {
+.song-title,
+.song-artist {
     width: 100%;
     overflow: clip;
     white-space: nowrap;
 }
+
+.song-artist {
+    font-size: 0.7em;
+}
+
+h1 {
+    font-family: sans-serif;
+    padding: 0.1em;
+    padding-left: 0.2em;
+    margin-bottom: 1rem;
+    font-size: 1.5em;
+    background-color: color-mix(in srgb, var(--main-color) 60%, transparent);
+    border-bottom: 0.3rem solid var(--main-color);
+}
+
+#yt-player,
+#spotify-player {
+    position: fixed;
+    bottom: 0.5em;
+    right: 0.5em;
+    padding: 0;
+    display: none;
+    justify-content: center;
+    border-radius: 20px;
+}
+
+#spotify-player {
+    bottom: 0.2em;
+    background-color: blue;
+}
+
+#close-player {
+    position: absolute;
+    bottom: 320px;
+    right: 0.5em;
+    background-color: rgba(255,255,255,0.9);
+    width: 3em;
+    height: 3em;
+    border-radius: 1.5em;
+    display: none;
+}
+#close-player img {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    width: 1.5em;
+}

static/voting_script.js

@@ -78,25 +78,36 @@ function vote(song_id, vote) {
 
 const getQueryParameter = (param) => new URLSearchParams(document.location.search.substring(1)).get(param);
 
+var all_songs = {}
+
 $(document).ready(function () {
     var session_id = getQueryParameter("session_id");
 
     var songTemplate = $('script[data-template="song"]').text().split(/\$\{(.+?)\}/g);
 
     function render(props) {
-        return function(tok, i) { return (i % 2) ? props[tok] : tok; };
+        return function (tok, i) { return (i % 2) ? props[tok] : tok; };
     }
 
-    song_list = {}
+
 
     $.ajax({
-        url: "/songs",
+        url: "/songs/",
         data: { user_id: session_id }
     }).then(function (songs) {
+        song_list = {}
+
+        cat_to_id = {}
+
         $.each(songs, function (key, song) {
 
+            all_songs[song.id] = song;
+
             var mc = song.main_category;
 
+            if (!song.is_aca) {
+                mc = "Wildcard"
+            }
             if (!(mc in song_list)) {
                 song_list[mc] = ""
             }
@@ -107,25 +118,102 @@ $(document).ready(function () {
                 if (is_cat) {
                     cats = cats + '<span class="cat-' + cat_id + '">' + cat_name + '</span>';
                 }
+                cat_to_id[cat_name] = cat_id
                 cat_id += 1
             });
+            cat_to_id["Wildcard"] = cat_id
 
 
+            artist = "";
+            if (song.og_artist) {
+                artist += song.og_artist;
+                if (song.aca_artist && (song.aca_artist !== song.og_artist)) {
+                    artist += " / ";
+                    artist += song.aca_artist;
+                }
+            } else {
+                artist = song.aca_artist;
+            }
+
             var s = songTemplate.map(render({
-                "id" : song.id,
-                "title" : song.og_artist + ": " + song.title,
-                "cover_image" : "cover.jpg",
-                "no_selected" : (song.vote == -1) ? "selected" : "",
-                "neutral_selected" : (song.vote == 0) ? "selected" : "",
-                "yes_selected" : (song.vote == 1) ? "selected" : "",
-                "categories" : cats
+                "id": song.id,
+                "title": song.title,
+                "artist": artist, //song.og_artist + ": " + song.aca_artist
+                "cover_image": song.thumbnail,
+                "no_selected": (song.vote == -1) ? "selected" : "",
+                "neutral_selected": (song.vote == 0) ? "selected" : "",
+                "yes_selected": (song.vote == 1) ? "selected" : "",
+                "categories": cats
             })).join('')
 
             song_list[mc] += s
         });
-        $.each(song_list, function(mc, s) {
-            $('body').append("<h1>" + mc + "</h1>");
-            $('body').append(s);
+        $.each(cat_to_id, function (cat_name, cat_id) {
+            if (cat_name in song_list) {
+                $('#songs').append("<h1 class=\"cat-" + cat_id + "\">" + cat_name + "</h1>");
+                $('#songs').append(song_list[cat_name]);
+            }
         });
+
+        makeScroll();
     });
 });
+
+var is_playing = -1;
+
+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);
+  };
+
+
+function play(id) {
+    $("#yt-player").css("display", "none");
+    $("#spotify-player").css("display", "none");
+    $("#close-player").css("display", "none");
+    $("#yt-player").html("");
+    spotify_embed_controller.pause();
+
+    if (is_playing == id) {
+        is_playing = -1;
+    } else {
+        is_playing = id;
+
+        song = all_songs[id];
+        yt_id = song.yt_url.split('v=')[1]
+        spotify_id = song.yt_url.split('/track/')[1]
+
+        if (yt_id) {
+            $("#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);
+        }
+        else if (spotify_id) {
+            $("#spotify-player").css("display", "flex");
+            $("#close-player").css("display", "block");
+            spotify_embed_controller.loadUri("spotify:track:" + spotify_id);
+            spotify_embed_controller.play();
+        }
+        else {
+            $("#yt-player").css("display", "none");
+            $("#spotify-player").css("display", "none");
+            $("#yt-player").html("");
+            spotify_embed_controller.pause();
+            window.open(song.yt_url, '_blank').focus();
+        }
+    }
+}
+
+//<iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2DS7lDZNFM7safSGNm8vd4?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+
+// https://open.spotify.com/intl-de/track/2DS7lDZNFM7safSGNm8vd4

templates/item.html

@@ -1,9 +0,0 @@
-<html>
-<head>
-    <title>Item Details</title>
-    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
-</head>
-<body>
-    <h1><a href="test.html">Item ID: {{ id }}</a></h1>
-</body>
-</html>

templates/voting.html

@@ -4,20 +4,22 @@
         <title>Liederwahl</title>
         <link rel="stylesheet" type="text/css" href="/static/colors.css">
         <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 src="/static/voting_script.js"></script>
         <script type="text/template" data-template="song">
             <div class="song" id="song-${id}">
                 <div class="cover-container">
-                    <img src="/static/${cover_image}" class="cover">
-                    <div class="overlay"><img src="/static/play.svg"></div>
+                    <img src="${cover_image}" class="cover">
+                    <div class="overlay" onclick="play(${id})"><img src="/static/play.svg"></div>
                 </div>
-                <div class="song-data">${title}</div>
+                <div class="song-title">${title}</div>
+                <div class="song-artist">${artist}</div>
                 <div class="categories" id="container">
-                    ${categories}
+                    ${categories}<span style="--main-color: transparent;">&nbsp;</span>
                 </div>
                 <div class="vote-buttons">
-                    <div class="button button-no ${no_selected}" onmousedown="vote(${id}, -1)"><img src="/static/no.svg"></div><div class="button button-neutral ${neutral_selected}" onmousedown="vote(${id}, 0)"><img src="/static/neutral.svg"></div><div class="button button-yes ${yes_selected}" onmousedown="vote(${id}, 1)"><img src="/static/yes.svg"></div>
+                    <div class="button button-no ${no_selected}" onmousedown="vote(${id}, -1); return false;" onclick="return false;"><img src="/static/no.svg"></div><div class="button button-neutral ${neutral_selected}" onmousedown="vote(${id}, 0)"><img src="/static/neutral.svg"></div><div class="button button-yes ${yes_selected}" onmousedown="vote(${id}, 1)"><img src="/static/yes.svg"></div>
                 </div>
                 <div class="clear"></div>
             </div>  
@@ -26,6 +28,11 @@
     </head>
 
     <body>
+        <div id="songs"></div>
+        <div id="spotify-player"><div id="spotify-embed"></div></div>
+        <div id="yt-player"></div>
+        <div id="close-player"><img src="/static/no.svg"></div>
+    
         <!--<div class="song">
             <div class="cover-container">
                 <img src="{{ url_for('static', path='/cover.jpg') }}" class="cover">