From 92c31e093d971687b70f06efc0c94e63e23143f2 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 4 Jul 2024 11:10:48 +0200
Subject: [PATCH] hugo: move youtube script out of shortcode template

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/_default/baseof.html          | 53 +++++++++++++++++++++++++
 layouts/shortcodes/youtube-embed.html | 56 +--------------------------
 2 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index f2e5acd62b..0f198ee01c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -44,6 +44,59 @@
     </div>
   </main>
   <footer>{{ partialCached "footer.html" . }}</footer>
+  {{ with (.Store.Get "youtube") }}
+    <script>
+    (function() {
+      var tag = document.createElement('script');
+      tag.id = "youtube-iframe-api";
+      tag.src = "https://www.youtube.com/iframe_api";
+      var firstScriptTag = document.getElementsByTagName('script')[0];
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+      window.onYouTubeIframeAPIReady = function() {
+        var youtubeDivs = document.querySelectorAll(".youtube-video");
+        for (var i = 0; i < youtubeDivs.length; i++) {
+          createPlayer(youtubeDivs[i].id, youtubeDivs[i].dataset.videoId);
+        }
+      }
+
+      function createPlayer(domElementId, videoId) {
+        new YT.Player(domElementId, {
+          width: "100%",
+          height: "100%",
+          videoId: videoId,
+          playerVars: {
+            'rel': 0,
+            'iv_load_policy': 3,
+            'enablejsapi': 1,
+            'origin': window.location.origin
+          },
+          events: {
+            'onStateChange': function (event) {
+              onPlayerStateChange(event, videoId);
+            }
+          }
+        });
+      }
+
+      function onPlayerStateChange(event, videoId) {
+        if (window.heap === undefined) return;
+
+        var properties = {
+          video_id: videoId,
+          page_path: window.location.pathname,
+          page_title: document.title,
+        };
+
+        if (event.data == YT.PlayerState.PLAYING) {
+          heap.track("Video Play", properties);
+        } else if (event.data == YT.PlayerState.PAUSED) {
+          heap.track("Video Paused", properties);
+        }
+      }
+    })();
+    </script>
+  {{ end }}
 </body>
 
 </html>
diff --git a/layouts/shortcodes/youtube-embed.html b/layouts/shortcodes/youtube-embed.html
index baf6682055..9789b226ed 100644
--- a/layouts/shortcodes/youtube-embed.html
+++ b/layouts/shortcodes/youtube-embed.html
@@ -1,56 +1,2 @@
+{{- .Page.Store.Set "youtube" true -}}
 <div id="youtube-player-{{ .Get 0 }}" data-video-id="{{ .Get 0 }}" class="youtube-video aspect-video w-full"></div>
-{{ if page.Scratch.Get "youtube-embed" | default "incomplete" | ne "setup" }} 
-{{ page.Scratch.Set "youtube-embed" "setup" }}
-<script>
-(function() {
-  var tag = document.createElement('script');
-  tag.id = "youtube-iframe-api";
-  tag.src = "https://www.youtube.com/iframe_api";
-  var firstScriptTag = document.getElementsByTagName('script')[0];
-  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-  window.onYouTubeIframeAPIReady = function() {
-    var youtubeDivs = document.querySelectorAll(".youtube-video");
-    for (var i = 0; i < youtubeDivs.length; i++) {
-      createPlayer(youtubeDivs[i].id, youtubeDivs[i].dataset.videoId);
-    }
-  }
-
-  function createPlayer(domElementId, videoId) {
-    new YT.Player(domElementId, {
-      width: "100%",
-      height: "100%",
-      videoId: videoId,
-      playerVars: {
-        'rel': 0,
-        'iv_load_policy': 3,
-        'enablejsapi': 1,
-        'origin': window.location.origin
-      },
-      events: {
-        'onStateChange': function (event) {
-          onPlayerStateChange(event, videoId);
-        }
-      }
-    });
-  }
-
-  function onPlayerStateChange(event, videoId) {
-    if (window.heap === undefined) return;
-
-    var properties = {
-      video_id: videoId,
-      page_path: window.location.pathname,
-      page_title: document.title,
-    };
-
-    if (event.data == YT.PlayerState.PLAYING) {
-      heap.track("Video Play", properties);
-    } else if (event.data == YT.PlayerState.PAUSED) {
-      heap.track("Video Paused", properties);
-    }
-  }
-})();
-  
-</script>
-{{ end }}