From b4d52c0320a573bb88bdb18af2f229abdd5a8ed1 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Fri, 16 Aug 2024 22:26:39 -0400
Subject: [PATCH] Add option for color and custom menu

---
 src/Controls.astro | 11 +++++++++--
 src/Player.astro   | 18 ++++++++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/Controls.astro b/src/Controls.astro
index 405c4cb..5744dc9 100644
--- a/src/Controls.astro
+++ b/src/Controls.astro
@@ -1,4 +1,10 @@
 ---
+// Properties
+const {
+    Title,
+    SeekColor = '#ff274d'
+} = Astro.props
+
 // Icons
 import {
     Backward15Seconds,
@@ -10,7 +16,7 @@ import {
 
 <div class="video-controls">
     <div class="vc-top">
-        <p>The Mark On The Wall</p>
+        <p>{Title}</p>
     </div>
     <div class="vc-bottom">
         <div class="vc-start">
@@ -20,7 +26,7 @@ import {
         </div>
         <div class="vc-center">
             <div class="vc-seek">
-                <span class="vc-progress-bar"></span>
+                <span style={'background: ' + SeekColor} class="vc-progress-bar"></span>
                 <input class="seek" id="seek" value="0" min="0" type="range" step="1">
             </div>
             <p class="timestamp">
@@ -30,6 +36,7 @@ import {
             </p>
         </div>
         <div class="vc-end">
+            <slot/>
             <button id="vc-fullscreen"><Enlarge /></button>
         </div>
     </div>
diff --git a/src/Player.astro b/src/Player.astro
index 9c6537a..30b98de 100644
--- a/src/Player.astro
+++ b/src/Player.astro
@@ -3,11 +3,11 @@
 const {
     Poster,
     Video,
-    Audio, // For YouTube Frontends that wants to support 1080p and higher
-    CustomControls = true,
+    Audio,
     VideoAttributes,
     AudioAttributes,
-    Milieu
+    Milieu,
+    SettingsMenu
 } = Astro.props
 
 // Components
@@ -19,6 +19,7 @@ import Sync from './Controls/Sync.astro'
 
 // Styles
 import './Index.scss'
+import { Settings } from '@iconoir/vue'
 ---
 
 <div class="video-container">
@@ -26,5 +27,14 @@ import './Index.scss'
     {Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
     {Milieu ? <MilieuEffect/> : null }
     {Audio ? <Sync/> : null }
-    {CustomControls ? <Controls/> <Controller/> <Seek/> : null }
+    {SettingsMenu ?
+        <Controls>
+            <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button>
+            <slot/>
+        </Controls>
+        :
+        <Controls/>
+    }
+    <Controller/>
+    <Seek/>
 </div>
\ No newline at end of file