From 5cec2a056605e7225eede26f5fa3131930c7579e Mon Sep 17 00:00:00 2001
From: kirari04 <lev@saminskij.ch>
Date: Wed, 17 Jan 2024 19:10:53 +0100
Subject: [PATCH] added new old example player

---
 controllers/PlayerController.go |   3 +
 views/player.old.html           | 674 ++------------------------------
 2 files changed, 32 insertions(+), 645 deletions(-)
diff --git a/controllers/PlayerController.go b/controllers/PlayerController.go
index dbf1a21..b681bc2 100755
--- a/controllers/PlayerController.go
+++ b/controllers/PlayerController.go
@@ -81,6 +81,7 @@ func PlayerController(c *fiber.Ctx) error {
 
 	// List audios
 	var jsonAudios []map[string]string
+	var firstAudio string
 	for _, audioItem := range dbLink.File.Audios {
 		if audioItem.Ready {
 			jsonAudios = append(jsonAudios, map[string]string{
@@ -90,6 +91,7 @@ func PlayerController(c *fiber.Ctx) error {
 				"lang": audioItem.Lang,
 				"file": audioItem.OutputFile,
 			})
+			firstAudio = audioItem.UUID
 		}
 	}
 	rawAudios, _ := json.Marshal(jsonAudios)
@@ -140,6 +142,7 @@ func PlayerController(c *fiber.Ctx) error {
 		"Qualitys":      string(rawQuality),
 		"Subtitles":     string(rawSubtitles),
 		"Audios":        string(rawAudios),
+		"AudioUUID":     firstAudio,
 		"Webhooks":      string(rawWebhooks),
 		"StreamIsReady": streamIsReady,
 		"UUID":          requestValidation.UUID,
diff --git a/views/player.old.html b/views/player.old.html
index 00fd8b6..228a784 100755
--- a/views/player.old.html
+++ b/views/player.old.html
@@ -1,648 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="twitter:title" content="{{ .Title }}" />
-    <meta name="og:image:width" content="1920" />
-    <meta name="og:image:height" content="1080" />
-    <meta name="title" content="{{ .Title }}" />
-    <meta name="description" content="{{ .Description }}" />
-    <meta name="og:title" content="{{ .Title }}" />
-    <meta name="og:description" content="{{ .Description }}" />
-    <meta name="og:image" content="{{ .Thumbnail }}" />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:image" content="{{ .Thumbnail}}" />
-    <title>{{ .Title }}</title>
-    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
-    <link rel="preconnect" href="https://cdn.plyr.io" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.7/plyr.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@5/dark.min.css"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap"
-      rel="stylesheet"
-    />
-    <style>
-      html,
-      body,
-      .container {
-        height: 100%;
-        width: 100%;
-        padding: 0;
-        margin: 0;
-        background: #1a1927;
-        position: fixed;
-        left: 0;
-        top: 0;
-        font-family: "Ubuntu", sans-serif;
-        overflow: hidden;
-      }
 
-      .plyr__caption {
-        font-size: 20pt;
-      }
-
-      .plyr {
-        height: 100%;
-      }
-
-      .subtitle_container {
-        pointer-events: none;
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 10;
-        overflow: hidden;
-      }
-
-      .plyr__controls {
-        justify-content: flex-start;
-      }
-
-      .plyr__controls .plyr__progress__container {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        padding: calc(var(--plyr-control-spacing, 10px) * 0.7) !important;
-      }
-
-      .plyr__controls__item.plyr__time.plyr__time--current {
-        margin-left: auto;
-      }
-    </style>
-  </head>
-
-  <body>
-    <div class="container">
-      <div class="subtitle_container">
-        <div class="subs"></div>
-      </div>
-      <video controls crossorigin playsinline poster="{{ .Thumbnail }}"></video>
-    </div>
-    <script>
-      let Qualitys = JSON.parse(decodeURI("{{.Qualitys}}"));
-      if (Qualitys == null) Qualitys = [];
-      let Subtitles = JSON.parse(decodeURI("{{.Subtitles}}"));
-      if (Subtitles == null) Subtitles = [];
-      let Audios = JSON.parse(decodeURI("{{.Audios}}"));
-      if (Audios == null) Audios = [];
-      const UUID = "{{.UUID}}";
-      const PROJECTURL = "{{.PROJECTURL}}";
-      const TITLE = "{{.Title}}";
-      const StreamIsReady = "{{.StreamIsReady}}" == "true";
-    </script>
-    <script src="https://cdn.plyr.io/3.7.7/plyr.js"></script>
-    <script src="https://cdn.rawgit.com/video-dev/hls.js/18bb552/dist/hls.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/assjs/dist/ass.min.js"></script>
-    <script>
-      const FOLDER = "{{.Folder}}";
-      const HLSENABLED = Hls.isSupported();
-      // const HLSENABLED = false;
-      let source = `${FOLDER}/${UUID}/stream/muted/master.m3u8`;
-      let currentValue = "";
-      let currentAudioValue = "";
-      const setAudioSource = (HlsAudioIndex) => {
-        currentAudioValue = `${HlsAudioIndex}`;
-        source = `${FOLDER}/${UUID}/${Audios[HlsAudioIndex].uuid}/stream/master.m3u8`;
-      };
-      const urlParams = new URLSearchParams(window.location.search);
-      if (urlParams.get("audio")) {
-        setAudioSource(parseInt(urlParams.get("audio")));
-      } else {
-        let HlsAudioIndex = Audios.findIndex((Audio) => Audio.type == "hls");
-        if (HlsAudioIndex !== -1) setAudioSource(HlsAudioIndex);
-      }
-
-      const video = document.querySelector("video");
-
-      const Toast = Swal.mixin({
-        target: ".container",
-        toast: true,
-        position: "top-end",
-        showConfirmButton: false,
-        timer: 10000,
-        timerProgressBar: true,
-        showCloseButton: true,
-        didOpen: (toast) => {
-          toast.addEventListener("mouseenter", Swal.stopTimer);
-          toast.addEventListener("mouseleave", Swal.resumeTimer);
-        },
-      });
-
-      const ShortToast = Swal.mixin({
-        target: ".container",
-        toast: true,
-        position: "top-end",
-        showConfirmButton: false,
-        timer: 1000,
-        timerProgressBar: true,
-      });
-
-      if (!StreamIsReady) {
-        Swal.fire({
-          target: ".container",
-          title:
-            "The file is not ready yet. Please wait a minute and reload the website again.",
-          confirmButtonText: "Reload Website",
-        }).then((result) => {
-          if (result.isConfirmed) {
-            window.location.reload();
-          }
-        });
-        video.style.position = "absolute";
-        video.style.left = "0px";
-        video.style.top = "0px";
-        video.style.width = "100%";
-        video.style.height = "100%";
-      }
-
-      setInterval(() => {
-        if (window.ass) {
-          window.ass.resize();
-        }
-      }, 1000);
-
-      function Build() {
-        if (!StreamIsReady) return;
-        // if (window.hls) window.hls.destroy();
-        // if (window.player) window.player.destroy();
-
-        const defaultOptions = {
-          seekTime: 5,
-          fullscreen: {
-            enabled: true,
-            fallback: true,
-            iosNative: false,
-            container: iOS() ? null : ".container",
-          },
-          captions: {
-            active: iOS() || !HLSENABLED,
-            language: "auto",
-            update: false,
-          },
-          iconUrl: "/icons/svgs.svg",
-          keyboard: { focused: false, global: true },
-          controls: () => {
-            let controls = [
-              "progress", // The progress bar and scrubber for playback and buffering
-              "play-large", // The large play button in the center
-              "play", // Play/pause playback
-              "rewind", // Rewind by the seek time (default 10 seconds)
-              "fast-forward", // Fast forward by the seek time (default 10 seconds)
-              "current-time", // The current time of playback
-              "duration", // The full duration of the media
-            ];
-            if (iOS() || !HLSENABLED) {
-              controls.push("captions");
-            }
-            controls.push(
-              ...[
-                "mute", // Toggle mute
-                "volume", // Volume control
-                "settings", // Settings menu
-                "pip", // Picture-in-picture (currently Safari only)
-                "airplay", // Airplay (currently Safari only)
-              ]
-            );
-            controls.push("fullscreen");
-            return controls;
-          },
-        };
-
-        // apple native player
-        if (video.canPlayType("application/vnd.apple.mpegurl")) {
-          video.src = source;
-          PlayerInit(defaultOptions);
-
-          // hls.js player
-        } else if (HLSENABLED) {
-          const hls = new Hls();
-          hls.loadSource(source);
-          hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
-            const availableQualities = hls.levels.map((l) => l.height);
-            availableQualities.unshift(0); //prepend 0 to quality array
-
-            // Add new qualities to option
-            defaultOptions.quality = {
-              default: 0, //Default - AUTO
-              options: availableQualities,
-              forced: true,
-              onChange: (e) => updateQuality(e),
-            };
-            // Add Auto Label
-            defaultOptions.i18n = {
-              qualityLabel: {
-                0: "Auto",
-              },
-            };
-            hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
-              var span = document.querySelector(
-                ".plyr__menu__container [data-plyr='quality'][value='0'] span"
-              );
-              if (hls.autoLevelEnabled) {
-                span.innerHTML = `AUTO (${hls.levels[data.level].height}p)`;
-              } else {
-                span.innerHTML = `AUTO`;
-              }
-            });
-            PlayerInit(defaultOptions);
-          });
-
-          hls.attachMedia(video);
-          window.hls = hls;
-          // use fallback url (webm or mp4)
-        } else if (Qualitys.length > 0) {
-          PlayerInit(defaultOptions);
-          // the ass subtitles will be overwritten here because devices that dont suport any hls probably will have issues with ass too
-          window.player.source = {
-            type: "video",
-            title: "Example title",
-            sources: Qualitys.map((Quality) => {
-              return {
-                src: Quality.url,
-                type: "video/mp4",
-                size: Quality.height,
-              };
-            }),
-            poster: "{{.Thumbnail}}",
-            tracks: Subtitles.filter((e) => e.type == "vtt").map(
-              (Subtitle, i) => {
-                return {
-                  kind: "captions",
-                  label: Subtitle.name,
-                  srclang: Subtitle.lang,
-                  src: URL.createObjectURL(
-                    new Blob([b64DecodeUnicode(Subtitle.data)], {
-                      type: "text/plain",
-                    })
-                  ),
-                  default: i === 0,
-                };
-              }
-            ),
-          };
-        } else {
-          // show error message
-          PlayerInit(defaultOptions);
-          Toast.fire({
-            icon: "error",
-            title: `Your Browser doesn't support Hls and currently there is no alternativ stream available.`,
-          });
-        }
-
-        function updateQuality(newQuality) {
-          if (newQuality === 0) {
-            window.hls.currentLevel = -1; //Enable AUTO quality if option.value = 0
-          } else {
-            window.hls.levels.forEach((level, levelIndex) => {
-              if (level.height === newQuality) {
-                console.log("Found quality match with " + newQuality);
-                window.hls.currentLevel = levelIndex;
-              }
-            });
-          }
-        }
-      }
-
-      function addButton(selectorName, iconId, buttonName) {
-        const playerControlsEl = document.querySelector(
-          `.plyr__controls ${selectorName}`
-        );
-        const randomId = Math.floor(Math.random() * 10000);
-        const id = `plyr__control-${randomId}`;
-        let button = document.createElement("button");
-        button.setAttribute("id", id);
-        button.classList.add("plyr__control");
-        button.innerHTML = `<svg role="presentation"><use xlink:href="/icons/svgs.svg#${iconId}"></use></svg>\n<span class="plyr__tooltip" role="tooltip">${buttonName}</span>`;
-        playerControlsEl.insertAdjacentElement("afterend", button);
-        return document.getElementById(id);
-      }
-
-      function PlayerInit(options) {
-        // init player
-        if (iOS()) {
-          // add subtitles inside video object
-            let nth = 0;
-            for (const [index, subItem] of Subtitles.entries()) {
-              if (subItem.type !== "vtt") {
-                continue;
-              }
-              nth++;
-              let track = document.createElement("track");
-              if (nth == 1) track.default = true;
-              track.setAttribute("kind", "captions");
-              track.setAttribute("label", subItem.name);
-              track.setAttribute("srclang", subItem.lang);
-              track.src = URL.createObjectURL(
-                new Blob([b64DecodeUnicode(Subtitles[index].data)], {
-                  type: "text/plain",
-                })
-              );
-              video.append(track);
-            }
-        }
-        var player = new Plyr(video, options);
-        // console.log("player", player);
-        player.on("ready", (event) => {
-          if (window.ass) {
-            setTimeout(() => {
-              window.ass.resize();
-            }, 1000);
-          }
-        });
-        player.on("enterfullscreen", (event) => {
-          if (window.ass) {
-            setTimeout(() => {
-              window.ass.resize();
-            }, 1000);
-          }
-        });
-        player.on("exitfullscreen", (event) => {
-          if (window.ass) {
-            setTimeout(() => {
-              window.ass.resize();
-            }, 1000);
-          }
-        });
-        window.player = player;
-
-        // preselect subtitles
-        let lastUsedLang = localStorage.getItem("lastusedlang");
-        if (lastUsedLang) {
-          let lastUsedIndex = Subtitles.findIndex(
-            (S) => S.lang === lastUsedLang
-          );
-          if (lastUsedIndex !== -1) {
-            console.log(
-              "found last used sub: ",
-              Subtitles[lastUsedIndex].lang,
-              Subtitles[lastUsedIndex].name
-            );
-            currentValue = lastUsedIndex;
-            SubtitleInit();lastUsedIndex
-          } else {
-            currentValue = "";
-          }
-        }
-
-        // init captions
-        CaptionInit();
-
-        // init audios
-        AudioInit();
-
-        // save position
-        setInterval(() => {
-          if (!window.player.paused) {
-            localStorage.setItem(`POSITION-${UUID}`, window.player.currentTime);
-          }
-        }, 1000);
-
-        const oldPosition = parseInt(localStorage.getItem(`POSITION-${UUID}`));
-        if (oldPosition > 0) {
-          Swal.fire({
-            target: ".container",
-            title: "Do you want to start where you left last time?",
-            showDenyButton: true,
-            confirmButtonText: "Yes",
-            denyButtonText: "No",
-          }).then((result) => {
-            if (result.isConfirmed) {
-              window.player.currentTime = oldPosition;
-            }
-          });
-        }
-      }
-
-      function b64DecodeUnicode(str) {
-        // Going backwards: from bytestream, to percent-encoding, to original string.
-        return decodeURIComponent(
-          atob(str)
-            .split("")
-            .map(function (c) {
-              return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
-            })
-            .join("")
-        );
-      }
-
-      function CaptionInit() {
-        if (iOS()) {
-          return;
-        }
-        const plyr_captions_on = addButton(
-          ".plyr__time--duration",
-          "plyr-captions-on",
-          "Captions"
-        );
-        plyr_captions_on.setAttribute("hidden", "");
-        const plyr_captions_off = addButton(
-          ".plyr__time--duration",
-          "plyr-captions-off",
-          "Captions"
-        );
-
-        const open_caption_settings = (isEmptyCallback) => {
-          let inputOptions = {};
-          Subtitles.forEach((Subtitle, index) => {
-            if (!inputOptions[`${Subtitle.lang}`]) {
-              inputOptions[`${Subtitle.lang}`] = {};
-            }
-            if (Subtitle.type === "ass") {
-              inputOptions[`${Subtitle.lang}`][`${index}`] = Subtitle.name;
-            }
-          });
-          Swal.fire({
-            target: ".container",
-            title: "",
-            input: "select",
-            inputOptions: inputOptions,
-            inputPlaceholder: "Select Subtitle",
-            confirmButtonText: "Enable",
-            cancelButtonText: "Disable",
-            inputValue: currentValue,
-            showCancelButton: true,
-            inputValidator: (value) => {
-              currentValue = value;
-              if (!value) {
-                isEmptyCallback(true);
-              } else {
-                isEmptyCallback(false);
-              }
-              if (value) {
-                SubtitleInit(parseInt(value));
-              }
-            },
-          }).then((result) => {
-            if (!result.isConfirmed) {
-              currentValue = "";
-              isEmptyCallback(true);
-            }
-          });
-        };
-
-        const plyr_captions_toggle = (empty) => {
-          if (empty) {
-            // this should disable the subtitles
-            plyr_captions_on.setAttribute("hidden", "");
-            plyr_captions_off.removeAttribute("hidden", "");
-            if (window.ass) {
-              window.ass.destroy();
-              window.ass = undefined;
-            }
-            localStorage.setItem("lastusedlang", "");
-          } else {
-            //this should enable the subs
-            plyr_captions_on.removeAttribute("hidden", "");
-            plyr_captions_off.setAttribute("hidden", "");
-            if (window.ass) {
-              window.ass.show();
-            }
-          }
-        };
-
-        plyr_captions_on.onclick = () => {
-          open_caption_settings((empty) => plyr_captions_toggle(empty));
-        };
-
-        plyr_captions_off.onclick = () => {
-          open_caption_settings((empty) => plyr_captions_toggle(empty));
-        };
-
-        if (currentValue !== "") {
-          plyr_captions_toggle(false);
-        }
-      }
-
-      function SubtitleInit(index) {
-        if (iOS()) {
-          return;
-        }
-        if (window.ass) {
-          window.ass.destroy();
-          window.ass = undefined;
-        }
-        const ass = new ASS(b64DecodeUnicode(Subtitles[index].data), video, {
-          resampling: "video_width",
-          container: document.querySelector(".subs"),
-        });
-        ass.show();
-        window.ass = ass;
-        localStorage.setItem("lastusedlang", Subtitles[index].lang);
-
-        ShortToast.fire({
-          icon: "info",
-          title: `Enabled ${Subtitles[index].name} [${Subtitles[index].lang}]`,
-        });
-      }
-
-      function AudioInit() {
-        if (!iOS() && !HLSENABLED) {
-          return;
-        }
-        const plyr_audio = addButton(
-          ".plyr__time--duration",
-          "plyr-audios",
-          "Audios"
-        );
-
-        const open_caption_settings = (isEmptyCallback) => {
-          let inputOptions = {};
-          Audios.forEach((Audio, index) => {
-            if (!inputOptions[`${Audio.lang}`]) {
-              inputOptions[`${Audio.lang}`] = {};
-            }
-            if (Audio.type === "hls") {
-              inputOptions[`${Audio.lang}`][`${index}`] = Audio.name;
-            }
-          });
-          Swal.fire({
-            target: ".container",
-            title: "",
-            input: "select",
-            inputOptions: inputOptions,
-            inputPlaceholder: "Select Audio",
-            confirmButtonText: "Choose",
-            inputValue: currentAudioValue,
-            inputValidator: (value) => {
-              currentAudioValue = value;
-              if (!value) {
-                if (Audios.length == 0) {
-                  isEmptyCallback(true);
-                } else {
-                  return "Choose one audio language.";
-                }
-              } else {
-                isEmptyCallback(false);
-              }
-              if (value) {
-                setAudioSource(parseInt(value));
-              }
-            },
-          }).then((result) => {
-            //nothing
-          });
-        };
-
-        const plyr_audios_toggle = (empty) => {
-          if (currentAudioValue != "" && empty == false) {
-            // change hls audio or switch direct audio channel
-            if (video.canPlayType("application/vnd.apple.mpegurl")) {
-              if (source != video.source) {
-                video.src = source;
-              }
-            } else if (window.hls) {
-              window.location = `${
-                new URL(window.location).pathname
-              }?audio=${currentAudioValue}`;
-            }
-          }
-        };
-
-        plyr_audio.onclick = () => {
-          open_caption_settings((empty) => plyr_audios_toggle(empty));
-        };
-      }
-
-      function iOS() {
-        return (
-          [
-            "iPad Simulator",
-            "iPhone Simulator",
-            "iPod Simulator",
-            "iPad",
-            "iPhone",
-            "iPod",
-          ].includes(navigator.platform) ||
-          // iPad on iOS 13 detection
-          (navigator.userAgent.includes("Mac") && "ontouchend" in document)
-        );
-      }
-
-      // subtitle sizing & positioning
-      window.addEventListener("resize", () => {
-        if (window.ass) {
-          window.ass.resize();
-        }
-      });
-
-      document.addEventListener("DOMContentLoaded", () => {
-        try {
-          Build();
-        } catch (e) {
-          alert("Some Error happend");
-        }
-      });
-    </script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="twitter:title" content="{{ .Title }}" />
+  <meta name="og:image:width" content="1920" />
+  <meta name="og:image:height" content="1080" />
+  <meta name="title" content="{{ .Title }}" />
+  <meta name="description" content="{{ .Description }}" />
+  <meta name="og:title" content="{{ .Title }}" />
+  <meta name="og:description" content="{{ .Description }}" />
+  <meta name="og:image" content="{{ .Thumbnail }}" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:image" content="{{ .Thumbnail}}" />
+  <title>{{ .Title }}</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack@^1.0.0/player/styles/default/theme.min.css" />
+  <link rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/vidstack@^1.0.0/player/styles/default/layouts/video.min.css" />
+</head>
+
+<body>
+  <media-player title="{{.Title}}" src="{{.Folder}}/{{.UUID}}/{{.AudioUUID}}/stream/master.m3u8?jwt={{.JWT}}">
+    <media-provider></media-provider>
+    <media-video-layout></media-video-layout>
+  </media-player>
+  <script src="https://cdn.jsdelivr.net/npm/vidstack@^1.0.0/cdn/with-layouts/vidstack.js" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
