Changed video loading setup.

resources/js/uiActions.js

@@ -54,6 +54,9 @@ const showMedia = async (mediaLoc, type) => {
     let fullMedia    = path + mediaLoc;
 
     let iframe       = document.createElement("IFRAME");
+
+    let video       = document.createElement("VIDEO");
+
     let outterDiv    = document.createElement("DIV");
     let popOutDiv    = document.createElement("DIV");
     let closeDiv     = document.createElement("DIV");
@@ -107,6 +110,11 @@ const showMedia = async (mediaLoc, type) => {
     iframe.id           = "fileViewInner";
     iframe.src          = fullMedia;
 
+    video.controls      = true
+    video.autoplay      = true;
+    video.style         = "width: 100%; height: auto;";
+    video.poster        = "resources/images/loading.gif";
+
     outterDiv.appendChild(closeDiv);
     outterDiv.appendChild(aTag);
     outterDiv.appendChild(toLocDiv);
@@ -114,6 +122,9 @@ const showMedia = async (mediaLoc, type) => {
     if (type === "image") {
         outterDiv.id = "imgView";
         outterDiv.appendChild(imgDiv);
+    } else if (type === "video") {
+        outterDiv.id = "fileView";
+        outterDiv.appendChild(video);
     } else {
         outterDiv.id = "fileView";
         outterDiv.appendChild(iframe);
@@ -121,6 +132,14 @@ const showMedia = async (mediaLoc, type) => {
 
     document.body.appendChild(outterDiv);
     dragContainer(outterDiv);  // Set for dragging events
+
+    if (type === "video") {
+        // This is questionable in usage since it loads the full video
+        // before showing; but, seeking doesn't work otherwise...
+        let response = await fetch(fullMedia, {method: "GET"});
+        var vidSrc   = URL.createObjectURL(await response.blob()); // IE10+
+        video.src    = vidSrc;
+    }
 }
 
 const closeContainer = (elm) => {

resources/js/uiEvents.js

@@ -28,30 +28,32 @@ document.ondblclick = (event) => {
     // Left click detect
     if (event.which == 1) {
         // If clicking on container
-        if (classNM == "fileStyle" || classNM == "movieStyle" ||
+        if (classNM === "fileStyle" || classNM === "movieStyle" ||
-                                      classNM == "dirStyle") {
+                                        classNM === "dirStyle") {
-            if (classNM == "dirStyle") {
+            if (classNM === "dirStyle") {
                 getDir(obj.children[1].value);
+            } else if (classNM === "movieStyle") {
+                showMedia(obj.children[1].value, "video");
             } else {
                 showMedia(obj.children[1].value, "file");
             }
             // If clicking on dir icon
-        } else if (callingID == "dirID") {
+        } else if (callingID === "dirID") {
             let node = obj.parentNode;
             getDir(node.children[1].value);
             // If clicking on movie thumbnail
-        } else if (callingID == "movieID") {
+        } else if (callingID === "movieID") {
             let node = obj.parentNode;
-            showMedia(node.children[1].value, "movie");
+            showMedia(node.children[1].value, "video");
             // If clicking on file icon
-        } else if (callingID == "fileID") {
+        } else if (callingID === "fileID") {
             let node = obj.parentNode;
             showMedia(node.children[1].value, "file");
             // If clicking on image
-    } else if (callingID == "imageID") {
+        } else if (callingID === "imageID") {
             showMedia(obj.alt, "image");
             // If clicking on text title
-        } else if (callingID == "titleID") {
+        } else if (callingID === "titleID") {
             enableEdit(obj);
         }
     }