Updated background logic

webfm/static/css/main.css

@@ -4,7 +4,8 @@
     top: 0%;
     left: 0%;
     width: 100%;
-    height: 100%;
+    /* height: 100%; */
+    height: auto;
     z-index: -999;
 }
 

webfm/static/js/post-ajax.js

@@ -73,9 +73,9 @@ const updateHTMLDirList = async (data) => {
     // Setup background if there is a 000.* in selection
     if (background_image.match(/000\.(jpg|png|gif)\b/) != null) {
         background_image = formatURL("files/" + images[i][1]);
-        updateBackground(background_image);
+        updateBackground(background_image, false);
     } else {
-        background_image = formatURL("static/imgs/backgrounds/000.jpg");
+        background_image = formatURL("static/imgs/backgrounds/particles.mp4");
         updateBackground(background_image);
     }
 

webfm/static/js/ui-logic.js

@@ -175,9 +175,17 @@ const disableEdit = (elm) => {
     elm.readOnly               = "true";
 }
 
-const updateBackground = (img_src) => {
+const updateBackground = (srcLink, isvideo = true) => {
     try {
-        document.getElementById("bg").src = img_src;
+        if (isvideo) {
+            let elm = document.getElementById("bg");
+            if (elm.getAttribute('src') === "") {
+                elm.src = srcLink;
+            }
+        } else {
+            document.getElementById("bg").src = "";
+            document.getElementById("bg").setAttribute("poster", srcLink);
+        }
     } catch (e) { }
 }
 

webfm/templates/index.html

@@ -48,7 +48,19 @@
 
                         <button title="File viewer..." class="btn btn-secondary btn-sm"
                         data-toggle="modal" data-target="#file-view-modal">🖼</button>
-
+                        {% if isLoggedIn %}
+                            <a href="/logout">
+                                <button title="Logout..." class="btn btn-danger btn-sm">
+                                    Logout
+                                </button>
+                            </a>
+                        {% else %}
+                            <a href="/login">
+                                <button title="Login..." class="btn btn-success btn-sm">
+                                    Login
+                                </button>
+                            </a>
+                        {% endif %}
                     </div>
                 </div>
             </div>
@@ -228,7 +240,13 @@
 </template>
 
 <!-- Background -->
-<img id="bg" src="{{ url_for('static', filename='imgs/backgrounds/000.jpg')}}" />
+<!-- <img id="bg" src="{{ url_for('static', filename='imgs/backgrounds/000.png')}}" /> -->
+
+<video id="bg" src="{{ url_for('static', filename='imgs/backgrounds/particles.mp4')}}"
+    poster="{{ url_for('static', filename='imgs/backgrounds/000.png')}}"
+    autoplay loop>
+</video>
+
 
     {% block body_content_additional %}
     {% endblock body_content_additional%}