Moved regio43 to base HTML template

baseTemplates/baseTemplates.go

@@ -1,6 +1,21 @@
 package baseTemplates
 
-import "embed"
+import (
+	"embed"
+	"html/template"
+	"net/http"
+)
 
 //go:embed templates/*
 var FS embed.FS
+
+func WithBase(w http.ResponseWriter, templateData any, patterns ...string) {
+	args := append([]string{"templates/base.tmpl"}, patterns...)
+	tmpl := template.Must(template.ParseFS(FS, args...))
+
+	err := tmpl.ExecuteTemplate(w, "base", templateData)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+}

baseTemplates/templates/regio43.tmpl

@@ -0,0 +1,49 @@
+{{ define "bodyClass" }}page-regio43{{ end }}
+
+{{ define "content" }}
+<div class="video-zone max-80">
+    <video id="video-player" controls></video>
+</div>
+
+<h1>Regio43</h1>
+
+<main class="max-80">
+    {{ range .PlaylistItems }}
+    <div class="playlist-item" data-videoid="{{ .VideoId }}">
+        <img src="{{ .ThumbnailUrl }}">
+        <p>
+            <a href="https://invidious.prettysunflower.moe/watch?v={{ .VideoId }}">
+                <strong>{{ .Title }}</strong><br>
+                {{ .Channel.Name }}
+            </a>
+        </p>
+    </div>
+    {{ end }}
+</main>
+
+<script>
+    const playlistItems = document.getElementsByClassName("playlist-item");
+    const videoBlock = document.querySelector(".video-zone video");
+
+    function loadVideo(videoId) {
+        videoBlock.src = `https://invidious.prettysunflower.moe/latest_version?local=true&id=${videoId}`;
+        videoBlock.currentTime = 0;
+        videoBlock.play();
+    }
+
+    let index = 0;
+
+    playlistItems[index].classList.add('active');
+    loadVideo(playlistItems[index].dataset.videoid);
+
+    videoBlock.addEventListener('ended', () => {
+        playlistItems[index].classList.remove('active');
+        index = index + 1;
+
+        if (index < playlistItems.length) {
+            playlistItems[index].classList.add('active');
+            loadVideo(playlistItems[index].dataset.videoid);
+        }
+    })
+</script>
+{{ end }}