From 94017f61ada2bc7edaa8f8ac4ba7a815f6050144 Mon Sep 17 00:00:00 2001
From: maximstewart <maximstewart1@gmail.com>
Date: Wed, 17 Feb 2021 19:28:53 -0600
Subject: [PATCH] changed controller setup

---
 src/core/static/js/events.js              |  4 ++--
 src/core/static/js/react-ui-logic.js      |  4 ++--
 src/core/static/js/ui-logic.js            | 20 +++++++++++++++++++-
 src/core/static/js/video-events.js        |  5 -----
 src/core/templates/modals/file-modal.html |  4 ++--
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/core/static/js/events.js b/src/core/static/js/events.js
index 2389a83..19962ba 100644
--- a/src/core/static/js/events.js
+++ b/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");
     }
 }
 
diff --git a/src/core/static/js/react-ui-logic.js b/src/core/static/js/react-ui-logic.js
index 779a422..8ff47b1 100644
--- a/src/core/static/js/react-ui-logic.js
+++ b/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.openThis} ftype={filetype} class="btn btn-secondary btn-sm float-right" title={name} type="button" value="Open"/>
+                            <input hash={hash} onClick={this.openThisLocally} ftype={filetype} class="btn btn-secondary btn-sm float-right" type="button" value="Open Locally"/>
                         </div>
                     </div>
                 </li>
diff --git a/src/core/static/js/ui-logic.js b/src/core/static/js/ui-logic.js
index db9d377..cabcb13 100644
--- a/src/core/static/js/ui-logic.js
+++ b/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);
     }
diff --git a/src/core/static/js/video-events.js b/src/core/static/js/video-events.js
index 0bc8c0b..1789017 100644
--- a/src/core/static/js/video-events.js
+++ b/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 () {
diff --git a/src/core/templates/modals/file-modal.html b/src/core/templates/modals/file-modal.html
index 78c8983..876c5d3 100644
--- a/src/core/templates/modals/file-modal.html
+++ b/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>
-                <button onclick="pauseVideo()" type="button" data-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+                <h3>File Viewer:</h3> <span id="selectedFile"></span>
+                <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">