refactor: better video support (#2077)

resources/layouts/_default/page.iframe.twig

@@ -22,8 +22,8 @@
     {%- if page.videos is defined ~%}
     <video id="player" playsinline controls preload="auto"{% if page.poster|default(page.image|default) %} poster="{{ asset(page.poster|default(page.image|default)) }}"{% endif %}>
       {%- for video in page.videos ~%}
-      {%- set asset = asset(video) ~%}
-      <source src="{{ url(asset) }}" type="{{ asset.subtype }}"/>
+        {%- set asset_video = asset(video) ~%}
+      <source src="{{ url(asset_video) }}" type="{{ asset_video.subtype }}"/>
       {%- endfor ~%}
     </video>
     {%- else ~%}

resources/layouts/_default/page.oembed.twig

@@ -30,14 +30,18 @@
   {%- endif ~%}
   "provider_name": "{{ site.title }}",
   "provider_url": "{{ url('/', {canonical: true}) }}",
+  {%- if author.name is defined ~%}
   "author_name": "{{ author.name }}",
+  {%- endif ~%}
   {%- if author.url is defined ~%}
   "author_url": "{{ author.url }}",
   {%- endif ~%}
   "cache_age": 3600,
   {%- if 'iframe' in page.output ~%}
   "embed_url": "{{ url(page, {canonical: true, format: 'iframe'}) }}",
   {%- endif ~%}
+  {%- if opengraph.description is defined ~%}
   "description": "{{ opengraph.description }}"
+  {%- endif ~%}
 }
 {% endblock %}

resources/layouts/partials/jsonld.js.twig

@@ -118,14 +118,16 @@
           "@context": "https://schema.org",
           "@type": "VideoObject",
           "name": "{{ title|default(page.title)|e }}",
+          {%- if page.description is defined ~%}
           "description": "{{ page.description|e }}",
-          {%- if page.poster is defined ~%}
+          {%- endif ~%}
           "thumbnailUrl": [
             "{{ url(asset(page.poster), {canonical: true}) }}"
           ],
-          {%- endif ~%}
           "uploadDate": "{{ page.date|date('Y-m-dTH:i:sP') }}",
-          "duration": "PT1M54S",
+          {%- if page.duration is defined ~%}
+          "duration": "{{ page.duration|duration_to_iso8601 }}",
+          {%- endif ~%}
           "contentUrl": "{{ url(opengraph.video, {canonical: true}) }}",
           "embedUrl": "{{ url(page, {canonical: true, format: 'iframe'}) }}"
         }

src/Renderer/Extension/Core.php

@@ -146,6 +146,8 @@ public function getFilters(): array
             new \Twig\TwigFilter('preg_match_all', [$this, 'pregMatchAll']),
             new \Twig\TwigFilter('hex_to_rgb', [$this, 'hexToRgb']),
             new \Twig\TwigFilter('splitline', [$this, 'splitLine']),
+            // date
+            new \Twig\TwigFilter('duration_to_iso8601', ['\Cecil\Util\Date', 'durationToIso8601']),
         ];
     }
 

src/Util/Date.php

@@ -50,4 +50,18 @@ public static function toDatetime($date): \DateTime
 
         return new \DateTime($date);
     }
+
+    /**
+     * Duration in seconds to ISO 8601.
+     * e.g.: '00:00:46.70' -> 'T0M46S'
+     */
+    public static function durationToIso8601(string $duration): string
+    {
+        $time = new \DateTime($duration);
+        $midnight = new \DateTime();
+        $midnight->setTime(0, 0);
+        $period = $midnight->diff($time);
+
+        return $period->format('T%iM%SS');
+    }
 }

tests/fixtures/website/layouts/video.html.twig

@@ -0,0 +1,10 @@
+{% extends '_default/page.html.twig' %}
+
+{% block content %}
+  <video controls width="100%">
+  {%- for video in page.videos ~%}
+    {%- set asset_video = asset(video) ~%}
+    <source src="{{ url(asset_video) }}" type="{{ asset_video.subtype }}" />
+  {%- endfor ~%}
+  </video>
+{% endblock %}

tests/fixtures/website/pages/Assets/video.md

@@ -0,0 +1,12 @@
+---
+title: Video
+image: video/poster.png
+
+duration: 00:00:13
+videos:
+  - video/test.mp4
+poster: video/poster.png
+
+output: [html, iframe, oembed]
+layout: video
+---