update

.gitignore

@@ -26,3 +26,4 @@ source/.env.production
 
 # other
 .minpluto/docker/supabase/.env
+.minpluto/docker/supabase/.env

.minpluto/docs/TODO.md

@@ -1,13 +1,12 @@
 ## To Do
  - [ ] i18n
-    - [ ] Drop i18next library for Paraglide
+    - [x] API
-    - [x] ~~API~~
+    - [ ] Languages
-    - [ ] ~~Languages~~
+      - [x] English
-      - [x] ~~English~~
+      - [ ] Japanese
-      - [x] ~~Japanese~~
+      - [ ] French
-      - [ ] ~~French~~
+      - [ ] Spanish
-      - [ ] ~~Spanish~~
+      - [ ] Russian
-      - [x] ~~Russian~~
  - [x] Data
     - [x] Track Events (Users should be opted-out by default, OpenPanel will be used)
     - [x] Make privacy policy adaptive

source/astro.mjs

@@ -31,7 +31,7 @@ export default defineConfig({
   // Vite
   vite: {
     server: {
-      hmr: false // Auto Reload
+      hmr: true // Auto Reload
     }
   },
   // Others

source/src/layouts/Settings.astro

@@ -61,7 +61,7 @@ import { CodeBrackets, EditPencil, EvPlugXmark, FloppyDisk, HelpCircle, InfoCirc
     }
     .settings-sidebar {
         background: #161616;
-        width: 180px;
+        width: 224px;
         color: white;
         display: flex;
         flex-direction: column;

source/src/pages/discover.astro

@@ -27,7 +27,6 @@ if (Astro.url.href.includes('?platform=youtube')) {
     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

source/src/pages/index.astro

@@ -43,33 +43,29 @@ const TwitchDiscoverData = await TwitchDiscoverFetch.json()
 ---
 
 <Base Title="MinPluto" Description="">
-    <div class="force-center">
+    <br/>
-        <img src="/images/logo/MinPluto - Image Logo Full with Shadow.png"/>
-        <img src="/images/backgrounds/1.webp"/>
-        <hr/>
-    </div>
     <div class="category-select-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;">
         {TrendingSplit.map((data) =>
             <a href={'/discover?category=trending&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
-                <Chip Text="YouTube" Color="#c91e34"/>
+                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
                 <div class="goin-card-content">
                     <GraphUp viewBox="0 0 10 24"/>
-                    <p>{t("SIDEBAR.CATEGORY_LIST.TRENDING")}</p>
+                    <p>{t("SIDEBAR.CATEGORY_LIST.POPULAR")}</p>
                 </div>
             </a>
         )}
         {MoviesSplit.map((data) =>
             <a href={'/discover?category=movies&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
-                <Chip Text="YouTube" Color="#c91e34"/>
+                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
                 <div class="goin-card-content">
                     <Movie viewBox="0 0 10 24"/>
-                    <p>{t("SIDEBAR.CATEGORY_LIST.MOVIES")}</p>
+                    <p>{t("SIDEBAR.CATEGORY_LIST.TRAILERS")}</p>
                 </div>
             </a>
         )}
         {MusicSplit.map((data) =>
             <a href={'/discover?category=music&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
-                <Chip Text="YouTube" Color="#c91e34"/>
+                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
                 <div class="goin-card-content">
                     <MusicDoubleNote viewBox="0 0 10 24"/>
                     <p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p>
@@ -78,7 +74,7 @@ const TwitchDiscoverData = await TwitchDiscoverFetch.json()
         )}
         {GamingSplit.map((data) =>
             <a href={'/discover?category=gaming&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
-                <Chip Text="YouTube" Color="#c91e34"/>
+                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
                 <div class="goin-card-content">
                     <Gamepad viewBox="0 0 10 24"/>
                     <p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p>
@@ -86,22 +82,23 @@ const TwitchDiscoverData = await TwitchDiscoverFetch.json()
             </a>
         )}
     </div>
-    <hr/>
+    <br/>
-    <div class="category-select-grid">
+    <div id="twitch" class="category-select-grid">
         {TwitchDiscoverData.data.map((data) =>
             <a href={'/discover?category=' + data.name + '&?platform=twitch'} style={'background: url("' + data.image + '")'} class="goin-card">
-                <Chip Text="Twitch" Color="#9146FF"/>
+                <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/></svg></span>
                 <div class="goin-card-content">
                     <p>{data.displayName}</p>
                 </div>
             </a>
         )}
     </div>
+    <br/>
 </Base>
 
 
 <style is:inline>.sidebar-top-end a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
-<style is:global>
+<style is:global lang="scss">
 img[src="/images/backgrounds/1.webp"] {
     position: fixed;
     bottom: 0px;
@@ -123,12 +120,21 @@ img[src="/images/backgrounds/1.webp"] {
 }
 
 .goin-card {
-    height: 124px;
+    height: 170px;
     text-decoration: none;
     border-radius: 10px;
     background-size: cover !important;
     background-position: center !important;
     position: relative;
+    span {
+        svg {
+            fill: white;
+            width: 30px;
+            position: absolute;
+            z-index: 1;
+            margin: 18px;
+        }
+    }
 }
 
 .chip {
@@ -155,13 +161,7 @@ img[src="/images/backgrounds/1.webp"] {
     margin: 12px;
 }
 .goin-card-content svg {
-    position: absolute;
+    display: none;
-    right: 0px;
-    bottom: 0px;
-    width: 124px;
-    height: 120px;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    opacity: 0.3;
 }
 .goin-card img {
     width: 100%;
@@ -171,10 +171,15 @@ img[src="/images/backgrounds/1.webp"] {
 }
 .category-select-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     grid-gap: 25px;
-    max-width: 1000px;
+    max-width: 1600px;
     margin: auto;
     padding: 0px 24px;
 }
+.category-select-grid#twitch {
+    a {
+        height: 328px;
+    }
+}
 </style>

source/src/pages/privacy.mdx

@@ -10,9 +10,9 @@ import PrivacyPolicyAnalytics from '@components/text/PrivacyPolicyAnalytics.astr
 import PrivacyPolicyCloudflare from '@components/text/PrivacyPolicyCloudflare.astro'
 import OptButtons from '@components/buttons/Telemtry.astro'
 
-# Privacy Policy
+## Privacy Policy
 
-## 3rd Party Services are Proxied
+### 3rd Party Services are Proxied
 
 Any service in MinPluto that is 3rd party is proxied by this instance or another instance such as images, videos, fonts, scripts, and more. No personal information information is collected and no information is sent to any 3rd party.
 
@@ -20,10 +20,10 @@ Any service in MinPluto that is 3rd party is proxied by this instance or another
 
 <PrivacyPolicyCloudflare/>
 
-## We Don't Know What You're Watching
+### We Don't Know What You're Watching
 When you watch a video on a MinPluto instance with analytics enabled, the analytics software doesn't show what video are you watching. The query in the URL, which is the video ID, is not saved to analytics. What we see is only "/watch", not "/watch?=dQw4w9WgXcQ". This goes for anything else that may have a query in it.
 
-## Telemtry
+### Telemtry
 Telemtry data is used in MinPluto to see metrics of usage on different features and other aspects. This is help SudoVanilla, the developer of MinPluto, make better and informed decisions on what needs priority.
 
 By default, all users are opted-out for privacy purposes. 
@@ -56,7 +56,7 @@ It is expected by the MinPluto developer that all telemtry data is sent to SudoV
 
 <div style="text-align: right"><OptButtons/></div>
 
-## Liability
+### Liability
 MinPluto and SudoVanilla take no responsibility for the use of our tool, or external instances provided by third parties. It is strongly recommended that you abide by the valid official regulations in your country. Furthermore, we refuse liability for any inappropriate use of MinPluto, such as illegal downloading.
 
 MinPluto is licenced under AGPL v3, this software is included with a copy.
@@ -80,11 +80,11 @@ along with this program.  If not, see https://www.gnu.org/licenses/.
 ```
 <hr/>
 
-## Links to Other Sites
+### Links to Other Sites
 
 Channels and videos on MinPluto may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by SudoVanilla, MinPluto, or the MinPluto instance. Therefore, I strongly advise you to review the privacy policy of these websites. I have no control over and assume no responsibility for the content, privacy policies, or practices of any third-party sites or services.
 
-## Changes to This Privacy Policy
+### Changes to This Privacy Policy
 
 The developers of MinPluto, SudoVanilla, may update our privacy policy from time to time. Thus, you are advised to review this page periodically for any changes. I will notify you of any changes by posting the new privacy policy on this page.
 
@@ -92,6 +92,6 @@ This also goes for the instance itself.
 
 This policy is effective as of March 7th, 2024.
 
-## Contact Us
+### Contact Us
 
 If you have any questions or suggestions about MinPluto's privacy policy, do not hesitate to contact me at hello@minpluto.org or to [submit an issue](https://ark.sudovanilla.org/MinPluto/MinPluto/issues).

source/src/pages/search.astro

@@ -18,8 +18,6 @@ import { Group, Movie, Play, PlaylistPlay, ReportColumns, VideoCamera } from "@i
 const SearchQueryWithParameters = Astro.url.href.split("&?").shift()
 const SearchQuery = SearchQueryWithParameters.split("search?query=").pop()
 
-console.log(SearchQuery)
-
 // Check Filters
 if (Astro.url.href.includes('?type=channel')) {
     var ShowChannels = true

source/src/pages/telemtry.mdx

@@ -1,5 +1,5 @@
 ---
-layout: '@layouts/Markdown.astro'
+layout: '@layouts/Settings.astro'
 ---
 
 import OptButtons from '@components/buttons/Telemtry.astro'

source/src/pages/watch.astro

@@ -49,7 +49,7 @@ if (FourKCheck.status == 200) {
     var FourK = false
 }
 
-const TenEightyCheck = await fetch(DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=137')
+const TenEightyCheck = await fetch(DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=303')
 if (TenEightyCheck.status == 200) {
     var TenEighty = true
 } else {
@@ -64,7 +64,7 @@ if (EightK === true) { // 571
 } else if (FourK === true) { // 313
     var Quality = '313'
 } else if (TenEighty === true) { // 137
-    var Quality = '137'
+    var Quality = '303'
 } else if (ThreeSixty === true) { // 134
     var Quality = '134'
 }
@@ -73,7 +73,8 @@ if (EightK === true) { // 571
 <Base Title={video.title}>
   <Player
     Poster={DEFAULT_IMAGE_PROXY + '/https://i.ytimg.com/vi/' + video.videoId + '/maxresdefault.jpg'}
-    Source={DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=' + Quality + '&local=true'}
+    Video={DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=' + Quality + '&local=true'}
+    Audio={DEFAULT_MEDIA_DATA_PROXY + '/latest_version?id=' + video.videoId + '&itag=140'}
   />
   <div class="video-rea">
     <div class="rea-details">