From 007a459d1e3eebb965944de7d34900d8980347bd Mon Sep 17 00:00:00 2001
From: Maxim Stewart <maximstewart1@gmail.com>
Date: Thu, 4 Jul 2019 03:10:44 -0500
Subject: [PATCH] Changed playor behavior

---
 index.html                        |  8 +--
 resources/css/main.css            |  7 +++
 resources/js/filesystemActions.js |  5 ++
 resources/js/uiActions.js         | 94 ++++++++++++++++++-------------
 resources/js/uiEvents.js          | 44 ++++++++++++++-
 5 files changed, 112 insertions(+), 46 deletions(-)

diff --git a/index.html b/index.html
index 1916b9d..77467c3 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,9 @@
     <!-- Background -->
     <img id="bg" />
 
+    <video id="video" src="" controls >
+    </video>
+
     <!-- Controls -->
     <!-- Create the menu -->
     <menu type="context" id="menu">
@@ -37,11 +40,6 @@
         Path:<span id="path"></span>
     </h2>
 
-    <!-- <h2 id="fullPathHeader">
-        <button type="button" id="faves" onclick="faveManager(this)" title="Add/Delete from favorites..." >&#9734;</button>
-        Path:<span id="path"></span>
-    </h2> -->
-
     <div id="popOutControls" style="display:none;">
         <center>
             <form>
diff --git a/resources/css/main.css b/resources/css/main.css
index 04e440b..aa86f7f 100644
--- a/resources/css/main.css
+++ b/resources/css/main.css
@@ -6,6 +6,7 @@
     height: 1px;
 }
 
+#video,
 #bg {
     position: fixed;
     top: 0%;
@@ -15,6 +16,7 @@
     z-index: -999;
 }
 
+#video,
 #bg img {
     position: absolute;
     top: 0;
@@ -26,6 +28,11 @@
     z-index: -999;
 }
 
