Add video-bg + video and soundtrack shortcodes

app.py

@@ -7,16 +7,27 @@ import os
 import sys
 import time
 import shutil
+import re
+
+RE_VID = re.compile("""\[video ["']([^['"]*?)["']\]""")
+TEMPLATE_VID = """<video controls><source src="{}" type="video/{}"></video>"""
+
+RE_SOUNDTRACK = re.compile("""\[soundtrack ["']([^['"]*?)["']\]""")
+TEMPLATE_SOUNDTRACK = """<audio data-autoplay><source src="{}" type="audio/{}"></audio>"""
+
+def preprocess_markdown(md):
+    if md:
+        content = markdown(md)
+        content = RE_VID.sub(lambda m: TEMPLATE_VID.format(m.group(1), m.group(1).split('.')[-1]), content)
+        content = RE_SOUNDTRACK.sub(lambda m: TEMPLATE_SOUNDTRACK.format(m.group(1), m.group(1).split('.')[-1]), content)
+        return content
+    return ""
 
 def preprocess_payload(payload):
     for column in payload.get("columns", []):
-        md = column.get("markdown")
-        if md:
-            column["content"] = markdown(md)
+        column["content"] = preprocess_markdown(column.get("markdown"))
         for slide in column.get("slides", []):
-            md = slide.get("markdown")
-            if md:
-                slide["content"] = markdown(md)
+            slide["content"] = preprocess_markdown(slide.get("markdown"))
 
 load_dotenv()
 
@@ -43,7 +54,7 @@ def update():
 
 @application.get("/enum/<topic>")
 def choices(topic):
-    if topic in ["img", "bg"]:
+    if topic in ["img", "bg", "bg-video"]:
         return {"type": "string", "enum": glob("static/{}/*.*".format(topic))}
     abort(404)
 

debug-server.sh

@@ -0,0 +1,2 @@
+source venv/bin/activate
+flask --debug run

static/slides.json

@@ -5,21 +5,27 @@
             "id": "welcome",
             "title": "Goodbye, mates",
             "params": {
-                "theme": "simple",
-                "background-image": "static/bg/valley-1.svg",
-                "background-opacity": "0.25"
+                "theme": "sky",
+                "background-video": "static/bg-video/clouds1.mp4",
+                "background-video-loop": true,
+                "background-video-mute": true,
+                "background-opacity": "0.5",
+                "background-size": "cover",
+                "background-video-autoplay": true
             },
-            "markdown": "Welcome, friends.\n\nWe're about to begin."
+            "markdown": "First, let us meditate: [video \"static/video/bell.mp4\"]\nClose your eyes and concentrate on the sound of the bell.\n"
         },
         {
             "id": "memory",
             "title": "How I'd like to be remembered",
             "params": {
-                "theme": "solarized",
-                "background-image": "static/bg/valley-1.svg",
-                "background-opacity": "0.25"
+                "theme": "night",
+                "background-video": "static/bg-video/beach-sunset1.mp4",
+                "background-video-loop": true,
+                "background-video-mute": true,
+                "background-opacity": "0.75"
             },
-            "markdown": "I've done many things.\n\nSome of them I'm proud of:",
+            "markdown": "I've done many things. Some of them I'm proud of: [soundtrack \"static/audio/VJ_Memes_-_funkyGarden.mp3\"]",
             "slides": [
                 {
                     "id": "work",
@@ -34,8 +40,8 @@
                     "id": "rest",
                     "title": "The rest",
                     "params": {
-                        "theme": "moon",
-                        "background-image": "static/bg/twilight-1.svg",
+                        "background-image": "static/bg/twilight-2.svg",
+                        "background-opacity": "0.5",
                         "background-size": "contain"
                     },
                     "markdown": "#### I've rested like a cat.\n\n![A cat resting|w-66 centered](static/img/cat-resting.png)"
@@ -47,7 +53,9 @@
             "title": "Who I seek forgiveness from",
             "params": {
                 "theme": "league",
-                "background-image": "static/bg/particles-1.svg",
+                "background-video": "static/bg-video/underwater.mp4",
+                "background-video-loop": true,
+                "background-video-mute": true,
                 "background-opacity": "0.25"
             },
             "markdown": "I've made many mistakes.\n\nI hope you can forgive me:",

static/slides.schema.json

@@ -103,6 +103,26 @@
             }
           ]
         },
+        "background-video": {
+          "$ref": "/enum/bg-video",
+          "title": "Background video",
+          "links": [
+            {
+              "rel": "Preview video",
+              "class": "link-info",
+              "href": "{{self}}",
+              "media-type": "video/mp4"
+            }
+          ]
+        },
+        "background-video-loop": {
+            "type": "boolean",
+            "default": true
+        },
+        "background-video-mute": {
+            "type": "boolean",
+            "default": true
+        },
         "background-opacity": {
           "type": "string",
           "title": "Background opacity",

templates/slides.html

@@ -84,6 +84,8 @@
 				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
 			});
                         $(function() {
+                            // force autoplay for bg videos (but why?!?)
+                            $('.reveal .slide-background-content video').each((index, element) => element.play());
                             // open external links in new tab
                             $('.reveal a:not([href^="#"])').attr('target','_blank');
                             // extract css classes from img alt