Video cntrl udates

src/core/static/css/main.css

@@ -20,14 +20,13 @@
 }
 
 #master-container {
-    height: 90vh;
+    height: 80vh;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
 #video-controls {
-    position: relative;
+    background-color: rgba(0, 0, 0, 0.64);
-    bottom: 2.5em;
 }
 
 

src/core/static/css/overrides.css

@@ -47,10 +47,13 @@ input[type=range][orient=vertical] {
 
 
 
+.modal-header {
+    background-color: rgba(0, 0, 0, 0.64);
+}
 
 .modal-content {
-    background-color: #32383e74;
+    background-color: rgba(50, 56, 62, 0.74);
-    border-color: #f8940674;
+    border-color: rgba(249, 148, 6, 0.74);
 }
 
 .sticky-top,
@@ -59,7 +62,7 @@ input[type=range][orient=vertical] {
 }
 
 .card-body {
-	min-height: 326px;
+    min-height: 326px;
 	font-size: x-large;
 	vertical-align: middle !important;
 	align-items: center;

src/core/static/js/context-menu.js

@@ -20,8 +20,6 @@ window.addEventListener("click", e => {
 });
 
 window.addEventListener("contextmenu", e => {
-    e.preventDefault();
-
     let target = e.target;
     let elm    = target;
     while (elm.nodeName != "BODY") {
@@ -33,9 +31,24 @@ window.addEventListener("contextmenu", e => {
         }
     }
 
+    let posY = e.pageY;
+    let posX = e.pageX - 165;
+
+    if (e.pageY > (window.innerHeight - 120)) {
+        posY = window.innerHeight - 220;
+    }
+
+    if (e.pageX > (window.innerWidth - 80)) {
+        posX = window.innerWidth - 320;
+    }
+
+    if (e.pageX < 80) {
+        posX = e.pageX + 180;
+    }
+
     const origin = {
-        left: e.pageX,
+        left: posX,
-        top: e.pageY
+        top: posY
     };
     setPosition(origin);
     return false;

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

@@ -10,7 +10,14 @@ const downloadItem = (eve) => {
 }
 
 const deleteItem = (eve) => {
-    let elm     = active_card.querySelector('[hash]'); // With attribute named "hash"
+    if (active_card == null) {
+        let text = "No card hovered over to delete!";
+        let type = "danger";
+        displayMessage(text, type, 3);
+        return ;
+    }
+
+    let elm     = active_card.querySelector('[hash]');  // With attribute named "hash"
     let elm2    = active_card.querySelector('[title]'); // With attribute named "title"
     const hash  = elm.getAttribute("hash");
     const title = elm2.getAttribute("title");
@@ -49,7 +56,6 @@ const closeFile = () => {
     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";
@@ -62,7 +68,6 @@ const showFile = async (title, hash, extension, type) => {
     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;
@@ -77,7 +82,6 @@ const showFile = async (title, hash, extension, type) => {
 
 const setupVideo = async (hash, extension) => {
     let video           = document.getElementById("video");
-    let controls        = document.getElementById("video-controls");
     video.poster        = "static/imgs/icons/loading.gif";
     video.style.display = "";
     video.src           = "#"
@@ -102,9 +106,9 @@ const setupVideo = async (hash, extension) => {
             }
         }
 
+
+        video.src         = video_path;
         modal.show();
-        controls.style.display = "none";
-        video.src              = video_path;
     } catch (e) {
         video.style.display = "none";
         console.log(e);

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

@@ -2,7 +2,6 @@ let fullScreenState = 0;
 let clicktapwait    = 200;
 let shouldPlay      = null;
 let controlsTimeout = null;
-let canHideControls = true;
 
 
 const getTimeFormatted = (duration = null) => {
@@ -19,45 +18,17 @@ const getTimeFormatted = (duration = null) => {
 
 const togglePlay = (video) => {
     shouldPlay = setTimeout(function () {
-        let controls = document.getElementById("video-controls");
+        shouldPlay = null;
-        shouldPlay   = null;
         if (video.paused) {
-            video.style.cursor     = 'none';
+            video.style.cursor = 'none';
-            controls.style.display = "none";
             video.play();
         } else {
-            video.style.cursor     = '';
+            video.style.cursor = '';
-            controls.style.display = "";
             video.pause();
         }
     }, 300);
 }
 
-const showControls = () => {
-    const video    = document.getElementById("video");
-    const controls = document.getElementById("video-controls");
-
-    video.style.cursor     = '';
-    controls.style.display = "";
-    if (controlsTimeout) {
-        clearTimeout(controlsTimeout);
-    }
-
-    controlsTimeout = setTimeout(function () {
-        if (!video.paused) {
-            if (canHideControls) {
-                video.style.cursor     = 'none';
-                controls.style.display = "none";
-                controlsTimeout        = null;
-            } else {
-                showControls();
-            }
-        }
-    }, 3000);
-}
-
-
-
 
 const setFullscreenSettings = (parentElm, video) => {
     parentElm.requestFullscreen();
@@ -73,8 +44,8 @@ const unsetFullscreenSettings = (video) => {
 }
 
 const toggleFullscreen = (video) => {
-    containerElm = document.getElementById("video-container");
+    let containerElm = document.getElementById("video-container");
-    parentElm    = video.parentElement;
+    let parentElm    = video.parentElement;
 
     if (video.requestFullscreen || video.webkitRequestFullscreen || video.msRequestFullscreen) {
         setFullscreenSettings(parentElm, video);
@@ -92,7 +63,7 @@ const toggleFullscreen = (video) => {
             unsetFullscreenSettings(video);
         }
 
-        fullScreenState = 0;
+        fullScreenState   = 0;
     }
 
     fullScreenState += 1;
@@ -109,7 +80,6 @@ const toggleVolumeControl = () => {
 
 
 
-
 $("#video").on("loadedmetadata", function(eve){
     const video             = eve.target;
     let videoDuration       = document.getElementById("videoDuration");
@@ -117,13 +87,13 @@ $("#video").on("loadedmetadata", function(eve){
 });
 
 
-$("#video").on("keyup", function(eve) {
+
+$("#video").on("keydown", function(eve) {
+    event.preventDefault();
     const key   = eve.keyCode;
     const video = eve.target;
 
-    if (key === 32 || key === 80) { // Spacebar for pausing
+    if (key === 37) {               // Left key for back tracking 5 sec
-        togglePlay(video);
-    } else if (key === 37) {        // Left key for back tracking 5 sec
         video.currentTime -= 5;
     } else if (key === 39) {        // Right key for fast forward 5 sec
         video.currentTime += 5;
@@ -135,6 +105,17 @@ $("#video").on("keyup", function(eve) {
         if (video.volume >= 0.0) {
             video.volume -= 0.05;
         }
+    }
+
+});
+
+
+$("#video").on("keyup", function(eve) {
+    const key   = eve.keyCode;
+    const video = eve.target;
+
+    if (key === 32 || key === 80) { // Spacebar for pausing
+        togglePlay(video);
     } else if (key === 70) {        // f key for toggling full screen
         toggleFullscreen(video);
     } else if (key === 76) {        // l key for toggling loop
@@ -195,17 +176,6 @@ $( "#video" ).bind( "timeupdate", async function(eve) {
     videoDuration.innerText = getTimeFormatted(video.currentTime);
 });
 
-// $( "#video" ).bind( "ended", async function(eve) {
-//     alert("Hello...")
-//     // let videoDuration = document.getElementById("videoCurrentTime");
-//     // const video       = eve.target;
-//     // const seekto      = document.getElementById("seek-slider");
-//     // const vt          = video.currentTime * (100 / video.duration);
-//     //
-//     // seekto.value            = vt;
-//     // videoDuration.innerText = getTimeFormatted(video.currentTime);
-// });
-
 $( "#seek-slider" ).bind( "change", async function(eve) {
     const slider = eve.target;
     let video    = document.getElementById("video");
@@ -220,5 +190,14 @@ $( "#volume-slider" ).bind( "change", async function(eve) {
     video.volume = volumeto;
 });
 
-$( "#video-controls" ).bind( "mouseenter", async function(eve) { canHideControls = false; });
+
-$( "#video-controls" ).bind( "mouseleave", async function(eve) { canHideControls = true; });
+// $( "#video" ).bind( "ended", async function(eve) {
+//     alert("Hello...")
+//     // let videoDuration = document.getElementById("videoCurrentTime");
+//     // const video       = eve.target;
+//     // const seekto      = document.getElementById("seek-slider");
+//     // const vt          = video.currentTime * (100 / video.duration);
+//     //
+//     // seekto.value            = vt;
+//     // videoDuration.innerText = getTimeFormatted(video.currentTime);
+// });

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

@@ -19,28 +19,9 @@
                                 autoplay=""
                                 volume="0.75"
                                 poster="{{ url_for('static', filename='imgs/icons/loading.gif')}}"
-                                onmousemove="showControls()">
+                                >
                             </video>
 
-                            <div id="video-controls">
-                                <div class="row pl-5 pr-5">
-                                    <div class="col-md-8">
-                                        <input id="seek-slider" class="form-control-range" style="width: inherit;" type="range" min="0" value="0" max="100" step="1"/>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <span id="videoCurrentTime"></span>
-                                        /
-                                        <span id="videoDuration"></span>
-                                    </div>
-                                    <div class="col-md-1">
-                                        <span id="volumeIcon" onclick="toggleVolumeControl()">&#128264;</span>
-                                        <input id="volume-slider" class="form-control-range volume-control-positioner" style="display: none;"
-                                        type="range" orient="vertical" min="0.0" max="1.0" value="0.75" step="0.05" />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
                         <!-- For image -->
                         <img id="image-viewer" class="card-img-top viewer"
                             style="display: none;"
@@ -65,10 +46,24 @@
                     </div>
                 </div>
             </div>
+        </div>
 
-            <div class="modal-footer">
+        <div id="video-controls" class="modal-footer">
+            <div class="col-md-8">
+                <input id="seek-slider" class="form-control-range" style="width: inherit;" type="range" min="0" value="0" max="100" step="1"/>
+            </div>
+            <div class="col-md-3">
+                <span id="videoCurrentTime"></span>
+                /
+                <span id="videoDuration"></span>
+            </div>
+            <div class="col-md-auto">
+                <span id="volumeIcon" onclick="toggleVolumeControl()">&#128264;</span>
+                <input id="volume-slider" class="form-control-range volume-control-positioner" style="display: none;"
+                type="range" orient="vertical" min="0.0" max="1.0" value="0.75" step="0.05" />
             </div>
         </div>
+
     </div>
 </div>
 {% endblock file_modal %}

src/core/utils/shellfm/windows/view/utils/Settings.py

@@ -57,6 +57,7 @@ class Settings:
 
             subpath           = settings["base_of_home"]
             HIDE_HIDDEN_FILES = True if settings["hide_hidden_files"] == "true" else False
+            FFMPG_THUMBNLR    = FFMPG_THUMBNLR if settings["thumbnailer_path"] == "" else settings["thumbnailer_path"]
             go_past_home      = True if settings["go_past_home"] == "true" else False
             lock_folder       = True if settings["lock_folder"] == "true" else False
             locked_folders    = settings["locked_folders"].split("::::")

src/user_config/webfm/settings.json

@@ -2,9 +2,10 @@
     "settings": {
         "base_of_home": "/LazyShare",
         "hide_hidden_files": "true",
-        "go_past_home": "true",
+        "thumbnailer_path": "ffmpegthumbnailer",
+        "go_past_home": "false",
         "lock_folder": "true",
-        "locked_folders": "Synced Backup::::venv::::flasks::::Cryptomator",
+        "locked_folders": "Synced Backup::::venv::::flasks::::Encrypted Vault::::Cryptomator",
         "mplayer_options": "-quiet -really-quiet -xy 1600 -geometry 50%:50%",
         "music_app": "/opt/deadbeef/bin/deadbeef",
         "media_app": "mpv",