move yt embed script to its own source file (#9337)

bskyweb/cmd/bskyweb/server.go

@@ -223,7 +223,7 @@ func serve(cctx *cli.Context) error {
 		e.GET("/robots.txt", echo.WrapHandler(staticHandler))
 	}
 
-	e.GET("/iframe/youtube.html", echo.WrapHandler(staticHandler))
+	e.GET("/iframe/*", echo.WrapHandler(staticHandler))
 	e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", staticHandler)), func(next echo.HandlerFunc) echo.HandlerFunc {
 		return func(c echo.Context) error {
 			c.Response().Before(func() {

bskyweb/static/iframe/youtube.html

@@ -16,40 +16,4 @@
     }
 </style>
 <div class="container"><div class="video" id="player"></div></div>
-<script>
+<script src="youtube.js"></script>
-  const url = new URL(window.location)
-  const viewport = document.querySelector("meta[name=viewport]")
-
-  const tag = document.createElement("script")
-  tag.src = "https://www.youtube.com/iframe_api"
-  const firstScriptTag = document.getElementsByTagName('script')[0];
-  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
-
-  let player
-  function onYouTubeIframeAPIReady() {
-    let videoId = url.searchParams.get('videoId')
-    videoId = decodeURIComponent(videoId)
-    videoId = videoId.replace(/[^a-zA-Z0-9_-]/g, "")
-    if (videoId.length !== 11) throw new Error("Invalid video ID")
-
-    let start = url.searchParams.get('start')
-    start = start.replace(/[^0-9]/g, "")
-
-    player = new YT.Player('player', {
-      width: "1000",
-      height: "1000",
-      videoId,
-      playerVars: {
-        autoplay: 1,
-        start,
-        rel: 0,
-        loop: 0,
-        playsinline: 1,
-        origin: url.origin
-      },
-    });
-  }
-  function onPlayerReady(event) {
-    event.target.playVideo();
-  }
-</script>

bskyweb/static/iframe/youtube.js

@@ -0,0 +1,35 @@
+const url = new URL(window.location)
+const viewport = document.querySelector("meta[name=viewport]")
+
+const tag = document.createElement("script")
+tag.src = "https://www.youtube.com/iframe_api"
+const firstScriptTag = document.getElementsByTagName('script')[0];
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+let player
+function onYouTubeIframeAPIReady() {
+  let videoId = url.searchParams.get('videoId')
+  videoId = decodeURIComponent(videoId)
+  videoId = videoId.replace(/[^a-zA-Z0-9_-]/g, "")
+  if (videoId.length !== 11) throw new Error("Invalid video ID")
+
+  let start = url.searchParams.get('start')
+  start = start.replace(/[^0-9]/g, "")
+
+  player = new YT.Player('player', {
+    width: "1000",
+    height: "1000",
+    videoId,
+    playerVars: {
+      autoplay: 1,
+      start,
+      rel: 0,
+      loop: 0,
+      playsinline: 1,
+      origin: url.origin
+    },
+  });
+}
+function onPlayerReady(event) {
+  event.target.playVideo();
+}