Upload 5 files

.gitattributes

@@ -35,3 +35,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.mp3 filter=lfs diff=lfs merge=lfs -text
 *.exe filter=lfs diff=lfs merge=lfs -text
+v1.mp4 filter=lfs diff=lfs merge=lfs -text

hold.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a824a9cf88b465a99563af784db9820f300f83ff33a910dbfc53ddfb57b46fa5
+size 8558828

index.css

@@ -0,0 +1,329 @@
+html {
+  font-family: "Inter", sans-serif;
+}
+
+body {
+  margin: 0;
+<<<<<<< HEAD
+  padding: 0;
+  overflow-x: hidden; /* Enable scrolling on the y-axis */
+=======
+  display: flex;
+  flex-direction: column;
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+}
+
+/* GTA Text */
+h1 {
+  text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
+}
+/* Vice City Text */
+h2 {
+  font-family: "Satisfy", cursive;
+  text-shadow: 0 0 0.125em rgb(192 38 211 / 0.5), 0 0 0.45em currentColor;
+}
+
+<<<<<<< HEAD
+#backgroundVideo video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh; /* Adjust the height as needed */
+  object-fit: cover;
+}
+
+#backgroundVideo {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh; /* Adjust the height as needed */
+}
+
+#placeholder {
+  position: relative;
+  left: 0;
+  width: 100%;
+  height: 75vh; /* Adjust the height as needed */
+  background-color: transparent; /* Set the background color to transparent */
+  z-index: 20; /* Place the background behind other elements */
+}
+
+=======
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+div #logo_container::before {
+  z-index: 20;
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 157%;
+  left: 0;
+  position: absolute;
+  transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
+}
+
+.container {
+  position: relative;
+  z-index: 20;
+}
+
+#videoElement {
+  opacity: 0;
+<<<<<<< HEAD
+  width: 80%;
+  transition: opacity 3s ease-in-out;
+  margin-top: 155px;
+
+=======
+  transition: opacity 3s ease-in-out;
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+}
+
+#videoElement.fade-in {
+  opacity: 1;
+<<<<<<< HEAD
+=======
+  margin-top: 155px;
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+
+}
+
+.fade-out {
+  opacity: 0.09;
+<<<<<<< HEAD
+  transition: opacity 16s ease-in-out;
+}
+
+/* Modern React Native Design Principles */
+/* 1. Minimalistic Design */
+
+#playPauseBtn {
+  background-color: #ffea8c;
+  opacity: 35;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s ease;
+}
+
+#playPauseBtn img {
+  width: 30px;
+  height: 30px;
+}
+
+#playPauseBtn:active {
+  background-color: #b1b1b186;
+  transition: background-color 0.2s ease;
+}
+
+#playPauseBtn:active img {
+  transform: scale(1.2);
+  transition: transform 0.2s ease;
+}
+
+#playPauseBtn:active::after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background-color: rgb(218, 0, 0);
+  border-radius: 50%;
+  animation: ripple 0.4s linear;
+}
+
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+/* Add a floating up and down animation */
+@keyframes floatUpDown {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+#playPauseBtn:not(:hover) {
+  animation: floatUpDown 5s ease-in-out infinite;
+}
+
+/* Tooltip */
+#playPauseBtn .tooltip-text {
+  visibility: hidden;
+  width: 120px;
+  background-color: #555;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -60px;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+#playPauseBtn:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
+
+#playPauseBtn .tooltip-text::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #555 transparent transparent transparent transparent;
+}
+
+/* Style the scrollbar */
+::-webkit-scrollbar {
+  width: 5px; /* Adjust the width as needed */
+  height: 12px; /* Adjust the height as needed */
+}
+
+::-webkit-scrollbar-track {
+  background: transparent; /* Set the background color of the scrollbar track */
+  border-radius: 10px; /* Adjust the border radius as needed */
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888888; /* Set the background color of the scrollbar thumb */
+  border-radius: 12px; /* Adjust the border radius as needed */
+}
+
+/* Responsive styles */
+=======
+  transition: opacity 8s ease-in-out;
+}
+
+/* Example responsive styles */
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+@media (max-width: 768px) {
+  #playPauseBtn {
+    width: 40px;
+    height: 40px;
+  }
+
+  #playPauseBtn img {
+    width: 25px;
+    height: 25px;
+  }
+}
+
+@media (max-width: 480px) {
+  #playPauseBtn {
+    width: 30px;
+    height: 30px;
+  }
+
+  #playPauseBtn img {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+<<<<<<< HEAD
+@media only screen and (max-width: 768px) {
+  #backgroundVideo {
+    height: auto; /* Adjust the height as needed */
+    min-height: 100vh; /* Adjust the minimum height as needed */
+  }
+}
+=======
+/* Modern React Native Design Principles */
+/* 1. Minimalistic Design */
+
+#playPauseBtn {
+  background-color: #00ff40; 
+  opacity: 35;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s ease;
+}
+
+#playPauseBtn img {
+  width: 30px;
+  height: 30px;
+}
+
+#playPauseBtn:active {
+  background-color: #b1b1b186;
+  transition: background-color 0.2s ease;
+}
+
+#playPauseBtn:active img {
+  transform: scale(1.2);
+  transition: transform 0.2s ease;
+}
+
+#playPauseBtn:active::after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  background-color: rgb(218, 0, 0);
+  border-radius: 50%;
+  animation: ripple 0.4s linear;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+/* Add a floating up and down animation */
+@keyframes floatUpDown {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-15px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+#playPauseBtn:not(:hover) {
+  animation: floatUpDown 5s ease-in-out infinite;
+}
+/* 2. Animations and Transitions */
+/* 3. Consistent Typography */
+/* 4. Accessibility */
+/* 5. Responsive Design */
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702

