Updated to Bootstrap 5.3, added more playlist logic, cleanup

src/core/static/css/main.css

@@ -20,16 +20,11 @@
 }
 
 #master-container {
-    height: 80vh;
+    height: 85vh;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
-#video-controls {
-    background-color: rgba(0, 0, 0, 0.64);
-}
-
-
 
 /* CLASSES */
 .scroller {
@@ -47,6 +42,9 @@
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
+.selectedActiveMedia {
+    background-color: rgba(25, 65, 0, 0.64);
+}
 
 .page-alert-zone-container {
     position: sticky;

src/core/static/css/overrides.css

@@ -47,7 +47,8 @@ input[type=range][orient=vertical] {
 
 
 
-.modal-header {
+.modal-header,
+.modal-footer {
     background-color: rgba(0, 0, 0, 0.64);
 }
 
@@ -56,11 +57,6 @@ input[type=range][orient=vertical] {
     border-color: rgba(249, 148, 6, 0.74);
 }
 
-.sticky-top,
-.card {
-    background-color: rgba(50, 56, 62, 0.84);
-}
-
 .card-body {
     min-height: 326px;
 	font-size: x-large;
@@ -74,10 +70,6 @@ input[type=range][orient=vertical] {
 	  object-fit: contain;
 }
 
-.list-group-item {
-    color: rgba(255, 255, 255, 1) !important;
-}
-
 .label-as-badge {
     border-radius: 1em;
     cursor: pointer;

src/core/static/js/ajax.js

@@ -1,5 +1,7 @@
 const goHomeAjax = async (hash) => {
     const data = "empty=NULL";
+    clearPlaylistMode();
+    clearSelectedActiveMedia();
     doAjax("api/file-manager-action/reset-path/None", data, "reset-path");
 }
 
@@ -10,6 +12,8 @@ const deleteItemAjax = async (hash) => {
 
 const listFilesAjax = async (hash) => {
     const data = "empty=NULL";
+    clearPlaylistMode();
+    clearSelectedActiveMedia();
     doAjax("api/list-files/" + hash, data, "list-files");
 }
 
@@ -20,6 +24,8 @@ const getFavesAjax = async () => {
 
 const loadFavoriteLink = async (id) => {
     const data = "empty=NULL";
+    clearPlaylistMode();
+    clearSelectedActiveMedia();
     doAjax("api/load-favorite/" + id, data, "load-favorite");
 }
 
@@ -111,6 +117,19 @@ const doAjaxUpload  = (actionPath, data, fname, action) => {
 }
 
 const fetchData = async (url) => {
-    let response = await fetch(url);
-    return await response.json();
+    return await fetch(url).then((response) => {
+        if(response.status == 200) {
+            return response.json();
+        } else if (response.status == 504) {
+            msg = "[Warning] Status Code: 504 Timeout\n[Message] --> Please wait for conversion to complete then try again.";
+            return {'message': { 'type': "warning", 'text': msg} }
+        } else {
+            msg = "[Error] Status Code: " + response.status + "\n[Message] --> Network response was not ok...";
+            return {'message': { 'type': "error", 'text': msg} }
+        }
+    }).catch(function(error) {
+        let subStr1 = 'There has been a problem with your fetch operation: ' + error.message;
+        msg = "[Error] Status Code: 000\n[Message] -->" + subStr1;
+        return {'message': { 'type': "error", 'text': msg} }
+    });
 }

src/core/static/js/color-mode-toggler.js

@@ -0,0 +1,60 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2022 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+*/
+
+
+(() => {
+    'use strict'
+
+    const storedTheme = localStorage.getItem('theme')
+
+    const getPreferredTheme = () => {
+        if (storedTheme) {
+            return storedTheme
+        }
+
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    const setTheme = function (theme) {
+        if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.setAttribute('data-bs-theme', 'dark')
+        } else {
+            document.documentElement.setAttribute('data-bs-theme', theme)
+        }
+    }
+
+    setTheme(getPreferredTheme())
+
+    const showActiveTheme = theme => {
+        const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+
+        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+            element.classList.remove('active')
+        })
+
+        btnToActive.classList.add('active')
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (storedTheme !== 'light' || storedTheme !== 'dark') {
+            setTheme(getPreferredTheme())
+        }
+    })
+
+    window.addEventListener('DOMContentLoaded', () => {
+        showActiveTheme(getPreferredTheme())
+
+        document.querySelectorAll('[data-bs-theme-value]')
+        .forEach(toggle => {
+            toggle.addEventListener('click', () => {
+                const theme = toggle.getAttribute('data-bs-theme-value')
+                localStorage.setItem('theme', theme)
+                setTheme(theme)
+                showActiveTheme(theme)
+            })
+        })
+    })
+})()

src/core/static/js/events.js

@@ -21,7 +21,6 @@ document.body.onload = (eve) => {
     }, 400);
 }
 
-
 const loadFavePath = (e) => {
     const target = e.target;
     const faveId = target.getAttribute("faveid");
@@ -42,7 +41,7 @@ const openFile = (eve) => {
     if (ftype === "dir") {
         listFilesAjax(hash);
     } else if (ftype === "video") {
-        showFile(title, hash, extension, "video");
+        showFile(title, hash, extension, "video", target);
     } else {
         showFile(title, hash, extension, "file");
     }
@@ -57,30 +56,34 @@ const openFileLocally = (eve) => {
 
 
 
-$( "#search-files-field" ).bind( "keyup", async function(eve) {
+$( "#search-files-field").bind( "keyup", async function(eve) {
     searchPage();
 });
 
-$( "#clear-search-btn" ).bind( "click", async function(eve) {
+$( "#clear-search-btn").bind( "click", async function(eve) {
     clearSearch();
 });
 
-$( "#refresh-btn" ).bind( "click", async function(eve) {
+$( "#refresh-btn").bind( "click", async function(eve) {
     reloadDirectory();
 });
 
-$( "#back-btn" ).bind( "click", async function(eve) {
+$( "#back-btn").bind( "click", async function(eve) {
     goUpADirectory();
 });
 
-$( "#tggl-faves-btn" ).bind( "click", async function(eve) {
+$( "#tggl-faves-btn").bind( "click", async function(eve) {
     manageFavorites(eve.target);
 });
 
-$( "#scroll-files-to-top-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) {
+$( "#playlist-mode-btn").bind( "click", async function(eve) {
     togglePlaylistMode(eve.target);
 });
+
+$( "#close-file-modal-btn").bind( "click", async function(eve) {
+    closeFile();
+});

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

@@ -65,10 +65,11 @@ const closeFile = () => {
 
     trailerPlayer.src           = "#";
     trailerPlayer.style.display = "none";
+    clearSelectedActiveMedia();
     clearModalFades();
 }
 
-const showFile = async (title, hash, extension, type) => {
+const showFile = async (title, hash, extension, type, target=null) => {
     document.getElementById("image-viewer").style.display   = "none";
     document.getElementById("text-viewer").style.display    = "none";
     document.getElementById("pdf-viewer").style.display     = "none";
@@ -80,8 +81,9 @@ const showFile = async (title, hash, extension, type) => {
 
     if (type === "video") {
         setupVideo(hash, extension);
+        setSelectedActiveMedia(target);
     }
-     if (type === "file") {
+    if (type === "file") {
         setupFile(hash, extension);
     }
      if (type === "trailer") {
@@ -106,7 +108,7 @@ const setupVideo = async (hash, extension) => {
     video.src           = "#"
     video_path          = "api/file-manager-action/files/" + hash;
 
-
+    clearSelectedActiveMedia();
     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)) {
@@ -114,18 +116,18 @@ const setupVideo = async (hash, extension) => {
                 if ( data.hasOwnProperty('path') ) {
                     video_path = data.path;
                 } else {
-                    displayMessage(data.message.text, data.message.type, 3);
-                    return ;
+                    displayMessage(data.message.text, data.message.type);
+                    return;
                 }
             } else if ((/\.(flv|mov|m4v|mpg|mpeg)$/i).test(extension)) {
                 modal.hide();
                 openWithLocalProgram(hash, extension);
-                return ;
+                return;
             }
         }
 
 
-        video.src         = video_path;
+        video.src           = video_path;
         modal.show();
     } catch (e) {
         video.style.display = "none";
@@ -293,6 +295,33 @@ const clearModalFades = (elm) => {
     }
 }
 
+const clearPlaylistMode = () => {
+    const playListState = document.getElementById("playlist-mode-btn");
+    if (playListState.checked) { playListState.click(); }
+}
+
+const setSelectedActiveMedia = (elm) => {
+    clearSelectedActiveMedia();
+
+    let card = elm;
+    while (card.parentElement) {
+        if (!card.classList.contains("card")) {
+            card = card.parentElement;
+            continue;
+        }
+
+        break
+    }
+    card.classList.add("selectedActiveMedia");
+}
+
+const clearSelectedActiveMedia = () => {
+    try {
+        const elm = document.getElementsByClassName('selectedActiveMedia')[0];
+        elm.classList.remove("selectedActiveMedia");
+    } catch (e) {}
+}
+
 // Cache Buster
 const clearCache = () => {
     const rep = /.*\?.*/;

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

@@ -79,22 +79,35 @@ const toggleFullscreen = (video) => {
 
 const toggleVolumeControl = () => {
     const volume = document.getElementById("volume-slider");
-    if (volume.style.display === "none") {
-        volume.style.display = "";
-    } else {
-        volume.style.display = "none";
+    volume.style.display = (volume.style.display === "none") ? "" : "none";
+}
+
+
+const togglePlaylistMode = (elm) => {
+    playListMode = elm.checked;
+}
+
+const previousMedia = () => {
+    const current_title = document.getElementById('selectedFile').innerText;
+    for (let i = videoPlaylist.length - 1; i >= 0; i--) {
+        if (videoPlaylist[i].title === current_title) {
+            const index = (i === 0) ? videoPlaylist.length - 1 : i-=1;
+            clearModalFades();
+            videoPlaylist[index].click();
+            break
+        }
     }
 }
 
-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;
+const nextMedia = () => {
+    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
+        }
     }
 }
 
@@ -186,7 +199,7 @@ $("#video").on("touchend", function(eve){
     eve.preventDefault();
 });
 
-$( "#video" ).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");
@@ -196,14 +209,18 @@ $( "#video" ).bind( "timeupdate", async function(eve) {
     videoDuration.innerText = getTimeFormatted(video.currentTime);
 });
 
-$( "#seek-slider" ).bind( "change", async function(eve) {
+$( "#video").bind( "stalled", async function(eve) {
+    console.log("Stalled load...");
+});
+
+$( "#seek-slider").bind( "change", async function(eve) {
     const slider = eve.target;
     let video    = document.getElementById("video");
     let seekto   = video.duration * (slider.value / 100);
     video.currentTime = seekto;
 });
 
-$( "#volume-slider" ).bind( "change", async function(eve) {
+$( "#volume-slider").bind( "change", async function(eve) {
     const slider = eve.target;
     let video    = document.getElementById("video");
     let volumeto = slider.value;
@@ -211,7 +228,7 @@ $( "#volume-slider" ).bind( "change", async function(eve) {
 });
 
 
-$( "#video" ).bind( "ended", async function(eve) {
+$( "#video").bind( "ended", async function(eve) {
     if (!playListMode) {
         const video       = eve.target;
         const seekto      = document.getElementById("seek-slider");
@@ -221,14 +238,16 @@ $( "#video" ).bind( "ended", async function(eve) {
         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
-            }
-        }
+        nextMedia();
     }
 });
+
+
+$( "#previousVideoInPlaylist").bind( "click", async function(eve) {
+    previousMedia();
+});
+
+
+$( "#nextVideoInPlaylist").bind( "click", async function(eve) {
+    nextMedia();
+});

src/core/static/themes/Grid List.css

@@ -1,91 +0,0 @@
-/*START OF HOMEPAGE BUTTON SETTINGS*/
-.homeSection {
-    float: left;
-    width: 40%;
-    height: 14em;
-    position: relative;
-    text-align: center;
-    font-size: 100%;
-    border-style: solid;
-    border-width: .2em;
-    color: rgba(0, 232, 255, .69); /*#00E8FF*/
-    background: rgba(19, 21, 21, .6);
-}
-/*END OF HOMEPAGE BUTTON SETTINGS*/
-.header {
-    margin-left: auto;
-    margin-right: auto;
-    width: 99%;
-}
-.section, .lnksNdirs, .header {
-    display: block;
-    float: left;
-    text-align: center;
-    font-size: 100%;
-    padding-top: 1em;
-    margin: 1em;
-    background: rgba(19, 21, 21, .7);
-    color: rgba(0, 232, 255, .69); /*#00E8FF*/
-/*  border-style: solid;
-    border-width: .2em;
-*/
-}
-.backbutton {
-    top: 3.55em;
-    clear: both;
-    z-index: 2;
-    position: fixed;
-    float: left;
-    width: 5%;
-    height: 50px;
-    opacity: .8;
-}
-iframe {
-    position: fixed;
-    bottom: 2em;
-    left: 25%;
-    width: 50%;
-    height: 360px;
-    background: rgba(0,0,0,.5);
-    transition: 0s;
-    transition-delay:2s;
-}
-iframe:hover {
-    left: 2%;
-    width: 99%;
-    height: 700px;
-    transition-delay:2s;
-}
-.lnkStyl {        
-    clear: right;
-    float: left;
-    border-style: solid;
-}
-
-.imgsStyl {
-    margin-left: 50%;
-    opacity: 0.699999988079071044921875;
-    width: 32.333%;
-    height: 20em;
-}
-.imgsStyl:hover {
-    opacity: 1;
-}
-#bg {
-  position: fixed;
-  top: 0%; 
-  left: 0%; 
-  width: 100%; 
-  height: 100%;
-  z-index: -1;
-}
-#bg img {
-  position: absolute; 
-  top: 0; 
-  left: 0;
-  right: 0; 
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}

src/core/static/themes/Horizontal List.css

@@ -1,89 +0,0 @@
-body {
-width: 600%;
-}
-/*START OF HOMEPAGE BUTTON SETTINGS*/
-.homeSection {
-    float: left;
-    width: 40%;
-    height: 14em;
-    position: relative;
-    text-align: center;
-    font-size: 100%;
-    border-style: solid;
-    border-width: .2em;
-    color: rgba(0, 232, 255, .69); /*#00E8FF*/
-    background: rgba(19, 21, 21, .6);
-}
-/*END OF HOMEPAGE BUTTON SETTINGS*/
-.header {
-    margin-left: auto;
-    margin-right: auto;
-    width: 99%;
-}
-.section, .lnksNdirs, .header {
-    display: block;
-    clear: right;
-    float: left;
-    text-align: center;
-    font-size: 100%;
-    padding-top: 1em;
-    margin: 1em;
-    background: rgba(19, 21, 21, .7);
-    color: rgba(0, 232, 255, .69); /*#00E8FF*/
-/*  border-style: solid;
-    border-width: .2em;
-*/
-}
-.backbutton {
-    top: 3.55em;
-    clear: both;
-    z-index: 2;
-    position: fixed;
-    float: left;
-    width: 5%;
-    height: 50px;
-    opacity: .8;
-}
-iframe {
-    position: fixed;
-    bottom: 2em;
-    left: 25%;
-    width: 50%;
-    height: 360px;
-    background: rgba(0,0,0,.5)
-    transition: 0s;
-    transition-delay:2s;
-}
-.lnkStyl {        
-    clear: right;
-    float: left;
-    border-style: solid;
-}
-
-.imgsStyl {
-    margin-left: 50%;
-    opacity: 0.699999988079071044921875;
-    width: 32.333%;
-    height: 20em;
-}
-.imgsStyl:hover {
-    opacity: 1;
-}
-#bg {
-  position: fixed;
-  top: 0%; 
-  left: 0%; 
-  width: 100%; 
-  height: 100%;
-  z-index: -1;
-}
-#bg img {
-  position: absolute; 
-  top: 0; 
-  left: 0;
-  right: 0; 
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}

src/core/static/themes/List Centered.css

@@ -1,89 +0,0 @@
-/*START OF HOMEPAGE BUTTON SETTINGS*/
-.homeSection {
-    float: left;
-    width: 40%;
-    height: 14em;
-    position: relative;
-    text-align: center;
-    font-size: 100%;
-    border-style: solid;
-    border-width: .2em;
-    color: rgba(0, 232, 255, .69); /*#00E8FF*/
-    background: rgba(19, 21, 21, .6);
-}
-/*END OF HOMEPAGE BUTTON SETTINGS*/
-.header {
-    margin-left: auto;
-    margin-right: auto;
-    width: 99%;
-}
-.section, .lnksNdirs, .header {
-    position: relative;
-    text-align: center;
-    font-size: 100%;
-    padding-top: 1em;
-    margin-top: 1em;
-    background: rgba(19, 21, 21, .7);
-    color: rgba(0, 232, 255, .69); /*#00E8FF*/
-/*  border-style: solid;
-    border-width: .2em;
-*/
-}
-.backbutton {
-    top: 3.55em;
-    clear: both;
-    z-index: 2;
-    position: fixed;
-    float: left;
-    width: 5%;
-    height: 50px;
-    opacity: .8;
-}
-iframe {
-    clear: both;
-    z-index: 1;
-    position: fixed;
-    bottom: 5%;
-    width: 40%;
-    height: 500px;
-    background: rgba(0,0,0,.5)
-    transition: 0s;
-    transition-delay:2s;
-}
-iframe:hover {
-    width: 99%;
-    transition-delay:2s;
-}
-.lnkStyl {        
-    clear: right;
-    float: left;
-    border-style: solid;
-}
-
-.imgsStyl {
-    margin-left: 50%;
-    opacity: 0.699999988079071044921875;
-    width: 32.333%;
-    height: 20em;
-}
-.imgsStyl:hover {
-    opacity: 1;
-}
-#bg {
-  position: fixed;
-  top: 0%; 
-  left: 0%; 
-  width: 100%; 
-  height: 100%;
-  z-index: -1;
-}
-#bg img {
-  position: absolute; 
-  top: 0; 
-  left: 0;
-  right: 0; 
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}

src/core/static/themes/List On The Left.css

@@ -1,110 +0,0 @@
-/*START OF HOMEPAGE BUTTON SETTINGS*/
-.homeSection {
-    float: left;
-    width: 40%;
-    height: 14em;
-    position: relative;
-    text-align: center;
-    font-size: 100%;
-    border-style: solid;
-    border-width: .2em;
-    color: rgba(0, 232, 255, .69); /*#00E8FF*/
-    background: rgba(19, 21, 21, .6);
-}
-/*END OF HOMEPAGE BUTTON SETTINGS*/
-
-.lnkStyl {
-    clear: right;
-    float: left;
-    border-style: solid;
-}
-.imgsStyl {
-    clear: both;
-    float: left;
-    opacity: 0.699999988079071044921875;
-    width: 20%;
-    height: 15em;
-}
-.imgsStyl:hover {
-    opacity: 1;
-}
-.header {
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-    float: left;
-}
-.lnksNdirs {
-    width: 20%;
-    float:left;
-}
-/* used to format sections of pgs*/
-.section, .lnksNdirs, .header {
-    clear: both;
-    position: relative;
-    text-align: center;
-    padding-top: 1em;
-    margin-top: 1em;
-    font-size: 100%;
-    background: rgba(19, 21, 21, .6);
-    background: rgba(19, 21, 21, .7);
-    color: rgba(0, 232, 255, .69); /*#00E8FF*/
-/*  border-style: solid;
-    border-width: .2em;
-*/
-}
-.backbutton {
-    top: 3em;
-    clear: both;
-    z-index: 2;
-    position: fixed;
-    float: left;
-    width: 5%;
-    height: 55px;
-    opacity: .8;
-}
-.ifrmbutton2 {
-    top: 3em;
-    float: right;
-    right: .5em;
-    z-index:2;
-    position: fixed;
-    width: 5%;
-    height: 30px;
-    opacity: .6;
-}
-iframe {
-    margin-left: 2%;
-    z-index: 2;
-    position: fixed;
-    top: 8em;
-    right: 0.534em;
-    bottom: 2%;
-    width: 75%;
-    height: 525px;
-    background: rgba(0,0,0,.5)
-    transition: 0s;
-    transition-delay:2s;
-}
-iframe:hover {
-    height: 775px;
-    transition-delay:2s;
-}
-#bg {
-  position: fixed;
-  top: 0%;
-  left: 0%;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}
-#bg img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-}

src/core/templates/body-footer.html

@@ -8,7 +8,7 @@
 
         <div id="navbarTogglerFooter" class="row collapse navbar-collapse">
             <ul class="navbar-nav">
-                <li class="nav-item mr-2">
+                <li class="nav-item mx-3">
                     <span id="tggl-faves-btn" class="btn btn-info btn-sm" title="Add/Delete from favorites..." >&#9734;</span>
                 </li>
                 <li class="nav-item mx-auto">

src/core/templates/body-header.html

@@ -35,9 +35,15 @@
                         </i>
                     </li>
                     <li class="nav-item">
-                        <i id="playlist-mode-btn" class="nav-link" aria-label="Playlist Mode" title="Playlist Mode..." >
+                        <div class="ml-2 mt-2 form-check">
+                            <input class="form-check-input" type="checkbox" value="" id="playlist-mode-btn">
+                            <label class="form-check-label" for="playlist-mode-btn">
+                                Playlist Mode
+                            </label>
+                        </div>
+                        <!-- <i id="playlist-mode-btn" class="nav-link" aria-label="Playlist Mode" title="Playlist Mode..." >
                             Playlist Mode
-                        </i>
+                        </i> -->
                     </li>
                 </ul>
             </div>
@@ -93,6 +99,32 @@
                         </div>
                     </li>
                 {% endif %}
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
+                        Theme
+                    </a>
+                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
+                        <li>
+                            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
+                                <i title="Register A User..." class="bi bi-brightness-high"></i>
+                                &nbsp;&nbsp;&nbsp;&nbsp;Light
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="dark">
+                                <i title="Register A User..." class="bi bi-brightness-low"></i>
+                                &nbsp;&nbsp;&nbsp;&nbsp;Dark
+                            </button>
+                        </li>
+                        <li>
+                            <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="auto">
+                                <i title="Register A User..." class="bi bi-brightness-high"></i>
+                                &nbsp;&nbsp;&nbsp;&nbsp;Auto&nbsp;&nbsp;&nbsp;&nbsp;
+                                <i title="Register A User..." class="bi bi-brightness-low"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </li>
             </ul>
         </div>
     </div>

src/core/templates/layout.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="en" dir="ltr" data-bs-theme="dark">
 {% block header %}
 <head>
     {% block header_meta %}
@@ -21,7 +21,6 @@
 
         <!-- Bootstrap CSS -->
         <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap5/bootstrap.min.css')}}">
-        <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap5/bootstrap-dark.min.css')}}">
         <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-icons/bootstrap-icons.css')}}">
 
         <!-- Site CSS -->
@@ -113,14 +112,18 @@
         <script src="{{ url_for('static', filename='js/libs/bootstrap5/bootstrap.bundle.min.js')}}"></script>
 
         <!-- For React -->
+        <script src="{{ url_for('static', filename='js/libs/babel.min.js')}}"></script>
         <script src="{{ url_for('static', filename='js/libs/react/react.production.min.js')}}"></script>
         <script src="{{ url_for('static', filename='js/libs/react/react-dom.production.min.js')}}"></script>
-        <script src="{{ url_for('static', filename='js/libs/babel.min.js')}}"></script>
+
+        <!-- DASH JS -->
+        <script src="{{ url_for('static', filename='js/libs/dash.all.min.js')}}" type="text/javascript"></script>
 
         <!-- Application Imports -->
         {% block body_scripts_additional %}
         {% endblock body_scripts_additional%}
 
+        <script src="{{ url_for('static', filename='js/color-mode-toggler.js')}}"></script>
         <script src="{{ url_for('static', filename='js/context-menu.js')}}"></script>
     {% endblock %}
 </body>

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

@@ -5,9 +5,7 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h3>Favorites:</h3>
-                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
 
                 <div class="modal-body">

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

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

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

@@ -5,9 +5,7 @@
         <div class="modal-content">
             <div class="modal-header">
                 <h3>Settings:</h3>
-                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                    <span aria-hidden="true">&times;</span>
-                </button>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
 
             <div class="modal-body">

src/core/templates/pages/index.html

@@ -25,26 +25,6 @@
 
 
 {% block body_scripts_additional %}
-    <!-- GBA JS Emulator -->
-    <script src="{{ url_for('static', filename='js/gbajs/js/util.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/core.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/arm.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/thumb.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/mmu.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/io.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/audio.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/video.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/video/proxy.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/video/software.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/irq.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/keypad.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/sio.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/savedata.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/gpio.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/js/gba.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/xhr.js')}}"></script>
-    <script src="{{ url_for('static', filename='js/gbajs/gbajs.js')}}"></script>
-
     <!-- App JS -->
     <script type="text/jsx" src="{{ url_for('static', filename='js/react-ui-logic.js')}}"></script>
     <script src="{{ url_for('static', filename='js/ui-logic.js')}}"></script>