Updated files view and faves listing.

src/core/routes/Routes.py

@@ -97,7 +97,12 @@ def fileManagerAction(_type, _hash = None):
         # NOTE: Need to actually implimint a websocket to communicate back to client that remux has completed.
         # As is, the remux thread hangs until completion and client tries waiting until server reaches connection timeout.
         # I.E....this is stupid but for now works better than nothing
-        return view.remuxVideo(_hash, fpath)
+        good_result = view.remuxVideo(_hash, fpath)
+        if good_result:
+            return '{"path":"static/remuxs/' + _hash + '.mp4"}'
+        else:
+            msg = "Remuxing: Remux failed or took too long; please, refresh the page and try again..."
+            return msgHandler.createMessageJSON("success", msg)
     if _type == "run-locally":
         msg = "Opened media..."
         view.openFilelocally(fpath)

src/core/static/css/main.css

@@ -25,8 +25,9 @@
     overflow-y: auto;
 }
 
-#files {
+#video-controls {
-    margin-bottom: 6em;
+    position: relative;
+    bottom: 2em;
 }
 
 
@@ -44,22 +45,17 @@
     left: 50%;
 }
 
-
-
 .icon-style {
     width: 2em;
     height: auto;
 }
 
-.dir-style, .video-style, .image-style, .file-style {
+.viewer {
-	max-width: 20em;
+    max-width: 45em;
 }
 
 
 
-
-
-
 /* Other message text colors */
 .errorTxt   { color: rgb(170, 18, 18); }
 .warningTxt { color: rgb(255, 168, 0); }

src/core/static/css/overrides.css

@@ -23,10 +23,6 @@ ul, li {
     list-style: none;
 }
 
-ul, li {
-    list-style: none;
-}
-
 /* Vertical slider */
 input[type=range][orient=vertical] {
     writing-mode: bt-lr; /* IE */

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

@@ -63,10 +63,10 @@ class FilesList extends React.Component {
 
             if (filetype === "video") {
                 card_header = name;
-                card_body   = <img class="image-style" src={"static/imgs/thumbnails/" + hash + ".jpg"} alt={name} />;
+                card_body   = <img class="card-img-top" src={"static/imgs/thumbnails/" + hash + ".jpg"} alt={name} />;
             } else if (filetype === "image") {
                 card_header = name;
-                card_body   = <img class="image-style" src={"api/file-manager-action/files/" + hash} alt={name} />;
+                card_body   = <img class="card-img-top" src={"api/file-manager-action/files/" + hash} alt={name} />;
             } else {
                 card_header = <img class="icon-style" src={icon} alt={name} />;
                 card_body = name;
@@ -127,7 +127,7 @@ class FavoritesList extends React.Component {
             }
 
             final.push(
-                <li onClick={this.loadFaveEvent} faveid={_faveId}  class="btn btn-secondary btn-sm" name={name} title={name}>
+                <li onClick={this.loadFaveEvent} faveid={_faveId}  class="list-group-item text-center" name={name} title={name}>
                     {name}
                 </li>
             );

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

@@ -20,7 +20,7 @@ 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").style.display   = "none";
     document.getElementById("video-controls").style.display = "none";
 
     if (type === "video") {
@@ -32,17 +32,17 @@ const showMedia = async (hash, extension, type) => {
 }
 
 const setupVideo = async (hash, extension) => {
-    let video           = document.getElementById("video-viewer");
+    let video           = document.getElementById("video");
     let controls        = document.getElementById("video-controls");
     video.poster        = "static/imgs/icons/loading.gif";
     video.style.display = "";
     video.src           = "#"
-    video_path          = "files/" + hash;
+    video_path          = "api/file-manager-action/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 );
+                data = await fetchData( "api/file-manager-action/remux/" + hash );
                 if ( data.hasOwnProperty('path') ) {
                     video_path = data.path;
                 } else {
@@ -59,16 +59,6 @@ const setupVideo = async (hash, extension) => {
         $('#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);
@@ -89,7 +79,7 @@ const setupFile = async (hash, extension) => {
     }
     if ((/\.(mp3|ogg|flac)$/i).test(extension)) {
         type   = "music";
-        viewer = document.getElementById("video-viewer");
+        viewer = document.getElementById("video");
     }
     if ((/\.(pdf)$/i).test(extension)) {
         type   = "pdf";
@@ -98,13 +88,13 @@ const setupFile = async (hash, extension) => {
 
     if (type !== "text" && type !== "local" ) {
         $('#file-view-modal').modal({"focus": true, "show": true});
-        let response = await fetch(formatURL("files/" + hash));
+        let response = await fetch("api/file-manager-action/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 response     = await fetch("api/file-manager-action/files/" + hash);
         let textData     = await response.text(); // IE10+
         viewer.innerText = textData;
     }

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

@@ -8,16 +8,16 @@ let canHideControls = true;
 const getTimeFormatted = (duration = null) => {
     if (duration == null) { return "00:00"; }
 
-    let hours   = (duration / 3600).toFixed(2).split(".")[0];
+    const hours   = (duration / 3600).toFixed(2).split(".")[0];
-    let minutes = (duration / 60).toFixed(2).split(".")[0];
+    const minutes = (duration / 60).toFixed(2).split(".")[0];
-    let time    = (duration / 60).toFixed(2)
+    const time    = (duration / 60).toFixed(2)
-    let seconds = Math.floor( (time - Math.floor(time) ) * 60);
+    const seconds = Math.floor( (time - Math.floor(time) ) * 60);
 
     return hours + ":" + minutes + ":" + seconds;
 }
 
 const pauseVideo = () => {
-    const video        = document.getElementById("video-viewer");
+    const video        = document.getElementById("video");
     video.style.cursor = '';
     video.pause();
 }
@@ -38,56 +38,8 @@ const togglePlay = (video) => {
     }, 300);
 }
 
-const toggleFullscreen = (video) => {
-    containerElm = document.getElementById("video-container");
-    parentElm    = video.parentElement;
-
-    if (video.requestFullscreen) {
-        parentElm.requestFullscreen();
-        video.style.cursor         = 'none';
-        containerElm.style.display = "block";
-    } else if (video.webkitRequestFullscreen) { /* Safari */
-        parentElm.webkitRequestFullscreen();
-        video.style.cursor         = 'none';
-        containerElm.style.display = "block";
-    } else if (video.msRequestFullscreen) {     /* IE11 */
-        parentElm.msRequestFullscreen();
-        video.style.cursor         = 'none';
-        containerElm.style.display = "block";
-    }
-
-    if (fullScreenState == 2) {
-        if (document.exitFullscreen) {
-            document.exitFullscreen();
-            video.style.cursor         = '';
-            containerElm.style.display = "contents";
-        } else if (document.webkitExitFullscreen) { /* Safari */
-            document.webkitExitFullscreen();
-            video.style.cursor         = '';
-            containerElm.style.display = "contents";
-        } else if (document.msExitFullscreen) {     /* IE11 */
-            document.msExitFullscreen();
-            video.style.cursor         = '';
-            containerElm.style.display = "contents";
-        }
-
-        fullScreenState = 0;
-    }
-
-    fullScreenState += 1;
-}
-
-const toggleVolumeControl = () => {
-    const volume = document.getElementById("volume-slider");
-    if (volume.style.display === "none") {
-        volume.style.display = "";
-    } else {
-        volume.style.display = "none";
-    }
-}
-
 const showControls = () => {
-    const video    = document.getElementById("video-viewer");
+    const video    = document.getElementById("video");
     const controls = document.getElementById("video-controls");
 
     video.style.cursor     = '';
@@ -110,13 +62,68 @@ const showControls = () => {
 }
 
 
-$("#video-viewer").on("loadedmetadata", function(eve){
+
-    let video               = eve.target;
+
+const setFullscreenSettings = (parentElm, video) => {
+    parentElm.requestFullscreen();
+    video.classList.remove("card-img-top");
+    video.classList.remove("viewer");
+    video.style.cursor = 'none';
+    video.style.height = 'inherit';
+}
+
+const unsetFullscreenSettings = (video) => {
+    video.classList.add("card-img-top");
+    video.classList.add("viewer");
+    video.style.cursor = '';
+    video.style.height = '';
+}
+
+const toggleFullscreen = (video) => {
+    containerElm = document.getElementById("video-container");
+    parentElm    = video.parentElement;
+
+    if (video.requestFullscreen || video.webkitRequestFullscreen || video.msRequestFullscreen) {
+        setFullscreenSettings(parentElm, video);
+    }
+
+    if (fullScreenState == 2) {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+            unsetFullscreenSettings(video);
+        } else if (document.webkitExitFullscreen) { /* Safari */
+            document.webkitExitFullscreen();
+            unsetFullscreenSettings(video);
+        } else if (document.msExitFullscreen) {     /* IE11 */
+            document.msExitFullscreen();
+            unsetFullscreenSettings(video);
+        }
+
+        fullScreenState = 0;
+    }
+
+    fullScreenState += 1;
+}
+
+const toggleVolumeControl = () => {
+    const volume = document.getElementById("volume-slider");
+    if (volume.style.display === "none") {
+        volume.style.display = "";
+    } else {
+        volume.style.display = "none";
+    }
+}
+
+
+
+
+$("#video").on("loadedmetadata", function(eve){
+    const video             = eve.target;
     let videoDuration       = document.getElementById("videoDuration");
     videoDuration.innerText = getTimeFormatted(video.duration);
 });
 
-$("#video-viewer").on("click", function(eve){
+$("#video").on("click", function(eve){
     const video = eve.target;
 
     if(!shouldPlay) {
@@ -132,7 +139,7 @@ $("#video-viewer").on("click", function(eve){
     eve.preventDefault();
 });
 
-$("#video-viewer").on("touchend", function(eve){
+$("#video").on("touchend", function(eve){
     const video = eve.target;
 
     if(!shouldPlay) {
@@ -148,7 +155,7 @@ $("#video-viewer").on("touchend", function(eve){
     eve.preventDefault();
 });
 
-$( "#video-viewer" ).bind( "timeupdate", async function(eve) {
+$( "#video" ).bind( "timeupdate", async function(eve) {
     let videoDuration = document.getElementById("videoCurrentTime");
     const video       = eve.target;
     const seekto      = document.getElementById("seek-slider");
@@ -160,14 +167,14 @@ $( "#video-viewer" ).bind( "timeupdate", async function(eve) {
 
 $( "#seek-slider" ).bind( "change", async function(eve) {
     const slider = eve.target;
-    let video    = document.getElementById("video-viewer");
+    let video    = document.getElementById("video");
     let seekto   = video.duration * (slider.value / 100);
     video.currentTime = seekto;
 });
 
 $( "#volume-slider" ).bind( "change", async function(eve) {
     const slider = eve.target;
-    let video    = document.getElementById("video-viewer");
+    let video    = document.getElementById("video");
     let volumeto = slider.value;
     video.volume = volumeto;
 

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

@@ -13,7 +13,7 @@
                 <div class="modal-body">
                     <div class="row">
                         <div class="col scroller" style="max-height: 30em; overflow: auto;">
-                            <ul id="faves-list">
+                            <ul id="faves-list" class="list-group">
                             </ul>
                         </div>
                     </div>

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

@@ -15,7 +15,7 @@
                     <div class="col scroller" style="max-height: 70vh; overflow: auto;">
                         <!-- For video -->
                         <div id="video-container">
-                            <video id="video-viewer"
+                            <video id="video" class="card-img-top viewer"
                                 loop
                                 src=""
                                 autoplay=""
@@ -43,16 +43,14 @@
                             </div>
                         </div>
 
-
                         <!-- For image -->
-                        <img id="image-viewer"
+                        <img id="image-viewer" class="card-img-top viewer"
-                            style="width: inherit; height: auto; display: none;"
+                            style="display: none;"
                             src="" alt="" />
 
                         <!-- For pdf -->
-                        <iframe id="pdf-viewer"
+                        <iframe id="pdf-viewer" class="card-img-top viewer"
                             src=""
-                            width="720" height="460"
                             style="display: none;"
                             allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                             allowfullscreen="allowfullscreen"
@@ -63,8 +61,8 @@
                         </iframe>
 
                         <!-- For text -->
-                        <pre id="text-viewer"
+                        <pre id="text-viewer" class="card-img-top viewer"
-                            style="width: inherit; height: auto; display: none;">
+                            style="display: none;">
                         </pre>
                     </div>
                 </div>