From 6a1d5b44e920b40b0c950dd422ebb1a6d756c794 Mon Sep 17 00:00:00 2001
From: Trevor Mears <trevor.mears@gmail.com>
Date: Sat, 27 Dec 2025 23:04:34 -0800
Subject: [PATCH] Added channel overlay to fullscreen video player

---
 public/css/main.css                 | 17 +++++++++++++++++
 public/js/components/VideoPlayer.js |  5 +++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/public/css/main.css b/public/css/main.css
index cd65b86..d4b3f6c 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -498,6 +498,23 @@ h4 {
   pointer-events: none;
 }
 
+/* Fullscreen mode for video container */
+.video-container:fullscreen {
+  width: 100%;
+  height: 100%;
+  background: #000;
+}
+
+.video-container:fullscreen #video-player {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.video-container:fullscreen .now-playing-overlay {
+  bottom: 80px;
+}
+
 .channel-nav {
   display: flex;
   flex-direction: column;
diff --git a/public/js/components/VideoPlayer.js b/public/js/components/VideoPlayer.js
index 33834a7..eef8b2f 100644
--- a/public/js/components/VideoPlayer.js
+++ b/public/js/components/VideoPlayer.js
@@ -6,6 +6,7 @@
 class VideoPlayer {
     constructor() {
         this.video = document.getElementById('video-player');
+        this.container = document.querySelector('.video-container');
         this.overlay = document.getElementById('player-overlay');
         this.nowPlaying = document.getElementById('now-playing');
         this.hls = null;
@@ -495,8 +496,8 @@ class VideoPlayer {
     toggleFullscreen() {
         if (document.fullscreenElement) {
             document.exitFullscreen();
-        } else {
-            this.video.requestFullscreen();
+        } else if (this.container) {
+            this.container.requestFullscreen();
         }
     }
 }