updaet

README.md

@@ -36,7 +36,7 @@ ___
 
 The package manager that you need to use with MinPluto must be [Bun](https://bun.sh/) since it appears to be the most functional option for this project. Attempting to use another package manager like Yarn or PNPM may cause issues, view [Package Managers](#package-managers) in the [Compatibility](#compatibility) section. There seems to be some issues related to both `@astrojs/vue` and `@iconoir/vue`.
 
-Bun is much faster for installation time and it works standalone, meaning you don't need NodeJS installed for it to work.
+You'll still need to have [NodeJS](https://nodejs.org/en/download/package-manager) v21 or newer install in order for translations to work properly. 
 
 ___
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "minpluto",
-  "version": "2024.07.26",
+  "version": "2024.08.02",
   "description": "An open source frontend alternative to YouTube.",
   "repository": "https://sudovanilla.org/MinPluto/MinPluto",
   "author": "Korbs <korbs@sudovanilla.org>",

src/components/global/Head.astro

@@ -3,8 +3,7 @@
 import i18next, { t } from "i18next";
 
 // Cookies
-/// Language
-//// If the user is new to the site, set English as default
+/// Set Default
 if (Astro.cookies.get("Language") === undefined) {
     Astro.cookies.set("Language", "EN", {path: "/",sameSite: 'strict'})
 } else {
@@ -12,6 +11,13 @@ if (Astro.cookies.get("Language") === undefined) {
     if      (UserLanguage === "JP") {i18next.changeLanguage("jp")}
     else if (UserLanguage === "EN") {i18next.changeLanguage("en")}
 }
+if (Astro.cookies.get("Milieu") === undefined) {
+    Astro.cookies.set("Milieu", "Enabled", {path: "/",sameSite: 'strict'})
+} else {
+    var UserLanguage = Astro.cookies.get("Language").value
+    if      (UserLanguage === "JP") {i18next.changeLanguage("jp")}
+    else if (UserLanguage === "EN") {i18next.changeLanguage("en")}
+}
 
 /// Telemtry
 //// Users should be opted-out by default

src/components/video-player/Controls.astro

@@ -1,15 +1,27 @@
 ---
+// Cookies
+if (Astro.cookies.get("Milieu").value === "Enabled") {
+  var Milieu = true
+} else {
+  var Milieu = false
+}
+
+// Icons
 import {
+ArrowUpRight,
     Backward15Seconds,
     Enlarge,
     Forward15Seconds,
+    NavArrowRight,
     PlaySolid,
     Settings,
+SwitchOff,
+SwitchOn,
 } from "@iconoir/vue";
 ---
 <div class="video-controls">
     <div class="vc-top">
-        <p>DJI: Landscape Footage of Cities</p>
+        <p>The Mark On The Wall</p>
     </div>
     <div class="vc-bottom">
         <div class="vc-start">
@@ -29,9 +41,108 @@ import {
             </p>
         </div>
         <div class="vc-end">
-            <!-- <button id="vc-settings"><Settings /></button> -->
+            <button id="vc-settings" onclick="PlayerMenu_Settings()"><Settings /></button>
             <!-- <button><SoundHighSolid /></button> Should affect <audio>, not <video> -->
             <button id="vc-fullscreen"><Enlarge /></button>
         </div>
     </div>
-</div>
+    <!-- Menus -->
+    <div id="settings" class="vc-menu">
+        <button>Stats for Geeks</button>
+        <hr/>
+        <button>Open Video URL <ArrowUpRight/></button>
+        <button>Download <ArrowUpRight/></button>
+        <button>Embed <ArrowUpRight/></button>
+        <hr/>
+        {Milieu ?
+            <button onclick="location.href = '/api/player/milieu/disable'" id="has-switch">Milieu <SwitchOn/></button>
+            :
+            <button onclick="location.href = '/api/player/milieu/enable'" id="has-switch">Milieu <SwitchOff/></button>
+        }
+        <!-- <button>Close Captions <NavArrowRight/></button> -->
+        <button onclick="PlayerMenu_Quality()">Quality <NavArrowRight/></button>
+    </div>
+    <div id="quality-changer" class="vc-menu">
+        <button onclick="ChangeQualtiy_1080()">1080p</button>
+        <button onclick="ChangeQualtiy_720()">720p</button>
+        <button onclick="ChangeQualtiy_360()">360p</button>
+    </div>
+</div>
+
+<script is:inline>
+    function PlayerMenu_HideAll() {
+        document.querySelector('.vc-menu#settings').style.display = 'none'
+        document.querySelector('.vc-menu#quality-changer').style.display = 'none'
+    }
+    function PlayerMenu_Settings() {
+        PlayerMenu_HideAll()
+        document.querySelector('.vc-menu#settings').style.display = 'flex'
+    }
+    function PlayerMenu_Quality() {
+        PlayerMenu_HideAll()
+        document.querySelector('.vc-menu#quality-changer').style.display = 'flex'
+    }
+</script>
+
+<script is:inline>
+    function ChangeQualtiy_1080() {
+        // Hide Menu
+        PlayerMenu_HideAll()
+        // Get Video
+        var video = document.querySelector('video')
+        var audio = document.querySelector('audio')
+        // Get Source
+        video.setAttribute('src', 'http://catactyl.home.ro:5006/The%20Mark%20On%20The%20Wall/1080.mp4')
+        // Get Current Timestamp
+        var CurrentTimestamp = document.querySelector("#seek").getAttribute('data-seek')
+        // Go To Timestamp
+        setTimeout(() => {
+            video.pause();
+            audio.pause();
+            video.currentTime = CurrentTimestamp;
+            audio.currentTime = CurrentTimestamp;
+            video.play();
+            audio.play();
+        }, 0o100);
+    }
+    function ChangeQualtiy_720() {
+        // Hide Menu
+        PlayerMenu_HideAll()
+        // Get Video
+        var video = document.querySelector('video')
+        var audio = document.querySelector('audio')
+        // Get Source
+        video.setAttribute('src', 'http://catactyl.home.ro:5006/The%20Mark%20On%20The%20Wall/720.mp4')
+        // Get Current Timestamp
+        var CurrentTimestamp = document.querySelector("#seek").getAttribute('data-seek')
+        // Go To Timestamp
+        setTimeout(() => {
+            video.pause();
+            audio.pause();
+            video.currentTime = CurrentTimestamp;
+            audio.currentTime = CurrentTimestamp;
+            video.play();
+            audio.play();
+        }, 0o100);
+    }
+    function ChangeQualtiy_360() {
+        // Hide Menu
+        PlayerMenu_HideAll()
+        // Get Video
+        var video = document.querySelector('video')
+        var audio = document.querySelector('audio')
+        // Get Source
+        video.setAttribute('src', 'http://catactyl.home.ro:5006/The%20Mark%20On%20The%20Wall/360.mp4')
+        // Get Current Timestamp
+        var CurrentTimestamp = document.querySelector("#seek").getAttribute('data-seek')
+        // Go To Timestamp
+        setTimeout(() => {
+            video.pause();
+            audio.pause();
+            video.currentTime = CurrentTimestamp;
+            audio.currentTime = CurrentTimestamp;
+            video.play();
+            audio.play();
+        }, 0o100);
+    }
+</script>

src/components/video-player/Player.astro

@@ -1,6 +1,13 @@
 ---
 // Properties
-const { Poster, Source } = Astro.props
+const { Poster, Video, Audio } = Astro.props
+
+// Cookies
+if (Astro.cookies.get("Milieu").value === "Enabled") {
+  var Milieu = true
+} else {
+  var Milieu = false
+}
 
 // Components
 import Controls from '@components/video-player/Controls.astro'
@@ -10,12 +17,85 @@ import '@styles/player.scss'
 ---
 
 <div class="video-container">
-    <video class="main-video" muted autoplay loop src={Source} poster={Poster}></video>
-    <audio class="main-audio" autoplay><source src={Source} type="audio/mp3"/></audio>
+    <canvas id="ambient-canvas-1"/>
+    <canvas id="ambient-canvas-2"/>
+    <video class="main-video" muted src={Video} poster={Poster} preload="auto"></video>
+    <audio class="main-audio"><source src={Audio} type="audio/mp3"/></audio>
     <Controls/>
 </div>
 
 <!-- Player Functions -->
 <script is:inline src="/player/controller.js"></script>
 <script is:inline src="/player/seek.js"></script>
-<script is:inline src="/player/sync.js"></script>
+<script is:inline src="/player/sync.js"></script>
+
+{Milieu ?
+  <script is:inline>
+  const AMvideo = document.querySelector("video")
+  const oddCanvas = document.getElementById("ambient-canvas-1")
+  const evenCanvas = document.getElementById("ambient-canvas-2")
+  const oddCtx = oddCanvas.getContext("2d")
+  const evenCtx = evenCanvas.getContext("2d")
+  
+  const frameIntervalMs = 2000
+  const canvasOpacity = "0.4"
+  
+  let intervalId
+  let oddFrame = true
+  const drawFrame = () => {
+    if (oddFrame) {
+      oddCtx.drawImage(AMvideo, 0, 0, oddCanvas.width, oddCanvas.height)
+      transitionToOddCanvas()
+    } else {
+      evenCtx.drawImage(AMvideo, 0, 0, evenCanvas.width, evenCanvas.height)
+      transitionToEvenCanvas()
+    }
+    oddFrame = !oddFrame
+  };
+  
+  const transitionToOddCanvas = () => {
+    oddCanvas.style.opacity = canvasOpacity
+    evenCanvas.style.opacity = "0"
+  }
+  
+  const transitionToEvenCanvas = () => {
+    evenCanvas.style.opacity = canvasOpacity
+    oddCanvas.style.opacity = "0"
+  }
+  
+  const drawStart = () => {
+    intervalId = window.setInterval(drawFrame, frameIntervalMs)
+  }
+  
+  const drawPause = () => {
+    if (intervalId) window.clearInterval(intervalId)
+  }
+  
+  const init = () => {
+  
+    //fixes a issue where firefox/chromium fails to load the ambinet mode and doesnt load it. - please dont remove this line lmao
+      
+    AMvideo.pause();AMvideo.play(); 
+      
+    // DO NOT REMOVE 
+    
+    AMvideo.addEventListener("play", drawStart, false)
+    AMvideo.addEventListener("pause", drawPause, false)
+    AMvideo.addEventListener("ended", drawPause, false)
+     
+    oddCanvas.style.transition = evenCanvas.style.transition = `opacity ${frameIntervalMs}ms`
+  }
+  
+  const cleanup = () => {
+    AMvideo.removeEventListener("play", drawStart)
+    AMvideo.removeEventListener("pause", drawPause)
+    AMvideo.removeEventListener("ended", drawPause)
+    drawPause();
+  }
+  
+  window.addEventListener("load", init)
+  window.addEventListener("unload", cleanup)
+  </script>
+  :
+  null
+}

src/layouts/Default.astro

@@ -1,22 +1,22 @@
 ---
 // Properties
-const { Title, Description } = Astro.props
+const { Title, Description } = Astro.props;
 
 // Components
-import Head from '@components/global/Head.astro'
-import MobileNav from '@components/global/MobileNav.astro'
-import Sidebar from '@components/global/Sidebar.astro'
-import Footer from '@components/global/Footer.astro'
+import Head from "@components/global/Head.astro";
+import MobileNav from "@components/global/MobileNav.astro";
+import Sidebar from "@components/global/Sidebar.astro";
+import Footer from "@components/global/Footer.astro";
 
 // Styles
-import '@styles/index.scss'
-import '@styles/mobile.scss'
+import "@styles/index.scss";
+import "@styles/mobile.scss";
 ---
 
-<Head Title={Title} Description={Description}/>
-<MobileNav/>
-<Sidebar/>
+<Head Title={Title} Description={Description} />
+<MobileNav />
+<Sidebar />
 <div class="content">
-    <slot/>
+    <slot />
 </div>
-<Footer/>
+<Footer />

src/pages/api/player/milieu/disable.astro

@@ -0,0 +1,9 @@
+---
+import API from '@layouts/API.astro'
+Astro.cookies.set("Milieu", "Disabled", {
+    path: "/",
+    sameSite: "strict"
+});
+return Astro.redirect("/");
+---
+<API Title="MinPluto" Description=""></API>

src/pages/api/player/milieu/enable.astro

@@ -0,0 +1,14 @@
+---
+// Layout
+import API from '@layouts/API.astro'
+
+// API Action
+Astro.cookies.set("Milieu", "Enabled", {
+    path: "/",
+    sameSite: "strict"
+});
+
+// Return
+return Astro.redirect("/telemtry");
+---
+<API Title="MinPluto" Description=""></API>

src/pages/vp.astro

@@ -4,5 +4,16 @@ import Player from "@components/video-player/Player.astro"
 ---
 
 <Base>
-    <Player Source="/demo-purposes.mp4"/>
-</Base>
+    <Player
+        Video="http://catactyl.home.ro:5006/The%20Mark%20On%20The%20Wall/1080.mp4"
+        Audio="http://catactyl.home.ro:5006/The%20Mark%20On%20The%20Wall/audio.mp4"
+    />
+</Base>
+
+<style is:global>
+    .video-container {
+        width: 90%;
+        margin: auto;
+        margin-top: 92px;
+    }
+</style>

src/pages/watch.astro

@@ -71,12 +71,10 @@ if (EightK === true) { // 571
 ---
 
 <Base Title={video.title}>
-  <div class="video-container">
-    <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=' + '137' + '&local=true'}
-    />
-  </div>
+  <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'}
+  />
   <div class="video-rea">
     <div class="rea-details">
       <p style="font-weight: bold; font-size: 24px;">{video.title}</p>
@@ -227,20 +225,18 @@ function ShareDialogHide() {
   function SyncTimestamp() {SyncAudio.currentTime = SyncVideo.currentTime}
 </script>
 
-<style lang="scss">
-  .video-container {
-    max-width: 90%;
-    margin: auto;
-    .zorn-player {
-      border-radius: 10px;
-    }
-    .zorn-player-controls {
-      border-radius: 0px 0px 10px 10px;
-    }
-  }
-  .video-item {
-    margin-bottom: 24px;
-  }
+<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;