Video thumbnail generation

assets/page/main.html

@@ -13,7 +13,7 @@
 <div class="thumb-grid">
     {{range .Entries}}
     <a class="thumb-tile" href="{{.URL}}" title="{{.Name}}">
-        {{if .ThumbURL}}<img class="thumb-img" src="{{.ThumbURL}}" alt="" loading="lazy" width="300">{{else}}<span class="thumb-icon">{{.Icon}}</span>{{end}}
+        {{if .ThumbURL}}<span class="thumb-media"><img class="thumb-img" src="{{.ThumbURL}}" alt="" loading="lazy" width="300">{{if .IsVideo}}<span class="thumb-play" aria-hidden="true">▶</span>{{end}}</span>{{else}}<span class="thumb-icon">{{.Icon}}</span>{{end}}
         <span class="thumb-label truncate">{{.Name}}</span>
     </a>
     {{end}}

assets/style.css

@@ -24,6 +24,8 @@
     --link-hover: #d6d24d;
     --danger: #c40141;
     --danger-hover: #d03467;
+    /* Translucent scrim for badges/overlays sitting on top of media. */
+    --overlay: rgba(0, 0, 0, 0.55);
 
     --border: 1px solid var(--secondary);
     --border-dashed: 1px dashed var(--secondary);
@@ -484,6 +486,24 @@ button.fab { display: none; }
     display: block;
     background: var(--bg) url("/_/icons/thumb-placeholder.svg") center/2rem no-repeat;
 }
+/* Wrapper so a video tile can overlay a play badge on its extracted frame. */
+.thumb-media { position: relative; display: block; }
+.thumb-play {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    padding-left: 0.15rem;
+    border-radius: 50%;
+    background: var(--overlay);
+    color: var(--text);
+    pointer-events: none;
+}
 .thumb-icon {
     height: 150px;
     display: flex;