+#video {
+    display: none;
+    background-color: rgba(0, 0, 0, 1);
+}
+
 #controls, #dynUl,
 .errorStyling, .dirStyle, .movieStyle, .fileStyle {
     display: block;
diff --git a/resources/js/filesystemActions.js b/resources/js/filesystemActions.js
index 4664a75..76e1fde 100644
--- a/resources/js/filesystemActions.js
+++ b/resources/js/filesystemActions.js
@@ -8,6 +8,11 @@ const lockFolders = () => {
 }
 
 const getDir = (query) => {
+    document.getElementById("controls").style.opacity = "1";
+    document.getElementById("dynUl").style.display    = "grid";
+    document.getElementById("video").src              = "#";
+    document.getElementById("video").style.display    = "none";
+
     let formUlPth  = document.getElementById("DIRPATHUL");
     let mergeType  = document.getElementById("MergeType");
     let passwd     = undefined;
diff --git a/resources/js/uiActions.js b/resources/js/uiActions.js
index 1a07580..51c68a9 100644
--- a/resources/js/uiActions.js
+++ b/resources/js/uiActions.js
@@ -47,8 +47,62 @@ const disableEdits = (elm) => {
 }
 
 const showMedia = async (mediaLoc, type) => {
+    let path         = document.getElementById("path").innerHTML;
+    let tempRef      = mediaLoc.toLowerCase();
+    let fullMedia    = path + mediaLoc;
+
+    if (type === "video") {
+        setupVideo(type, fullMedia, tempRef);
+    } else {
+        createFloatingPane(type, fullMedia);
+    }
+}
+
+const setupVideo = async (type, fullMedia, tempRef) => {
+    try {
+        let video      = document.getElementById("video");
+        video.autoplay = true;
+        video.poster   = "resources/images/loading.gif";
+
+        if ((/\.(mkv|avi|flv|mov|m4v|mpg|wmv|mpeg|mp4|mp3|webm|flac|ogg|pdf)$/i).test(tempRef)) {
+            if ((/\.(mkv|avi|wmv)$/i).test(tempRef)) {
+                const params = "remuxVideo=true&mediaPth=" + fullMedia;
+                let response = await  fetch("resources/php/filesystemActions.php",
+                                            {method: "POST", body: new URLSearchParams(params)});
+                let xml      = new window.DOMParser().parseFromString(await response.text(), "text/xml");
+
+                if (xml.getElementsByTagName("REMUX_PATH")[0]) {
+                    fullMedia = xml.getElementsByTagName("REMUX_PATH")[0].innerHTML;
+                } else {
+                    return ;
+                }
+            } else if ((/\.(avi|flv|mov|m4v|mpg|wmv)$/i).test(tempRef)) {
+                openInLocalProg(fullMedia);
+                return ;
+            }
+        }
+
+        // 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;
+
+        document.getElementById("controls").style.opacity = "0";
+        document.getElementById("video").style.display    = "block";
+        document.getElementById("dynUl").style.display    = "none";
+    } catch (e) {
+        document.getElementById("controls").style.opacity = "1";
+        document.getElementById("dynUl").style.display    = "grid";
+        document.getElementById("video").src              = "#";
+        document.getElementById("video").style.display    = "none";
+        console.log(e);
+    }
+}
+
+
+const createFloatingPane = (type, fullMedia) => {
     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");
@@ -57,9 +111,6 @@ const showMedia = async (mediaLoc, type) => {
     let aTag         = document.createElement("A");
     let imgTag       = document.createElement("IMG");
     let closeText    = document.createTextNode("X");
-    let path         = document.getElementById("path").innerHTML;
-    let tempRef      = mediaLoc.toLowerCase();
-    let fullMedia    = path + mediaLoc;
 
     closeDiv.className  = "closeBttn";
     closeDiv.title      = "Close";
@@ -84,32 +135,9 @@ const showMedia = async (mediaLoc, type) => {
     imgTag.src          = fullMedia;
     imgDiv.appendChild(imgTag);
 
-    if ((/\.(mkv|avi|flv|mov|m4v|mpg|wmv|mpeg|mp4|mp3|webm|flac|ogg|pdf)$/i).test(tempRef)) {
-        if ((/\.(mkv|avi|wmv)$/i).test(tempRef)) {
-            const params = "remuxVideo=true&mediaPth=" + fullMedia;
-            let response = await  fetch("resources/php/filesystemActions.php",
-                                        {method: "POST", body: new URLSearchParams(params)});
-            let xml      = new window.DOMParser().parseFromString(await response.text(), "text/xml");
-
-            if (xml.getElementsByTagName("REMUX_PATH")[0]) {
-                fullMedia = xml.getElementsByTagName("REMUX_PATH")[0].innerHTML;
-            } else {
-                return ;
-            }
-        } else if ((/\.(avi|flv|mov|m4v|mpg|wmv)$/i).test(tempRef)) {
-            openInLocalProg(fullMedia);
-            return ;
-        }
-    }
-
     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);
@@ -117,9 +145,6 @@ 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);
@@ -127,15 +152,6 @@ 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...
-        // video.src    = fullMedia;
-        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 9663bb9..4f36361 100644
--- a/resources/js/uiEvents.js
+++ b/resources/js/uiEvents.js
@@ -1,4 +1,33 @@
-let itemObj = undefined;
+let itemObj  = undefined;
+let interval = undefined;
+let cursorX;
+let cursorY;
+
+document.getElementById("controls").onmouseover = (eve) => {
+    let source = document.getElementById("video").src;
+    let target = eve.target
+
+    if (interval)
+        clearInterval(interval);
+
+    if (source !== "#") {
+        eve.target.style.opacity = "1";
+        document.getElementById("dynUl").style.display = "grid";
+    }
+}
+
+document.getElementById("video").onmouseover = (eve) => {
+    interval = setInterval(function () {
+        elementMouseIsOver = document.elementFromPoint(cursorX, cursorY);
+        if (elementMouseIsOver.tagName == "BODY" ||
+            elementMouseIsOver.id == "video") {
+                let controls = document.getElementById("controls");
+                controls.style.opacity = "0";
+                document.getElementById("dynUl").style.display = "none";
+                clearInterval(interval);
+        }
+    }, 2500);
+}
 
 // For context menu to have element
 document.onclick = (event) => {
@@ -34,7 +63,6 @@ document.ondblclick = (event) => {
             if (classNM === "dirStyle") {
                 getDir(obj.children[1].value);
             } else if (classNM === "movieStyle") {
-                console.log(obj);
                 showMedia(obj.title, "video");
             } else {
                 showMedia(obj.children[1].value, "file");
@@ -113,3 +141,15 @@ const dragContainer = (elmnt) => {
     return false;
     }
 }
+
+
+// Mouse position detection for control show/hide setup
+document.onmousemove = function(e){
+    cursorX = e.pageX;
+    cursorY = e.pageY;
+}
+
+setInterval(checkCursor, 2000);
+function checkCursor() {
+    return "";
+}