Merge pull request #75 from thekid/feature/single-video-playback

If a content is formed of a single video, play in feed

Author: thekid

src/main/handlebars/feed.handlebars

@@ -42,20 +42,35 @@
             {{> partials/weather in=.}}
           </div>
 
-          <a class="images is-preview is-{{size-class (size images)}}" href="{{route this}}">
-            {{#with images.0}}
-              <div class="{{#if is.video}}is-video{{/if}} image">
-                <img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless first}}loading="lazy"{{/unless}} {{&dataset meta}} src="/image/{{slug}}/thumb-{{name}}.webp" width="1024">
-              </div>
-            {{/with}}
-            <div class="more">
-              {{#each images}}
-                {{#unless (equals @index 0)}}
-                  <img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless ../@first}}loading="lazy"{{/unless}} style="z-index: -{{@index}}" src="/image/{{slug}}/thumb-{{name}}.webp" width="192">
-                {{/unless}}
-              {{/each}}
+          {{! Content formed of a single video can be played back inline directly }}
+          {{#if (all (equals 1 (size images)) images.0.is.video)}}
+            <div class="images is-single">
+              {{#with images.0}}
+                <div class="image">
+                  <video controls playsinline preload="metadata" width="100%" poster="/image/{{slug}}/thumb-{{name}}.webp" data-slug="{{slug}}">
+                    <source src="/image/{{slug}}/video-{{name}}.mp4" type="video/mp4">
+                  </video>
+                </div>
+              {{/with}}
             </div>
-          </a>
+          {{else}}
+            <a class="images is-preview is-{{size-class (size images)}}" href="{{route this}}">
+              {{#with images.0}}
+                <div class="{{#if is.video}}is-video{{/if}} image">
+                  <img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless first}}loading="lazy"{{/unless}} {{&dataset meta}} src="/image/{{slug}}/thumb-{{name}}.webp" width="1024">
+                </div>
+              {{/with}}
+              <div class="more">
+                {{#each images}}
+                  {{#unless (equals @index 0)}}
+                    <div class="{{#if is.video}}is-video{{/if}} image" style="z-index: -{{@index}}">
+                      <img alt="{{title}}, {{date meta.dateTime format='d.m.Y H:i'}}" {{#unless ../@first}}loading="lazy"{{/unless}} src="/image/{{slug}}/thumb-{{name}}.webp" width="192">
+                    </div>
+                  {{/unless}}
+                {{/each}}
+              </div>
+            </a>
+          {{/if}}
 
           <div class="content">
             {{& content}}
@@ -75,5 +90,20 @@
     </div>
   {{/inline}}
   {{#*inline "scripts"}}
+    <script type="module">
+      {{&use 'statistics'}}
+      const statistics = new Statistics();
+      {{#each elements}}
+        {{#if (all (equals 1 (size images)) images.0.is.video)}}
+          statistics.add('{{slug}}', '{{sign slug}}', 1500);
+        {{/if}}
+      {{/each}}
+
+      // Content formed of a single video has been watched once it's played back for more than 1.5 seconds
+      for (const $video of document.querySelectorAll('video')) {
+        $video.addEventListener('play', e => statistics.schedule($video.dataset['slug']));
+        $video.addEventListener('pause', e => statistics.withdraw($video.dataset['slug']));
+      }
+    </script>
   {{/inline}}
 {{/layout}}

src/main/handlebars/layout.handlebars

@@ -598,22 +598,26 @@
         display: flex;
         isolation: isolate;
 
-        img {
-          display: block;
+        .image {
+          position: relative;
           border: .25rem solid white;
           border-radius: .35rem;
-          width: var(--_size);
-          aspect-ratio: 1 / 1;
-          object-fit: cover;
           box-shadow: .5rem .5rem 1rem rgb(0 0 0 / .2);
           transition: margin ease-in-out 150ms;
+          width: var(--_size);
+          height: var(--_size);
+        }
+
+        .image img {
+          width: 100%;
+          height: 100%;
         }
 
-        img:not(:first-child) {
+        .image:not(:first-child) {
           margin-left: calc(-1 * var(--_overlap));
         }
 
-        &:hover img:not(:first-child) {
+        &:hover .image:not(:first-child) {
           margin-left: 1rem;
         }
       }