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

Changed playor behavior

Browse Source
This commit is contained in:
Maxim Stewart 2019-07-04 03:10:44 -05:00
parent caef5ccda0
commit 007a459d1e
5 changed files with 112 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -11,6 +11,9 @@
<!-- Background --> <!-- Background -->
<img id="bg" /> <img id="bg" />
<video id="video" src="" controls >
</video>
<!-- Controls --> <!-- Controls -->
<!-- Create the menu --> <!-- Create the menu -->
<menu type="context" id="menu"> <menu type="context" id="menu">
@ -37,11 +40,6 @@
Path:<span id="path"></span> Path:<span id="path"></span>
</h2> </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;"> <div id="popOutControls" style="display:none;">
<center> <center>
<form> <form>

7
resources/css/main.css
View File

@ -6,6 +6,7 @@
height: 1px; height: 1px;
} }
#video,
#bg { #bg {
position: fixed; position: fixed;
top: 0%; top: 0%;
@ -15,6 +16,7 @@
z-index: -999; z-index: -999;
} }
#video,
#bg img { #bg img {
position: absolute; position: absolute;
top: 0; top: 0;
@ -26,6 +28,11 @@
z-index: -999; z-index: -999;
} }
#video {
display: none;
background-color: rgba(0, 0, 0, 1);
}
#controls, #dynUl, #controls, #dynUl,
.errorStyling, .dirStyle, .movieStyle, .fileStyle { .errorStyling, .dirStyle, .movieStyle, .fileStyle {
display: block; display: block;

5
resources/js/filesystemActions.js
View File

@ -8,6 +8,11 @@ const lockFolders = () => {
} }
const getDir = (query) => { 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 formUlPth = document.getElementById("DIRPATHUL");
let mergeType = document.getElementById("MergeType"); let mergeType = document.getElementById("MergeType");
let passwd = undefined; let passwd = undefined;

94
resources/js/uiActions.js
View File

@ -47,8 +47,62 @@ const disableEdits = (elm) => {
} }
const showMedia = async (mediaLoc, type) => { 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 iframe = document.createElement("IFRAME");
let video = document.createElement("VIDEO");
let outterDiv = document.createElement("DIV"); let outterDiv = document.createElement("DIV");
let popOutDiv = document.createElement("DIV"); let popOutDiv = document.createElement("DIV");
let closeDiv = document.createElement("DIV"); let closeDiv = document.createElement("DIV");
@ -57,9 +111,6 @@ const showMedia = async (mediaLoc, type) => {
let aTag = document.createElement("A"); let aTag = document.createElement("A");
let imgTag = document.createElement("IMG"); let imgTag = document.createElement("IMG");
let closeText = document.createTextNode("X"); let closeText = document.createTextNode("X");
let path = document.getElementById("path").innerHTML;
let tempRef = mediaLoc.toLowerCase();
let fullMedia = path + mediaLoc;
closeDiv.className = "closeBttn"; closeDiv.className = "closeBttn";
closeDiv.title = "Close"; closeDiv.title = "Close";
@ -84,32 +135,9 @@ const showMedia = async (mediaLoc, type) => {
imgTag.src = fullMedia; imgTag.src = fullMedia;
imgDiv.appendChild(imgTag); 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.id = "fileViewInner";
iframe.src = fullMedia; 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(closeDiv);
outterDiv.appendChild(aTag); outterDiv.appendChild(aTag);
outterDiv.appendChild(toLocDiv); outterDiv.appendChild(toLocDiv);
@ -117,9 +145,6 @@ const showMedia = async (mediaLoc, type) => {
if (type === "image") { if (type === "image") {
outterDiv.id = "imgView"; outterDiv.id = "imgView";
outterDiv.appendChild(imgDiv); outterDiv.appendChild(imgDiv);
} else if (type === "video") {
outterDiv.id = "fileView";
outterDiv.appendChild(video);
} else { } else {
outterDiv.id = "fileView"; outterDiv.id = "fileView";
outterDiv.appendChild(iframe); outterDiv.appendChild(iframe);
@ -127,15 +152,6 @@ const showMedia = async (mediaLoc, type) => {
document.body.appendChild(outterDiv); document.body.appendChild(outterDiv);
dragContainer(outterDiv); // Set for dragging events 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) => { const closeContainer = (elm) => {

42
resources/js/uiEvents.js
View File

@ -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 // For context menu to have element
document.onclick = (event) => { document.onclick = (event) => {
@ -34,7 +63,6 @@ document.ondblclick = (event) => {
if (classNM === "dirStyle") { if (classNM === "dirStyle") {
getDir(obj.children[1].value); getDir(obj.children[1].value);
} else if (classNM === "movieStyle") { } else if (classNM === "movieStyle") {
console.log(obj);
showMedia(obj.title, "video"); showMedia(obj.title, "video");
} else { } else {
showMedia(obj.children[1].value, "file"); showMedia(obj.children[1].value, "file");
@ -113,3 +141,15 @@ const dragContainer = (elmnt) => {
return false; 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 "";
}