From 3ed08baa80b1d627d6f52336dc0fc37f774ef294 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Sat, 22 Jun 2024 16:51:15 -0400
Subject: [PATCH] Add support for Twtich

---
 src/pages/live.astro   |  35 +++++++++
 src/pages/search.astro | 175 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 210 insertions(+)
 create mode 100644 src/pages/live.astro
 create mode 100644 src/pages/search.astro

diff --git a/src/pages/live.astro b/src/pages/live.astro
new file mode 100644
index 0000000..76ecb9f
--- /dev/null
+++ b/src/pages/live.astro
@@ -0,0 +1,35 @@
+---
+// Layout
+import Base from "@layouts/Default.astro";
+
+// Environment Variables
+const DEFAULT_SAFETWITCH_BACKEND = import.meta.env.DEFAULT_SAFETWITCH_BACKEND
+
+// Components
+
+// Fetch
+const Channel = Astro.url.href.split("live?=").pop();
+const video = await fetch('https://' + DEFAULT_SAFETWITCH_BACKEND + "/api/v1/videos/" + Channel).then((response) => response.json());
+const comments = await fetch('https://' + DEFAULT_SAFETWITCH_BACKEND + "/api/v1/comments/" + Channel).then((response) => response.json());
+---
+
+<Base Title={video.title}>
+  <noscript>
+    <p>In order to watch a live stream on Poke, you'll need JavaScript enabled.</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={'https://' + DEFAULT_SAFETWITCH_BACKEND + '/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>
+var player = videojs('my_video_1');
+player.play();
+</script>
\ No newline at end of file
diff --git a/src/pages/search.astro b/src/pages/search.astro
new file mode 100644
index 0000000..ebd5653
--- /dev/null
+++ b/src/pages/search.astro
@@ -0,0 +1,175 @@
+---
+// Layout
+import Base from '@layouts/Default.astro'
+
+// Components
+import Video from '@components/common/VideoItem.astro'
+
+// Environment Variables
+const DEFAULT_INVIDIOUS_INSTANCE = import.meta.env.DEFAULT_INVIDIOUS_INSTANCE
+const DEFAULT_SAFETWITCH_BACKEND = import.meta.env.DEFAULT_SAFETWITCH_BACKEND
+
+// Fetch
+const Query = Astro.url.href.split("search?q=").pop()
+const InvidiousResponse = await fetch('https://' + DEFAULT_INVIDIOUS_INSTANCE + "/api/v1/search?q=" + Query)
+.catch((error) => {
+  console.log(error)
+})
+
+const TwitchResponse = await fetch('https://' + DEFAULT_SAFETWITCH_BACKEND + "/api/search/?query=" + Query)
+.catch((error) => {
+  console.log(error)
+})
+
+const InvidiousData = await InvidiousResponse.json()
+const TwitchData = await TwitchResponse.json()
+---
+
+<Base Title="Poke Search">
+    <div class="page-title">
+        <h2>Search</h2>
+    </div>
+    <p>Twitch Channels related to "{Query}"</p>
+    <div class="twitch-channels">
+        {TwitchData.data.channels.map((channel) =>
+            <a href={'/channel/twitch/' + channel.username} class="channel">
+                <img id="backgound"src={channel.pfp}/>
+                <div class="tc-info">
+                    <img src={channel.pfp}/>
+                    <div>
+                        <h2>{channel.username}</h2>
+                        <p>{channel.about}</p>
+                    </div>
+                </div>
+            </a>
+        )}
+    </div>
+    <p>Twitch Live streams with the tag "{Query}"</p>
+    <div class="twitch-channels">
+        {TwitchData.data.relatedChannels.map((channel) =>
+            <a href={'/channel/twitch/' + channel.username} class="channel-stream">
+                <img class="stream-preview" src={channel.stream.preview}/>
+                <div class="channel-info">
+                    <img src={channel.pfp}/>
+                    <div>
+                        <h2>{channel.username}</h2>
+                        <p>{channel.about}</p>
+                    </div>
+                </div>
+            </a>
+        )}
+    </div>
+    <p>YouTube Videos</p>
+    <div class="video-grid">
+        {InvidiousData.map((data) =>
+            <Video
+                ID={data.videoId}
+                Title={data.title}
+                Creator={data.author}
+                Views={data.viewCount}
+                UploadDate={data.published}
+                Length={data.lengthSeconds}
+            />
+        )}
+    </div>
+</Base>
+
+<style>
+
+.video-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-gap: 24px;
+    margin: auto;
+    padding: 0px 24px;
+}
+</style>
+
+
+<style lang="scss">
+    .video-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-gap: 24px;
+        margin: auto;
+        padding: 0px 24px;
+    }
+    
+    .twitch-channels {
+        display: flex;
+        gap: 12px;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        padding-bottom: 12px;
+    }
+    
+    .channel-stream {
+        flex-direction: column;
+        position: relative;
+        padding: 0px !important;
+        .stream-preview {
+            border-radius: 12px !important;
+            width: 100% !important;
+            height: 100% !important;
+        }
+        .channel-info {
+            flex-direction: row !important;
+            position: absolute;
+            bottom: 0px;
+            background: linear-gradient(#0000,#282828);
+            border-radius: 0px 0px 12px 12px;
+            width: 100%;
+            img {
+                margin-left: 12px;
+                position: absolute;
+            }
+            div {
+                padding: 0px 6px 18px 96px;
+                position: relative
+            }
+        }
+    }
+    
+    
+    .channel, .channel-stream  {
+        text-decoration: none;
+        background: transparent;
+        border: 2px transparent solid;
+        border-radius: 12px;
+        align-items: center;
+        width: 100%;
+        min-width: 500px;
+        position: relative;
+        &:hover {
+            border-color: #333;
+        }
+        img {
+            border-radius: 5rem;
+            width: 64px;
+            height: 64px;
+            object-fit: cover;
+        }
+        #backgound {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            width: 100%;
+            height: 100%;
+            border-radius: 12px;
+            z-index: -1;
+            object-fit: unset;
+        }
+        h2, p {
+            margin: 0px;
+        }
+        .tc-info {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+            padding: 24px 12px;
+            border-radius: 8px;
+            height: 80px;
+            backdrop-filter: blur(20px) brightness(0.2);
+        }
+    }
+</style>
\ No newline at end of file