From 586d012960484148d11afaaeb00b00edd5af5cab Mon Sep 17 00:00:00 2001
From: Julianna Langston <julie.langston@gmail.com>
Date: Sat, 14 Dec 2024 23:00:42 -0500
Subject: [PATCH] Add playlist playing support

---
 public/youtube_embed.html | 69 ++++++++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 19 deletions(-)

diff --git a/public/youtube_embed.html b/public/youtube_embed.html
index f3d8bdc..49b9402 100644
--- a/public/youtube_embed.html
+++ b/public/youtube_embed.html
@@ -67,9 +67,10 @@ <h2>Troubleshooting</h2>
         <script>
             let track = [];
             let playRate = 1;
-            const id = new URLSearchParams(location.search).get("id");
-
-            (async () => {
+            let currentlyPlayingId = "";
+            
+            const loadVideoTranscript = async (id) => {
+              console.log("Getting transcript for video id", id);
               try {
                 const result = await fetch(`https://raw.githubusercontent.com/julianna-langston/ScreenReaderDescription/main/transcripts/${id}.json`)
                 const json = await result.json();
@@ -79,24 +80,48 @@ <h2>Troubleshooting</h2>
               }catch(err){
                 alert("Warning: Requested video does not have audio transcripts available.");
               }
-            })();
-
+            }
+            
             var player;
             function onYouTubeIframeAPIReady() {
-              player = new YT.Player("player", {
-                height: "390",
-                width: "640",
-                videoId: id,
-                playerVars: {
-                  fs: 0,
-                  playsinline: 1
-                },
-                events: {
-                  onReady: onPlayerReady,
-                  onStateChange: onPlayerStateChange,
-                  onPlaybackRateChange: onPlayerPlaybackRateChange,
-                }
-              });
+              const params = new URLSearchParams(location.search);
+              if(params.has("id")){
+                const videoId = new URLSearchParams(location.search).get("id");
+                player = new YT.Player("player", {
+                  height: "390",
+                  width: "640",
+                  videoId,
+                  playerVars: {
+                    fs: 0,
+                    playsinline: 1
+                  },
+                  events: {
+                    onReady: onPlayerReady,
+                    onStateChange: onPlayerStateChange,
+                    onPlaybackRateChange: onPlayerPlaybackRateChange,
+                  }
+                });
+              }else{
+                const playlist = params.get("list");
+                
+                player = new YT.Player("player", {
+                  height: "390",
+                  width: "640",
+                  playerVars: {
+                    fs: 0,
+                    playsinline: 1,
+                    autoplay: 0,
+                    controls: 1,
+                    listType: "list",
+                    playlist
+                  },
+                  events: {
+                    onReady: onPlayerReady,
+                    onStateChange: onPlayerStateChange,
+                    onPlaybackRateChange: onPlayerPlaybackRateChange,
+                  }
+                });
+              }
             }
 
             function onPlayerPlaybackRateChange(event){
@@ -143,6 +168,12 @@ <h2>Troubleshooting</h2>
             };
 
             function onPlayerStateChange({ target, data }) {
+              const playingVideoId = target.playerInfo.videoData.video_id;
+              if(currentlyPlayingId !== playingVideoId && playingVideoId){
+                loadVideoTranscript(playingVideoId);
+                currentlyPlayingId = playingVideoId;
+              }
+
               if (data === 1) {
                 playTranscriptFrom(Math.floor(target.getCurrentTime()), playRate);
               } else {