Added background manager

src/core/__init__.py

@@ -15,6 +15,7 @@ from flask_login import current_user, login_user, logout_user, LoginManager
 from core.utils import Logger
 
 
+ROOT_FILE_PTH = os.path.dirname(os.path.realpath(__file__))
 app = Flask(__name__)
 app.config.from_object("core.config.ProductionConfig")
 # app.config.from_object("core.config.DevelopmentConfig")

src/core/routes/Routes.py

@@ -8,12 +8,14 @@ from flask_login import current_user
 
 
 # App imports
-from core import app, logger, oidc, db, Favorites  # Get from __init__
+from core import app, logger, oidc, db, Favorites, ROOT_FILE_PTH  # Get from __init__
 from core.utils import MessageHandler              # Get simple message processor
 from core.utils.shellfm import WindowController    # Get file manager controller
 from core.utils.tmdbscraper import scraper         # Get media art scraper
 
 
+BG_IMGS_PATH  = ROOT_FILE_PTH + "/static/imgs/backgrounds/"
+BG_FILE_TYPE  = (".webm", ".mp4", ".gif", ".jpg", ".png", ".webp")
 msgHandler         = MessageHandler()
 tmdb               = scraper.get_tmdb_scraper()
 window_controllers = {}
@@ -66,6 +68,16 @@ def home():
                             message = 'Must use GET request type...')
 
 
+@app.route('/backgrounds', methods=['GET', 'POST'])
+def backgrounds():
+    files = []
+    data  = os.listdir(BG_IMGS_PATH)
+    for file in data:
+        if file.lower().endswith(BG_FILE_TYPE):
+            files.append(file)
+
+    return '{ "backgrounds": ' + json.dumps(files) + '}'
+
 @app.route('/api/list-files/<_hash>', methods=['GET', 'POST'])
 def listFiles(_hash = None):
     if request.method == 'POST':

src/core/static/css/main.css

@@ -19,6 +19,17 @@
     z-index: -999;
 }
 
+#background-selection {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
+    grid-column-gap: 1em;
+    grid-row-gap: 1em;
+    height: 65vh;
+    bottom: 5%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
 #master-container {
     height: 85vh;
     overflow-x: hidden;
@@ -42,7 +53,7 @@
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
-.selectedActiveMedia {
+.selected-active-media {
     background-color: rgba(25, 65, 0, 0.64);
 }
 
@@ -53,6 +64,20 @@
 }
 
 
