loop, muted, and nocontrols for videos

sqlpage · Jun 9, 2024 · 2aa0eec · 2aa0eec
1 parent 2bf85bc
commit 2aa0eec
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@
  - In the [map](https://sql.ophir.dev/documentation.sql?component=map#component) component, when top-level latitude and longitude properties are omitted, the map will now center on its markers. This makes it easier to create zoomed maps with a single marker.
  - In the [button](https://sql.ophir.dev/documentation.sql?component=button#component) component, add a `download` property to make the button download a file when clicked, a `target` property to open the link in a new tab, and a `rel` property to prevent search engines from following the link.
  - New `timeout` option in the [sqlpage.fetch](https://sql.ophir.dev/functions.sql?function=fetch#function) function to set a timeout for the request. This is useful when working with slow or unreliable APIs, large payloads, or when you want to avoid waiting too long for a response.
+ - In the [hero](https://sql.ophir.dev/documentation.sql?component=hero#component) component, add a `poster` property to display a video poster image, a `loop` property to loop the video (useful for short animations), a `muted` property to mute the video, and a `nocontrols` property to hide video controls.
 
 ## 0.22.0 (2024-05-29)
  -  **Important Security Fix:** The behavior of `SET $x` has been modified to match `SELECT $x`.

diff --git a/examples/official-site/index.sql b/examples/official-site/index.sql
@@ -9,6 +9,7 @@ SELECT 'hero' as component,
 
 Open-source *low-code* web application server' as description_md,
     'sqlpage_introduction_video.webm' as video,
+    TRUE as rounded,
     'your-first-sql-website/' as link,
     'Build your first SQL website now !' as link_text;
 

diff --git a/examples/official-site/sqlpage/migrations/02_hero_component.sql b/examples/official-site/sqlpage/migrations/02_hero_component.sql
@@ -1,22 +1,29 @@
 -- Hero
-INSERT INTO component(name, icon, description)
-VALUES (
+INSERT INTO
+    component(name, icon, description)
+VALUES
+    (
         'hero',
         'home',
         'Display a large title and description for your page, with an optional large illustrative image. Useful in your home page, for instance.'
     );
-INSERT INTO parameter(
+
+INSERT INTO
+    parameter(
         component,
         name,
         description,
         type,
         top_level,
         optional
     )
-SELECT 'hero',
+SELECT
+    'hero',
     *
-FROM (
-        VALUES -- top level
+FROM
+    (
+        VALUES
+            -- top level
             (
                 'title',
                 'The title of your page. Will be shown in very large characters at the top.',
@@ -68,11 +75,21 @@ FROM (
             ),
             (
                 'poster',
-                'URL of the image to be displayed before the video starts.',
+                'URL of the image to be displayed before the video starts. Ignored if no video is present.',
                 'URL',
                 TRUE,
                 TRUE
             ),
+            (
+                'nocontrols',
+                'Hide the video controls (play, pause, volume, etc.), and autoplay the video.',
+                'BOOLEAN',
+                TRUE,
+                TRUE
+            ),
+            ('muted', 'Mute the video', 'BOOLEAN', TRUE, TRUE),
+            ('autoplay', 'Automatically start playing the video', 'BOOLEAN', TRUE, TRUE),
+            ('loop', 'Loop the video', 'BOOLEAN', TRUE, TRUE),
             -- item level
             (
                 'title',
@@ -110,8 +127,11 @@ FROM (
                 TRUE
             )
     ) x;
-INSERT INTO example(component, description, properties)
-VALUES (
+
+INSERT INTO
+    example(component, description, properties)
+VALUES
+    (
         'hero',
         'The simplest possible hero section',
         json(
@@ -132,9 +152,6 @@ VALUES (
             "description_md": "Documentation for the *SQLPage* low-code web application framework.",
             "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Lac_de_Zoug.jpg/640px-Lac_de_Zoug.jpg",
             "link": "/documentation.sql",
-            "link_text": "Read Documentation !"},' ||
-         '{"title": "Fast", "description": "Pages load instantly, even on slow mobile networks.", "icon": "car", "color": "red", "link": "/"},' ||
-         '{"title": "Beautiful", "description": "Uses pre-defined components that look professional.", "icon": "eye", "color": "green", "link": "/"},' ||
-         '{"title": "Easy", "description_md": "You can teach yourself enough SQL to use [**SQLPage**](https://sql.ophir.dev) in a weekend.", "icon": "sofa", "color": "blue", "link": "/"}' || ']'
+            "link_text": "Read Documentation !"},' || '{"title": "Fast", "description": "Pages load instantly, even on slow mobile networks.", "icon": "car", "color": "red", "link": "/"},' || '{"title": "Beautiful", "description": "Uses pre-defined components that look professional.", "icon": "eye", "color": "green", "link": "/"},' || '{"title": "Easy", "description_md": "You can teach yourself enough SQL to use [**SQLPage**](https://sql.ophir.dev) in a weekend.", "icon": "sofa", "color": "blue", "link": "/"}' || ']'
         )
-    );
+    );
diff --git a/sqlpage/templates/hero.handlebars b/sqlpage/templates/hero.handlebars
@@ -15,11 +15,14 @@
     <img src="{{image}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" />
   {{/if}}
   {{#if video}}
-    <video src="{{video}}" alt="{{title}}" class="hero-image img-fluid col-lg-6" controls 
-      {{#if poster}}
-        preload="none"
-        poster="{{poster}}"
-      {{/if}}>
+    <video src="{{video}}" alt="{{title}}" class="hero-image img-fluid col-lg-6"
+      {{~#if loop}} loop{{/if~}}
+      {{~#if muted}} muted{{/if~}}
+      {{~#if nocontrols}} autoplay{{else}}
+        {{~#if autoplay}} autoplay{{/if~}}
+        controls
+      {{/if~}}
+      {{~#if poster}} preload="none" poster="{{poster}}"{{/if~}}>
     </video>
   {{/if}}
 </header>