Add video picker and Discord video attachments.

The picker accepts one MP4 or WebM, the thread lightbox zooms photos, and Discord gets the video as a file on a follow-up message so photo embeds still render.

templates/base.html

@@ -73,6 +73,13 @@
   <footer class="site-footer">
     <p>This site is not a substitute for a licensed plumber. Advice is general and based on the question as written. If you have a gas leak, flooding, or another emergency, leave the area if needed and call 911.</p>
   </footer>
+  <dialog class="image-zoom" data-image-zoom-dialog aria-labelledby="image-zoom-caption">
+    <form method="dialog" class="image-zoom-bar">
+      <button class="image-zoom-close" value="close">Close</button>
+    </form>
+    <img data-image-zoom-img alt="">
+    <p id="image-zoom-caption" class="image-zoom-caption" data-image-zoom-caption></p>
+  </dialog>
 </body>
 </html>
 {{end}}

templates/partials/_image_picker.html

@@ -1,26 +1,50 @@
 {{define "imagePicker"}}
-<fieldset class="image-picker" data-image-picker data-max-images="4">
-  <legend>Photos <span class="optional">(optional)</span></legend>
+<fieldset class="image-picker" data-image-picker data-max-images="4" data-max-videos="1">
+  <legend>Photos and video <span class="optional">(optional)</span></legend>
   <p id="{{.ID}}-hint" class="image-picker-hint">
-    Add up to 4 JPEG, PNG, or WebP images. Each image can be up to 5 MB.
+    Add up to 4 JPEG, PNG, or WebP images (5 MB each) and one MP4 or WebM video (25 MB).
   </p>
+  <div class="video-picker-slot" data-video-slot>
+    {{if .Video}}
+      <article class="video-preview" data-video-card data-existing-video>
+        <div class="video-preview-media">
+          <video src="{{.Video.PublicURL}}" controls playsinline preload="metadata"
+            {{if .Video.Description}}aria-label="{{.Video.Description}}"{{else}}aria-label="Saved video"{{end}}></video>
+          <span class="image-preview-tag">Saved</span>
+        </div>
+        <div class="image-preview-fields">
+          <input type="hidden" name="existing_image_id" value="{{.Video.ID}}">
+          <label for="{{.ID}}-video-description-{{.Video.ID}}">
+            Video description <span class="optional">(optional)</span>
+          </label>
+          <input id="{{.ID}}-video-description-{{.Video.ID}}" type="text"
+            name="existing_image_description" maxlength="500"
+            value="{{.Video.Description}}" placeholder="What should people notice?">
+          <button class="image-remove" type="button" data-remove-image
+            aria-label="Remove video{{if .Video.Description}}: {{.Video.Description}}{{end}}">
+            Remove
+          </button>
+        </div>
+      </article>
+    {{end}}
+  </div>
   <div class="image-dropzone" data-image-dropzone>
     <input id="{{.ID}}" class="image-input" type="file" name="images"
-      accept="image/jpeg,image/png,image/webp" multiple
+      accept="image/jpeg,image/png,image/webp,video/mp4,video/webm,.mp4,.webm" multiple
       aria-describedby="{{.ID}}-hint {{.ID}}-status {{.ID}}-error"
       data-image-input>
     <label class="image-dropzone-label" for="{{.ID}}">
-      <strong>Drop photos here</strong>
+      <strong>Drop photos or a video here</strong>
       <span>or click to browse</span>
     </label>
     <span id="{{.ID}}-status" class="image-picker-count" role="status"
-      aria-live="polite" data-image-count>{{len .Images}} of 4</span>
+      aria-live="polite" data-image-count>{{len .Photos}} of 4{{if .Video}} · 1 video{{end}}</span>
   </div>
   <p id="{{.ID}}-error" class="image-picker-error" role="alert"
     data-image-error hidden></p>
 
   <div class="image-preview-list" data-image-list>
-    {{range .Images}}
+    {{range .Photos}}
       <article class="image-preview" data-image-card data-existing-image>
         <div class="image-preview-media">
           <img src="{{.PublicURL}}" alt="" width="{{.Width}}" height="{{.Height}}">
@@ -63,6 +87,26 @@
       </div>
     </article>
   </template>
+  <template data-video-template>
+    <article class="video-preview" data-video-card data-new-video>
+      <div class="video-preview-media">
+        <video controls playsinline preload="metadata" data-video-preview></video>
+        <span class="image-preview-tag">New</span>
+      </div>
+      <div class="image-preview-fields">
+        <p class="image-preview-name" data-image-name></p>
+        <label>
+          Video description <span class="optional">(optional)</span>
+          <input type="text" name="image_description" maxlength="500"
+            placeholder="What should people notice?">
+        </label>
+        <button class="image-remove" type="button" data-remove-image
+          aria-label="Remove selected video">
+          Remove
+        </button>
+      </div>
+    </article>
+  </template>
   <noscript>
     <p class="image-picker-hint">Image previews and removal while editing require JavaScript.</p>
   </noscript>
@@ -70,13 +114,25 @@
 {{end}}
 
 {{define "postImages"}}
-{{if .Images}}
-  <div class="post-image-grid post-image-grid-{{len .Images}}">
-    {{range .Images}}
+{{range .Images}}
+  {{if eq .Kind "video"}}
+    <figure class="post-video">
+      <video src="{{.PublicURL}}" controls playsinline preload="metadata"
+        {{if .Description}}aria-label="{{.Description}}"{{else}}aria-label="Video attached to this post"{{end}}></video>
+      {{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
+    </figure>
+  {{end}}
+{{end}}
+{{$photos := postPhotos .Images}}
+{{if $photos}}
+  <div class="post-image-grid post-image-grid-{{len $photos}}">
+    {{range $photos}}
       <figure class="post-image">
-        <img src="{{.PublicURL}}" width="{{.Width}}" height="{{.Height}}"
-          alt="{{if .Description}}{{.Description}}{{else}}Photo attached to this post{{end}}"
-          loading="lazy" decoding="async">
+        <a class="post-image-zoom" href="{{.PublicURL}}" data-image-zoom>
+          <img src="{{.PublicURL}}" width="{{.Width}}" height="{{.Height}}"
+            alt="{{if .Description}}{{.Description}}{{else}}Photo attached to this post{{end}}"
+            loading="lazy" decoding="async">
+        </a>
         {{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
       </figure>
     {{end}}