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 {
-
@@ -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 %}