Upload index.html

templates/index.html

@@ -234,7 +234,7 @@
             container.appendChild(header);
 
             if (result.status === "completed") {
-              // Processed video display (preview)
+              // Processed video display
               const videoContainer = document.createElement("div");
               videoContainer.className = "max-w-md mx-auto mt-2";
               const videoElem = document.createElement("video");
@@ -242,37 +242,21 @@
               videoElem.controls = true;
               videoElem.className = "w-full";
               videoElem.style.maxHeight = "500px";
-              videoContainer.appendChild(videoElem);
-              container.appendChild(videoContainer);
-
-              // Preload the video file as a Blob and create an object URL
-              // (We do this once per result; if already fetched, we reuse it)
-              if (!result.blobUrl) {
-                fetch(window.location.origin + result.video_url)
-                  .then(response => response.blob())
-                  .then(blob => {
-                    result.blobUrl = URL.createObjectURL(blob);
-                  })
-                  .catch(err => console.error("Error fetching video blob:", err));
-              }
 
-              // Create a separate drag-and-drop component.
-              const dragComponent = document.createElement("div");
-              dragComponent.className =
-                "mt-2 p-2 bg-gray-200 border border-dashed text-center rounded cursor-move";
-              dragComponent.textContent = "Drag This File";
-              dragComponent.setAttribute("draggable", "true");
-              dragComponent.addEventListener("dragstart", (e) => {
-                // Use the pre-fetched blob URL if available; otherwise, fallback to the hosted URL.
-                const finalUrl = result.blobUrl ? result.blobUrl : window.location.origin + result.video_url;
-                // Define a file name (customize as needed)
+              // Make the video element draggable.
+              videoElem.setAttribute("draggable", "true");
+              videoElem.addEventListener("dragstart", (e) => {
+                // Build an absolute URL for the file
+                const fullUrl = window.location.origin + result.video_url;
+                // Define a file name for the dragged file (you can customize this)
                 const fileName = "video_" + id + ".mp4";
-                // Format required: "mime-type:filename:download_url"
-                const downloadURLData = "video/mp4:" + fileName + ":" + finalUrl;
+                // Format: MIME type:filename:download_url
+                const downloadURLData = "video/mp4:" + fileName + ":" + fullUrl;
                 e.dataTransfer.setData("DownloadURL", downloadURLData);
               });
-              container.appendChild(dragComponent);
-            
+
+              videoContainer.appendChild(videoElem);
+              container.appendChild(videoContainer);
 
               // Caption with a copy button
               const captionDiv = document.createElement("div");