From dd9fb79b5dad1e8990d61afe19bdf4a5a565e2c8 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Mon, 29 Jun 2026 12:02:44 +0200
Subject: [PATCH] video as filebrowser entry

---
 layouts/portfolio/single.html | 47 +++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/layouts/portfolio/single.html b/layouts/portfolio/single.html
index 919ad59..725e024 100644
--- a/layouts/portfolio/single.html
+++ b/layouts/portfolio/single.html
@@ -2,27 +2,12 @@
 {{ define "main" }}
 {{ $hasText := ne (.RawContent | strings.TrimSpace) "" }}
 {{ $images := .Params.images }}
+{{ $video := .Params.video }}
 
-{{ with .Params.video }}
-<div class="player">
-  <video preload="none" playsinline{{ with $.Params.thumbnail }} poster="{{ . }}"{{ end }}>
-    <source src="{{ . }}" type="video/mp4">
-  </video>
-  <button class="player__big" type="button" aria-label="play">▶</button>
-  <div class="player__bar">
-    <button class="player__play" type="button" aria-label="play/pause">▶</button>
-    <div class="player__scrub"><div class="player__fill"></div></div>
-    <span class="player__time">00:00 / 00:00</span>
-    <button class="player__mute" type="button" aria-label="mute">vol</button>
-    <button class="player__full" type="button" aria-label="fullscreen">⛶</button>
-  </div>
-</div>
-{{ end }}
-
-{{ if or $images $hasText }}
+{{ if or $images $hasText $video }}
 <div class="tui tui--files filebrowser">
   <p class="tui__cmd"><span class="tui__sym">$</span> ls</p>
-  {{ $total := len $images }}{{ if $hasText }}{{ $total = add $total 1 }}{{ end }}
+  {{ $total := len $images }}{{ if $hasText }}{{ $total = add $total 1 }}{{ end }}{{ if $video }}{{ $total = add $total 1 }}{{ end }}
   <p class="tui__cmd tui__total">total {{ $total }}</p>
   <ul class="tui__ls">
     <li><a href="{{ "/portfolio/" | relURL }}" data-name="..">
@@ -33,8 +18,13 @@
       <span class="tui__perm">-rw-r--r--</span><span class="tui__name">info.md</span>
     </a></li>
     {{ end }}
+    {{ if $video }}
+    <li><a data-name="video.mp4" data-video="1"{{ if not $hasText }} class="is-selected"{{ end }}>
+      <span class="tui__perm">-rw-r--r--</span><span class="tui__name">video.mp4</span>
+    </a></li>
+    {{ end }}
     {{ range $i, $im := $images }}
-    <li><a data-img="{{ $im.src | relURL }}" data-name="{{ $im.name }}"{{ if and (not $hasText) (eq $i 0) }} class="is-selected"{{ end }}>
+    <li><a data-img="{{ $im.src | relURL }}" data-name="{{ $im.name }}"{{ if and (not $hasText) (not $video) (eq $i 0) }} class="is-selected"{{ end }}>
       <span class="tui__perm">-rw-r--r--</span><span class="tui__name">{{ $im.name }}</span>
     </a></li>
     {{ end }}
@@ -42,8 +32,23 @@
 
   <figure class="tui__preview">
     {{ if $hasText }}<div class="tui__text" data-text="info.md">{{ .Content }}</div>{{ end }}
-    <img{{ if $hasText }} hidden{{ end }} src="{{ with $images }}{{ (index . 0).src | relURL }}{{ end }}" alt="{{ .Title }}">
-    <figcaption class="tui__status">{{ if $hasText }}info.md{{ else if $images }}{{ (index $images 0).name }}{{ end }}</figcaption>
+    {{ if $video }}
+    <div class="player"{{ if $hasText }} hidden{{ end }}>
+      <video preload="none" playsinline{{ with .Params.thumbnail }} poster="{{ . }}"{{ end }}>
+        <source src="{{ $video }}" type="video/mp4">
+      </video>
+      <button class="player__big" type="button" aria-label="play">▶</button>
+      <div class="player__bar">
+        <button class="player__play" type="button" aria-label="play/pause">▶</button>
+        <div class="player__scrub"><div class="player__fill"></div></div>
+        <span class="player__time">00:00 / 00:00</span>
+        <button class="player__mute" type="button" aria-label="mute">vol</button>
+        <button class="player__full" type="button" aria-label="fullscreen">⛶</button>
+      </div>
+    </div>
+    {{ end }}
+    {{ if $images }}<img{{ if or $hasText $video }} hidden{{ end }} src="{{ (index $images 0).src | relURL }}" alt="{{ .Title }}">{{ end }}
+    <figcaption class="tui__status">{{ if $hasText }}info.md{{ else if $video }}video.mp4{{ else if $images }}{{ (index $images 0).name }}{{ end }}</figcaption>
   </figure>
 </div>
 {{ end }}