+.bg-imgs {
+    width: 20em;
+    height: auto;
+    border: 5px solid #e0e0e0;
+    cursor: pointer;
+}
+
+.bg-imgs:hover {
+    border-radius: 25%;
+    border-style: solid;
+    border-color: #f8940674; /* #00e8ff */
+}
+
+
 .card-title-text {
 	white-space: nowrap;
 	overflow: hidden;

src/core/static/js/backgrounds-manager.js

@@ -0,0 +1,58 @@
+const getBackgrounds = async () => {
+    const ulElm = document.getElementById('background-selection');
+    const data  = await fetchData( "/backgrounds" );
+
+    size        = data.backgrounds.length;
+    backgrounds = data.backgrounds;
+    for (var i = 0; i < size; i++) {
+        generateBgElm(ulElm, backgrounds[i]);
+    }
+}
+
+const generateBgElm = (ulElm, background) => {
+    const liElm   = document.createElement("LI");
+    const bgPath  = "/static/imgs/backgrounds/" + background;
+    let elm       = document.createElement("VIDEO");
+
+    elm = setBackgroundElement(elm, bgPath);
+    elm.className = "bg-imgs";
+    liElm.appendChild(elm);
+    ulElm.appendChild(liElm);
+}
+
+const loadBackground = () => {
+    const bgElm  = document.getElementById("bg");
+    const bgPath = getCookie('bgSlug');
+
+    if (!bgPath) {
+        const path = '/static/imgs/backgrounds/background.png';
+        setCookie('bgSlug', path);
+        setBackgroundElement(bgElm, path);
+    } else {
+        setBackgroundElement(bgElm, bgPath);
+    }
+}
+
+const setBackgroundCookie = (bgPath) => {
+    const elm = document.getElementById("bg");
+    setBackgroundElement(elm, bgPath);
+    setCookie('bgSlug', bgPath);
+}
+
+const clearBackgroundList = () => {
+    let bgList = document.getElementById("background-selection");
+    clearChildNodes(bgList);
+}
+
+const setBackgroundElement = (elm, bgPath) => {
+    if (bgPath.toLowerCase().endsWith(".mp4") ||
+        bgPath.toLowerCase().endsWith(".webm")) {
+            elm.src    = bgPath;
+            elm.poster = "";
+    } else {
+        elm.src    = "";
+        elm.poster = bgPath;
+    }
+
+    return elm;
+}

src/core/static/js/events.js

@@ -16,6 +16,7 @@ document.body.onload = (eve) => {
     }
 
     setTimeout(function () {
+        loadBackground();
         getFavesAjax();
         reloadDirectory();
     }, 400);
@@ -54,7 +55,18 @@ const openFileLocally = (eve) => {
 }
 
 
+// Background control events
+$( "#background-selection" ).bind( "click", async function(eve) {
+    const target = eve.target;
+    if (target.className === "bg-imgs") {
+        const path = (!target.src.endsWith("/")) ? target.src : target.poster;
+        setBackgroundCookie(path);
+    }
+});
 
+$( "#load-bglist-btn" ).bind( "click", async function(eve) {
+    getBackgrounds();
+});
 
 $( "#search-files-field").bind( "keyup", async function(eve) {
     searchPage();

src/core/static/js/post-ajax.js

@@ -70,8 +70,7 @@ const updateHTMLDirList = async (data) => {
         background_image = "api/file-manager-action/files/" + images[0][1] + '?d=' + Date.now();
         updateBackground(background_image, false);
     } else {
-        background_image = "static/imgs/backgrounds/particles.mp4";
+        loadBackground();
-        updateBackground(background_image);
     }
 
     // Set faves state

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

@@ -126,8 +126,7 @@ const setupVideo = async (hash, extension) => {
             }
         }
 
-
+        video.src = video_path;
-        video.src           = video_path;
         modal.show();
     } catch (e) {
         video.style.display = "none";
@@ -216,15 +215,8 @@ const clearSearch = () => {
 
 const updateBackground = (srcLink, isvideo = true) => {
     try {
-        let elm = document.getElementById("bg");
+        const elm = document.getElementById("bg");
-        if (isvideo) {
+        setBackgroundElement(elm, srcLink);
-            if (elm.getAttribute('src') === "") {
-                elm.src = srcLink;
-            }
-        } else {
-            elm.src = "";
-            elm.setAttribute("poster", srcLink);
-        }
     } catch (e) { }
 }
 
@@ -312,13 +304,13 @@ const setSelectedActiveMedia = (elm) => {
 
         break
     }
-    card.classList.add("selectedActiveMedia");
+    card.classList.add("selected-active-media");
 }
 
 const clearSelectedActiveMedia = () => {
     try {
-        const elm = document.getElementsByClassName('selectedActiveMedia')[0];
+        const elm = document.getElementsByClassName('selected-active-media')[0];
-        elm.classList.remove("selectedActiveMedia");
+        elm.classList.remove("selected-active-media");
     } catch (e) {}
 }
 

src/core/templates/body-header.html

@@ -10,6 +10,11 @@
             <div class="col col-auto">
                 <!-- Left menues -->
                 <ul class="navbar-nav">
+                    <li class="nav-item" data-bs-toggle="modal" data-bs-target="#backgrounds-modal">
+                        <i class="nav-link bi bi-projector-fill" aria-label="File viewer" title="File viewer..." >
+                            Backgrounds
+                        </i>
+                    </li>
                     <li class="nav-item" data-bs-toggle="modal" data-bs-target="#file-view-modal">
                         <i class="nav-link bi bi-projector-fill" aria-label="File viewer" title="File viewer..." >
                             Media Viewer

src/core/templates/layout.html

@@ -39,15 +39,7 @@
 </head>
 {% endblock %}
 <body>
-    <!-- <video id="bg" src="{{ url_for('static', filename='imgs/backgrounds/particles.mp4')}}"
+    <video id="bg" src="" poster="" autoplay loop> </video>
-        poster="{{ url_for('static', filename='imgs/backgrounds/000.png')}}"
-        autoplay loop>
-    </video> -->
-
-    <video id="bg" src="{{ url_for('static', filename='imgs/backgrounds/bubbles.mp4')}}"
-        poster="{{ url_for('static', filename='imgs/backgrounds/000.png')}}"
-        autoplay loop>
-    </video>
 
     <div class="menu">
         <ul class="menu-options">
@@ -98,6 +90,7 @@
 
 
 
+    {% include "modals/backgrounds-modal.html" %}
     {% include "modals/options-modal.html" %}
     {% include "modals/favorites-modal.html" %}
     {% include "modals/file-modal.html" %}
@@ -118,13 +111,16 @@
 
         <!-- DASH JS -->
         <script src="{{ url_for('static', filename='js/libs/dash.all.min.js')}}" type="text/javascript"></script>
+        <script src="{{ url_for('static', filename='js/libs/js.cookie.js')}}"></script>
 
         <!-- Application Imports -->
         {% block body_scripts_additional %}
         {% endblock body_scripts_additional%}
 
+        <script src="{{ url_for('static', filename='js/cookie-manager.js')}}"></script>
         <script src="{{ url_for('static', filename='js/color-mode-toggler.js')}}"></script>
         <script src="{{ url_for('static', filename='js/context-menu.js')}}"></script>
+        <script src="{{ url_for('static', filename='js/backgrounds-manager.js')}}"></script>
     {% endblock %}
 </body>
 </html>

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

@@ -0,0 +1,32 @@
+{% block backgrounds_modal %}
+<!-- Backgrounds modal -->
+<div class="modal fade" id="backgrounds-modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-xl" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Backgrounds:</h3>
+                <button id="load-bglist-btn" class="btn btn-primary btn-sm mx-auto mt-2" type="button">
+                    <span class="glyphicon glyphicon-device-camera-video"></span>
+                    Load...
+                </button>
+                <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">Close</span>
+                </button>
+            </div>
+
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col">
+                        <ul id="background-selection" class="scroller">
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <div class="modal-footer">
+                <button type="button" data-bs-dismiss="modal" class="btn btn-danger btn-sm">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock backgrounds_modal %}