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.

cmd/server/main.go

@@ -38,6 +38,7 @@ func main() {
 	}
 	bus := events.New()
 	mail.Subscribe(bus, store.NewPostgres(db), notifier)
+	events.SubscribeRelease(bus)
 	bot, err := discord.FromEnv(store.NewDiscordLinks(db), bus, store.NewPostgres(db))
 	if err != nil {
 		log.Fatalf("discord: %v", err)
@@ -45,7 +46,7 @@ func main() {
 	if bot != nil {
 		defer bot.Close()
 	}
-	handler := newHandler(db, sessions, uploader, bus)
+	handler := newHandler(db, sessions, uploader, bus, bot != nil)
 	run(&http.Server{
 		Addr:              listenAddr(),
 		Handler:           handler,
@@ -69,14 +70,15 @@ func openDB() (*sql.DB, *store.SessionStore) {
 	return db, sessions
 }
 
-func newHandler(db *sql.DB, sessions *store.SessionStore, uploader blob.Uploader, bus events.Publisher) http.Handler {
+func newHandler(db *sql.DB, sessions *store.SessionStore, uploader blob.Uploader, bus events.Publisher, holdUploads bool) http.Handler {
 	srv, err := web.New(store.NewPostgres(db), sessions.Store(), plumber.TemplateFS, plumber.StaticFS, web.Config{
-		AdminSetupSecret: strings.TrimSpace(os.Getenv("ADMIN_SETUP_SECRET")),
-		SecureCookie:     secureCookieFromEnv(),
-		TrustedProxies:   parseTrustedProxies(os.Getenv("TRUSTED_PROXY_CIDRS")),
-		Blob:             uploader,
-		Events:           bus,
-		BaseURL:          strings.TrimRight(strings.TrimSpace(os.Getenv("APP_BASE_URL")), "/"),
+		AdminSetupSecret:       strings.TrimSpace(os.Getenv("ADMIN_SETUP_SECRET")),
+		SecureCookie:           secureCookieFromEnv(),
+		TrustedProxies:         parseTrustedProxies(os.Getenv("TRUSTED_PROXY_CIDRS")),
+		Blob:                   uploader,
+		Events:                 bus,
+		BaseURL:                strings.TrimRight(strings.TrimSpace(os.Getenv("APP_BASE_URL")), "/"),
+		HoldUploadUntilDiscord: holdUploads,
 	})
 	if err != nil {
 		log.Fatalf("server: %v", err)

internal/discord/api.go

@@ -2,6 +2,7 @@ package discord
 
 import (
 	"context"
+	"strings"
 
 	"github.com/bwmarrin/discordgo"
 )
@@ -63,14 +64,27 @@ func (s *sessionAPI) Close() error {
 }
 
 func toMessageSend(msg Message) *discordgo.MessageSend {
+	var files []*discordgo.File
+	for _, f := range msg.Files {
+		files = append(files, &discordgo.File{
+			Name:        f.Name,
+			ContentType: f.ContentType,
+			Reader:      f.Reader,
+		})
+	}
 	return &discordgo.MessageSend{
 		Content:         messageContent(msg),
 		Embeds:          toEmbeds(msg),
+		Files:           files,
 		AllowedMentions: &discordgo.MessageAllowedMentions{},
 	}
 }
 
 func toEmbeds(msg Message) []*discordgo.MessageEmbed {
+	imageURLs := embedImageURLs(msg)
+	if msg.Title == "" && msg.Description == "" && msg.City == "" && msg.Author == "" && len(imageURLs) == 0 {
+		return nil
+	}
 	main := &discordgo.MessageEmbed{
 		Title:       msg.Title,
 		URL:         publicURL(msg.URL),
@@ -92,7 +106,7 @@ func toEmbeds(msg Message) []*discordgo.MessageEmbed {
 		})
 	}
 	embeds := []*discordgo.MessageEmbed{main}
-	for i, url := range msg.ImageURLs {
+	for i, url := range imageURLs {
 		if i == 0 {
 			main.Image = &discordgo.MessageEmbedImage{URL: url}
 			continue
@@ -104,3 +118,16 @@ func toEmbeds(msg Message) []*discordgo.MessageEmbed {
 	}
 	return embeds
 }
+
+func embedImageURLs(msg Message) []string {
+	var attached []string
+	for _, f := range msg.Files {
+		if strings.HasPrefix(f.ContentType, "image/") {
+			attached = append(attached, "attachment://"+f.Name)
+		}
+	}
+	if len(attached) > 0 {
+		return attached
+	}
+	return msg.ImageURLs
+}

internal/discord/bot.go

@@ -16,7 +16,7 @@ import (
 	"plumber/internal/store"
 )
 
-const discordTimeout = 15 * time.Second
+const discordTimeout = 60 * time.Second
 
 // Bot posts site events to a Discord channel and owns post-to-message links.
 type Bot struct {
@@ -91,13 +91,27 @@ func (b *Bot) Handle(_ context.Context, ev any) {
 	defer cancel()
 	switch e := ev.(type) {
 	case events.PostCreated:
-		b.onCreated(ctx, e.PostEvent)
+		defer b.publishPosted(e)
+		b.onCreated(ctx, e)
 	case events.PostUpdated:
 		b.onUpdated(ctx, e.PostEvent)
 	}
 }
 
-func (b *Bot) onCreated(ctx context.Context, ev events.PostEvent) {
+func (b *Bot) publishPosted(e events.PostCreated) {
+	if e.Release == nil {
+		return
+	}
+	done := events.PostedToDiscord{PostID: e.PostID, Release: e.Release}
+	if b.bus == nil {
+		e.Release()
+		return
+	}
+	b.bus.Publish(context.Background(), done)
+}
+
+func (b *Bot) onCreated(ctx context.Context, e events.PostCreated) {
+	ev := e.PostEvent
 	_, err := b.links.GetByPostID(ctx, ev.PostID)
 	if err == nil {
 		return
@@ -107,17 +121,17 @@ func (b *Bot) onCreated(ctx context.Context, ev events.PostEvent) {
 		return
 	}
 	if isRoot(ev) {
-		b.createRoot(ctx, ev)
+		b.createRoot(ctx, e)
 		return
 	}
-	b.createReply(ctx, ev)
+	b.createReply(ctx, e)
 }
 
 func (b *Bot) onUpdated(ctx context.Context, ev events.PostEvent) {
 	link, err := b.links.GetByPostID(ctx, ev.PostID)
 	if err != nil {
 		if errors.Is(err, sql.ErrNoRows) {
-			b.onCreated(ctx, ev)
+			b.onCreated(ctx, events.PostCreated{PostEvent: ev})
 			return
 		}
 		log.Printf("discord: load link %s: %v", ev.PostID, err)
@@ -135,56 +149,95 @@ func (b *Bot) onUpdated(ctx context.Context, ev events.PostEvent) {
 	log.Printf("discord: edited %s", ev.PostID)
 }
 
-func (b *Bot) createRoot(ctx context.Context, ev events.PostEvent) {
-	msg := formatMessage(ev)
+func (b *Bot) createRoot(ctx context.Context, e events.PostCreated) {
+	msg := formatCreated(e)
 	threadID, err := b.api.StartThread(ctx, b.channelID, msg.ThreadName)
 	if err != nil {
-		log.Printf("discord: start thread %s: %v", ev.PostID, err)
+		log.Printf("discord: start thread %s: %v", e.PostID, err)
 		return
 	}
-	messageID, err := b.api.SendToThread(ctx, threadID, msg)
+	messageID, err := b.sendCreated(ctx, threadID, msg)
 	if err != nil {
-		log.Printf("discord: send root %s: %v", ev.PostID, err)
+		log.Printf("discord: send root %s: %v", e.PostID, err)
 		return
 	}
 	if err := b.links.Upsert(ctx, store.DiscordLink{
-		PostID:    ev.PostID,
+		PostID:    e.PostID,
 		MessageID: messageID,
 		ThreadID:  threadID,
 	}); err != nil {
-		log.Printf("discord: save root link %s: %v", ev.PostID, err)
+		log.Printf("discord: save root link %s: %v", e.PostID, err)
 		return
 	}
-	log.Printf("discord: posted root %s", ev.PostID)
+	log.Printf("discord: posted root %s", e.PostID)
 }
 
-func (b *Bot) createReply(ctx context.Context, ev events.PostEvent) {
-	root, err := b.links.GetByPostID(ctx, ev.RootID)
+func (b *Bot) createReply(ctx context.Context, e events.PostCreated) {
+	root, err := b.links.GetByPostID(ctx, e.RootID)
 	if err != nil {
 		if errors.Is(err, sql.ErrNoRows) {
-			log.Printf("discord: skip reply %s: no root thread", ev.PostID)
+			log.Printf("discord: skip reply %s: no root thread", e.PostID)
 			return
 		}
-		log.Printf("discord: load root link %s: %v", ev.RootID, err)
+		log.Printf("discord: load root link %s: %v", e.RootID, err)
 		return
 	}
 	if strings.TrimSpace(root.ThreadID) == "" {
-		log.Printf("discord: skip reply %s: no root thread", ev.PostID)
+		log.Printf("discord: skip reply %s: no root thread", e.PostID)
 		return
 	}
-	messageID, err := b.api.SendToThread(ctx, root.ThreadID, formatMessage(ev))
+	messageID, err := b.sendCreated(ctx, root.ThreadID, formatCreated(e))
 	if err != nil {
-		log.Printf("discord: send reply %s: %v", ev.PostID, err)
+		log.Printf("discord: send reply %s: %v", e.PostID, err)
 		return
 	}
 	if err := b.links.Upsert(ctx, store.DiscordLink{
-		PostID:    ev.PostID,
+		PostID:    e.PostID,
 		MessageID: messageID,
 	}); err != nil {
-		log.Printf("discord: save reply link %s: %v", ev.PostID, err)
+		log.Printf("discord: save reply link %s: %v", e.PostID, err)
 		return
 	}
-	log.Printf("discord: posted reply %s", ev.PostID)
+	log.Printf("discord: posted reply %s", e.PostID)
+}
+
+func (b *Bot) sendCreated(ctx context.Context, threadID string, msg Message) (string, error) {
+	_, videos := splitAttachments(msg.Files)
+	msg.Files = nil
+	if len(videos) > 0 {
+		msg.VideoURLs = nil
+	}
+	messageID, err := b.send(ctx, threadID, msg)
+	if err != nil {
+		return "", err
+	}
+	for _, video := range videos {
+		if _, err := b.send(ctx, threadID, Message{Files: []Attachment{video}}); err != nil {
+			log.Printf("discord: send video %s: %v", threadID, err)
+		}
+	}
+	return messageID, nil
+}
+
+func splitAttachments(files []Attachment) (images, videos []Attachment) {
+	for _, f := range files {
+		if strings.HasPrefix(f.ContentType, "video/") || f.Kind == "video" {
+			videos = append(videos, f)
+			continue
+		}
+		images = append(images, f)
+	}
+	return images, videos
+}
+
+func (b *Bot) send(ctx context.Context, threadID string, msg Message) (string, error) {
+	messageID, err := b.api.SendToThread(ctx, threadID, msg)
+	if err != nil && len(msg.Files) > 0 {
+		log.Printf("discord: send with files %s: %v; retrying without files", threadID, err)
+		msg.Files = nil
+		return b.api.SendToThread(ctx, threadID, msg)
+	}
+	return messageID, err
 }
 
 func (b *Bot) editChannel(ctx context.Context, ev events.PostEvent, link *store.DiscordLink) (string, error) {

internal/discord/bot_test.go

@@ -6,6 +6,7 @@ import (
 	"strings"
 	"sync"
 	"testing"
+	"time"
 
 	"plumber/internal/events"
 	"plumber/internal/store"
@@ -209,6 +210,125 @@ func TestOutboundUpdateWithoutLinkCreates(t *testing.T) {
 	}
 }
 
+func TestOutboundAttachesVideoFile(t *testing.T) {
+	t.Parallel()
+
+	bus := events.New()
+	defer bus.Close()
+	events.SubscribeRelease(bus)
+	links := newMemoryLinks()
+	api := &fakeAPI{}
+	bot := New("channel-1", links, api)
+	bot.bus = bus
+
+	released := make(chan struct{})
+	bot.Handle(context.Background(), events.PostCreated{
+		PostEvent: events.PostEvent{
+			PostID:     "root-1",
+			RootID:     "root-1",
+			Title:      "Valve clip",
+			Body:       "Watch the handle.",
+			AuthorName: "sam",
+			Permalink:  "https://www.askaplumberfirst.com/questions/root-1#post-root-1",
+			Images:     []events.Image{{URL: "https://cdn.example/clip.mp4", Kind: "video"}},
+		},
+		Media: []events.Media{{
+			Name:        "clip.mp4",
+			ContentType: "video/mp4",
+			Kind:        "video",
+			Bytes:       []byte("fake-mp4"),
+		}},
+		Release: func() { close(released) },
+	})
+
+	if len(api.sends) != 3 ||
+		api.sends[1].Kind != "thread-msg" ||
+		api.sends[2].Kind != "thread-msg" {
+		t.Fatalf("sends = %+v", api.sends)
+	}
+	if len(api.sends[1].Msg.Files) != 0 {
+		t.Fatalf("text message files = %+v", api.sends[1].Msg.Files)
+	}
+	files := api.sends[2].Msg.Files
+	if len(files) != 1 || files[0].Name != "clip.mp4" || files[0].ContentType != "video/mp4" {
+		t.Fatalf("video files = %+v", files)
+	}
+	content := messageContent(api.sends[1].Msg)
+	if strings.Contains(content, "https://cdn.example/clip.mp4") {
+		t.Fatalf("content still has video URL: %q", content)
+	}
+	select {
+	case <-released:
+	case <-time.After(time.Second):
+		t.Fatal("PostedToDiscord did not release")
+	}
+}
+
+func TestOutboundPhotosThenVideo(t *testing.T) {
+	t.Parallel()
+
+	api := &fakeAPI{}
+	bot := New("channel-1", newMemoryLinks(), api)
+	bot.Handle(context.Background(), events.PostCreated{
+		PostEvent: events.PostEvent{
+			PostID:     "root-1",
+			RootID:     "root-1",
+			Title:      "Valve clip",
+			Body:       "Photo and video.",
+			AuthorName: "sam",
+			Images: []events.Image{
+				{URL: "https://cdn.example/a.jpg"},
+				{URL: "https://cdn.example/clip.mp4", Kind: "video"},
+			},
+		},
+		Media: []events.Media{
+			{Name: "still.jpg", ContentType: "image/jpeg", Kind: "image", Bytes: []byte("jpeg")},
+			{Name: "clip.mp4", ContentType: "video/mp4", Kind: "video", Bytes: []byte("mp4")},
+		},
+	})
+	if len(api.sends) != 3 ||
+		api.sends[1].Kind != "thread-msg" ||
+		api.sends[2].Kind != "thread-msg" {
+		t.Fatalf("sends = %+v", api.sends)
+	}
+	photos := api.sends[1].Msg.Files
+	if len(photos) != 0 {
+		t.Fatalf("text message should not attach files: %+v", photos)
+	}
+	if got := api.sends[1].Msg.ImageURLs; len(got) != 1 || got[0] != "https://cdn.example/a.jpg" {
+		t.Fatalf("text message images = %v", got)
+	}
+	if embeds := toEmbeds(api.sends[1].Msg); len(embeds) == 0 || embeds[0].Image == nil || embeds[0].Image.URL != "https://cdn.example/a.jpg" {
+		t.Fatalf("text embeds = %+v", toEmbeds(api.sends[1].Msg))
+	}
+	videos := api.sends[2].Msg.Files
+	if len(videos) != 1 || videos[0].Name != "clip.mp4" {
+		t.Fatalf("video files = %+v", videos)
+	}
+}
+
+func TestOutboundReleasesWhenAlreadyLinked(t *testing.T) {
+	t.Parallel()
+
+	links := newMemoryLinks()
+	if err := links.Upsert(context.Background(), store.DiscordLink{
+		PostID:    "root-1",
+		MessageID: "d-root",
+		ThreadID:  "thread-1",
+	}); err != nil {
+		t.Fatal(err)
+	}
+	released := false
+	bot := New("channel-1", links, &fakeAPI{})
+	bot.Handle(context.Background(), events.PostCreated{
+		PostEvent: events.PostEvent{PostID: "root-1", RootID: "root-1", Title: "Already posted"},
+		Release:   func() { released = true },
+	})
+	if !released {
+		t.Fatal("skipped send did not release held upload")
+	}
+}
+
 func TestFormatMessage(t *testing.T) {
 	t.Parallel()
 
@@ -218,7 +338,10 @@ func TestFormatMessage(t *testing.T) {
 		City:       "Oakland",
 		AuthorName: "sam",
 		Permalink:  "https://example.com/q",
-		Images:     []events.Image{{URL: "https://cdn.example/a.jpg", Description: "ignored"}},
+		Images: []events.Image{
+			{URL: "https://cdn.example/a.jpg", Description: "ignored"},
+			{URL: "https://cdn.example/clip.mp4", Kind: "video"},
+		},
 	})
 	if got.Title != "Leaky sink" ||
 		got.Description != "It drips." ||
@@ -226,7 +349,8 @@ func TestFormatMessage(t *testing.T) {
 		got.Author != "sam" ||
 		got.URL != "https://example.com/q" ||
 		got.ThreadName != "sam asks: Leaky sink" ||
-		len(got.ImageURLs) != 1 {
+		len(got.ImageURLs) != 1 || got.ImageURLs[0] != "https://cdn.example/a.jpg" ||
+		len(got.VideoURLs) != 1 || got.VideoURLs[0] != "https://cdn.example/clip.mp4" {
 		t.Fatalf("format = %+v", got)
 	}
 
@@ -237,7 +361,9 @@ func TestFormatMessage(t *testing.T) {
 	content := messageContent(got)
 	if strings.Contains(content, "Leaky sink") ||
 		!strings.Contains(content, "It drips.") ||
-		!strings.Contains(content, "Oakland") {
+		!strings.Contains(content, "Oakland") ||
+		!strings.Contains(content, "https://cdn.example/a.jpg") ||
+		!strings.Contains(content, "https://cdn.example/clip.mp4") {
 		t.Fatalf("content = %q", content)
 	}
 	if publicURL("/questions/x") != "" || publicURL("http://localhost:8080/q") != "" {

internal/discord/format.go

@@ -1,6 +1,8 @@
 package discord
 
 import (
+	"bytes"
+	"io"
 	"strings"
 
 	"plumber/internal/events"
@@ -13,6 +15,14 @@ const (
 	embedColor            = 0xe96a26
 )
 
+// Attachment is a local file Discord should upload with the message.
+type Attachment struct {
+	Name        string
+	ContentType string
+	Kind        string
+	Reader      io.Reader
+}
+
 // Message is a Discord-ready snapshot of a site post event.
 type Message struct {
 	Title       string
@@ -21,36 +31,76 @@ type Message struct {
 	City        string
 	Author      string
 	ImageURLs   []string
+	VideoURLs   []string
+	Files       []Attachment
 	ThreadName  string
 }
 
 func formatMessage(ev events.PostEvent) Message {
-	title := strings.TrimSpace(ev.Title)
+	return formatCreated(events.PostCreated{PostEvent: ev})
+}
+
+func formatCreated(e events.PostCreated) Message {
+	title := strings.TrimSpace(e.Title)
 	if title == "" {
 		title = "Reply"
 	}
-	author := strings.TrimSpace(ev.AuthorName)
+	author := strings.TrimSpace(e.AuthorName)
 	if author == "" {
 		author = "Someone"
 	}
 	msg := Message{
 		Title:       truncateRunes(title, embedTitleLimit),
-		URL:         strings.TrimSpace(ev.Permalink),
-		Description: truncateRunes(strings.TrimSpace(ev.Body), embedDescriptionLimit),
-		City:        strings.TrimSpace(ev.City),
+		URL:         strings.TrimSpace(e.Permalink),
+		Description: truncateRunes(strings.TrimSpace(e.Body), embedDescriptionLimit),
+		City:        strings.TrimSpace(e.City),
 		Author:      author,
-		ThreadName:  threadName(author, ev.Title),
+		ThreadName:  threadName(author, e.Title),
+		Files:       filesFromMedia(e.Media),
 	}
-	for _, img := range ev.Images {
+	for _, img := range e.Images {
 		url := strings.TrimSpace(img.URL)
 		if url == "" {
 			continue
 		}
+		if img.Kind == "video" {
+			msg.VideoURLs = append(msg.VideoURLs, url)
+			continue
+		}
 		msg.ImageURLs = append(msg.ImageURLs, url)
 	}
 	return msg
 }
 
+func filesFromMedia(media []events.Media) []Attachment {
+	if len(media) == 0 {
+		return nil
+	}
+	files := make([]Attachment, 0, len(media))
+	for _, m := range media {
+		var r io.Reader
+		switch {
+		case len(m.Bytes) > 0:
+			r = bytes.NewReader(m.Bytes)
+		case m.Body != nil:
+			r = m.Body
+		default:
+			continue
+		}
+		name := strings.TrimSpace(m.Name)
+		if name == "" {
+			name = "upload"
+		}
+		files = append(files, Attachment{
+			Name:        name,
+			ContentType: m.ContentType,
+			Kind:        m.Kind,
+			Reader:      r,
+		})
+	}
+	return files
+}
+
 func threadName(author, title string) string {
 	author = strings.TrimSpace(author)
 	if author == "" {
@@ -96,6 +146,18 @@ func messageContent(msg Message) string {
 	if u := publicURL(msg.URL); u != "" {
 		parts = append(parts, u)
 	}
+	if len(msg.Files) == 0 {
+		for _, mediaURL := range msg.ImageURLs {
+			if u := publicURL(mediaURL); u != "" {
+				parts = append(parts, u)
+			}
+		}
+		for _, mediaURL := range msg.VideoURLs {
+			if u := publicURL(mediaURL); u != "" {
+				parts = append(parts, u)
+			}
+		}
+	}
 	return truncateRunes(strings.Join(parts, "\n"), 2000)
 }
 

internal/events/bus.go

@@ -40,12 +40,14 @@ func newBus(buffer int, start bool) *Bus {
 // Publish enqueues ev. It never blocks the caller; a full buffer is dropped.
 func (b *Bus) Publish(_ context.Context, ev any) {
 	if b == nil {
+		CallRelease(ev)
 		return
 	}
 	select {
 	case b.ch <- ev:
 	default:
 		log.Printf("events: dropped %T", ev)
+		CallRelease(ev)
 	}
 }
 

internal/events/bus_test.go

@@ -102,3 +102,44 @@ func TestBusDropsWhenFull(t *testing.T) {
 	default:
 	}
 }
+
+func TestNopReleasesPostCreated(t *testing.T) {
+	t.Parallel()
+
+	released := false
+	Nop{}.Publish(context.Background(), PostCreated{Release: func() { released = true }})
+	if !released {
+		t.Fatal("Nop.Publish did not release held upload")
+	}
+}
+
+func TestBusDropReleasesPostCreated(t *testing.T) {
+	t.Parallel()
+
+	bus := newBus(1, false)
+	bus.Publish(context.Background(), "kept")
+	released := false
+	bus.Publish(context.Background(), PostCreated{Release: func() { released = true }})
+	if !released {
+		t.Fatal("dropped PostCreated did not release held upload")
+	}
+}
+
+func TestSubscribeReleasePostedToDiscord(t *testing.T) {
+	t.Parallel()
+
+	bus := New()
+	defer bus.Close()
+	SubscribeRelease(bus)
+
+	released := make(chan struct{})
+	bus.Publish(context.Background(), PostedToDiscord{
+		PostID:  "post-1",
+		Release: func() { close(released) },
+	})
+	select {
+	case <-released:
+	case <-time.After(time.Second):
+		t.Fatal("PostedToDiscord did not release")
+	}
+}

internal/events/event.go

@@ -1,14 +1,27 @@
 package events
 
 import (
+	"io"
 	"net/url"
 	"strings"
 )
 
-// Image is a public photo already attached to a site post.
+// Image is a public photo or video already attached to a site post.
 type Image struct {
 	URL         string
 	Description string
+	Kind        string
+}
+
+// Media is a local upload still held from the create request so Discord can
+// attach the bytes. Photos carry re-encoded Bytes; videos carry an open Body.
+type Media struct {
+	Name        string
+	ContentType string
+	Kind        string
+	Size        int64
+	Body        io.ReadCloser
+	Bytes       []byte
 }
 
 // PostEvent is a Discord-free snapshot of a site post after a successful write.
@@ -29,6 +42,8 @@ type PostEvent struct {
 // PostCreated is emitted after a successful site create.
 type PostCreated struct {
 	PostEvent
+	Media   []Media `json:"-"`
+	Release func()  `json:"-"`
 }
 
 // PostUpdated is emitted after a successful site edit.
@@ -36,6 +51,13 @@ type PostUpdated struct {
 	PostEvent
 }
 
+// PostedToDiscord is emitted after the Discord subscriber finishes with a
+// PostCreated (sent, skipped, or failed). Release deletes held upload files.
+type PostedToDiscord struct {
+	PostID  string
+	Release func() `json:"-"`
+}
+
 // Permalink builds /questions/{root}#post-{id}, prefixed by baseURL when set.
 func Permalink(baseURL, rootID, postID string) string {
 	path := "/questions/" + url.PathEscape(rootID) + "#post-" + url.PathEscape(postID)

internal/events/nop.go

@@ -5,5 +5,7 @@ import "context"
 // Nop is a Publisher used when nothing is subscribed.
 type Nop struct{}
 
-// Publish discards ev.
-func (Nop) Publish(context.Context, any) {}
+// Publish discards ev after releasing any held upload.
+func (Nop) Publish(_ context.Context, ev any) {
+	CallRelease(ev)
+}

internal/events/release.go

@@ -0,0 +1,41 @@
+package events
+
+import (
+	"context"
+	"sync"
+)
+
+// Once returns fn wrapped so it runs at most once.
+func Once(fn func()) func() {
+	if fn == nil {
+		return func() {}
+	}
+	var once sync.Once
+	return func() { once.Do(fn) }
+}
+
+// CallRelease runs Release on PostCreated or PostedToDiscord when set.
+func CallRelease(ev any) {
+	switch e := ev.(type) {
+	case PostCreated:
+		if e.Release != nil {
+			e.Release()
+		}
+	case PostedToDiscord:
+		if e.Release != nil {
+			e.Release()
+		}
+	}
+}
+
+// SubscribeRelease runs PostedToDiscord.Release on the worker.
+func SubscribeRelease(bus *Bus) {
+	if bus == nil {
+		return
+	}
+	bus.Subscribe(func(_ context.Context, ev any) {
+		if _, ok := ev.(PostedToDiscord); ok {
+			CallRelease(ev)
+		}
+	})
+}

internal/web/events.go

@@ -7,8 +7,26 @@ import (
 	"plumber/internal/store"
 )
 
-func (s *Server) publishPostCreated(post, root *store.Post, author *store.User) {
-	s.publishPost(events.PostCreated{PostEvent: s.postEvent(post, root, author)}, root)
+func (s *Server) publishPostCreated(post, root *store.Post, author *store.User, media []events.Media, cleanup func()) {
+	release := events.Once(func() {
+		closeHeldMedia(media)
+		if cleanup != nil {
+			cleanup()
+		}
+	})
+	if root != nil && root.PostState == store.PostStateHidden {
+		release()
+		return
+	}
+	ev := events.PostCreated{PostEvent: s.postEvent(post, root, author)}
+	if s.cfg.HoldUploadUntilDiscord && len(media) > 0 {
+		ev.Media = media
+		ev.Release = release
+		s.cfg.Events.Publish(context.Background(), ev)
+		return
+	}
+	release()
+	s.cfg.Events.Publish(context.Background(), events.PostCreated{PostEvent: ev.PostEvent})
 }
 
 func (s *Server) publishPostUpdated(post, root *store.Post, author *store.User) {
@@ -55,12 +73,10 @@ func (s *Server) postEvent(post, root *store.Post, author *store.User) events.Po
 	if n := len(post.Images); n > 0 {
 		ev.Images = make([]events.Image, 0, n)
 		for _, img := range post.Images {
-			if img.Kind == store.MediaKindVideo {
-				continue
-			}
 			ev.Images = append(ev.Images, events.Image{
 				URL:         img.PublicURL,
 				Description: img.Description,
+				Kind:        img.Kind,
 			})
 		}
 	}

internal/web/events_test.go

@@ -1,8 +1,10 @@
 package web
 
 import (
+	"bytes"
 	"context"
 	"encoding/json"
+	"io"
 	"net/http"
 	"net/url"
 	"strings"
@@ -237,20 +239,72 @@ func assertPostEvent(t *testing.T, got, want events.PostEvent) {
 	}
 }
 
-func TestPostEventOmitsVideos(t *testing.T) {
+func TestPostEventIncludesPhotosAndVideos(t *testing.T) {
 	t.Parallel()
 
 	srv, _ := newTestServer(t, Config{})
 	got := srv.postEvent(&store.Post{
-		ID:     "root-1",
-		Title:  "Clip",
-		Body:   "Photo and video.",
+		ID:    "root-1",
+		Title: "Clip",
+		Body:  "Photo and video.",
 		Images: []store.PostImage{
 			{PublicURL: "https://cdn.example/a.jpg", Description: "Still", Kind: store.MediaKindImage},
 			{PublicURL: "https://cdn.example/a.mp4", Description: "Walkthrough", Kind: store.MediaKindVideo},
 		},
 	}, nil, nil)
-	if len(got.Images) != 1 || got.Images[0].URL != "https://cdn.example/a.jpg" {
+	if len(got.Images) != 2 ||
+		got.Images[0].URL != "https://cdn.example/a.jpg" || got.Images[0].Kind != store.MediaKindImage ||
+		got.Images[1].URL != "https://cdn.example/a.mp4" || got.Images[1].Kind != store.MediaKindVideo {
 		t.Fatalf("event images = %+v", got.Images)
 	}
 }
+
+func TestCreatePostHoldsVideoUntilRelease(t *testing.T) {
+	t.Parallel()
+
+	rec := &events.Recording{}
+	blobs := &recordingImageBlob{}
+	srv, mem := newTestServer(t, Config{
+		Events:                 rec,
+		Blob:                   blobs,
+		HoldUploadUntilDiscord: true,
+	})
+	handler := srv.Handler()
+	user := seedUser(t, mem, uniq("hold-video"), "hunter22", store.RoleUser)
+	cookies := loginUser(t, handler, user.Username, "hunter22")
+	csrf := csrfForCookies(t, handler, cookies)
+	clip := tinyMP4()
+
+	res := multipartPost(t, handler, "/submit", map[string][]string{
+		"_csrf": {csrf},
+		"title": {"Valve clip"},
+		"body":  {"Watch the handle."},
+		"city":  {"Oakland"},
+	}, []multipartTestFile{{name: "walk.mp4", body: clip}}, cookies)
+	if res.Code != http.StatusSeeOther {
+		t.Fatalf("submit status = %d: %s", res.Code, res.Body.String())
+	}
+
+	got := rec.Snapshot()
+	if len(got) != 1 {
+		t.Fatalf("published %d events, want 1: %#v", len(got), got)
+	}
+	created, ok := got[0].(events.PostCreated)
+	if !ok {
+		t.Fatalf("event %T, want PostCreated", got[0])
+	}
+	if len(created.Media) != 1 ||
+		created.Media[0].Kind != store.MediaKindVideo ||
+		created.Media[0].ContentType != "video/mp4" ||
+		created.Media[0].Body == nil {
+		t.Fatalf("held media = %+v", created.Media)
+	}
+	if created.Release == nil {
+		t.Fatal("missing Release")
+	}
+	body, err := io.ReadAll(created.Media[0].Body)
+	if err != nil || !bytes.Equal(body, clip) {
+		t.Fatalf("held video body = %d bytes err=%v", len(body), err)
+	}
+	created.Release()
+}

internal/web/post_images.go

@@ -22,6 +22,7 @@ import (
 	_ "golang.org/x/image/webp"
 
 	"plumber/internal/blob"
+	"plumber/internal/events"
 	"plumber/internal/store"
 )
 
@@ -109,18 +110,18 @@ func (s *Server) postImagesFromForm(
 	r *http.Request,
 	postID string,
 	existing []store.PostImage,
-) ([]store.PostImage, []string, error) {
+) ([]store.PostImage, []string, []events.Media, error) {
 	if r.MultipartForm == nil {
-		return append([]store.PostImage(nil), existing...), nil, nil
+		return append([]store.PostImage(nil), existing...), nil, nil, nil
 	}
 	retained, err := retainedPostImages(r.MultipartForm, existing)
 	if err != nil {
-		return nil, nil, err
+		return nil, nil, nil, err
 	}
 	files := r.MultipartForm.File["images"]
 	descriptions := r.MultipartForm.Value["image_description"]
 	if len(descriptions) > len(files) {
-		return nil, nil, invalidPostImage("Image descriptions do not match selected images.", nil)
+		return nil, nil, nil, invalidPostImage("Image descriptions do not match selected images.", nil)
 	}
 	kinds := make([]string, len(files))
 	newImages, newVideos := 0, 0
@@ -134,13 +135,13 @@ func (s *Server) postImagesFromForm(
 	}
 	retainedImages, retainedVideos := countPostMedia(retained)
 	if retainedImages+newImages > store.MaxPostImages {
-		return nil, nil, invalidPostImage("You can attach up to 4 images.", nil)
+		return nil, nil, nil, invalidPostImage("You can attach up to 4 images.", nil)
 	}
 	if retainedVideos+newVideos > store.MaxPostVideos {
-		return nil, nil, invalidPostImage("You can attach one video.", nil)
+		return nil, nil, nil, invalidPostImage("You can attach one video.", nil)
 	}
 	if len(files) > 0 && !s.cfg.Blob.Enabled() {
-		return nil, nil, &postImageRequestError{
+		return nil, nil, nil, &postImageRequestError{
 			status:  http.StatusServiceUnavailable,
 			message: "Image uploads are not configured on this server.",
 		}
@@ -148,24 +149,28 @@ func (s *Server) postImagesFromForm(
 
 	images := append([]store.PostImage(nil), retained...)
 	newKeys := make([]string, 0, len(files))
+	held := make([]events.Media, 0, len(files))
 	for i, header := range files {
 		description := ""
 		if i < len(descriptions) {
 			description = strings.TrimSpace(descriptions[i])
 		}
 		if len([]rune(description)) > store.MaxImageDescriptionRunes {
+			closeHeldMedia(held)
 			s.deletePostImageObjects(newKeys)
-			return nil, nil, invalidPostImage("Image descriptions must be 500 characters or fewer.", nil)
+			return nil, nil, nil, invalidPostImage("Image descriptions must be 500 characters or fewer.", nil)
 		}
-		item, objectKey, err := s.uploadPostMedia(ctx, postID, header, kinds[i], description)
+		item, objectKey, media, err := s.uploadPostMedia(ctx, postID, header, kinds[i], description)
 		if err != nil {
+			closeHeldMedia(held)
 			s.deletePostImageObjects(newKeys)
-			return nil, nil, err
+			return nil, nil, nil, err
 		}
 		newKeys = append(newKeys, objectKey)
 		images = append(images, item)
+		held = append(held, media)
 	}
-	return images, newKeys, nil
+	return images, newKeys, held, nil
 }
 
 func countPostMedia(items []store.PostImage) (images, videos int) {
@@ -179,18 +184,26 @@ func countPostMedia(items []store.PostImage) (images, videos int) {
 	return images, videos
 }
 
+func closeHeldMedia(media []events.Media) {
+	for i := range media {
+		if media[i].Body != nil {
+			_ = media[i].Body.Close()
+			media[i].Body = nil
+		}
+	}
+}
+
 func (s *Server) uploadPostMedia(
 	ctx context.Context,
 	postID string,
 	header *multipart.FileHeader,
 	kind, description string,
-) (store.PostImage, string, error) {
+) (store.PostImage, string, events.Media, error) {
 	if kind == store.MediaKindVideo {
 		prepared, err := preparePostVideo(header)
 		if err != nil {
-			return store.PostImage{}, "", err
+			return store.PostImage{}, "", events.Media{}, err
 		}
-		defer prepared.body.Close()
 		mediaID := uuid.NewString()
 		objectKey := path.Join("post-videos", postID, mediaID+prepared.extension)
 		publicURL, err := s.cfg.Blob.Upload(ctx, blob.FileUpload{
@@ -200,12 +213,28 @@ func (s *Server) uploadPostMedia(
 			Size:        prepared.size,
 		})
 		if err != nil {
-			return store.PostImage{}, "", &postImageRequestError{
+			_ = prepared.body.Close()
+			return store.PostImage{}, "", events.Media{}, &postImageRequestError{
 				status:  http.StatusServiceUnavailable,
 				message: "Could not upload video. Try again later.",
 				cause:   err,
 			}
 		}
+		media := events.Media{
+			Name:        mediaID + prepared.extension,
+			ContentType: prepared.contentType,
+			Kind:        store.MediaKindVideo,
+			Size:        prepared.size,
+		}
+		if seeker, ok := prepared.body.(io.Seeker); ok {
+			if _, err := seeker.Seek(0, io.SeekStart); err == nil {
+				media.Body = prepared.body
+			} else {
+				_ = prepared.body.Close()
+			}
+		} else {
+			_ = prepared.body.Close()
+		}
 		return store.PostImage{
 			ID:          mediaID,
 			PostID:      postID,
@@ -213,11 +242,11 @@ func (s *Server) uploadPostMedia(
 			PublicURL:   publicURL,
 			Description: description,
 			Kind:        store.MediaKindVideo,
-		}, objectKey, nil
+		}, objectKey, media, nil
 	}
 	prepared, err := preparePostImage(header)
 	if err != nil {
-		return store.PostImage{}, "", err
+		return store.PostImage{}, "", events.Media{}, err
 	}
 	imageID := uuid.NewString()
 	objectKey := path.Join("post-images", postID, imageID+prepared.extension)
@@ -228,22 +257,28 @@ func (s *Server) uploadPostMedia(
 		Size:        int64(len(prepared.body)),
 	})
 	if err != nil {
-		return store.PostImage{}, "", &postImageRequestError{
+		return store.PostImage{}, "", events.Media{}, &postImageRequestError{
 			status:  http.StatusServiceUnavailable,
 			message: "Could not upload image. Try again later.",
 			cause:   err,
 		}
 	}
 	return store.PostImage{
-		ID:          imageID,
-		PostID:      postID,
-		ObjectKey:   objectKey,
-		PublicURL:   publicURL,
-		Description: description,
-		Kind:        store.MediaKindImage,
-		Width:       prepared.width,
-		Height:      prepared.height,
-	}, objectKey, nil
+			ID:          imageID,
+			PostID:      postID,
+			ObjectKey:   objectKey,
+			PublicURL:   publicURL,
+			Description: description,
+			Kind:        store.MediaKindImage,
+			Width:       prepared.width,
+			Height:      prepared.height,
+		}, objectKey, events.Media{
+			Name:        imageID + prepared.extension,
+			ContentType: prepared.contentType,
+			Kind:        store.MediaKindImage,
+			Size:        int64(len(prepared.body)),
+			Bytes:       prepared.body,
+		}, nil
 }
 
 func retainedPostImages(form *multipart.Form, existing []store.PostImage) ([]store.PostImage, error) {

internal/web/post_images_test.go

@@ -295,6 +295,19 @@ func TestPostVideoMultipartLifecycle(t *testing.T) {
 		t.Fatalf("streamed video upload = %+v", streamed)
 	}
 
+	rec = httptest.NewRecorder()
+	req := httptest.NewRequest(http.MethodGet, "/questions/"+root.ID, nil)
+	for _, cookie := range cookies {
+		req.AddCookie(cookie)
+	}
+	handler.ServeHTTP(rec, req)
+	page := rec.Body.String()
+	if rec.Code != http.StatusOK ||
+		!strings.Contains(page, `<video src="`+root.Images[1].PublicURL) ||
+		!strings.Contains(page, `data-existing-video`) {
+		t.Fatalf("question page missing video player: %d %s", rec.Code, page)
+	}
+
 	rec = multipartPost(t, handler, "/posts/"+root.ID+"/edit", map[string][]string{
 		"_csrf":                      {csrf},
 		"body":                       {"Keep the clip."},

internal/web/posts.go

@@ -12,6 +12,7 @@ import (
 	"github.com/go-chi/chi/v5"
 	"github.com/google/uuid"
 
+	"plumber/internal/events"
 	"plumber/internal/store"
 )
 
@@ -22,7 +23,14 @@ func (s *Server) handleCreatePost(w http.ResponseWriter, r *http.Request) {
 	if !ok {
 		return
 	}
-	defer cleanup()
+	var media []events.Media
+	held := false
+	defer func() {
+		if !held {
+			closeHeldMedia(media)
+			cleanup()
+		}
+	}()
 	if !s.requireCSRF(w, r) {
 		return
 	}
@@ -75,7 +83,7 @@ func (s *Server) handleCreatePost(w http.ResponseWriter, r *http.Request) {
 		root = threadRoot
 	}
 
-	images, newKeys, err := s.postImagesFromForm(r.Context(), r, post.ID, nil)
+	images, newKeys, media, err := s.postImagesFromForm(r.Context(), r, post.ID, nil)
 	if err != nil {
 		writePostImageRequestError(w, err)
 		return
@@ -93,7 +101,8 @@ func (s *Server) handleCreatePost(w http.ResponseWriter, r *http.Request) {
 	if root == nil {
 		root = post
 	}
-	s.publishPostCreated(post, root, user)
+	s.publishPostCreated(post, root, user, media, cleanup)
+	held = true
 	http.Redirect(
 		w,
 		r,
@@ -139,11 +148,12 @@ func (s *Server) handleEditPost(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 	previousImages := append([]store.PostImage(nil), post.Images...)
-	images, newKeys, err := s.postImagesFromForm(r.Context(), r, post.ID, previousImages)
+	images, newKeys, media, err := s.postImagesFromForm(r.Context(), r, post.ID, previousImages)
 	if err != nil {
 		writePostImageRequestError(w, err)
 		return
 	}
+	closeHeldMedia(media)
 	post.Body = truncateRunes(body, 12000)
 	post.Images = images
 	if err := s.store.UpdatePost(r.Context(), post); err != nil {

internal/web/posts_test.go

@@ -484,16 +484,19 @@ func TestQuestionPageRendersNestedPostControls(t *testing.T) {
 		`data-submit-button`,
 		`enctype="multipart/form-data"`,
 		`data-image-picker`,
-		`accept="image/jpeg,image/png,image/webp"`,
+		`accept="image/jpeg,image/png,image/webp,video/mp4,video/webm,.mp4,.webm"`,
 		`aria-live="polite"`,
 		`name="existing_image_id" value="root-photo"`,
 		`name="existing_image_id" value="reply-photo"`,
+		`data-image-zoom`,
+		`href="https://cdn.example/root-photo.jpg"`,
 		`src="https://cdn.example/root-photo.jpg"`,
 		`alt="Water pooling below the shutoff valve"`,
 		`src="https://cdn.example/reply-photo.png"`,
 		`alt="Photo attached to this post"`,
 		`src="https://cdn.example/admin-photo.webp"`,
 		`loading="lazy" decoding="async"`,
+		`data-image-zoom-dialog`,
 		`<figcaption>Replacement cartridge orientation</figcaption>`,
 		`action="/posts/` + root.ID + `/edit"`,
 		`action="/posts/` + homeownerReply.ID + `/edit"`,
@@ -556,6 +559,9 @@ func TestImagePickerAssetsAreServed(t *testing.T) {
 			path: "/static/app.js",
 			wants: []string{
 				`const pickerSelector = "[data-image-picker]"`,
+				`video/mp4`,
+				`video/webm`,
+				`showModal`,
 				`new DataTransfer()`,
 				`addEventListener("drop"`,
 				`resetImagePicker`,
@@ -569,6 +575,8 @@ func TestImagePickerAssetsAreServed(t *testing.T) {
 				`.image-dropzone:focus-within`,
 				`.image-preview-list`,
 				`.post-image-grid`,
+				`.post-video`,
+				`.image-zoom`,
 				`@media (max-width: 520px)`,
 			},
 		},

internal/web/server.go

@@ -37,6 +37,8 @@ type Config struct {
 	Blob           blob.Uploader
 	Events         events.Publisher
 	BaseURL        string
+	// HoldUploadUntilDiscord keeps create-post temp files until PostedToDiscord.
+	HoldUploadUntilDiscord bool
 }
 
 type Server struct {
@@ -107,7 +109,27 @@ type threadPostCtx struct {
 
 type imagePickerCtx struct {
 	ID     string
-	Images []store.PostImage
+	Video  *store.PostImage
+	Photos []store.PostImage
+}
+
+func splitPickerMedia(images []store.PostImage) (*store.PostImage, []store.PostImage) {
+	photos := make([]store.PostImage, 0, len(images))
+	var video *store.PostImage
+	for i := range images {
+		if images[i].Kind == store.MediaKindVideo {
+			img := images[i]
+			video = &img
+			continue
+		}
+		photos = append(photos, images[i])
+	}
+	return video, photos
+}
+
+func postPhotos(images []store.PostImage) []store.PostImage {
+	_, photos := splitPickerMedia(images)
+	return photos
 }
 
 func New(st store.Store, sessionStore scs.Store, templateFS fs.FS, staticFS fs.FS, cfg Config) (*Server, error) {
@@ -125,11 +147,13 @@ func New(st store.Store, sessionStore scs.Store, templateFS fs.FS, staticFS fs.F
 			return threadPostCtx{User: user, CSRF: csrf, Root: root, Post: post, Depth: depth}
 		},
 		"imagePicker": func(id string, images []store.PostImage) imagePickerCtx {
-			return imagePickerCtx{ID: id, Images: images}
+			video, photos := splitPickerMedia(images)
+			return imagePickerCtx{ID: id, Video: video, Photos: photos}
 		},
 		"newImagePicker": func(id string) imagePickerCtx {
 			return imagePickerCtx{ID: id}
 		},
+		"postPhotos":  postPhotos,
 		"add":         func(a, b int) int { return a + b },
 		"rank":        func(i int) int { return i + 1 },
 		"isAdmin":     func(u *store.User) bool { return u.Admin() },
@@ -348,7 +372,14 @@ func (s *Server) handleSubmit(w http.ResponseWriter, r *http.Request) {
 	if !ok {
 		return
 	}
-	defer cleanup()
+	var media []events.Media
+	held := false
+	defer func() {
+		if !held {
+			closeHeldMedia(media)
+			cleanup()
+		}
+	}()
 	if !s.requireCSRF(w, r) {
 		return
 	}
@@ -386,7 +417,7 @@ func (s *Server) handleSubmit(w http.ResponseWriter, r *http.Request) {
 		Body:     body,
 		City:     city,
 	}
-	images, newKeys, err := s.postImagesFromForm(r.Context(), r, post.ID, nil)
+	images, newKeys, media, err := s.postImagesFromForm(r.Context(), r, post.ID, nil)
 	if err != nil {
 		writePostImageRequestError(w, err)
 		return
@@ -397,7 +428,8 @@ func (s *Server) handleSubmit(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "could not save question", http.StatusInternalServerError)
 		return
 	}
-	s.publishPostCreated(post, post, u)
+	s.publishPostCreated(post, post, u, media, cleanup)
+	held = true
 	http.Redirect(w, r, "/questions/"+url.PathEscape(post.ID), http.StatusSeeOther)
 }
 

internal/web/server_test.go

@@ -176,8 +176,10 @@ func TestRegisterLoginAsk(t *testing.T) {
 		`enctype="multipart/form-data"`,
 		`data-image-picker`,
 		`id="submit-images"`,
-		`accept="image/jpeg,image/png,image/webp"`,
-		`Add up to 4 JPEG, PNG, or WebP images.`,
+		`accept="image/jpeg,image/png,image/webp,video/mp4,video/webm,.mp4,.webm"`,
+		`Add up to 4 JPEG, PNG, or WebP images (5 MB each) and one MP4 or WebM video (25 MB).`,
+		`Drop photos or a video here`,
+		`data-video-slot`,
 	} {
 		if !strings.Contains(rec.Body.String(), want) {
 			t.Fatalf("submit form missing %q: %s", want, rec.Body.String())

static/app.css

@@ -854,6 +854,55 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
   font-size: 0.72rem;
 }
 
+.video-picker-slot:not(:empty) {
+  margin-bottom: 10px;
+}
+
+.video-preview {
+  min-width: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  overflow: hidden;
+  background: #141516;
+}
+
+.video-preview[hidden] { display: none; }
+
+.video-preview-media {
+  position: relative;
+  background: var(--bg);
+}
+
+.video-preview-media video,
+.post-video video {
+  display: block;
+  width: 100%;
+  max-height: 20rem;
+  background: #000;
+}
+
+.post-video {
+  margin: 16px 0 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  background: #141516;
+}
+
+.post-video video { max-height: 32rem; }
+
+.post-video figcaption {
+  padding: 8px 10px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
 .image-preview-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -962,6 +1011,18 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
   background: #141516;
 }
 
+.post-image-zoom {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  cursor: zoom-in;
+}
+
+.post-image-zoom:focus-visible {
+  outline: 2px solid var(--signal);
+  outline-offset: 2px;
+}
+
 .post-image img {
   width: 100%;
   height: 100%;
@@ -976,6 +1037,68 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
   object-fit: contain;
 }
 
+.image-zoom {
+  width: min(100vw - 24px, 1100px);
+  max-width: none;
+  height: min(100vh - 24px, 100dvh);
+  max-height: none;
+  margin: auto;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: #101113;
+  color: var(--ink);
+}
+
+.image-zoom::backdrop {
+  background: rgba(10, 11, 12, 0.88);
+}
+
+.image-zoom-bar {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 0 8px;
+}
+
+.image-zoom-close {
+  min-height: 44px;
+  padding: 0 12px;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  background: var(--panel);
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.image-zoom-close:hover { border-color: var(--zinc); }
+
+.image-zoom-close:focus-visible {
+  outline: 2px solid var(--signal);
+  outline-offset: 2px;
+}
+
+.image-zoom img {
+  display: block;
+  width: 100%;
+  height: calc(100% - 4.5rem);
+  max-height: calc(100dvh - 8rem);
+  object-fit: contain;
+  background: #000;
+}
+
+.image-zoom-caption {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
 .post-image figcaption {
   padding: 8px 10px;
   border-top: 1px solid var(--line);

static/app.js

@@ -2,7 +2,9 @@
   const formSelector = "form[data-submit-once]";
   const pickerSelector = "[data-image-picker]";
   const allowedImageTypes = new Set(["image/jpeg", "image/png", "image/webp"]);
+  const allowedVideoTypes = new Set(["video/mp4", "video/webm"]);
   const maxImageBytes = 5 * 1024 * 1024;
+  const maxVideoBytes = 25 * 1024 * 1024;
   const pickerStates = new WeakMap();
 
   function progressIndicator() {
@@ -29,12 +31,20 @@
     return picker.querySelectorAll("[data-existing-image]:not([hidden])").length;
   }
 
+  function existingVideoCount(picker) {
+    return picker.querySelectorAll("[data-existing-video]:not([hidden])").length;
+  }
+
   function updateImageCount(picker, state) {
-    const count = existingImageCount(picker) + state.entries.length;
+    const photos = existingImageCount(picker) + state.entries.length;
+    const videos = existingVideoCount(picker) + (state.video ? 1 : 0);
     const status = picker.querySelector("[data-image-count]");
-    if (status) {
-      status.textContent = `${count} of ${state.max}`;
+    if (!status) {
+      return;
     }
+    status.textContent = videos
+      ? `${photos} of ${state.max} · 1 video`
+      : `${photos} of ${state.max}`;
   }
 
   function showImageError(picker, message) {
@@ -56,6 +66,16 @@
     return /\.(jpe?g|png|webp)$/i.test(file.name);
   }
 
+  function videoFileAllowed(file) {
+    if (allowedVideoTypes.has(file.type)) {
+      return true;
+    }
+    if (file.type) {
+      return false;
+    }
+    return /\.(mp4|webm)$/i.test(file.name);
+  }
+
   function sameImageFile(left, right) {
     return left.name === right.name &&
       left.size === right.size &&
@@ -64,6 +84,9 @@
 
   function syncImageInput(state) {
     const transfer = new DataTransfer();
+    if (state.video) {
+      transfer.items.add(state.video.file);
+    }
     state.entries.forEach((entry) => transfer.items.add(entry.file));
     state.input.files = transfer.files;
   }
@@ -81,54 +104,108 @@
     updateImageCount(picker, state);
   }
 
+  function removeNewVideo(picker, state) {
+    if (!state.video) {
+      return;
+    }
+    URL.revokeObjectURL(state.video.previewURL);
+    state.video.card.remove();
+    state.video = null;
+    syncImageInput(state);
+    showImageError(picker, "");
+    updateImageCount(picker, state);
+  }
+
+  function addNewImage(picker, state, file) {
+    const fragment = state.template.content.cloneNode(true);
+    const card = fragment.querySelector("[data-new-image]");
+    const preview = fragment.querySelector("[data-image-preview]");
+    const name = fragment.querySelector("[data-image-name]");
+    const previewURL = URL.createObjectURL(file);
+    preview.src = previewURL;
+    if (name) {
+      name.textContent = file.name;
+    }
+    const entry = { file, card, previewURL };
+    const removeButton = card.querySelector("[data-remove-image]");
+    removeButton.setAttribute("aria-label", `Remove selected image: ${file.name}`);
+    removeButton.addEventListener("click", () => {
+      removeNewImage(picker, state, entry);
+    });
+    state.list.appendChild(fragment);
+    state.entries.push(entry);
+  }
+
+  function addNewVideo(picker, state, file) {
+    const fragment = state.videoTemplate.content.cloneNode(true);
+    const card = fragment.querySelector("[data-new-video]");
+    const preview = fragment.querySelector("[data-video-preview]");
+    const name = fragment.querySelector("[data-image-name]");
+    const previewURL = URL.createObjectURL(file);
+    preview.src = previewURL;
+    preview.setAttribute("aria-label", file.name);
+    if (name) {
+      name.textContent = file.name;
+    }
+    const entry = { file, card, previewURL };
+    const removeButton = card.querySelector("[data-remove-image]");
+    removeButton.setAttribute("aria-label", `Remove selected video: ${file.name}`);
+    removeButton.addEventListener("click", () => {
+      removeNewVideo(picker, state);
+    });
+    state.videoSlot.appendChild(fragment);
+    state.video = entry;
+  }
+
   function addImageFiles(picker, state, files) {
     showImageError(picker, "");
     const uniqueFiles = files.filter((file) =>
-      !state.entries.some((entry) => sameImageFile(entry.file, file))
+      !state.entries.some((entry) => sameImageFile(entry.file, file)) &&
+      !(state.video && sameImageFile(state.video.file, file))
     );
-    const available = state.max - existingImageCount(picker) - state.entries.length;
-    if (uniqueFiles.length > available) {
+    const videos = uniqueFiles.filter(videoFileAllowed);
+    const images = uniqueFiles.filter(imageFileAllowed);
+    if (videos.length + images.length !== uniqueFiles.length) {
+      showImageError(picker, "Use JPEG, PNG, or WebP photos and one MP4 or WebM video.");
+      syncImageInput(state);
+      return;
+    }
+    const availablePhotos = state.max - existingImageCount(picker) - state.entries.length;
+    if (images.length > availablePhotos) {
       showImageError(
         picker,
-        available > 0
-          ? `You can add ${available} more ${available === 1 ? "image" : "images"}.`
+        availablePhotos > 0
+          ? `You can add ${availablePhotos} more ${availablePhotos === 1 ? "image" : "images"}.`
           : "You already have 4 images selected."
       );
       syncImageInput(state);
       return;
     }
-    for (const file of uniqueFiles) {
-      if (!imageFileAllowed(file)) {
-        showImageError(picker, "Images must be JPEG, PNG, or WebP.");
-        syncImageInput(state);
-        return;
-      }
+    const availableVideos = state.maxVideos - existingVideoCount(picker) - (state.video ? 1 : 0);
+    if (videos.length > availableVideos) {
+      showImageError(
+        picker,
+        availableVideos > 0 ? "You can attach one video." : "You already have a video selected."
+      );
+      syncImageInput(state);
+      return;
+    }
+    for (const file of images) {
       if (file.size > maxImageBytes) {
         showImageError(picker, `${file.name} is larger than 5 MB.`);
         syncImageInput(state);
         return;
       }
     }
-
-    uniqueFiles.forEach((file) => {
-      const fragment = state.template.content.cloneNode(true);
-      const card = fragment.querySelector("[data-new-image]");
-      const preview = fragment.querySelector("[data-image-preview]");
-      const name = fragment.querySelector("[data-image-name]");
-      const previewURL = URL.createObjectURL(file);
-      preview.src = previewURL;
-      if (name) {
-        name.textContent = file.name;
+    for (const file of videos) {
+      if (file.size > maxVideoBytes) {
+        showImageError(picker, `${file.name} is larger than 25 MB.`);
+        syncImageInput(state);
+        return;
       }
-      const entry = { file, card, previewURL };
-      const removeButton = card.querySelector("[data-remove-image]");
-      removeButton.setAttribute("aria-label", `Remove selected image: ${file.name}`);
-      removeButton.addEventListener("click", () => {
-        removeNewImage(picker, state, entry);
-      });
-      state.list.appendChild(fragment);
-      state.entries.push(entry);
-    });
+    }
+    videos.forEach((file) => addNewVideo(picker, state, file));
+    images.forEach((file) => addNewImage(picker, state, file));
     syncImageInput(state);
     updateImageCount(picker, state);
   }
@@ -143,8 +220,13 @@
       entry.card.remove();
     });
     state.entries = [];
+    if (state.video) {
+      URL.revokeObjectURL(state.video.previewURL);
+      state.video.card.remove();
+      state.video = null;
+    }
     state.input.value = "";
-    picker.querySelectorAll("[data-existing-image]").forEach((card) => {
+    picker.querySelectorAll("[data-existing-image], [data-existing-video]").forEach((card) => {
       card.hidden = false;
       card.querySelectorAll("input").forEach((input) => {
         input.disabled = false;
@@ -166,15 +248,21 @@
     const dropzone = picker.querySelector("[data-image-dropzone]");
     const list = picker.querySelector("[data-image-list]");
     const template = picker.querySelector("[data-image-template]");
-    if (!input || !dropzone || !list || !template) {
+    const videoSlot = picker.querySelector("[data-video-slot]");
+    const videoTemplate = picker.querySelector("[data-video-template]");
+    if (!input || !dropzone || !list || !template || !videoSlot || !videoTemplate) {
       return;
     }
     const state = {
       input,
       list,
       template,
+      videoSlot,
+      videoTemplate,
       entries: [],
+      video: null,
       max: Number.parseInt(picker.dataset.maxImages, 10) || 4,
+      maxVideos: Number.parseInt(picker.dataset.maxVideos, 10) || 1,
     };
     pickerStates.set(picker, state);
     updateImageCount(picker, state);
@@ -182,7 +270,7 @@
     input.addEventListener("change", () => {
       addImageFiles(picker, state, Array.from(input.files));
     });
-    picker.querySelectorAll("[data-existing-image]").forEach((card) => {
+    picker.querySelectorAll("[data-existing-image], [data-existing-video]").forEach((card) => {
       card.querySelector("[data-remove-image]").addEventListener("click", () => {
         card.hidden = true;
         card.querySelectorAll("input").forEach((existingInput) => {
@@ -242,6 +330,9 @@
   window.addEventListener("pageshow", () => {
     document.querySelectorAll(formSelector).forEach(resetForm);
     document.querySelectorAll(pickerSelector).forEach(resetImagePicker);
+    if (zoomDialog?.open) {
+      zoomDialog.close();
+    }
     const progress = progressIndicator();
     if (progress) {
       progress.hidden = true;
@@ -249,4 +340,53 @@
   });
 
   document.querySelectorAll(pickerSelector).forEach(initializeImagePicker);
+
+  const zoomDialog = document.querySelector("[data-image-zoom-dialog]");
+  const zoomImage = zoomDialog?.querySelector("[data-image-zoom-img]");
+  const zoomCaption = zoomDialog?.querySelector("[data-image-zoom-caption]");
+  let zoomTrigger = null;
+
+  function openImageZoom(link) {
+    if (!zoomDialog || !zoomImage || typeof zoomDialog.showModal !== "function") {
+      return false;
+    }
+    const photo = link.querySelector("img");
+    if (!photo) {
+      return false;
+    }
+    zoomTrigger = link;
+    zoomImage.src = link.href;
+    zoomImage.alt = photo.alt || "";
+    if (zoomCaption) {
+      zoomCaption.textContent = photo.alt || "";
+    }
+    if (!zoomDialog.open) {
+      zoomDialog.showModal();
+    }
+    return true;
+  }
+
+  document.addEventListener("click", (event) => {
+    const link = event.target.closest("[data-image-zoom]");
+    if (!link) {
+      return;
+    }
+    if (openImageZoom(link)) {
+      event.preventDefault();
+    }
+  });
+
+  zoomDialog?.addEventListener("click", (event) => {
+    if (event.target === zoomDialog) {
+      zoomDialog.close();
+    }
+  });
+
+  zoomDialog?.addEventListener("close", () => {
+    if (zoomImage) {
+      zoomImage.removeAttribute("src");
+    }
+    zoomTrigger?.focus();
+    zoomTrigger = null;
+  });
 })();

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}}