update Streams

source/astro.mjs

@@ -1,5 +1,4 @@
 import { defineConfig } from 'astro/config'
-import node from '@astrojs/node'
 import vue from '@astrojs/vue'
 import astroI18next from "astro-i18next"
 import mdx from '@astrojs/mdx'

source/src/pages/discover.astro

@@ -74,7 +74,7 @@ else if (Astro.url.href.includes('?platform=twitch')) {
                     Title={channel.title}
                     Creator={channel.username}
                     Avatar={channel.streamer.pfp}
-                    Link={'/channel/twitch/' + channel.streamer.name}
+                    Link={'/live?=' + channel.streamer.name}
                     Thumbnail={channel.preview}
                     View={channel.viewers}
                 />

source/src/pages/live.astro

@@ -1,34 +1,146 @@
 ---
 // Layout
 import Base from "@layouts/Default.astro";
+import "@styles/video.scss";
 
 // Environment Variables
-const DEFAULT_STREAM_PROXY = import.meta.env.DEFAULT_STREAM_PROXY
+// const DEFAULT_IMAGE_PROXY = import.meta.env.DEFAULT_IMAGE_PROXY
-const DEFAULT_STREAM_DATA_PROXY = import.meta.env.DEFAULT_STREAM_DATA_PROXY
+// const DEFAULT_STREAM_PROXY = import.meta.env.DEFAULT_STREAM_PROXY
+// const DEFAULT_STREAM_DATA_PROXY = import.meta.env.DEFAULT_STREAM_DATA_PROXY
 
 // Components
+import { Zorn } from "@minpluto/zorn";
+import { ArrowDown } from "@iconoir/vue";
 
 // Fetch
-const Channel = Astro.url.href.split("live?=").pop();
+const CreatorName = Astro.url.href.split("live?=").pop();
-const video = await fetch(DEFAULT_STREAM_PROXY + "/api/v1/videos/" + Channel).then((response) => response.json());
+const Creator = await fetch(
+  "https://twitch-backend.sudovanilla.org" + "/api/users/" + CreatorName,
+).then((response) => response.json());
 ---
 
-<Base Title={video.title}>
+<Base>
   <noscript>
-    <p>In order to watch a live stream on Poke, you'll need JavaScript enabled.</p>
+    <p>
+      In order to watch a Twitch live stream on MinPluto, your browser is
+      required to have JavaScript enabled.
+    </p>
+    <p>
+      If your browser does not support JavaScript, try a modern web browser such
+      as Firefox.
+    </p>
   </noscript>
-  <div class="video-container">
-      <video id="my_video_1" class="video-js vjs-fluid vjs-default-skin" controls preload="auto"
-      data-setup='{}'>
-        <source src={DEFAULT_STREAM_PROXY + '/proxy/stream/' + Channel + '/hls.m3u8'} type="application/x-mpegURL">
-      </video>
-  </div>
-</Base>
-<link href="/twitch/video.js/video-js.css" rel="stylesheet">
-<script is:inline src="/twitch/video.js/video.js"></script>
-<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
 
-<script is:inline>
+  <div class="creator-tw">
-var player = videojs('my_video_1');
+    <img class="creator-tw-banner" src={Creator.data.banner} />
-player.play();
+    <div class="creator-tw-start">
-</script>
+      <img src={"https://ipx.sudovanilla.org" + "/" + Creator.data.pfp} />
+      <p style="font-size: 14px;">{Creator.data.username}</p>
+      <span>|</span>
+      <p style="font-weight: bold">{Creator.data.stream.title}</p>
+    </div>
+    <div class="creator-tw-end">
+      <p style="font-size: 14px;opacity: 0.5;">{Creator.data.followers} Followers</p>
+      <!-- <button><ArrowDown /></button> -->
+    </div>
+  </div>
+  <Zorn
+    Live
+    Video={"https://twitch-backend.sudovanilla.org" +
+      "/proxy/stream/" +
+      CreatorName +
+      "/hls.m3u8"}
+  />
+</Base>
+
+<style is:global lang="scss">
+  .creator-tw {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 6px 24px 18px 24px;
+    margin: 24px 24px -60px 24px;
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
+      border-radius: 12px 12px 0px 0px;
+    }
+    .creator-tw-banner {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      z-index: -2;
+      border-radius: 12px 12px 0px 0px;
+    }
+    .creator-tw-start {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      img {
+        width: 48px;
+        height: 48px;
+        border-radius: 3rem;
+      }
+    }
+    .creator-tw-end {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      button {
+        background: transparent;
+        color: white;
+        border: none;
+        aspect-ratio: 1;
+        border-radius: 4px;
+        &:hover {
+          background: rgba(128, 128, 128, 0.25);
+        }
+        svg {
+          width: 20px;
+        }
+      }
+    }
+  }
+</style>
+
+<style is:global lang="scss">
+  .video-container {
+    max-width: 100%;
+    margin: 48px 24px 23px 24px;
+  }
+  .video-item {
+    margin-bottom: 24px;
+  }
+
+  .video-controls,
+  video {
+    border-radius: 12px;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  .dialog-downloads-list {
+    display: grid;
+    grid-gap: 12px;
+    a {
+      background: rgb(51 51 51);
+      border: 2px rgba(255, 255, 255, 0.05) solid;
+      font-size: 18px;
+      text-decoration: none;
+      border-radius: 4px;
+      padding: 9px 16px;
+    }
+  }
+</style>