update

src/components/video-modal.html

@@ -1,16 +1,20 @@
 <!-- components/video-modal.html -->
-<div id="playerModal" class="hidden">
-  <!-- Navigation bar -->
+<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 overflow-hidden relative"
+    >
+      <!-- Navigation bar - sliding at top -->
       <div
-    class="sticky top-0 z-60 bg-gray-900/95 backdrop-blur transition-transform duration-300"
         id="modalNav"
+        class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-300"
       >
-    <div
-      class="max-w-full w-full px-4 h-14 border-b border-gray-800 flex items-center"
-    >
+        <div class="flex items-center px-6 py-4">
           <button
             id="closeModal"
-        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"
+            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"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -22,27 +26,27 @@
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
-          class="w-5 h-5"
+              class="w-6 h-6 text-gray-300"
             >
-          <path d="m12 19-7-7 7-7" />
-          <path d="M19 12H5" />
+              <path d="M15 18l-6-6 6-6" />
             </svg>
-        <span class="font-medium">Back</span>
           </button>
         </div>
       </div>
 
-  <div class="modal-content">
-    <div class="video-container">
-      <video id="modalVideo" controls></video>
+      <div class="video-container w-full bg-black">
+        <video id="modalVideo" class="w-full aspect-video" controls></video>
       </div>
 
-    <div class="video-info">
+      <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">
+        <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.
@@ -50,7 +54,7 @@
         </div>
 
         <!-- 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">
             <img
               id="creatorAvatar"
@@ -68,14 +72,14 @@
         </div>
 
         <!-- 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">
             No description available.
           </p>
         </div>
 
         <!-- Torrent stats -->
-      <div class="bg-gray-800 rounded-lg p-4">
+        <div class="bg-gray-800/50 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"
@@ -91,4 +95,5 @@
         </div>
       </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;
+      });
+    }
   }
 
   /**