video_volume.js will keep all the players volume in sync

docker-compose.yml

@@ -3,7 +3,10 @@ version: '3'
 services:
   web:
     container_name: proxitok-web
-    image: ghcr.io/pablouser1/proxitok:master
+    #image: ghcr.io/pablouser1/proxitok:latest
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
     ports:
       - 8080:8080
     environment:
@@ -22,8 +25,8 @@ services:
       - proxitok
     security_opt:
       - no-new-privileges:true
-    cap_drop:
-      - ALL
+    #cap_drop:
+    #  - ALL
     cap_add:
       - CHOWN
       - SETGID

scripts/video_volume.js

@@ -0,0 +1,40 @@
+// This will save the video volume and keep all the players on the page in sync
+document.addEventListener("DOMContentLoaded", function() {
+	const videos = document.querySelectorAll("video");
+
+	// Function to save the volume to localStorage
+	function saveVolume(volume) {
+		localStorage.setItem("videoVolume", volume);
+	}
+
+	// Function to restore the volume from localStorage
+	function restoreVolume() {
+		const savedVolume = localStorage.getItem("videoVolume");
+		if (savedVolume !== null) {
+			videos.forEach(video => {
+				video.volume = parseFloat(savedVolume);
+			});
+		}
+	}
+
+	// Function to sync the volume across all video elements
+	function syncVolume(video) {
+		videos.forEach(otherVideo => {
+			if (otherVideo !== video) {
+				otherVideo.volume = video.volume;
+			}
+		});
+		saveVolume(video.volume);
+	}
+
+	// Loop through all video elements and attach event listeners
+	videos.forEach(video => {
+		// Save the volume when the volume changes
+		video.addEventListener("volumechange", function() {
+			syncVolume(video);
+		});
+	});
+
+	// Restore the volume on page load
+	restoreVolume();
+});

templates/layouts/default.latte

@@ -16,5 +16,6 @@
 		{block content}{/block}
   </section>
 	{block extra}{/block}
+  <script src="{static('js', 'video_volume.js')}"></script>
 </body>
 </html>

templates/layouts/hero.latte

@@ -15,6 +15,7 @@
     </div>
 	</section>
 	{block extra}{/block}
+	<script src="{static('js', 'video_volume.js')}"></script>
 </body>
 
 </html>