update

src/components/video-modal.html

@@ -1,92 +1,97 @@
 <!-- components/video-modal.html -->
-<div id="playerModal" class="hidden">
+<div id="playerModal" class="fixed inset-0 bg-black/90 z-50 hidden">
-  <!-- Navigation bar -->
   <div
-    class="sticky top-0 z-60 bg-gray-900/95 backdrop-blur transition-transform duration-300"
+    class="modal-container h-full w-full flex items-start justify-center overflow-y-auto"
-    id="modalNav"
   >
     <div
-      class="max-w-full w-full px-4 h-14 border-b border-gray-800 flex items-center"
+      class="modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-6xl my-0 rounded-lg overflow-hidden relative"
     >
-      <button
+      <!-- Navigation bar - sliding at top -->
-        id="closeModal"
+      <div
-        class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors px-3 py-2 rounded-md hover:bg-gray-800/50"
+        id="modalNav"
+        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300"
       >
-        <svg
+        <div class="flex items-center px-6 py-4">
-          xmlns="http://www.w3.org/2000/svg"
+          <button
-          width="24"
+            id="closeModal"
-          height="24"
+            class="back-button flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur"
-          viewBox="0 0 24 24"
+          >
-          fill="none"
+            <svg
-          stroke="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
-          stroke-width="2"
+              width="24"
-          stroke-linecap="round"
+              height="24"
-          stroke-linejoin="round"
+              viewBox="0 0 24 24"
-          class="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="w-6 h-6 text-gray-300"
+            >
+              <path d="M15 18l-6-6 6-6" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="video-container w-full bg-black">
+        <video id="modalVideo" class="w-full aspect-video" controls></video>
+      </div>
+
+      <div class="video-info p-6">
+        <!-- Rest of the content stays the same -->
+        <!-- Video Title -->
+        <h2 id="videoTitle" class="text-2xl font-bold mb-2 text-white"></h2>
+
+        <!-- Video Timestamp -->
+        <div
+          class="flex items-center justify-between text-sm text-gray-400 mb-4"
         >
-          <path d="m12 19-7-7 7-7" />
+          <span id="videoTimestamp">just now</span>
-          <path d="M19 12H5" />
+          <div id="modalStatus" class="text-gray-300">
-        </svg>
+            Initializing... Just give it a sec.
-        <span class="font-medium">Back</span>
+          </div>
-      </button>
-    </div>
-  </div>
-
-  <div class="modal-content">
-    <div class="video-container">
-      <video id="modalVideo" controls></video>
-    </div>
-
-    <div class="video-info">
-      <!-- Video Title -->
-      <h2 id="videoTitle" class="text-2xl font-bold mb-2 text-white"></h2>
-
-      <!-- Video Timestamp -->
-      <div class="flex items-center justify-between text-sm text-gray-400 mb-4">
-        <span id="videoTimestamp">just now</span>
-        <div id="modalStatus" class="text-gray-300">
-          Initializing... Just give it a sec.
         </div>
-      </div>
 
-      <!-- Creator info -->
+        <!-- Creator info -->
-      <div class="flex items-center mb-4 p-4 bg-gray-800 rounded-lg">
+        <div class="flex items-center mb-4 p-4 bg-gray-800/50 rounded-lg">
-        <div class="w-12 h-12 rounded-full bg-gray-700 overflow-hidden">
+          <div class="w-12 h-12 rounded-full bg-gray-700 overflow-hidden">
-          <img
+            <img
-            id="creatorAvatar"
+              id="creatorAvatar"
-            src=""
+              src=""
-            alt="Creator"
+              alt="Creator"
-            class="w-full h-full object-cover"
+              class="w-full h-full object-cover"
-          />
+            />
+          </div>
+          <div class="ml-4">
+            <h3 id="creatorName" class="font-medium text-lg text-white">
+              Creator Name
+            </h3>
+            <p id="creatorNpub" class="text-sm text-gray-400">npub...</p>
+          </div>
         </div>
-        <div class="ml-4">
-          <h3 id="creatorName" class="font-medium text-lg text-white">
-            Creator Name
-          </h3>
-          <p id="creatorNpub" class="text-sm text-gray-400">npub...</p>
-        </div>
-      </div>
 
-      <!-- Video Description -->
+        <!-- Video Description -->
-      <div class="bg-gray-800 rounded-lg p-4 mb-4">
+        <div class="bg-gray-800/50 rounded-lg p-4 mb-4">
-        <p id="videoDescription" class="text-gray-300 whitespace-pre-wrap">
+          <p id="videoDescription" class="text-gray-300 whitespace-pre-wrap">
-          No description available.
+            No description available.
-        </p>
+          </p>
-      </div>
-
-      <!-- Torrent stats -->
-      <div class="bg-gray-800 rounded-lg p-4">
-        <div class="w-full bg-gray-700 rounded-full h-2 mb-2">
-          <div
-            class="bg-blue-500 h-2 rounded-full"
-            id="modalProgress"
-            style="width: 0%"
-          ></div>
         </div>
-        <div class="flex justify-between text-sm text-gray-400">
+
-          <span id="modalPeers">Peers: 0</span>
+        <!-- Torrent stats -->
-          <span id="modalSpeed">Speed: 0 KB/s</span>
+        <div class="bg-gray-800/50 rounded-lg p-4">
-          <span id="modalDownloaded">Downloaded: 0 MB / 0 MB</span>
+          <div class="w-full bg-gray-700 rounded-full h-2 mb-2">
+            <div
+              class="bg-blue-500 h-2 rounded-full"
+              id="modalProgress"
+              style="width: 0%"
+            ></div>
+          </div>
+          <div class="flex justify-between text-sm text-gray-400">
+            <span id="modalPeers">Peers: 0</span>
+            <span id="modalSpeed">Speed: 0 KB/s</span>
+            <span id="modalDownloaded">Downloaded: 0 MB / 0 MB</span>
+          </div>
         </div>
       </div>
     </div>

src/css/style.css

@@ -391,3 +391,33 @@ footer a:hover {
     border-radius: 0;
   }
 }
+
+/* Override default button styles for back button */
+.back-button {
+  background: rgba(0, 0, 0, 0.5) !important;
+  padding: 0 !important;
+  color: rgb(209 213 219) !important;
+  transform: none !important;
+}
+
+.back-button:hover {
+  background: rgba(0, 0, 0, 0.7) !important;
+  color: white !important;
+}
+
+/* Modal Container */
+.modal-container {
+  padding: 0;
+}
+
+@media (min-width: 768px) {
+  .modal-container {
+    padding: 2rem;
+  }
+}
+
+/* Video info cards */
+.video-info .bg-gray-800\/50 {
+  background-color: rgb(31 41 55 / 0.5);
+  backdrop-filter: blur(4px);
+}

src/js/app.js

@@ -164,6 +164,22 @@ class bitvidApp {
     this.creatorAvatar = document.getElementById("creatorAvatar");
     this.creatorName = document.getElementById("creatorName");
     this.creatorNpub = document.getElementById("creatorNpub");
+
+    // Add scroll behavior for nav
+    let lastScrollY = 0;
+    const modalNav = document.getElementById("modalNav");
+
+    if (this.playerModal && modalNav) {
+      this.playerModal.addEventListener("scroll", (e) => {
+        const currentScrollY = e.target.scrollTop;
+        const shouldShowNav =
+          currentScrollY <= lastScrollY || currentScrollY < 50;
+        modalNav.style.transform = shouldShowNav
+          ? "translateY(0)"
+          : "translateY(-100%)";
+        lastScrollY = currentScrollY;
+      });
+    }
   }
 
   /**