update

src/components/video-modal.html

@@ -0,0 +1,94 @@
+<!-- components/video-modal.html -->
+<div id="playerModal" class="hidden">
+  <!-- Navigation bar -->
+  <div
+    class="sticky top-0 z-60 bg-gray-900/95 backdrop-blur transition-transform duration-300"
+    id="modalNav"
+  >
+    <div
+      class="max-w-full w-full px-4 h-14 border-b border-gray-800 flex items-center"
+    >
+      <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"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-5 h-5"
+        >
+          <path d="m12 19-7-7 7-7" />
+          <path d="M19 12H5" />
+        </svg>
+        <span class="font-medium">Back</span>
+      </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 -->
+      <div class="flex items-center mb-4 p-4 bg-gray-800 rounded-lg">
+        <div class="w-12 h-12 rounded-full bg-gray-700 overflow-hidden">
+          <img
+            id="creatorAvatar"
+            src=""
+            alt="Creator"
+            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>
+
+      <!-- Video Description -->
+      <div class="bg-gray-800 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="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>
+</div>