changed controller setup

src/core/static/js/events.js

@@ -39,9 +39,9 @@ const openFile = (eve) => {
     if (ftype === "dir") {
         listFilesAjax(hash);
     } else if (ftype === "video") {
-        showMedia(hash, extension, "video");
+        showFile(title, hash, extension, "video");
     } else {
-        showMedia(hash, extension, "file");
+        showFile(title, hash, extension, "file");
     }
 }
 

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

@@ -78,13 +78,13 @@ class FilesList extends React.Component {
                     <div class="card">
                         <div class="card-header">
                             {card_header}
+                            <input hash={hash} onClick={this.openThis} ftype={filetype} class="btn btn-secondary btn-sm float-right" title={name} type="button" value="Open"/>
                         </div>
                         <div class="card-body text-center">
                             {card_body}
                         </div>
                         <div class="card-footer">
-                            <input hash={hash} onClick={this.openThisLocally} ftype={filetype} class="btn btn-secondary btn-sm float-left" type="button" value="Open Locally"/>
+                            <input hash={hash} onClick={this.openThisLocally} ftype={filetype} class="btn btn-secondary btn-sm float-right" type="button" value="Open Locally"/>
-                            <input hash={hash} onClick={this.openThis} ftype={filetype} class="btn btn-secondary btn-sm float-right" title={name} type="button" value="Open"/>
                         </div>
                     </div>
                 </li>

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

@@ -16,13 +16,31 @@ const scrollFilesToTop = () => {
 }
 
 
-const showMedia = async (hash, extension, type) => {
+const closeFile = () => {
+    const video = document.getElementById("video");
+    let title   = document.getElementById("selectedFile");
+
+    document.getElementById("image-viewer").style.display   = "none";
+    document.getElementById("text-viewer").style.display    = "none";
+    document.getElementById("pdf-viewer").style.display     = "none";
+    document.getElementById("video-controls").style.display = "none";
+
+    title.innerText     = "";
+    video.style.display = "none";
+    video.style.cursor  = '';
+    video.pause();
+}
+
+const showFile = async (title, 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").style.display   = "none";
     document.getElementById("video-controls").style.display = "none";
 
+    let titleElm          = document.getElementById("selectedFile");
+    titleElm.innerText    = title;
+
     if (type === "video") {
         setupVideo(hash, extension);
     }

src/core/static/js/video-events.js

@@ -16,11 +16,6 @@ const getTimeFormatted = (duration = null) => {
     return hours + ":" + minutes + ":" + seconds;
 }
 
-const pauseVideo = () => {
-    const video        = document.getElementById("video");
-    video.style.cursor = '';
-    video.pause();
-}
 
 const togglePlay = (video) => {
     shouldPlay = setTimeout(function () {

src/core/templates/modals/file-modal.html

@@ -4,8 +4,8 @@
     <div class="modal-dialog modal-xl" role="document">
         <div class="modal-content">
             <div class="modal-header">
-                <h3>File Viewer:</h3>
+                <h3>File Viewer:</h3> <span id="selectedFile"></span>
-                <button onclick="pauseVideo()" type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+                <button onclick="closeFile()" type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
             </div>
 
             <div class="modal-body text-center justify-content-center">