Merge pull request #149 from PR0M3TH3AN/codex/make-desktop-video-player-modal-full-screen

Make desktop video modal full screen

components/video-modal.html

@@ -1,11 +1,7 @@
 <!-- components/video-modal.html -->
-<div id="playerModal" class="fixed inset-0 bg-black/90 z-50 hidden">
-  <div
-    class="modal-container h-full w-full flex items-start justify-center overflow-y-auto"
-  >
-    <div
-      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg relative"
-    >
+<div id="playerModal" class="player-modal hidden">
+  <div class="player-modal__container">
+    <div class="player-modal__content">
       <!-- Navigation bar - sliding at top -->
       <div
         id="modalNav"
@@ -123,11 +119,11 @@
         </div>
       </div>
 
-      <div class="video-container w-full bg-black rounded-t-lg overflow-hidden">
+      <div class="player-modal__video">
         <video id="modalVideo" class="w-full aspect-video" controls></video>
       </div>
 
-      <div class="video-info p-6">
+      <div class="player-modal__info">
         <!-- Title and icons row -->
         <div class="flex items-center justify-between mb-2">
           <h2 id="videoTitle" class="text-2xl font-bold text-white"></h2>

css/style.css

@@ -247,14 +247,19 @@ header img {
 #playerModal {
   position: fixed;
   inset: 0;
-  background-color: rgb(0 0 0 / 0.9); /* You can adjust opacity if needed */
-  z-index: 50;
-  display: none; /* Hidden by default */
+  z-index: 100;
+  display: none;
   flex-direction: column;
+  align-items: stretch;
+  justify-content: stretch;
+  width: 100vw;
+  height: 100vh;
+  background-color: #0f172a;
+  color: #e2e8f0;
+  overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  backdrop-filter: blur(0.625rem);
-  -webkit-backdrop-filter: blur(0.625rem); /* For Safari support */
+  -webkit-overflow-scrolling: touch;
 }
 
 #nostrFormModal,
@@ -269,6 +274,69 @@ header img {
   display: flex;
 }
 
+#playerModal .player-modal__container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  padding: 0;
+  margin: 0;
+}
+
+#playerModal .player-modal__content {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+  max-width: none;
+  background-color: #0f172a;
+  overflow: visible;
+  box-shadow: none;
+  animation: fadeIn var(--modal-motion-duration) ease-out;
+}
+
+#playerModal .player-modal__video {
+  width: 100%;
+  background-color: #000;
+  position: sticky;
+  top: 0;
+  z-index: 51;
+  flex-shrink: 0;
+}
+
+#playerModal .player-modal__video video {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+}
+
+#playerModal .player-modal__info {
+  flex: 0 0 auto;
+  padding: 1.5rem;
+  padding-bottom: 3rem;
+}
+
+html.modal-open {
+  overflow: hidden;
+}
+
+body.modal-open {
+  overflow: hidden;
+}
+
+html.modal-open,
+body.modal-open {
+  height: 100%;
+}
+
+body.modal-open #app {
+  overflow: hidden;
+}
+
 /* Modal Content Container */
 .modal-content {
   width: 100%;
@@ -296,15 +364,6 @@ header img {
   }
 }
 
-/* Video Container */
-.video-container {
-  width: 100%;
-  background-color: black;
-  position: sticky;
-  top: 0;
-  z-index: 51;
-}
-
 /* Modal Video */
 #modalVideo {
   width: 100%;
@@ -312,21 +371,8 @@ header img {
   background-color: black;
 }
 
-/* Video Info Section */
-.video-info {
-  padding: 1rem;
-  flex: 1;
-  overflow-y: auto;
-}
-
 /* Responsive Adjustments */
 @media (min-width: 768px) {
-  #playerModal {
-    padding: 2rem;
-    align-items: center;
-    justify-content: center;
-  }
-
   .modal-content {
     max-width: 64rem;
     max-height: calc(100vh - 4rem); /* Account for padding */
@@ -334,8 +380,9 @@ header img {
     overflow: visible;
   }
 
-  .video-container {
-    position: relative;
+  #playerModal .player-modal__content {
+    max-width: none;
+    border-radius: 0;
   }
 }
 
@@ -595,7 +642,7 @@ footer a:hover {
 }
 
 /* Video info cards */
-.video-info .bg-gray-800\/50 {
+.player-modal__info .bg-gray-800\/50 {
   background-color: rgb(31 41 55 / 0.5);
   backdrop-filter: blur(0.25rem);
 }

js/app.js

@@ -1004,9 +1004,11 @@ class bitvidApp {
       if (!modalNav || !playerModal) {
         throw new Error("Modal nav (#modalNav) or #playerModal not found!");
       }
+      const scrollRegion =
+        playerModal.querySelector(".player-modal__content") || playerModal;
       let lastScrollY = 0;
-      playerModal.addEventListener("scroll", (e) => {
-        const currentScrollY = e.target.scrollTop;
+      scrollRegion.addEventListener("scroll", () => {
+        const currentScrollY = scrollRegion.scrollTop;
         const shouldShowNav =
           currentScrollY <= lastScrollY || currentScrollY < 50;
         modalNav.style.transform = shouldShowNav
@@ -1145,6 +1147,12 @@ class bitvidApp {
     if (this.playerModal) {
       this.playerModal.style.display = "flex";
       this.playerModal.classList.remove("hidden");
+      document.body.classList.add("modal-open");
+      document.documentElement.classList.add("modal-open");
+      const scrollRegion =
+        this.playerModal.querySelector(".player-modal__content") ||
+        this.playerModal;
+      scrollRegion.scrollTop = 0;
     }
     this.applyModalLoadingPoster();
   }
@@ -5775,6 +5783,8 @@ class bitvidApp {
       this.playerModal.style.display = "none";
       this.playerModal.classList.add("hidden");
     }
+    document.body.classList.remove("modal-open");
+    document.documentElement.classList.remove("modal-open");
     if (typeof this.modalPosterCleanup === "function") {
       this.modalPosterCleanup();
       this.modalPosterCleanup = null;