Added playlist like playing functionality

src/core/static/js/events.js

@@ -80,3 +80,7 @@ $( "#tggl-faves-btn" ).bind( "click", async function(eve) {
 $( "#scroll-files-to-top-btn" ).bind( "click", async function(eve) {
     scrollFilesToTop();
 });
+
+$( "#playlist-mode-btn" ).bind( "click", async function(eve) {
+    togglePlaylistMode(eve.target);
+});

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

@@ -163,6 +163,7 @@ const renderFilesList = (data = null) => {
         React.createElement(FilesList, data),
         filesListElm
     )
+    videoPlaylist = document.body.querySelectorAll('[ftype="video"][value="Open"]'); // With attributes ftype and value
 }
 
 const renderFavesList = (data = null) => {

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

@@ -65,6 +65,7 @@ const closeFile = () => {
 
     trailerPlayer.src           = "#";
     trailerPlayer.style.display = "none";
+    clearModalFades();
 }
 
 const showFile = async (title, hash, extension, type) => {
@@ -285,6 +286,12 @@ const clearChildNodes = (parent) => {
     }
 }
 
+const clearModalFades = (elm) => {
+    let elms = document.getElementsByClassName('modal-backdrop fade show');
+    for (var i = 0; i < elms.length; i++) {
+        elms[i].remove();
+    }
+}
 
 // Cache Buster
 const clearCache = () => {

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

@@ -2,7 +2,8 @@ let fullScreenState = 0;
 let clicktapwait    = 200;
 let shouldPlay      = null;
 let controlsTimeout = null;
-
+let playListMode    = false;
+let videoPlaylist   = [];
 
 const getTimeFormatted = (duration = null) => {
     if (duration == null) { return "00:00"; }
@@ -85,6 +86,19 @@ const toggleVolumeControl = () => {
     }
 }
 
+const togglePlaylistMode = (elm) => {
+    const classType = "btn-info";
+    const hasClass  = elm.classList.contains(classType);
+    if (playListMode) {
+        elm.classList.remove(classType);
+        playListMode = false;
+    } else {
+        elm.classList.add(classType);
+        playListMode = true;
+    }
+}
+
+
 
 
 $("#video").on("loadedmetadata", function(eve){
@@ -94,7 +108,6 @@ $("#video").on("loadedmetadata", function(eve){
 });
 
 
-
 $("#video").on("keydown", function(eve) {
     event.preventDefault();
     const key   = eve.keyCode;
@@ -198,13 +211,24 @@ $( "#volume-slider" ).bind( "change", async function(eve) {
 });
 
 
-// $( "#video" ).bind( "ended", async function(eve) {
+$( "#video" ).bind( "ended", async function(eve) {
-//     alert("Hello...")
+    if (!playListMode) {
-//     // let videoDuration = document.getElementById("videoCurrentTime");
+        const video       = eve.target;
-//     // const video       = eve.target;
+        const seekto      = document.getElementById("seek-slider");
-//     // const seekto      = document.getElementById("seek-slider");
+        const vt          = video.currentTime * (100 / video.duration);
-//     // const vt          = video.currentTime * (100 / video.duration);
+
-//     //
+        seekto.value            = 0;
-//     // seekto.value            = vt;
+        videoDuration.innerText = getTimeFormatted(video.currentTime);
-//     // videoDuration.innerText = getTimeFormatted(video.currentTime);
+        video.play();
-// });
+    } else {
+        const current_title = document.getElementById('selectedFile').innerText;
+        for (let i = 0; i < videoPlaylist.length; i++) {
+            if (videoPlaylist[i].title === current_title) {
+                const index = (i === videoPlaylist.length) ? 0 : i+=1;
+                clearModalFades();
+                videoPlaylist[index].click();
+                break
+            }
+        }
+    }
+});

src/core/templates/body-header.html

@@ -11,7 +11,7 @@
                 <!-- Left menues -->
                 <ul class="navbar-nav">
                     <li class="nav-item" data-bs-toggle="modal" data-bs-target="#file-view-modal">
-                        <i class="nav-link bi bi-projector-fill" aria-hidden="true" title="File viewer..." >
+                        <i class="nav-link bi bi-projector-fill" aria-label="File viewer" title="File viewer..." >
                             Media Viewer
                         </i>
                     </li>
@@ -25,15 +25,20 @@
                         </div>
                     </li>
                     <li class="nav-item" data-bs-toggle="modal" data-bs-target="#favorites-modal">
-                        <i class="nav-link" aria-hidden="true" title="Faves list..." >
+                        <i class="nav-link" aria-label="Faves list" title="Faves list..." >
                             Faves List
                         </i>
                     </li>
                     <li class="nav-item">
-                        <i id="scroll-files-to-top-btn" class="nav-link" aria-hidden="true" title="Scroll to top..." >
+                        <i id="scroll-files-to-top-btn" class="nav-link" aria-label="Scroll to top" title="Scroll to top..." >
                             Scroll To Top
                         </i>
                     </li>
+                    <li class="nav-item">
+                        <i id="playlist-mode-btn" class="nav-link" aria-label="Playlist Mode" title="Playlist Mode..." >
+                            Playlist Mode
+                        </i>
+                    </li>
                 </ul>
             </div>
         {% endif %}

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

@@ -14,7 +14,6 @@
                         <!-- For video -->
                         <div id="video-container">
                             <video id="video" class="viewer"
-                                loop
                                 src=""
                                 autoplay=""
                                 volume="0.75"