update

src/components/VideoItem.astro

@@ -32,7 +32,7 @@ const ViewsFormat = ViewsConversion.format(Views)
 
 <a href={'/watch?v=' + ID} class="video-item">
     <div class="video-item-thumbnail">
-        <img src={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + ID + '/hqdefault.jpg'}/>
+        <img onload="this.style.opacity = '1'" src={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + ID + '/hqdefault.jpg'} loading="lazy"/>
         <p id="vi-length">{LengthFormat}</p>
     </div>
     <div class="video-item-details">
@@ -54,6 +54,8 @@ const ViewsFormat = ViewsConversion.format(Views)
             border-radius: 6px;
             aspect-ratio: 16/9;
             object-fit: cover;
+            opacity: 0;
+            transition: 0.3s opacity;
         }
         p#vi-length {
             margin: -41px 0px 0px 0px;

src/components/global/Header.astro

@@ -1,46 +0,0 @@
----
-// Components
-import Search from '@components/Search.astro'
-
-// Icons
-import {
-Message,
-    Youtube
-} from '@iconoir/vue'
-
-// i18n
-import { t, changeLanguage } from "i18next"
-import { LanguageSelector } from "astro-i18next/components"
-import Dropdown from '@components/Dropdown.astro'
----
-
-<div class="header">
-    <div class="header-start">
-        <img class="mo" style="height: 24px; margin-right: 24px;" src="/images/logo/MinPluto - Logo.png"/>
-        <Search/>
-    </div>
-    <div class="header-end">
-        <Dropdown Name="Language" OnClick="LanguageDropdownShow()">
-            <a href="/api/language/en/">English</a>
-            <a href="/api/language/jp/">Japanese</a>
-        </Dropdown>
-        <a href="https://lemmy.world/c/minpluto" target="_blank"><Message/> {t("HEADER.FEEDBACK")}</a>
-    </div>
-</div>
-
-<script is:inline>
-function LanguageDropdownShow() {
-  var LanguageDropdown = document.querySelector('#Language-dropdown-menu')
-  var LanguageDropdownButton = document.querySelector('#Language-dropdown-button')
-  LanguageDropdownButton.setAttribute('onclick', 'LanguageDropdownHide()')
-  LanguageDropdown.style.display = 'flex'
-  LanguageDropdown.style.display = 'inherit'
-}
-function LanguageDropdownHide() {
-  var LanguageDropdown = document.querySelector('#Language-dropdown-menu')
-  var LanguageDropdownButton = document.querySelector('#Language-dropdown-button')
-  LanguageDropdownButton.setAttribute('onclick', 'LanguageDropdownShow()')
-  LanguageDropdown.style.display = 'none'
-  LanguageDropdown.style.display = 'none'
-}
-</script>

src/components/global/Sidebar.astro

