add rudimentary playlist

Signed-off-by: Christian Richter <crichter@owncloud.com>

assets/index.html

@@ -35,7 +35,7 @@
             <div class="title">
                 <h1>Weirdradio</h1>
             </div>
-            <div class="playlist">
+            <div id="playlist" class="playlist">
                 {playlist}
             </div>
         </div>
@@ -47,7 +47,7 @@
         </div>
     </body>
     <script>
-        // 2. This code loads the IFrame Player API code asynchronously.
+        var playlist = []
         var tag = document.createElement('script');
   
         tag.src = "https://www.youtube.com/iframe_api";
@@ -72,14 +72,10 @@
           });
         }
   
-        // 4. The API will call this function when the video player is ready.
         function onPlayerReady(event) {
           event.target.playVideo();
         }
-              
-        // 5. The API calls this function when the player's state changes.
-        //    The function indicates that when playing a video (state=1),
-        //    the player should play for six seconds and then stop.
+
         var done = false;
         function onPlayerStateChange(event) {
           if (event.data == 0) {
@@ -93,9 +89,6 @@
         function stopVideo() {
           player.stopVideo();
         }
-      </script>
-  
-    <script lang="Javascript">
             
         function connectSocket() {
             baseUrl = (window.location.host).replace("8080", "8090")
@@ -106,6 +99,8 @@
             socket.onmessage = function(event) {
                 data = JSON.parse(event.data)
                 if (data["videoId"] != undefined && data["videoId"] != null) {
+                    playlist.push(data)
+                    updatePlaylist()
                     player.loadVideoById(data["videoId"])
                     player.playVideo()
                     console.log(`[message] Data received from server: ${event.data}`);
@@ -114,5 +109,14 @@
                 }
             };
         }
+
+        function updatePlaylist() {
+            pl = document.getElementById("playlist")
+            output = ""
+            playlist.forEach((e) => {
+                output = output + `<div><div>${e.title}</div><div>${e.link}</div></div>`
+            })
+            pl.innerHTML = output
+        }
     </script>
 </html>