Upload index.html

templates/index.html

@@ -111,19 +111,20 @@
           availableVideos.forEach((video) => {
             const card = document.createElement("div");
             card.className = "bg-white p-4 rounded shadow flex flex-col justify-between";
-            
-            // Create a container that enforces a 9:16 aspect ratio
+
+            // Container with enforced 9:16 aspect ratio
             const videoContainer = document.createElement("div");
             videoContainer.className = "relative w-full rounded overflow-hidden";
             videoContainer.style.aspectRatio = "9 / 16";
-            
-            // Create the video element for preview
+
+            // Video element for preview (with controls)
             const previewVideo = document.createElement("video");
             previewVideo.className = "absolute top-0 left-0 w-full h-full object-cover";
             previewVideo.muted = true;
             previewVideo.loop = true;
             previewVideo.playsInline = true;
             previewVideo.autoplay = true;
+            previewVideo.controls = true; // <-- now shows native video controls
             if (video.preview_video) {
               previewVideo.src = video.preview_video;
             } else {
@@ -132,19 +133,27 @@
             }
             videoContainer.appendChild(previewVideo);
             card.appendChild(videoContainer);
-            
+
             // Title
             const title = document.createElement("h3");
             title.className = "mt-2 font-semibold";
             title.textContent = video.title;
             card.appendChild(title);
-            
-            // Info
+
+            // Info (Subreddit and Upvotes)
             const info = document.createElement("p");
             info.className = "text-sm text-gray-600";
             info.textContent = `Subreddit: ${video.subreddit} | Upvotes: ${video.ups}`;
             card.appendChild(info);
-            
+
+            // Display Duration if available
+            if (video.duration) {
+              const durationText = document.createElement("p");
+              durationText.className = "text-sm text-gray-600";
+              durationText.textContent = `Duration: ${video.duration} sec`;
+              card.appendChild(durationText);
+            }
+
             // Checkbox for selection
             const checkbox = document.createElement("input");
             checkbox.type = "checkbox";
@@ -178,14 +187,28 @@
           });
           const data = await res.json();
           console.log(data);
+          // Restart polling for processing results whenever processing begins.
+          startResultsPolling();
         });
 
-        // Poll for processing results every 5 seconds
-        setInterval(async () => {
-          const res = await fetch("/api/results");
-          const results = await res.json();
-          renderResults(results);
-        }, 5000);
+        // Function to poll for processing results
+        let pollingInterval;
+        function startResultsPolling() {
+          // Clear any previous interval if exists
+          if (pollingInterval) clearInterval(pollingInterval);
+          pollingInterval = setInterval(async () => {
+            const res = await fetch("/api/results");
+            const results = await res.json();
+            renderResults(results);
+            // TASK 1: Stop polling if there are no pending videos
+            const pendingExists = Object.values(results).some(
+              (r) => r.status === "pending"
+            );
+            if (!pendingExists && Object.keys(results).length > 0) {
+              clearInterval(pollingInterval);
+            }
+          }, 5000);
+        }
 
         function renderResults(results) {
           resultsList.innerHTML = "";
@@ -193,15 +216,28 @@
             const result = results[id];
             const container = document.createElement("div");
             container.className = "bg-white p-4 rounded shadow";
+
             const header = document.createElement("div");
             header.className = "flex justify-between items-center";
             const title = document.createElement("h3");
             title.className = "font-semibold text-lg";
             title.textContent = result.generated_title || "Processing...";
             header.appendChild(title);
+
+            // TASK 5: Add a "Copy Title" button
+            if (result.generated_title) {
+              const titleCopyBtn = document.createElement("button");
+              titleCopyBtn.textContent = "Copy Title";
+              titleCopyBtn.className = "bg-blue-500 text-white px-2 py-1 rounded ml-2";
+              titleCopyBtn.addEventListener("click", () => {
+                navigator.clipboard.writeText(result.generated_title);
+              });
+              header.appendChild(titleCopyBtn);
+            }
             container.appendChild(header);
+
             if (result.status === "completed") {
-              // Limit the display size of the processed video.
+              // Processed video display
               const videoContainer = document.createElement("div");
               videoContainer.className = "max-w-md mx-auto mt-2";
               const videoElem = document.createElement("video");
@@ -209,9 +245,15 @@
               videoElem.controls = true;
               videoElem.className = "w-full";
               videoElem.style.maxHeight = "500px";
+
+              // TASK 6: Make the video element draggable.
+              videoElem.setAttribute("draggable", "true");
+              videoElem.addEventListener("dragstart", (e) => {
+                e.dataTransfer.setData("text/uri-list", result.video_url);
+              });
               videoContainer.appendChild(videoElem);
               container.appendChild(videoContainer);
-              
+
               // Caption with a copy button
               const captionDiv = document.createElement("div");
               captionDiv.className = "mt-2 flex items-center";
@@ -238,11 +280,32 @@
               pendingMsg.className = "text-gray-600 mt-2";
               container.appendChild(pendingMsg);
             }
+
+            // TASK 2: Add a "Delete Video" button to allow removal of processed videos.
+            if (result.status === "completed") {
+              const deleteBtn = document.createElement("button");
+              deleteBtn.textContent = "Delete Video";
+              deleteBtn.className = "bg-red-500 text-white px-2 py-1 rounded mt-2";
+              deleteBtn.addEventListener("click", async () => {
+                if (confirm("Are you sure you want to delete this video?")) {
+                  const res = await fetch(`/api/video/${id}`, {
+                    method: "DELETE",
+                  });
+                  if (res.ok) {
+                    container.remove();
+                  } else {
+                    alert("Failed to delete video.");
+                  }
+                }
+              });
+              container.appendChild(deleteBtn);
+            }
+
             resultsList.appendChild(container);
           }
         }
 
-        // Settings Modal
+        // Settings Modal handlers
         openSettings.addEventListener("click", async () => {
           const res = await fetch("/api/settings");
           const settings = await res.json();
@@ -270,9 +333,9 @@
         });
 
         // Connect to the logs WebSocket for live console output
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
         const logsSocket = new WebSocket(`${protocol}//${location.host}/ws/logs`);
-        logsSocket.onmessage = function(event) {
+        logsSocket.onmessage = function (event) {
           const newLog = document.createElement("div");
           newLog.textContent = event.data;
           consoleOutput.appendChild(newLog);