itdominator/WebFM
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed video loading setup.

Browse Source
This commit is contained in:
Maxim Stewart 2019-01-28 12:56:27 -06:00
parent 5a1fa30854
commit 2666609e72
4 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
resources/images/thumbnails/5c7a64f4c87918afae27942abf3eef5903048e9a926e1a5de583252de6b6b561.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

19
resources/js/uiActions.js
View File

@ -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) => {

30
resources/js/uiEvents.js
View File

@ -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);
}
}