diff --git a/resources/images/loading.gif b/resources/images/loading.gif new file mode 100644 index 0000000..562f9fd Binary files /dev/null and b/resources/images/loading.gif differ diff --git a/resources/images/thumbnails/5c7a64f4c87918afae27942abf3eef5903048e9a926e1a5de583252de6b6b561.jpg b/resources/images/thumbnails/5c7a64f4c87918afae27942abf3eef5903048e9a926e1a5de583252de6b6b561.jpg new file mode 100644 index 0000000..a9d2850 Binary files /dev/null and b/resources/images/thumbnails/5c7a64f4c87918afae27942abf3eef5903048e9a926e1a5de583252de6b6b561.jpg differ diff --git a/resources/js/uiActions.js b/resources/js/uiActions.js index 4eecb30..7bf66b6 100644 --- a/resources/js/uiActions.js +++ b/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) => { diff --git a/resources/js/uiEvents.js b/resources/js/uiEvents.js index 274e100..3ea3fe4 100644 --- a/resources/js/uiEvents.js +++ b/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" || - classNM == "dirStyle") { - if (classNM == "dirStyle") { + if (classNM === "fileStyle" || classNM === "movieStyle" || + 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") { + // If clicking on dir icon + } else if (callingID === "dirID") { let node = obj.parentNode; getDir(node.children[1].value); - // If clicking on movie thumbnail - } else if (callingID == "movieID") { + // If clicking on movie thumbnail + } else if (callingID === "movieID") { let node = obj.parentNode; - showMedia(node.children[1].value, "movie"); - // If clicking on file icon - } else if (callingID == "fileID") { + showMedia(node.children[1].value, "video"); + // If clicking on file icon + } else if (callingID === "fileID") { let node = obj.parentNode; showMedia(node.children[1].value, "file"); - // If clicking on image - } else if (callingID == "imageID") { + // If clicking on image + } else if (callingID === "imageID") { showMedia(obj.alt, "image"); - // If clicking on text title - } else if (callingID == "titleID") { + // If clicking on text title + } else if (callingID === "titleID") { enableEdit(obj); } }