fix URL changes, re-gimmes, etc.

src/Player.svelte

@@ -6,15 +6,18 @@
   export let audioId;
   export let videoId;
 
+  // @ts-ignore
+  let ytReady = Boolean(window.YT);
+
   let videoUrl = "";
   let audioUrl = "";
 
-  $: videoCode = extract(videoUrl);
-  $: audioCode = extract(audioUrl);
-
   let videoReady = false;
   let audioReady = false;
 
+  let videoEl;
+  let audioEl;
+
   let videoPlayer;
   let audioPlayer;
 
@@ -27,12 +30,7 @@
     }
   }
 
-  onMount(async () => {
+  async function init() {
-    const tag = document.createElement("script");
-    tag.src = "https://www.youtube.com/iframe_api";
-    const firstScriptTag = document.getElementsByTagName("script")[0];
-    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
     const currentResult = await fetch("grid.php");
     if (!currentResult.ok) {
       alert(currentResult.status);
@@ -42,11 +40,13 @@
     videoUrl = current.find((link) => link.id == videoId).url;
     audioUrl = current.find((link) => link.id == audioId).url;
 
+    videoEl.innerHTML = "";
+    let videoPlayerEl = document.createElement("div");
+    videoEl.appendChild(videoPlayerEl);
+
     // @ts-ignore
-    window.onYouTubeIframeAPIReady = () => {
+    videoPlayer = new YT.Player(videoPlayerEl, {
-      // @ts-ignore
+      videoId: extract(videoUrl),
-      videoPlayer = new YT.Player("videoPlayer", {
-        videoId: videoCode,
       events: {
         onReady: () => {
           videoReady = true;
@@ -54,18 +54,42 @@
       },
     });
 
+    audioEl.innerHTML = "";
+    let audioPlayerEl = document.createElement("div");
+    audioEl.appendChild(audioPlayerEl);
+
     // @ts-ignore
-      audioPlayer = new YT.Player("audioPlayer", {
+    audioPlayer = new YT.Player(audioPlayerEl, {
-        videoId: audioCode,
+      videoId: extract(audioUrl),
       events: {
         onReady: () => {
           audioReady = true;
         },
       },
     });
+  }
+
+  onMount(() => {
+    const tag = document.createElement("script");
+    tag.src = "https://www.youtube.com/iframe_api";
+    const firstScriptTag = document.getElementsByTagName("script")[0];
+    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+    // @ts-ignore
+    window.onYouTubeIframeAPIReady = () => {
+      ytReady = true;
     };
   });
 
+  $: {
+    audioId;
+    videoId;
+
+    if (ytReady) {
+      init();
+    }
+  }
+
   function go() {
     videoPlayer.playVideo();
     videoPlayer.mute();
@@ -84,10 +108,10 @@
   <div id="player">
     <h2 title={videoUrl}>Video</h2>
     {#if !videoReady}<Spinner />{/if}
-    <div id="videoPlayer" />
+    <div id="videoPlayer" bind:this={videoEl} />
     <h2 title={audioUrl}>Audio</h2>
     {#if !audioReady}<Spinner />{/if}
-    <div id="audioPlayer" />
+    <div id="audioPlayer" bind:this={audioEl} />
   </div>
 
   <Link class="link" to="/">BACK</Link>
@@ -118,7 +142,7 @@
     text-decoration: none;
   }
 
-  #audioPlayer {
+  :global(#audioPlayer > *) {
     height: 128px;
   }