From 664c288fea2e9ff92a06e6cfff091f0be9aa794e Mon Sep 17 00:00:00 2001 From: maximstewart Date: Mon, 8 Feb 2021 02:02:14 -0600 Subject: [PATCH] Updated html and css --- src/core/static/css/iframe.css | 5 + src/core/static/js/events.js | 14 +++ src/core/static/js/react-ui-logic.js | 10 +- src/core/static/js/ui-logic.js | 152 ++++++++++++++++++++++++++- src/core/templates/pages/index.html | 2 +- 5 files changed, 175 insertions(+), 8 deletions(-) create mode 100644 src/core/static/css/iframe.css diff --git a/src/core/static/css/iframe.css b/src/core/static/css/iframe.css new file mode 100644 index 0000000..f4e1830 --- /dev/null +++ b/src/core/static/css/iframe.css @@ -0,0 +1,5 @@ +body, +.container-fluid, .row, .col, +.error-styling, .dir-style, .movie-style, .file-style { + background-color: rgba(0,0,0,0.0); +} diff --git a/src/core/static/js/events.js b/src/core/static/js/events.js index 0d354f2..1930b26 100644 --- a/src/core/static/js/events.js +++ b/src/core/static/js/events.js @@ -5,6 +5,19 @@ window.onload = (eve) => { document.body.onload = (eve) => { getFavesAjax(); reloadDirectory(); + if (window.self !== window.top) { + setTimeout(function () { + let elm = document.getElementById("bg"); + elm.parentElement.removeChild(elm); + + // Stylesheet for iframe views + var link = document.createElement("link"); + link.href = formatURL("static/css/iframe.css"); + link.type = "text/css"; + link.rel = "stylesheet"; + document.getElementsByTagName("head")[0].appendChild(link); + }, 500); + } } const openFile = (eve) => { @@ -16,6 +29,7 @@ const openFile = (eve) => { const openFileLocally = (eve) => { let target = eve.target; let hash = target.getAttribute("app"); + openWithLocalProgram(hash); } $( "#search-files-field" ).bind( "keyup", async function(eve) { diff --git a/src/core/static/js/react-ui-logic.js b/src/core/static/js/react-ui-logic.js index a7af278..a48c862 100644 --- a/src/core/static/js/react-ui-logic.js +++ b/src/core/static/js/react-ui-logic.js @@ -57,9 +57,9 @@ class FilesList extends React.Component {
{file[0]}
-
- - +
+ +
@@ -67,9 +67,9 @@ class FilesList extends React.Component { } return ( -
+ {final} -
+ ); } } diff --git a/src/core/static/js/ui-logic.js b/src/core/static/js/ui-logic.js index 879b9df..f35c0a7 100644 --- a/src/core/static/js/ui-logic.js +++ b/src/core/static/js/ui-logic.js @@ -11,10 +11,115 @@ const goUpADirectory = () => { } const scrollFilesToTop = () => { - let target = document.getElementById('file-grid') + let target = document.getElementById('files'); target.scrollTop = 0; } + +const showMedia = async (hash, extension, type) => { + document.getElementById("image-viewer").style.display = "none"; + document.getElementById("text-viewer").style.display = "none"; + document.getElementById("pdf-viewer").style.display = "none"; + document.getElementById("video-viewer").style.display = "none"; + document.getElementById("video-controls").style.display = "none"; + + if (type === "video") { + setupVideo(hash, extension); + } + if (type === "file") { + setupFile(hash, extension); + } +} + +const setupVideo = async (hash, extension) => { + let video = document.getElementById("video-viewer"); + let controls = document.getElementById("video-controls"); + video.poster = "static/imgs/icons/loading.gif"; + video.style.display = ""; + video.src = "#" + video_path = "files/" + hash; + + try { + if ((/\.(avi|mkv|wmv|flv|f4v|mov|m4v|mpg|mpeg|mp4|webm|mp3|flac|ogg)$/i).test(extension)) { + if ((/\.(avi|mkv|wmv|flv|f4v)$/i).test(extension)) { + data = await fetchData( "remux/" + hash ); + if ( data.hasOwnProperty('path') ) { + video_path = data.path; + } else { + displayMessage(data.message.text, data.message.type); + return ; + } + } else if ((/\.(flv|mov|m4v|mpg|mpeg)$/i).test(extension)) { + $('#file-view-modal').modal({"focus": false, "show": false}); + openWithLocalProgram(hash, extension); + return ; + } + } + + $('#file-view-modal').modal({"focus": true, "show": true}); + controls.style.display = "none"; + video.src = video_path; + // if ((/\.(flv|f4v)$/i).test(extension)) { + // video.src = video_path; + // } else { + // // This is questionable in usage since it loads the full video before + // showing; but, seeking doesn't work otherwise... + // let response = await fetch(formatURL(video_path)); + // let vid_src = URL.createObjectURL(await response.blob()); // IE10+ + // video.src = vid_src; + // video.src = video_path; + // } + } catch (e) { + video.style.display = "none"; + console.log(e); + } +} + +const setupFile = async (hash, extension) => { + let viewer = null; + let type = "local"; + + if ((/\.(png|jpg|jpeg|gif|ico)$/i).test(extension)) { + type = "image"; + viewer = document.getElementById("image-viewer"); + } + if ((/\.(txt|text|sh|cfg|conf)$/i).test(extension)) { + type = "text"; + viewer = document.getElementById("text-viewer"); + } + if ((/\.(mp3|ogg|flac)$/i).test(extension)) { + type = "music"; + viewer = document.getElementById("video-viewer"); + } + if ((/\.(pdf)$/i).test(extension)) { + type = "pdf"; + viewer = document.getElementById("pdf-viewer"); + } + + if (type !== "text" && type !== "local" ) { + $('#file-view-modal').modal({"focus": true, "show": true}); + let response = await fetch(formatURL("files/" + hash)); + let src_obj = URL.createObjectURL(await response.blob()); // IE10+ + viewer.src = src_obj; + } + + if (type == "text") { + let response = await fetch(formatURL("files/" + hash)); + let textData = await response.text(); // IE10+ + viewer.innerText = textData; + } + + if (type !== "local") { + viewer.style.display = ""; + $('#file-view-modal').modal({"focus": true, "show": true}); + } + + if (type == "local") { + openWithLocalProgram(hash); + } +} + + const openWithLocalProgram = async (hash, extension = "") => { const url = "run-locally/" + hash; let data = await fetchData(url); @@ -23,9 +128,52 @@ const openWithLocalProgram = async (hash, extension = "") => { } +const searchPage = () => { + let query = document.getElementById('search-files-field').value.toLowerCase(); + let list = document.getElementById("file-grid").querySelectorAll("[title]"); + let size = list.length; + + for (var i = 0; i < size; i++) { + if (!list[i].tagName.includes("SPAN")) { + if (!list[i].title.toLowerCase().includes(query)) { + list[i].style.display = "none"; + } else { + list[i].style.display = ""; + } + } + } +} + +const clearSearch = () => { + let list = document.getElementById("file-grid").querySelectorAll("[title]"); + let size = list.length; + + document.getElementById('search-files-field').value = ""; + for (var i = 0; i < size; i++) { + list[i].style.display = ""; + } +} + +const enableEdit = (elm) => { + console.log(elm); + elm.style.backgroundColor = "#ffffffff"; + elm.style.color = '#000000ff'; + elm.readOnly = ''; + formerFileName = elm.value; +} + +const disableEdit = (elm) => { + elm.style.backgroundColor = ""; + elm.style.color = ''; + elm.value = formerFileName; + elm.readOnly = "true"; +} + const updateBackground = (srcLink, isvideo = true) => { try { let elm = document.getElementById("bg"); + + console.log(srcLink); if (isvideo) { if (elm.getAttribute('src') === "") { elm.src = srcLink; @@ -34,7 +182,7 @@ const updateBackground = (srcLink, isvideo = true) => { elm.src = ""; elm.setAttribute("poster", srcLink); } - } catch (e) {} + } catch (e) { } } diff --git a/src/core/templates/pages/index.html b/src/core/templates/pages/index.html index 8184a25..f62d70c 100644 --- a/src/core/templates/pages/index.html +++ b/src/core/templates/pages/index.html @@ -14,7 +14,7 @@ {% endblock body_header_additional %} {% block body_content_additional %} -
+
{% endblock body_content_additional %}