diff --git a/index.html b/index.html
index 0ee49b9..342144e 100644
--- a/index.html
+++ b/index.html
@@ -38,8 +38,6 @@
-
-
diff --git a/resources/js/uiActions.js b/resources/js/uiActions.js
index 46be735..00b01ee 100644
--- a/resources/js/uiActions.js
+++ b/resources/js/uiActions.js
@@ -48,52 +48,81 @@ const disableEdits = () => {
this.readOnly = "true";
}
-const showImg = (imgLoc) => {
- let path = document.getElementById("path").innerHTML;
- let imgView = document.getElementById("imgView");
- let fullImage = path + imgLoc;
- let toPlayerButton = "∽
";
- let popButton = "↗
";
- let CloseBttn = "X
";
- imgView.style.display = "block";
- imgView.innerHTML = CloseBttn + popButton + toPlayerButton;
+const showMedia = (mediaLoc, type) => {
+ let path = document.getElementById("path").innerHTML;
+ let tempRef = mediaLoc.toLowerCase();
+ let fullMedia = path + mediaLoc;
- imgView.innerHTML += "";
- dragContainer(imgView); // Set for dragging events
-}
+ let iframe = document.createElement("IFRAME");
+ let outterDiv = document.createElement("DIV");
+ let popOutDiv = document.createElement("DIV");
+ let closeDiv = document.createElement("DIV");
+ let toLocDiv = document.createElement("DIV");
+ let imgDiv = document.createElement("DIV");
+ let aTag = document.createElement("A");
+ let imgTag = document.createElement("IMG");
+ let closeText = document.createTextNode("X");
-const showMedia = (media) => {
- let path = document.getElementById("path").innerHTML;
- let tempRef = media.toLowerCase();
- let fullMedia = path + media;
+ if (type === "image") {
+ outterDiv.id = "imgView";
+ } else {
+ outterDiv.id = "fileView";
+ }
+
+ closeDiv.className = "closeBttn";
+ closeDiv.title = "Close";
+ closeDiv.setAttribute("onclick", "closeContainer(this)");
+ closeDiv.appendChild(closeText);
+
+ aTag.title = "New Tab";
+ aTag.target = "_blank";
+ aTag.href = fullMedia;
+
+ popOutDiv.className = "popOutBttn";
+ popOutDiv.innerHTML = "↗";
+ aTag.appendChild(popOutDiv);
+
+ toLocDiv.title = "Open In Local Program";
+ toLocDiv.className = "popOutBttn";
+ toLocDiv.innerHTML = "∽";
+ toLocDiv.setAttribute("onclick", "openInLocalProg('" + fullMedia + "')");
+
+ imgDiv.id = "imgArea";
+ imgTag.className = "imgViewImg";
+ imgDiv.appendChild(imgTag);
+ imgTag.src = fullMedia;
if (tempRef.includes(".mp4") || tempRef.includes(".webm") ||
- tempRef.includes(".mp3") || tempRef.includes(".ogg") ||
- tempRef.includes(".pdf") || tempRef.includes(".flac")) {
- let mediaView = document.getElementById("fileView");
- let toPlayerButton = "∽
";
- let popButton = "↗
";
- let CloseBttn = "X
";
-
- mediaView.style.display = "block";
- mediaView.innerHTML = CloseBttn + popButton + toPlayerButton;
- mediaView.innerHTML += "";
-
- dragContainer(mediaView); // Set for dragging events
- } else {
- openInLocalProg(fullMedia);
+ tempRef.includes(".mp3") || tempRef.includes(".ogg") ||
+ tempRef.includes(".pdf") || tempRef.includes(".flac") ||
+ tempRef.includes(".mkv") || tempRef.includes(".avi")) {
+ if (tempRef.includes(".mkv") || tempRef.includes(".avi")) {
+ openInLocalProg(fullMedia);
+ return;
+ // Future option to convert container and view certain media.
+ // fullMedia = quickRemux(fullMedia);
+ }
}
+
+ iframe.id = "fileViewInner";
+ iframe.src = fullMedia;
+
+ outterDiv.appendChild(closeDiv);
+ outterDiv.appendChild(aTag);
+ outterDiv.appendChild(toLocDiv);
+
+ if (type === "image") {
+ outterDiv.appendChild(imgDiv);
+ } else {
+ outterDiv.appendChild(iframe);
+ }
+
+ document.body.appendChild(outterDiv);
+ dragContainer(outterDiv); // Set for dragging events
}
-const closeImg = () => {
- let imgView = document.getElementById("imgView");
- imgView.style.display = "none";
-}
-
-const closeMedia = () => {
- let mediaView = document.getElementById("fileView");
- mediaView.style.display = "none";
- mediaView.children[3].src = "";
+const closeContainer = (elm) => {
+ elm.parentElement.parentElement.removeChild(elm.parentElement);
}
const clearDirCookie = () => {
diff --git a/resources/js/uiEvents.js b/resources/js/uiEvents.js
index eb023a9..8aec963 100644
--- a/resources/js/uiEvents.js
+++ b/resources/js/uiEvents.js
@@ -48,8 +48,8 @@ document.ondblclick = (event) => {
let node = obj.parentNode;
showMedia(node.children[1].value);
// If clicking on image
- } else if (callingID == "imageID") {
- showImg(obj.alt);
+ } else if (callingID == "imageID", "image") {
+ showMedia(obj.alt);
// If clicking on text title
} else if (callingID == "titleID") {
enableEdit(obj);