feat(ui): add video animation background (#427)

Author: ReenigneArcher

pyra/config.py

@@ -193,6 +193,18 @@ def on_change_tray_toggle() -> bool:
             extra_class='col-lg-6',
         ),
     ),
+    User_Interface=dict(
+        type='section',
+        name=_('User Interface'),
+        description=_('User interface settings.'),
+        icon='display',
+        BACKGROUND_VIDEO=dict(
+            type='boolean',
+            name=_('Background video'),
+            description=_('Enable background video.'),
+            default=True,
+        ),
+    ),
     Updater=dict(
         type='section',
         name=_('Updater'),

pyra/webapp.py

@@ -10,7 +10,7 @@
 
 # lib imports
 from flask import Flask, Response
-from flask import jsonify, render_template, request, send_from_directory
+from flask import jsonify, render_template as flask_render_template, request, send_from_directory
 from flask_babel import Babel
 
 # local imports
@@ -61,6 +61,35 @@
     app.logger.addHandler(handler)
 
 
+def render_template(template_name_or_list, **context):
+    """
+    Render a template, while providing our default context.
+
+    This function is a wrapper around ``flask.render_template``.
+    Our UI config is added to the template context.
+    In the future, this function may be used to add other default contexts to templates.
+
+    Parameters
+    ----------
+    template_name_or_list : str
+        The name of the template to render.
+    **context
+        The context to pass to the template.
+
+    Returns
+    -------
+    render_template
+        The rendered template.
+
+    Examples
+    --------
+    >>> render_template(template_name_or_list='home.html', title=_('Home'))
+    """
+    context['ui_config'] = pyra.CONFIG['User_Interface'].copy()
+
+    return flask_render_template(template_name_or_list=template_name_or_list, **context)
+
+
 @app.route('/')
 @app.route('/home')
 def home() -> render_template:

web/css/custom.css

@@ -253,3 +253,25 @@ li.beta-setting {
 .form-check-input:not(:checked):enabled {
     background-color: #151515;
 }
+
+/* Style the background video */
+#backgroundVideo {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 100%;
+    z-index: -1000;
+}
+
+/* transparent background video overlay */
+.backgroundVideoOverlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: black;
+    opacity: 0.8;
+    z-index: -999;
+}

web/templates/base.html

@@ -39,6 +39,16 @@
             <!-- Include navbar -->
             {% include 'navbar.html' %}
 
+            {% if ui_config['BACKGROUND_VIDEO'] %}
+                <div class="backgroundVideoContainer">
+                    <video autoplay muted loop id="backgroundVideo" disablePictureInPicture="true" controlsList="nodownload">
+                        <source src="{{ url_for('static', filename='videos/Retro Delorean.mp4') }}" type="video/mp4">
+                    </video>
+
+                    <div class="backgroundVideoOverlay"></div>
+                </div>
+            {% endif %}
+
             <!-- The page template -->
             {% block content %}{% endblock content %}
         </main>

web/videos/Retro Delorean.license

@@ -0,0 +1,3 @@
+Retro Delorean video is under CC license, https://support.google.com/youtube/answer/2797468
+
+https://www.youtube.com/watch?v=97DgTj0NKK0