Add volume controller

src/Controls.astro

@@ -12,8 +12,9 @@ import {
     Enlarge,
     ForwardSolid,
     PlaySolid,
-    Refresh
+    Refresh,
-} from "@iconoir/vue";
+    SoundHighSolid
+} from "@iconoir/vue"
 ---
 
 <div class="video-controls">
@@ -30,6 +31,13 @@ import {
                 <button id="vc-backwards"><RewindSolid /></button>
                 <button id="vc-forwards"><ForwardSolid /></button>
             }
+            <div class="vc-volume-controller">
+                <button><SoundHighSolid/></button>
+                <div class="vc-volume-controller-input">
+                    <span style={`background: lightblue`} class="vc-volume-bar"></span>
+                    <input type="range" min="0" max="1.0" step="0.01"/>
+                </div>
+            </div>
         </div>
         <div class="vc-center">
             {Live ?
@@ -58,7 +66,6 @@ import {
     </div>
 </div>
 
-
 <!-- HLS Script -->
 <!-- Required to support live streaming -->
 <!-- Script is not loaded if the video player is not set for a stream -->

src/Index.scss

@@ -81,6 +81,24 @@
                     width: max-content;
                 }
             }
+            .vc-volume-controller, .vc-volume-controller-input {
+                display: flex;
+                align-items: center;
+            }
+            .vc-volume-controller:hover {
+                .vc-volume-controller-input {
+                    width: auto;
+                    opacity: 1;
+                    pointer-events: all;
+                    transition: 0.3s opacity, 0.4s width;
+                }
+            }
+            .vc-volume-controller-input {
+                width: 0px;
+                opacity: 0;
+                pointer-events: none;
+                transition: 0.3s opacity, 0.4s width;
+            }
             .vc-seek {
                 background: rgb(255 255 255 / 10%);
                 width: 100%;

src/Player.astro

@@ -24,10 +24,10 @@ import { Settings } from '@iconoir/vue'
 ---
 
 <div class="video-container">
-    <video class="main-video" {VideoAttributes} src={Video} poster={Poster} preload="auto"></video>
+    <video class="main-video" {VideoAttributes} disableremoteplayback src={Video} poster={Poster} preload="auto"></video>
     {Audio ? <audio class="main-audio"><source {AudioAttributes} src={Audio} type="audio/mp3"/></audio> : null }
-    {Milieu ? <MilieuEffect/> : null }
     {Audio ? <Sync/> : null }
+    {Milieu ? <MilieuEffect/> : null }
     {SettingsMenu ?
         <Controls Live={Live}>
             <button id="open-zorn-settings-button" onclick="OpenZornMenu()"><Settings/></button>
@@ -38,4 +38,20 @@ import { Settings } from '@iconoir/vue'
     }
     <Controller/>
     <Seek/>
-</div>
+</div>
+
+<!-- Needs control the correct source -->
+{Audio ?
+    <script is:inline>
+        var ZornAudioSource = document.querySelector('.video-container audio')
+        var VolumeRange = document.querySelector('.vc-volume-controller-input input')
+        VolumeRange.addEventListener("input", (event) => {ZornAudioSource.volume = event.target.value})
+    </script>
+    :
+    <script is:inline>
+        var Player = document.querySelector('.video-container video')
+        var VolumeRange = document.querySelector('.vc-volume-controller-input input')
+        VolumeRange.addEventListener("input", (event) => {Player.volume = event.target.value})
+    </script>
+}
+