@@ -11,35 +11,40 @@ import {
 
 // Icons
 import {
-    HomeSimple,
     GraphUp,
     Movie,
     MusicDoubleNote,
     Gamepad,
     AppleImac2021Side,
     EmojiTalkingHappy,
-    PizzaSlice,
-    Treadmill,
     PeaceHand,
-    InfoCircle,
     HelpCircle,
     Server,
     CurveArray,
-Rocket,
+    PlanetAlt,
-PlanetAlt
+InputSearch,
+ProfileCircle,
+SettingsProfiles,
+Settings
 } from '@iconoir/vue'
 
 // i18n
 import i18next, { t } from "i18next"
+import SettingsLayout from '@layouts/Settings.astro'
 ---
 
 <div class="sidebar">
     <div class="sidebar-top">
-        <a href='/' class="sidebar-top-start">
+        <div class="sidebar-top-start">
-            <img src="/images/logo/MinPluto - Logo.png"/>
+            <a href='/'><img src="/images/logo/MinPluto - Logo.png"/></a>
-        </a>
+            <div>
+                <a href="#"><InputSearch/></a>
+                <a href="#"><Settings/></a>
+            </div>
+        </div>
         <div class="sidebar-top-end">
             <a href={'/'}><PlanetAlt/> {t("SIDEBAR.HOME")}</a>
+            <a href="#"><InputSearch/> {t("HEADER.SEARCH")}</a>
             <hr/>
             {SIDEBAR_CATEGORIES ?
                 <h2>{t("SIDEBAR.CATEGORY")}</h2>
@@ -103,12 +108,54 @@ import i18next, { t } from "i18next"
         font-size: 16px;
         padding-left: 24px;
     }
+    form {
+        margin-bottom: 12px;
+        input {
+            background: transparent;
+            border: 2px transparent solid;
+            padding: 10px 24px;
+            border-radius: 6px;
+            color: white;
+            transition: 0.3s background, 0.3s border;
+            &:hover {
+                background: rgb(255 255 255 / 05%);
+                border: 2px rgba(255, 255, 255, 0.05) solid;
+                transition: 0.3s background, 0.3s border;
+            }
+            &:focus {
+                outline: none;
+                background: rgb(255 255 255 / 07%);
+                border: 2px rgba(255, 255, 255, 0.07) solid;
+                transition: 0.3s background, 0.3s border;
+            }
+            svg {
+                width: 18px;
+            }
+        }
+    }
     .sidebar-top {
         .sidebar-top-start {
             display: flex;
             align-items: center;
             gap: 24px;
             padding: 32px 24px;
+            justify-content: space-between;
+            div {
+                display: flex;
+                gap: 6px;
+                a {
+                    background: transparent;
+                    border-radius: 6px;
+                    padding: 5px 6px 3px 6px;
+                    aspect-ratio: 1;
+                    svg {
+                        aspect-ratio: 1;
+                    }
+                    &:hover {
+                        background: #2d2d2d;
+                    }
+                }
+            }
             img {
                 height: 24px;
             }

src/components/search/Stream.astro

@@ -12,10 +12,10 @@ const {
 <a href={Link} class='search-stream search-stream-platfom-twitch'>
     <div class="search-stream-media">
         <!-- <p>{Views}</p> -->
-        <img class="ssm-banner" alt='Stream Thumbnail' src={Thumbnail}/>
+        <img onload="this.style.opacity = '1'" class="ssm-banner" alt='Stream Thumbnail' src={Thumbnail} loading="lazy"/>
     </div>
     <div class="search-stream-meta">
-        <img alt={Creator + "'s avatar"} src={Avatar}/>
+        <img onload="this.style.opacity = '1'" alt={Creator + "'s avatar"} src={Avatar} loading="lazy"/>
         <div>
             <p><strong>{Title}</strong></p>
             <p>{Creator}</p>
@@ -44,6 +44,8 @@ const {
             width: 100%;
             object-fit: cover;
             border-radius: 12px;
+            opacity: 0;
+            transition: 0.3s opacity;
         }
     }
     .search-stream-meta {
@@ -63,6 +65,8 @@ const {
             width: 42px;
             height: 42px;
             border-radius: 3rem;
+            opacity: 0;
+            transition: 0.3s opacity;
         }
     }
 }

src/layouts/Default.astro

@@ -4,7 +4,6 @@ const { Title, Description } = Astro.props
 
 // Components
 import Head from '@components/global/Head.astro'
-import Header from '@components/global/Header.astro'
 import MobileNav from '@components/global/MobileNav.astro'
 import Sidebar from '@components/global/Sidebar.astro'
 import Footer from '@components/global/Footer.astro'
@@ -18,7 +17,6 @@ import '@styles/mobile.scss'
 <MobileNav/>
 <Sidebar/>
 <div class="content">
-    <Header/>
     <slot/>
 </div>
 <Footer/>

src/layouts/Markdown.astro

@@ -4,7 +4,6 @@ const { Title, Description } = Astro.props
 
 // Components
 import Head from '@components/global/Head.astro'
-import Header from '@components/global/Header.astro'
 import MobileNav from '@components/global/MobileNav.astro'
 import Sidebar from '@components/global/Sidebar.astro'
 import Footer from '@components/global/Footer.astro'

src/pages/discover.astro

@@ -24,9 +24,10 @@ var FullCategoryName = SearchQuery.charAt(0).toUpperCase() + SearchQuery.slice(1
 // Fetch
 if (Astro.url.href.includes('?platform=youtube')) {
     var PlatformYouTube = true
-    var YouTubeCategory = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending?=' + SearchQuery
+    var YouTubeCategory = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending?type=' + SearchQuery
     var YouTubeFetch = await fetch(YouTubeCategory)
     var YouTubeData = await YouTubeFetch.json()
+    console.log(YouTubeCategory)
 }
 else if (Astro.url.href.includes('?platform=twitch')) {
     var PlatformTwitch = true

src/pages/live.astro

@@ -20,7 +20,7 @@ const video = await fetch(DEFAULT_STREAM_PROXY + "/api/v1/videos/" + Channel).th
   <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_STREAM_PROXY + '/proxy/stream/' + Channel + '/hls.m3u8'} type="application/x-mpegURL">
+        <source src={DEFAULT_STREAM_PROXY + '/proxy/stream/' + Channel + '/hls.m3u8'} type="application/x-mpegURL">
       </video>
   </div>
 </Base>

src/pages/watch.astro

@@ -235,7 +235,7 @@ function ShareDialogHide() {
 
 <style lang="scss">
   .video-container {
-    max-width: 1000px;
+    max-width: 90%;
     margin: auto;
     .zorn-player {
       border-radius: 10px;

src/styles/index.scss

@@ -9,6 +9,16 @@ body {
     width: calc(100% - 246px);
 }
 
+::-webkit-scrollbar {
+    width: 12px;
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: #464646;
+    border-radius: 1rem;
+    border: 4px black solid;
+}
+
 a {
     color: white;
 }
@@ -22,48 +32,6 @@ hr {
     margin: 24px auto;
 }
 
-.header {
-    backdrop-filter: blur(10px) brightness(0.4);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    max-width: 1000px;
-    margin: auto;
-    position: sticky;
-    top: 12px;
-    z-index: 5;
-    border-radius: 10px;
-    margin-top: 12px;
-    .header-start {
-        width: 75%;
-        display: flex;
-        align-items: center;
-    }
-    .header-end {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-    }
-    a, select {
-        background: transparent;
-        color: white;
-        text-decoration: none;
-        display: flex;
-        align-items: center;
-        border-radius: 1rem;
-        padding: 20px;
-        font-size: 14px;
-        border: 1px transparent solid;
-        gap: 6px;
-        svg {
-            width: 20px;
-        }
-        &:hover {
-            color: gray;
-        }
-    }
-}
-
 span#gradient-header {
     background: linear-gradient(180deg, black, transparent);
     height: 50px;
@@ -78,7 +46,7 @@ span#gradient-header {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     grid-gap: 25px;
-    max-width: 1000px;
+    max-width: 100%;
     margin: auto;
     padding: 0px 24px;
 }

src/styles/video.scss

@@ -1,5 +1,5 @@
 .video-rea {
-    max-width: 1000px;
+    max-width: 1300px;
     margin: auto;
     padding: 0px 24px;
     .rea-details-start {