web: Replace the background image with a video of fire

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/Makefile.am b/Makefile.am
index a8357f07a72f64ab8c93fae30c865bc6795577ad..02a68fea23cdfbce3a296917112af0ad4a0ed29b 100644 (file)
--- a/Makefile.am
+++ b/Makefile.am
@@ -991,6 +991,20 @@ static_images_DATA = \
 
 static_imagesdir = $(staticdir)/images
 
+EXTRA_DIST += \
+       src/static/videos/firewall.mp4
+
+CLEANFILES += \
+       $(static_videos_DATA)
+
+static_videos_DATA = \
+       src/static/videos/firewall.jpg \
+       src/static/videos/firewall@1920.av1.mp4 \
+       src/static/videos/firewall@1920.hevc.mp4 \
+       src/static/videos/firewall@1920.h264.mp4
+
+static_videosdir = $(staticdir)/videos
+
 static_js_DATA = \
        src/static/js/Control.Geocoder.min.js \
        src/static/js/editor.js \
@@ -1080,6 +1094,69 @@ src/static/img/apple-touch-icon-%-precomposed.png: src/static/img/ipfire-tux.png
                -extent $(patsubst src/static/img/apple-touch-icon-%-precomposed.png,%,$@)x$(patsubst src/static/img/apple-touch-icon-%-precomposed.png,%,$@) \
                $< $@
 
+# Video Stuff
+
+FFMPEG += \
+       -loglevel quiet
+
+# AV1
+src/static/videos/firewall@%.av1.mp4: src/static/videos/firewall.mp4
+       $(AM_V_GEN)$(MKDIR_P) $(dir $@) && \
+       $(FFMPEG) -y \
+               -i $^ \
+               -map_metadata -1 \
+               -an \
+               -c:v libsvtav1 \
+               -crf 30 \
+               -preset veryslow \
+               -pix_fmt yuv420p \
+               -movflags +faststart \
+               -vf scale=$(patsubst src/static/videos/firewall@%.av1.mp4,%,$@):-2,fps=25 \
+               $@
+
+# HEVC
+src/static/videos/firewall@%.hevc.mp4: src/static/videos/firewall.mp4
+       $(AM_V_GEN)$(MKDIR_P) $(dir $@) && \
+       $(FFMPEG) -y \
+               -i $^ \
+               -map_metadata -1 \
+               -an \
+               -c:v libx265 \
+               -crf 22 \
+               -preset veryslow \
+               -pix_fmt yuv420p \
+               -movflags +faststart \
+               -tag:v hvc1 \
+               -vf scale=$(patsubst src/static/videos/firewall@%.hevc.mp4,%,$@):-2,fps=25 \
+               $@
+
+# H.264
+src/static/videos/firewall@%.h264.mp4: src/static/videos/firewall.mp4
+       $(AM_V_GEN)$(MKDIR_P) $(dir $@) && \
+       $(FFMPEG) -y \
+               -i $^ \
+               -map_metadata -1 \
+               -an \
+               -c:v libx264 \
+               -crf 24 \
+               -preset veryslow \
+               -profile:v main \
+               -pix_fmt yuv420p \
+               -movflags +faststart \
+               -vf scale=$(patsubst src/static/videos/firewall@%.h264.mp4,%,$@):-2,fps=25 \
+               $@
+
+# Cover image
+src/static/videos/firewall.jpg: src/static/videos/firewall.mp4
+       $(AM_V_GEN)$(MKDIR_P) $(dir $@) && \
+       $(FFMPEG) -y \
+               -i $^ \
+               -map_metadata -1 \
+               -qscale:v 1 \
+               -frames:v 1 \
+               -vf scale=1920:-2 \
+               $@
+
 .PHONY: update
 update:
        for i in src/systemd/ipfire.org-webapp-*.service; do systemctl restart $$(basename $${i}) && sleep 5; done

diff --git a/configure.ac b/configure.ac
index d2f8a85734c036925b2f170ab687899ec8a5947f..c5f4c7f2d4af37f79c20c129983f8d716a40c90b 100644 (file)
--- a/configure.ac
+++ b/configure.ac
@@ -40,6 +40,12 @@ if test -z "${CONVERT}"; then
        AC_MSG_ERROR([convert is required])
 fi
 
