Redesign Live Streams

package.json

@@ -12,7 +12,7 @@
   "funding": [
     {
       "type": "SudoVanilla",
-      "url": "https://sudovanilla.org/donate/"
+      "url": "https://liberapay.com/SudoVanilla/"
     }
   ],
   "keywords": [

source/src/pages/live.astro

@@ -17,11 +17,13 @@ const CreatorName = Astro.url.href.split("live?=").pop();
 const Creator = await fetch("https://twitch-backend.sudovanilla.org" + "/api/users/" + CreatorName,).then((response) => response.json());
 
 // Check if the Creator is live
-if(Creator.isLive === true) {
+if(Creator.data.isLive == true) {
   var IsLive = true
-} else if(Creator.isLive === false) {
+} else if(Creator.data.isLive == false) {
   var IsLive = false
 }
+
+console.log(Creator.data.isLive)
 ---
 
 <Base>
@@ -36,46 +38,80 @@ if(Creator.isLive === true) {
     </p>
   </noscript>
 
+  <div class="creator-tw-backdrop" style={"background-image: radial-gradient(ellipse farthest-side at center top, #" + Creator.data.colorHex + ", hsla(0, 0%, 0%, 0) 100%);"}></div>
   <div class="creator-tw">
-    <img class="creator-tw-banner" src={Creator.data.banner} />
     <div class="creator-tw-start">
-      <img src={"https://ipx.sudovanilla.org" + "/" + Creator.data.pfp} />
+      <img class="creator-tw-banner" src={"https://ipx.sudovanilla.org" + "/" + Creator.data.banner} />
-      <p style="font-size: 14px;">{Creator.data.username}</p>
+      <div class="creator-tw-start-top">
-      {IsLive ?
+        {IsLive ? <span id="streamer-online" class="tw-status">Online</span> : <span id="streamer-offline" class="tw-status">Offline</span>}
-        <span>|</span>
+        <h2 style="margin: 24px 0px 6px 0px;">{Creator.data.username}</h2>
-        <p style="font-weight: bold">{Creator.data.stream.title}</p>
+        <p style="margin: 0px;font-size: 12px;color: gray;">{Creator.data.followers} Followers</p>
-        :
+        <br/>
-        null
+        <p>{Creator.data.about}</p>
-      }
+        <div class="creator-tw-socials">
+          {Creator.data.socials.map((social) =>
+            <a style={"background: #" + Creator.data.colorHex} href={social.url}>{social.name}</a>
+          )}
+        </div>
+      </div>
+      <div class="creator-tw-start-bottom"></div>
     </div>
     <div class="creator-tw-end">
-      <p style="font-size: 14px;opacity: 0.5;">{Creator.data.followers} Followers</p>
+      {IsLive ?
-      <!-- <button><ArrowDown /></button> -->
+        <Zorn
+          Live
+          Video={"https://twitch-backend.sudovanilla.org" +
+            "/proxy/stream/" +
+            CreatorName +
+            "/hls.m3u8"}
+        />
+        :
+        <div class="creator-is-offline">
+          <p>Offline</p>
+        </div>
+      }
     </div>
   </div>
-  {IsLive ?
-    <Zorn
-      Live
-      Video={"https://twitch-backend.sudovanilla.org" +
-        "/proxy/stream/" +
-        CreatorName +
-        "/hls.m3u8"}
-    />
-    :
-    <div style={'background: linear-gradient(0deg, #23232345, #' + Creator.data.colorHex + ');'} class="creator-is-offline">
-      <p>They're currently offline.</p>
-    </div>
-  }
 </Base>
 
+{IsLive ?
+<style>
+.creator-tw {
+  backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
+}
+.creator-tw-start::before, .creator-tw-banner {
+  border-radius: 12px 0px 0px 12px;
+}
+</style>
+:
+<style>
+.creator-tw-start::before, .creator-tw-banner {
+  border-radius: 12px;
+}
+</style>
+}
+
 <style is:global lang="scss">
-  .creator-tw {
+.creator-tw-backdrop {
+  background-color: transparent;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+.creator-tw {
+  border-radius: 12px;
+  margin: 24px;
+  display: grid;
+  grid-template-columns: 300px auto;
+  min-height: 500px;
+  .creator-tw-start {
     position: relative;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: center;
+    padding: 24px;
-    padding: 6px 24px 18px 24px;
-    margin: 24px 24px -60px 24px;
     &::before {
       content: "";
       position: absolute;
@@ -84,9 +120,7 @@ if(Creator.isLive === true) {
       width: 100%;
       height: 100%;
       z-index: -1;
-      backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
+      backdrop-filter: blur(24px) contrast(0.8) brightness(0.8);
-      -webkit-backdrop-filter: brightness(0.2) contrast(0.8) blur(12px);
-      border-radius: 12px 12px 0px 0px;
     }
     .creator-tw-banner {
       position: absolute;
@@ -96,76 +130,64 @@ if(Creator.isLive === true) {
       height: 100%;
       object-fit: cover;
       z-index: -2;
-      border-radius: 12px 12px 0px 0px;
     }
-    .creator-tw-start {
+    .tw-status {
+      background: transparent;
+      border-radius: 3rem;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: bold;
+    }
+    #streamer-online {
+      background: #c95050;
+    }
+    #streamer-offline {
+      background: #454545;
+    }
+    .creator-tw-socials {
       display: flex;
-      align-items: center;
+      gap: 6px;
-      gap: 12px;
+      flex-wrap: wrap;
-      img {
+      a {
-        width: 48px;
+        text-decoration: none;
-        height: 48px;
+        font-size: 14px;
         border-radius: 3rem;
+        padding: 6px 12px;
       }
     }
-    .creator-tw-end {
+  }
-      display: flex;
+  .creator-tw-end {
+    position: relative;
+    .video-container {
+      video {
+        border-radius: 0px 12px 12px 0px;
+      }
+      .video-controls {
+        border-radius: 0px 0px 12px 0px !important;
+      }
+    }
+    .creator-is-offline {
       align-items: center;
-      gap: 12px;
+      display: flex;
-      button {
+      justify-content: center;
-        background: transparent;
+      height: 100%;
-        color: white;
+      font-size: 90px;
-        border: none;
+      letter-spacing: -0.014em;
-        aspect-ratio: 1;
+      font-weight: 900;
-        border-radius: 4px;
+      color: #ffffff4f;
-        &:hover {
+      animation: 4.2s TextSpacingIn ease-in-out;
-          background: rgba(128, 128, 128, 0.25);
-        }
-        svg {
-          width: 20px;
-        }
-      }
     }
   }
-  .creator-is-offline {
+}
-    color: white;
-    font-weight: bold;
-    text-align: center;
-    margin: 48px 24px 0px 24px;
-    padding: 16% 0px;
-    border-radius: 12px;
-    font-size: 32px;
-  }
-</style>
 
-<style is:global lang="scss">
+@keyframes TextSpacingIn {
-  .video-container {
+  from {
-    max-width: 100%;
+    letter-spacing: 0.086em;
-    margin: 48px 24px 23px 24px;
+    opacity: 0.45;
   }
-  .video-item {
+  to {
-    margin-bottom: 24px;
+    letter-spacing: -0.014em;
+    opacity: 1;
   }
-
+}
-  .video-controls,
+</style>
-  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>