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

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

src/core/static/js/react-ui-logic.js

@@ -57,9 +57,9 @@ class FilesList extends React.Component {
                         <div class="card-body">
                         <img class="image-style" src={"api/file-manager-action/" + file[1]} alt={file[0]} />
                         </div>
-                        <div class="card-footer justify-content-right">
+                        <div class="card-footer">
-                            <input app={file[1]} onClick={this.openThis} class="btn btn-secondary btn-sm" type="button" value="Open"/>
+                            <input app={file[1]} onClick={this.openThisLocally} class="btn btn-secondary btn-sm float-left" type="button" value="Open Locally"/>
-                            <input app={file[1]} onClick={this.openThisLocally} class="btn btn-secondary btn-sm" type="button" value="Open Locally"/>
+                            <input app={file[1]} onClick={this.openThis} class="btn btn-secondary btn-sm float-right" type="button" value="Open"/>
                         </div>
                     </div>
                 </div>
@@ -67,9 +67,9 @@ class FilesList extends React.Component {
         }
 
         return (
-            <div class="row">
+            <React.Fragment>
                 {final}
-            </div>
+            </React.Fragment>
         );
     }
 }

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) { }
 }
 
 

src/core/templates/pages/index.html

@@ -14,7 +14,7 @@
 {% endblock body_header_additional %}
 
 {% block body_content_additional %}
-    <div id="files">
+    <div id="files" class="row">
     </div>
 {% endblock body_content_additional %}