From dd912267173da72bf741f0686bd213fedc5c6a70 Mon Sep 17 00:00:00 2001
From: Korbs <korbs@sudovanilla.org>
Date: Thu, 2 Jan 2025 00:17:02 -0500
Subject: [PATCH] Create new Presnetation mode

---
 src/Presentation/Player.astro | 127 ++++++++++++++++++++++++++++++++++
 src/Styles/Presentation.scss  |  30 ++++++++
 2 files changed, 157 insertions(+)
 create mode 100644 src/Presentation/Player.astro
 create mode 100644 src/Styles/Presentation.scss

diff --git a/src/Presentation/Player.astro b/src/Presentation/Player.astro
new file mode 100644
index 0000000..41e8c9a
--- /dev/null
+++ b/src/Presentation/Player.astro
@@ -0,0 +1,127 @@
+---
+// Properties
+const {
+    PlayerName,
+    Video,
+    Position = "RightBottom",
+    Inset,
+    Theme = "255, 255, 255, 0.5",
+    ThemeBorder = "White",
+    Loop
+} = Astro.props
+
+// Icons and Styles
+import '../Styles/Presentation.scss'
+import '../Styles/Iconoir.css'
+---
+
+<div class="presentation-container" id={"zorn-presentation-player-" + PlayerName}>
+    <video loop muted autoplay playsinline class="main-video" src={Video} preload="auto"></video>
+    <button style={'background: rgba(' + Theme + '); border-color: ' + ThemeBorder} id="pc-playpause"><i class="iconoir-pause-solid"></i></button>
+</div>
+
+<script is:inline define:vars={{PlayerName}}>
+    var Presenter = document.querySelector('#zorn-presentation-player-' + PlayerName + ' video')
+
+    // Icons
+    var play_solid_default = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5"><path d="M6.90588 4.53682C6.50592 4.2998 6 4.58808 6 5.05299V18.947C6 19.4119 6.50592 19.7002 6.90588 19.4632L18.629 12.5162C19.0211 12.2838 19.0211 11.7162 18.629 11.4838L6.90588 4.53682Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
+    var pause_solid_default = '<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff" stroke-width="1.5" data-darkreader-inline-color="" style="--darkreader-inline-color: #e8e6e3;"><path d="M6 18.4V5.6C6 5.26863 6.26863 5 6.6 5H9.4C9.73137 5 10 5.26863 10 5.6V18.4C10 18.7314 9.73137 19 9.4 19H6.6C6.26863 19 6 18.7314 6 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path><path d="M14 18.4V5.6C14 5.26863 14.2686 5 14.6 5H17.4C17.7314 5 18 5.26863 18 5.6V18.4C18 18.7314 17.7314 19 17.4 19H14.6C14.2686 19 14 18.7314 14 18.4Z" fill="#ffffff" stroke="#ffffff" stroke-width="1.5" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill: #ffffff; --darkreader-inline-stroke: #ffffff;"></path></svg>';
+    var PlayIcon = play_solid_default;
+    var PauseIcon = pause_solid_default;
+
+    function PlayPause() {
+        // Get Button
+        const Button_PlayPause = document.querySelector("#zorn-presentation-player-" + PlayerName + " #pc-playpause");
+
+        // Event Listern
+        Button_PlayPause.addEventListener("click", Toggle_PlayPause);
+        Presenter.addEventListener("click", Toggle_PlayPause);
+        Presenter.addEventListener("play", Update_PlayPauseButton);
+        Presenter.addEventListener("pause", Update_PlayPauseButton);
+        function Toggle_PlayPause() {
+            if (Presenter.paused || Presenter.ended) {Presenter.play()}
+            else {Presenter.pause()}
+        }
+
+        // Update Button
+        function Update_PlayPauseButton() {
+            if (Presenter.paused) {
+                Button_PlayPause.setAttribute("data-title", "Play (K)");
+                Button_PlayPause.innerHTML = `${PlayIcon}`;
+            } else {
+                Button_PlayPause.setAttribute("data-title", "Pause (K)");
+                Button_PlayPause.innerHTML = `${PauseIcon}`;
+            }
+        }
+    }
+    PlayPause()
+</script>
+
+
+
+{Inset ?
+    <style>
+        #pc-playpause {
+            margin-bottom: -20px;
+            border-width: 4px;
+        }
+    </style>
+    :
+    null
+}
+
+{ 
+    ()=> {
+      if      (Position === "LeftTop") {
+        return <style>
+            #pc-playpause {
+                top: 0px !important;
+                bottom: inherit !important;
+                left: 0px !important;
+                right: inherit !important;
+            }
+        </style>
+      }
+      else if (Position === "RightTop") {
+        return <style>
+            #pc-playpause {
+                top: 0px !important;
+                bottom: inherit !important;
+                left: inherit !important;
+                right: 0px !important;
+            }
+        </style>
+      }
+      else if (Position === "LeftBottom") {
+        return <style>
+            #pc-playpause {
+                top: inherit !important;
+                bottom: 0px !important;
+                left: 0px !important;
+                right: inherit !important;
+            }
+        </style>
+      }
+      else if (Position === "CenterBottom") {
+        return <style>
+            #pc-playpause {
+                top: inherit !important;
+                bottom: 0px !important;
+                left: 50% !important;
+                right: inherit !important;
+                transform: translate(-93%);
+            }
+        </style>
+      }
+      else if (Position === "RightBottom") {
+        return <style>
+            #pc-playpause {
+                top: inherit !important;
+                bottom: 0px !important;
+                left: inherit !important;
+                right: 0px !important;
+            }
+        </style>
+      }
+    }
+}
\ No newline at end of file
diff --git a/src/Styles/Presentation.scss b/src/Styles/Presentation.scss
new file mode 100644
index 0000000..302ffa2
--- /dev/null
+++ b/src/Styles/Presentation.scss
@@ -0,0 +1,30 @@
+.presentation-container {
+    position: relative;
+    .video-controls, video {
+        border-radius: 12px;
+    }
+    *:focus-visible {
+        outline: none;
+        background: rgba(255, 255, 255, 0.5) !important;
+        transition: 1s background;
+    }
+    video {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        z-index: 1;
+        pointer-events: none;
+    }
+}
+
+#pc-playpause {
+    position: absolute;
+    margin: 24px;
+    color: white;
+    border: 2px solid;
+    border-radius: 3rem;
+    aspect-ratio: 1;
+    backdrop-filter: blur(6px) contrast(0.8);
+    cursor: pointer;
+    padding: 12px;
+}
\ No newline at end of file