index.html

@@ -0,0 +1,512 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>V-Pod</title>
+    <link rel="stylesheet" href="index.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@900&family=Satisfy&display=swap"
+      rel="stylesheet"
+    />
+<<<<<<< HEAD
+    <audio id="audioPlayer" src="risenfall.mp3" autoplay></audio>
+=======
+    <audio id="audioPlayer" src="overthink.mp3" autoplay></audio>
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+
+    <script src="/mpegts.js"></script>
+  </head>
+  <body>
+    <div
+      class="h-screen w-screen grid place-content-center place-items-center overflow-hidden bg-gradient-to-b from-slate-900 to-black"
+    >
+<<<<<<< HEAD
+      <div id="backgroundVideo" class="absolute inset-0 z-0" style="background-size: cover; background-position: center;">
+        <video autoplay muted loop class="w-full h-full object-cover">
+          <source src="v1.mp4" type="video/mp4">
+        </video>
+=======
+      <div
+        id="backgroundImage"
+        class="absolute inset-0 z-0"
+        style="
+          background-image: url('https://media2.giphy.com/media/APExBZ9Aqqy4cDXNoS/giphy.gif?cid=82a1493bd7eswewmapwt3vu83f904rw67jl86246jk211bnz&ep=v1_videos_related&rid=giphy.gif&ct=v');
+          background-size: cover;
+          background-position: center;
+        "
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+      >
+        <div class="flex place-content-center justify-between flex-row">
+          <h1 class="display-flex text-4xl font-black text-teal-300">VGФЙЧ</h1>
+          <h2 class="cursive text-6xl font-bold text-fuchsia-500">forever</h2>
+        </div>
+      </div>
+      <div x-data="app()" x-init="init()" class="container mx-auto z-10">
+        
+        <div class="flex grid place-content-center justify-center w-full p-2">
+          <video
+            id="videoElement"
+<<<<<<< HEAD
+            class="aspect-video mx-auto w-auto border-4 border-6 border-orange-900/20 rounded-full"
+=======
+            class="aspect-video mx-auto w-auto border-4 border-6 border-slate-900/80 rounded-full"
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+            preload="auto"
+            muted
+            autoplay
+          ></video>
+        </div>
+        <div class="flex justify-center bottom-0 pb-2 z-10">
+          <div class="container mx-auto px-4 opacity-85">
+            <div class="flex-row items-center justify-center">
+              <div
+                class="flex items-center space-x-6 text-xs focus:cursor-pointer"
+              >
+                <template x-for="(chan, index) in channels">
+                  <div
+                    class="text-sm capitalize truncate mr-2"
+                    :class="chan.id === channel.id ? 'font-semibold cursor-pointer text-white' : 'text-slate-100 cursor-pointer hover:underline'"
+                    @click="window.location = `${window.location.origin}/?channel=${chan.id}`"
+                    x-text="chan.label"
+                  >
+                    <span
+                      class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-blue-500 opacity-75"
+                    ></span>
+                  </div>
+                </template>
+              </div>
+
+              <div class="flex-col justify-center items-center">
+                <div class="flex items-center justify-center">
+                  <a class="text-white font-bold" x-text="''"></a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex-col items-center justify-center pt-14">
+<<<<<<< HEAD
+          <a class="flex grid place-content-end	mr-8" href="https://vgony.tech">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="white">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 0 013 3v1"></path>
+=======
+          <a class="flex grid place-content-end	"">
+            <svg href="https://vgony.tech xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="white">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+            </svg>
+          </a>
+          <button
+            id="playPauseBtn"
+            type="button"
+            class="dark:bg-slate-100 dark:text-slate-700 flex-none -my-2 mx-auto w-10 h-10 rounded-full shadow-md flex items-center justify-center opacity-90"
+            aria-label="Pause"
+          >
+            <img src="headphones.svg" alt="Pause Button" width="10" height="10" />
+<<<<<<< HEAD
+            <a class="tooltip-text">1 New Message</a>
+          </button>
+=======
+          </button>
+          
+>>>>>>> 58d66b5f5888eeb66f0ca862510b029273126702
+        </div>
+      </div>
+    </div>
+    <div id="placeholder" class="relative inset-0 z-0"></div>
+
+    <script>
+// Get the audio element and play/pause button
+// Get the audio element and play/pause button
+const audioPlayer = document.getElementById('audioPlayer');
+const playPauseBtn = document.getElementById('playPauseBtn');
+
+// Array of audio file paths
+const audioFiles = [
+  'hold.mp3',
+  'hold.mp3',
+  'risenfall.mp3',
+  'hold.mp3',
+  'risenfall.mp3',
+  'hold.mp3',
+  'risenfall.mp3',
+  'hold.mp3',
+  'tst.mp3',
+  // Add more audio file paths here
+];
+
+// Shuffle the audio files array
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+// Play the next audio file in the shuffled array
+function playNextAudio() {
+  const currentIndex = audioFiles.findIndex(file => file === audioPlayer.src);
+  const nextIndex = (currentIndex + 1) % audioFiles.length;
+  audioPlayer.src = audioFiles[nextIndex];
+  audioPlayer.play();
+}
+
+// Add a click event listener to the play/pause button
+playPauseBtn.addEventListener('click', () => {
+  if (audioPlayer.paused) {
+    audioPlayer.play();
+    playPauseBtn.querySelector('img').src = 'pause.svg';
+
+  } else {
+    audioPlayer.pause();
+    playPauseBtn.querySelector('img').src = 'headphones.svg';
+
+  }
+});
+
+// Shuffle the audio files array on page load
+shuffleArray(audioFiles);
+audioPlayer.src = audioFiles[0];
+audioPlayer.play();
+
+// Automatically play the next audio file after the current one finishes
+audioPlayer.addEventListener('ended', playNextAudio);
+  
+
+
+
+      document.addEventListener("DOMContentLoaded", function () {
+        setTimeout(function () {
+          showVideo();
+          fadeBackgroundImage();
+        }, 6500); //
+      });
+
+      function showVideo() {
+        var videoElement = document.getElementById("videoElement");
+        videoElement.classList.add("fade-in");
+      }
+
+      function fadeBackgroundImage() {
+        var backgroundElement = document.getElementById("backgroundImage");
+        backgroundElement.classList.add("fade-out");
+      }
+    </script>
+    <script>
+// Get the audio element and play/pause button
+// Get the audio element and play/pause button
+const audioPlayer = document.getElementById('audioPlayer');
+const playPauseBtn = document.getElementById('playPauseBtn');
+
+// Array of audio file paths
+const audioFiles = [
+  'overthink.mp3',
+  'overthink.mp3',
+  'overthink.mp3',
+  // Add more audio file paths here
+];
+
+// Shuffle the audio files array
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+// Play the next audio file in the shuffled array
+function playNextAudio() {
+  const currentIndex = audioFiles.findIndex(file => file === audioPlayer.src);
+  const nextIndex = (currentIndex + 1) % audioFiles.length;
+  audioPlayer.src = audioFiles[nextIndex];
+  audioPlayer.play();
+}
+
+// Add a click event listener to the play/pause button
+playPauseBtn.addEventListener('click', () => {
+  if (audioPlayer.paused) {
+    audioPlayer.play();
+    playPauseBtn.querySelector('img').src = 'pause.svg';
+
+  } else {
+    audioPlayer.pause();
+    playPauseBtn.querySelector('img').src = 'headphones.svg';
+
+  }
+});
+
+// Shuffle the audio files array on page load
+shuffleArray(audioFiles);
+audioPlayer.src = audioFiles[0];
+audioPlayer.play();
+
+// Automatically play the next audio file after the current one finishes
+audioPlayer.addEventListener('ended', playNextAudio);
+  
+
+      document.addEventListener("DOMContentLoaded", function () {
+        setTimeout(function () {
+          showVideo();
+        }, 3000); // 10 seconds
+      });
+
+      document.addEventListener("DOMContentLoaded", function () {
+        setTimeout(function () {
+          showVideo();
+          fadeBackgroundImage();
+        }, 1000); //
+      });
+
+      function showVideo() {
+        var videoElement = document.getElementById("videoElement");
+        videoElement.classList.add("fade-in");
+      }
+
+      function fadeBackgroundImage() {
+        var backgroundElement = document.getElementById("backgroundImage");
+        backgroundElement.classList.add("fade-out");
+      }
+    </script>
+    <script>
+      // disable analytics (we don't use VideoJS yet anyway)
+      window.HELP_IMPROVE_VIDEOJS = false;
+    </script>
+    <script
+      defer
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
+    ></script>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
+    <script>
+      function app() {
+        return {
+          enabled: false,
+          channels: {
+            /*
+      legacy: {
+        id: 'legacy',
+        label: '#older',
+        audience: 0,
+        online: false,
+        visible: false,
+        url: 'https://jbilcke-hf-media-server.hf.space/live/legacy.flv',
+        resolution: '576x320',
+        model: 'zeroscope_v2_576w',
+        modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_576w',
+      },
+      */
+            /*
+      hdtv: {
+        id: 'hdtv',
+        label: '#old',
+        audience: 0,
+        online: false,
+        visible: true,
+        url: 'https://jbilcke-hf-media-server.hf.space/live/hdtv.flv',
+        resolution: '1024x576_8FPS',
+        model: 'zeroscope_v2_XL',
+        modelUrl: 'https://huggingface.co/cerspense/zeroscope_v2_XL',
+      },
+      */
+            random: {
+              id: "random",
+              label: "#random",
+              audience: 0,
+              online: false,
+              visible: true,
+              url: "https://jbilcke-hf-media-server.hf.space/live/random.flv",
+              resolution: "1024x576_24FPS",
+              model: "zeroscope_v2_XL",
+              modelUrl: "https://huggingface.co/cerspense/zeroscope_v2_XL",
+            },
+            comedy: {
+              id: "comedy",
+              label: "#comedy",
+              audience: 0,
+              online: false,
+              visible: true,
+              url: "https://jbilcke-hf-media-server.hf.space/live/comedy.flv",
+              resolution: "1024x576_24FPS",
+              model: "zeroscope_v2_XL",
+              modelUrl: "https://huggingface.co/cerspense/zeroscope_v2_XL",
+            },
+            documentary: {
+              id: "documentary",
+              label: "#documentary",
+              audience: 0,
+              online: false,
+              visible: true,
+              url: "https://jbilcke-hf-media-server.hf.space/live/documentary.flv",
+              resolution: "1024x576_24FPS",
+              model: "zeroscope_v2_XL",
+              modelUrl: "https://huggingface.co/cerspense/zeroscope_v2_XL",
+            },
+          },
+          muted: true,
+          initialized: false,
+          activityTimeout: null,
+          defaultChannelId: "random",
+          video: null,
+          channel: {},
+          wakeUp() {
+            this.showToolbar = true;
+          },
+          toggleAudio() {
+            if (this.video.muted) {
+              this.video.muted = false;
+              this.muted = false;
+            } else {
+              this.video.muted = true;
+              this.muted = true;
+            }
+          },
+          async checkAudience() {
+            let audience = {};
+            try {
+              const res = await fetch("/stats");
+              audience = await res.json();
+            } catch (err) {
+              console.log("failed to check the audience, something is wrong");
+            }
+
+            window.DEBUGME = Object.entries(this.channels);
+            this.channels = Object.entries(this.channels).reduce(
+              (acc, [channel, data]) => (
+                console.log("debug:", {
+                  ...data,
+                  audience: audience[channel] || 0,
+                }),
+                {
+                  ...acc,
+                  [channel]: {
+                    ...data,
+                    audience: audience[channel] || 0,
+                  },
+                }
+              ),
+              {}
+            );
+            this.channel = this.channels[this.channel.id];
+          },
+          fullscreen() {
+            if (this.video.requestFullscreen) {
+              this.video.requestFullscreen();
+            } else if (this.video.mozRequestFullScreen) {
+              this.video.mozRequestFullScreen();
+            } else if (this.video.webkitRequestFullscreen) {
+              this.video.webkitRequestFullscreen();
+            } else if (this.video.msRequestFullscreen) {
+              this.video.msRequestFullscreen();
+            }
+          },
+          init() {
+            if (this.initialized) {
+              console.log("already initialized");
+              return;
+            }
+            this.initialized = true;
+            console.log("initializing..");
+
+            const urlParams = new URLSearchParams(window.location.search);
+
+            const requestedChannelId = `${
+              urlParams.get("channel") || "random"
+            }`;
+
+            this.enabled = true;
+            // this.enabled = `${urlParams.get('beta') || 'false'}` === 'true'
+
+            if (!this.enabled) {
+              return;
+            }
+
+            this.video = document.getElementById("videoElement");
+
+            const defaultChannel = this.channels[this.defaultChannelId];
+
+            this.channel = this.channels[requestedChannelId] || defaultChannel;
+
+            console.log(`Selected channel: ${this.channel.label}`);
+            console.log(`Stream URL: ${this.channel.url}`);
+
+            const handleActivity = () => {
+              this.wakeUp();
+            };
+            handleActivity();
+
+            this.checkAudience();
+            setInterval(() => {
+              this.checkAudience();
+            }, 1000);
+
+            // detect mute/unmute events
+            this.video.addEventListener("mute", () => {
+              this.muted = true;
+            });
+            this.video.addEventListener("unmute", () => {
+              this.muted = false;
+            });
+
+            // as a bonus, we also allow fullscreen on double click
+            this.video.addEventListener("dblclick", () => {
+              this.fullscreen();
+            });
+
+            // some devices such as the iPhone don't support MSE Live Playback
+            if (mpegts.getFeatureList().mseLivePlayback) {
+              var player = mpegts.createPlayer({
+                type: "flv", // could also be mpegts, m2ts, flv
+                isLive: true,
+                url: this.channel.url,
+              });
+              player.attachMediaElement(this.video);
+
+              player.on(mpegts.Events.ERROR, function (err) {
+                console.log("got an error:", err);
+                if (err.type === mpegts.ErrorTypes.NETWORK_ERROR) {
+                  console.log("Network error");
+                }
+              });
+
+              player.load();
+
+              // due to an issue with our stream when the FFMPEG playlist ends,
+              // the stream gets interrupted for ~1sec, which causes the frontend to hangs up
+              // the following code tries to restart the page when that happens, but in the long term
+              // we should fix the issue on the server side (fix our FFMPEG bash script)
+              this.video.addEventListener(
+                "ended",
+                function () {
+                  console.log("Stream ended, trying to reload...");
+                  setTimeout(() => {
+                    console.log("Reloading the page..");
+                    // Unloading and loading the source again isn't enough it seems
+                    // player.unload()
+                    // player.load()
+                    window.location.reload();
+                  }, 1200);
+                },
+                false
+              );
+
+              // Handle autoplay restrictions.
+              let promise = this.video.play();
+              if (promise !== undefined) {
+                this.video.addEventListener("click", function () {
+                  this.video.play();
+                });
+              }
+
+              player.play();
+            }
+          },
+        };
+      }
+    </script>
+  </body>
+</html>

risenfall.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a365082dee6e74df55d0dc8f05114081599db4538a8b0b014af69d57aab09ad6
+size 8675756

v1.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c1e077d774fc71ff9b1816b7ba255dc68f942912972b29d0d592a0129a9fb0b2
+size 59345310