From 5eadb9c7790b06089d49488d117dbe5334791757 Mon Sep 17 00:00:00 2001
From: Timm Friebe <thekid@thekid.de>
Date: Sun, 5 Jan 2025 10:41:34 +0100
Subject: [PATCH 1/2] If a content is formed of a single video, play in feed

---
 src/main/handlebars/feed.handlebars | 54 ++++++++++++++++++++++-------
 1 file changed, 41 insertions(+), 13 deletions(-)

diff --git a/src/main/handlebars/feed.handlebars b/src/main/handlebars/feed.handlebars
index 6455a76..34a98d3 100755
--- a/src/main/handlebars/feed.handlebars
+++ b/src/main/handlebars/feed.handlebars
@@ -42,20 +42,33 @@
             {{> 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)}}
+                    <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}}
+              </div>
+            </a>
+          {{/if}}
 
           <div class="content">
             {{& content}}
@@ -75,5 +88,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}}
\ No newline at end of file

From 06a45b6b26c1478d72db17d17fd408912035f39f Mon Sep 17 00:00:00 2001
From: Timm Friebe <thekid@thekid.de>
Date: Sun, 5 Jan 2025 11:04:13 +0100
Subject: [PATCH 2/2] Consistently ark videos in collapsed list with "play"
 icon

---
 src/main/handlebars/feed.handlebars   |  4 +++-
 src/main/handlebars/layout.handlebars | 18 +++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/main/handlebars/feed.handlebars b/src/main/handlebars/feed.handlebars
index 34a98d3..102ab4a 100755
--- a/src/main/handlebars/feed.handlebars
+++ b/src/main/handlebars/feed.handlebars
@@ -63,7 +63,9 @@
               <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">
+                    <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>
diff --git a/src/main/handlebars/layout.handlebars b/src/main/handlebars/layout.handlebars
index 92c9be5..bb70a9d 100755
--- a/src/main/handlebars/layout.handlebars
+++ b/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;
         }
       }