+# ffmpeg
+AC_CHECK_PROG(FFMPEG, [ffmpeg], [ffmpeg])
+if test -z "${FFMPEG}"; then
+       AC_MSG_ERROR([ffmpeg is required])
+fi
+
 # ------------------------------------------------------------------------------
 
 AC_ARG_WITH([systemd],

diff --git a/src/sass/main.sass b/src/sass/main.sass
index b23846f023b6f5b95533f57ee05bb651fe472d55..5bcbde923e6b76cc54f49da01223561e87ac22d7 100644 (file)
--- a/src/sass/main.sass
+++ b/src/sass/main.sass
@@ -62,10 +62,13 @@ $section-padding-desktop:       3rem 0.5rem
 // Custom CSS
 
 #hero-index
-    background-image: url("img/bg-img.jpg");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
+       position: relative
+       video
+               width: 100%;
+               height: 100%;
+               position: absolute;
+               object-fit: cover;
+               z-index: 0;
 
 .footer
        a

diff --git a/src/static/videos/.gitignore b/src/static/videos/.gitignore
new file mode 100644 (file)
index 0000000..9440014
--- /dev/null
+++ b/src/static/videos/.gitignore
@@ -0,0 +1,2 @@
+# Ignore anything that isn't the original video
+*@*

diff --git a/src/static/videos/firewall.jpg b/src/static/videos/firewall.jpg
new file mode 100644 (file)
index 0000000..5fe88a1
Binary files /dev/null and b/src/static/videos/firewall.jpg differ

diff --git a/src/static/videos/firewall.mp4 b/src/static/videos/firewall.mp4
new file mode 100644 (file)
index 0000000..de538da
Binary files /dev/null and b/src/static/videos/firewall.mp4 differ

diff --git a/src/templates/index.html b/src/templates/index.html
index f2070aaa8e78cf6243da91b2a55ad736dc3c1186..bbd876b7b896ac5c18213d8b6188c8b5c9d5ed10 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -9,9 +9,9 @@
 
 {% block container %}
        {% if latest_release %}
-               <section class="has-background-primary-light">
+               <section class="has-background-light">
                        <div class="container">
-                               <p class="has-text-centered px-2">
+                               <p class="has-text-centered px-2 py-1">
                                        {{ _("Latest Release: %(release)s from %(when)s") \
                                                % { "release" : latest_release.name, "when" : locale.format_day(latest_release.date, dow=False) } }}
 
@@ -28,10 +28,31 @@
        {% end %}
 
        <section class="hero is-large is-primary" id="hero-index">
+               <video autoplay muted loop playsinline poster="{{ static_url("videos/firewall.jpg") }}">
+                       {# AV1 for modern browsers that support it #}
+                       <source src="{{ static_url("videos/firewall@1920.av1.mp4") }}" type="video/mp4; codecs=av01.0.05M.08" />
+
+                       {# HEVC/H.256 for modern browsers #}
+                       <source src="{{ static_url("videos/firewall@1920.hevc.mp4") }}" type="video/mp4; codecs=hvc1" />
+
+                       {# H.254 as compatibility option for anything else #}
+                       <source src="{{ static_url("videos/firewall@1920.h264.mp4") }}" type="video/mp4; codecs=avc1.4D401E" />
+
+                       <p>
+                               Blazing Fire by Oleg Gamulinskii (CC)
+                               https://www.pexels.com/video/blazing-fire-2715412/
+                       </p>
+               </video>
+
                <div class="hero-body">
                        <div class="container">
-                               <h1 class="title is-1">{{ _("More Than A Firewall") }}</h1>
-                               <h5 class="title is-5">The market leader in Linux based, Open Source security with a comprehensible feature set</h5>
+                               <h1 class="title is-1">
+                                       {{ _("More Than A Firewall") }}
+                               </h1>
+
+                               <h5 class="title is-5">
+                                       The market leader in Linux based, Open Source security with a comprehensible feature set
+                               </h5>
                        </div>
                </div>
        </section>
@@ -39,7 +60,7 @@
        <section class="section">
                <div class="container">
                        <h3 class="title is-3 has-text-centered">
-                               {{ _("The Open Source Firewall") }}<span class="has-text-primary">_</span>
+                               {{ _("IPFire") }}<span class="has-text-primary">_</span> &dash; {{ _("The Open Source Firewall") }}
                        </h3>
                </div>
        </section>