.playlist tbody tr

index.html

@@ -14,6 +14,10 @@
             width: 100%;
             height: 100%;
         }
+
+        .playlist tbody tr { 
+            cursor: pointer; 
+        }
     </style>
 </head>
 
@@ -56,7 +60,7 @@
         const playlistTable = document.querySelector('.playlist');
         const uploaForm = document.querySelector('.upload-form');
         let songsPlaylist = []
-        let videoIdGenerator = generateVideoId();
+        let videoIndex = 0;
 
         uploaForm.addEventListener('input', e => {
             e.preventDefault();
@@ -66,26 +70,40 @@
 
             parseCsv(e.target.files[0], playlistTable);
         });
-
-        async function* generateVideoId() {
-            for (const song of songsPlaylist) {
-                const response = await (await fetch(
-                    '/video_id',
-                    {
-                        headers: { 'Content-Type': 'application/json' },
-                        method: 'POST',
-                        body: JSON.stringify({ title: song.Title, artist: song.Artist })
-                    })).text();
-                yield response
+        playlistTable.addEventListener('click', e => {
+            e.preventDefault();
+            const row = event.target.closest('tr');
+            if (row) {
+                const index = row.dataset.index ? Number(row.dataset.index) : undefined;
+                onContinue(undefined, index);
             }
+        });
+        function resetCurrentPlayingBackground() {
+            playlistTable.querySelectorAll('tbody tr').forEach(row => {
+                if (Number(row.dataset.index) == videoIndex) {
+                    row.classList.add('bg-warning');
+                } else {
+                    row.classList.remove('bg-warning');
+                }
+            })
         }
-        async function nextVideo(callback) {
-            let video_id = (await videoIdGenerator.next()).value;
-            if (!video_id) {
-                videoIdGenerator = generateVideoId();
-                video_id = (await videoIdGenerator.next()).value;
-            }
+
+        async function getVideoId(song) {
+            const response = await fetch(
+                '/video_id',
+                {
+                    headers: { 'Content-Type': 'application/json' },
+                    method: 'POST',
+                    body: JSON.stringify({ title: song.Title, artist: song.Artist })
+                });
+            return await response.text()
+        }
+        async function nextVideo(callback, newIndex = undefined) {
+            newIndex = (newIndex || (videoIndex + 1))
+            videoIndex = newIndex < songsPlaylist.length ? newIndex : 0;
+            let video_id = await getVideoId(songsPlaylist[videoIndex]);
             callback(video_id);
+            resetCurrentPlayingBackground();
         }
         async function parseCsv(file, playlistTable) {
             try {
@@ -94,9 +112,9 @@
                 songsPlaylist = await (await fetch('/parse_csv', { method: 'POST', body: formData })).json();
 
                 tableBody = songsPlaylist.map((i, index) => `
-                                <tr>
+                                <tr data-index="${index}">
                                     <th>${index + 1}</th>
-                                    <th class="">${i.Title}</th>
+                                    <th>${i.Title}</th>
                                     <th>${i.Artist}</th>
                                 </tr>`
                             ).join('')
@@ -115,9 +133,10 @@
                 playlistTable.innerHTML = error;
             }
         }
+        let youtubePlayer;
         function onYouTubeIframeAPIReady() {
             const youtubePlayerElement = document.querySelector('.youtube-player');
-            const youtubePlayer = window.youtubePlayer = new YT.Player(youtubePlayerElement, {
+            youtubePlayer = window.youtubePlayer = new YT.Player(youtubePlayerElement, {
                 height: '100%',
                 width: '100%',
                 playerVars: { autoplay: 1 },
@@ -127,31 +146,32 @@
                     },
                     'onStateChange': function (event) {
                         if (event.data === YT.PlayerState.ENDED) {
-                            onContinue(event?.target || youtubePlayer);
+                            onContinue(event?.target);
                         }
                     },
                     'onError': function(event) {
-                        onContinue(event?.target || youtubePlayer);
+                        onContinue(event?.target);
                     }
                 }
             });
 
-            function onContinue(player) {
-                if (songsPlaylist.length > 0) {
-                    nextVideo((value) => {
-                        player.loadVideoById(value);
-                        player.playVideo();
-                    });
-                }
-            }
-
             const setIntervalId = setInterval(() => {
                 if (songsPlaylist.length > 0) {
                     clearInterval(setIntervalId);
-                    onContinue(youtubePlayer);
+                    onContinue();
                 }
             }, 500);
         };
+
+        function onContinue(player = undefined, newIndex = undefined) {
+            if (songsPlaylist.length > 0) {
+                nextVideo((value) => {
+                    player = player || youtubePlayer
+                    player.loadVideoById(value);
+                    player.playVideo();
+                }, newIndex);
+            }
+        }
     </script>
 </body>