From 84c63587e3bd1f83d73f1e1dcc4f1cff0133b9a0 Mon Sep 17 00:00:00 2001
From: gator <gatordevin@gmail.com>
Date: Sun, 20 Sep 2026 15:19:01 +0000
Subject: [PATCH] Twelve shots to a page with back and next, for chapter-length
 films

---
 trailer.html | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/trailer.html b/trailer.html
index 26f0db6..9513c23 100644
--- a/trailer.html
+++ b/trailer.html
@@ -258,6 +258,7 @@
   }
 
   var DRAFTNOW = null;
+  var PAGE = 0, PAGE_FOR = null;
 
   function busyShots() {
     var ps = String(PKG.pics_state || "");
@@ -911,8 +912,24 @@
         + looksHtml(c) + '</div>';
     }).join("") + '</div>';
 
-    var body = insertHtml("start");
-    shots.forEach(function (s) { body += shotHtml(s, voice) + insertHtml(s.id); });
+    // A CHAPTER IS A HUNDRED SHOTS. Twelve to a page, with back and next, so
+    // the page stays quick and the author is never scrolling through a wall.
+    var per = 12, pages = shots.length > 24 ? Math.ceil(shots.length / per) : 1;
+    if (PAGE_FOR !== draft.id) { PAGE_FOR = draft.id; PAGE = 0; }
+    PAGE = Math.max(0, Math.min(PAGE, pages - 1));
+    var shown = pages > 1 ? shots.slice(PAGE * per, (PAGE + 1) * per) : shots;
+    var pager = pages > 1
+      ? '<div class="bar" style="justify-content:center;gap:12px;margin:14px 0">'
+        + '<button type="button" class="btn" data-page="prev"' + (PAGE === 0 ? ' disabled' : '') + '>&#9664; Back</button>'
+        + '<span>Shots <b>' + esc(shown[0].id) + '</b> to <b>' + esc(shown[shown.length - 1].id) + '</b> of ' + shots.length
+        + ' &middot; page <select data-pagepick="1">' + Array.apply(null, Array(pages)).map(function (_, i) {
+            return '<option value="' + i + '"' + (i === PAGE ? ' selected' : '') + '>' + (i + 1) + '</option>'; }).join("")
+        + '</select> of ' + pages + '</span>'
+        + '<button type="button" class="btn" data-page="next"' + (PAGE >= pages - 1 ? ' disabled' : '') + '>Next &#9654;</button></div>'
+      : "";
+    var body = pager + (PAGE === 0 ? insertHtml("start") : "");
+    shown.forEach(function (s) { body += shotHtml(s, voice) + insertHtml(s.id); });
+    body += pager;
 
     DRAFTNOW = draft;
     return head + contestHtml() + guideHtml(meta) + probs + '<div class="bar">' + barHtml(meta) + '</div>'
@@ -1610,6 +1627,10 @@
       if (r) { showMsg("msg", "That writer is reading the book now. Its script appears as a new tab in a few minutes.", "ok"); await load(); }
       return;
     }
+    if ((el = hit("data-page"))) {
+      PAGE += el.getAttribute("data-page") === "next" ? 1 : -1;
+      await refresh(); window.scrollTo(0, (document.getElementById("pane").offsetTop || 0)); return;
+    }
     if ((el = hit("data-lineset"))) {
       var lk = el.getAttribute("data-lineset"), lp = lk.split("|");
       var lin = document.querySelector('[data-linetext="' + lk + '"]');
@@ -1770,6 +1791,8 @@
 
   document.getElementById("pane").addEventListener("change", async function (e) {
     var el = e.target;
+    if (el.getAttribute && el.getAttribute("data-pagepick")) {
+      PAGE = Number(el.value) || 0; await refresh(); return; }
     var asid = el.getAttribute && el.getAttribute("data-audiomode");
     if (!asid) return;
     var inp = document.querySelector('[data-filmnote="' + asid + '"]');