updated functionality and styling

Author: gtsteffaniak

.goreleaser.yaml

@@ -4,13 +4,12 @@ version: 2
 
 builds:
   # Build configuration for darwin and linux
-  - id: default
+  - id: linux
     ldflags: &ldflags
       - -s -w -X github.com/gtsteffaniak/hi-time-live/routes.Version={{.Version}}
     main: main.go
     binary: filebrowser
     goos:
-      - darwin
       - linux
     goarch:
       - amd64
@@ -36,8 +35,24 @@ builds:
       post:
         - upx {{ .Path }}  # Compress the binary with UPX
 
+  # Build configuration for windows without arm & upx
+  - id: windows
+    ldflags: *ldflags
+    main: main.go
+    binary: filebrowser
+    goos:
+      - darwin
+    goarch:
+      - amd64
+      - arm64
+
 archives:
-  - name_template: "{{.Os}}-{{.Arch}}{{if .Arm}}v{{.Arm}}{{end}}-{{ .ProjectName }}"
+  - name_template: >
+      {{- if eq .Os "windows" -}}
+      {{.ProjectName}}
+      {{- else -}}
+      {{.Os}}-{{.Arch}}{{if .Arm}}v{{.Arm}}{{end}}-{{.ProjectName}}
+      {{- end -}}
     format: binary
 
 checksum:

templates/css/roomStyle.css

@@ -61,7 +61,7 @@
 /* Main container spans the full viewport */
 #video-container {
   display: grid;
-  grid-template-columns: repeat(1, 1fr) !important; /* Two columns */
+  grid-template-columns: repeat(1, 1fr); /* one columns */
   gap: 1em; /* Spacing between grid items */
   box-sizing: border-box; /* Includes padding/border in dimensions */
   overflow: hidden; /* Prevents any overflow */
@@ -76,22 +76,12 @@
   padding-bottom: 5em !important;
 }
 
-.four {
-  grid-template-columns: repeat(2, 1fr) !important; /* Two columns */
-}
-
-/* Medium screens - 2x2 layout */
-@media (min-width: 801px) and (max-width: 1200px) {
-  #video-container {
-    grid-template-columns: repeat(2, 1fr); /* Two columns */
-  }
+.one {
+  grid-template-columns: repeat(1, 1fr) !important; /* One column */
 }
 
-/* Large screens - 3x1 or 3x2 layout */
-@media (min-width: 1201px) {
-  #video-container {
-    grid-template-columns: repeat(3, 1fr); /* Three columns */
-  }
+.two {
+  grid-template-columns: repeat(2, 1fr) !important; /* Two columns */
 }
 
 /* Styling for each video container */

templates/js/signaling.js

@@ -78,35 +78,18 @@ async function createRemoteVideoStream(id) {
 }
 
 // Helper function to attach media stream to the video element
-function attachMediaStream(video, stream, id) {
+async function attachMediaStream(video, stream, id) {
     try {
+        const overlay = document.getElementById(id + '-video-overlay');
         // Use Safari-friendly attachment logic
         video.srcObject = stream;
-        video.addEventListener("loadedmetadata", async () => {
-            try {
-                await video.play(); // Ensure video playback starts
-                console.log("Remote video is playing for:", id);
-                video.muted = false; // Unmute after video starts
-            } catch (playError) {
-                console.error("Error playing the remote video:", playError);
-
-                // Optional: Add a fallback for user interaction
-                const overlay = document.getElementById(id + '-video-overlay');
-                overlay.innerHTML += "<p>Click to play</p>";
-                overlay.style.cursor = "pointer";
-
-                overlay.addEventListener("click", async () => {
-                    try {
-                        overlay.style.display = "none"; // Hide the overlay
-                        await video.play();
-                        console.log("Remote video resumed after user interaction:", id);
-                        video.muted = false;
-                    } catch (interactionError) {
-                        console.error("Error playing the video after user interaction:", interactionError);
-                    }
-                });
-            }
-        });
+        try {
+            await video.play(); // Ensure video playback starts
+            console.log("Remote video is playing for:", id);
+            video.muted = false; // Unmute after video starts
+        } catch (playError) {
+            console.error("Error playing the remote video:", playError);
+        }
         updateContainerClass();
     } catch (error) {
         console.error("Error attaching media stream:", error);
@@ -116,6 +99,9 @@ function attachMediaStream(video, stream, id) {
 function updateContainerClass() {
     const videoContainer = document.getElementById('video-container');
     const childrenCount = videoContainer.children.length;
+    videoContainer.classList.remove('one');
+    videoContainer.classList.remove('two');
+
     if (childrenCount > 0) {
         videoContainer.classList.remove('hidden');
         if (window.innerWidth > 800) {
@@ -125,13 +111,26 @@ function updateContainerClass() {
     } else {
         videoContainer.classList.add('hidden');
     }
-    if (childrenCount === 4) {
-        videoContainer.classList.add('four');
+    if (childrenCount === 1) {
+        videoContainer.classList.add('one');
+        return;
+    }
+    if (childrenCount === 2) {
+        if (window.innerWidth > 800) {
+            videoContainer.classList.add('two');
+        } else {
+            videoContainer.classList.add('one');
+        }
+    }
+    if (childrenCount === 4 || childrenCount === 3) {
+        videoContainer.classList.add('two');
         return;
     }
 }
 
 
+window.addEventListener("resize", updateContainerClass);
+
 function removeRemoteVideoStream(id) {
     const containerDiv = document.getElementById(id + '-container');
     if (containerDiv) {