Slideshow folders can mix Word documents in with images

A slideshow folder now plays .docx files alongside images: a one-page
document is shown whole (letterboxed like a photo); a longer one fills
the width and scrolls smoothly top to bottom during its docInterval
(new slideshow.json key, default 2x interval). Word's ~$ lock files are
skipped; changed documents (by mtime) are re-read on the minute refresh.

- kiosk-app/docx-render.js: the docx-preview rendering now shared by
  docview.html and slideshow.html. Each render gets its own class prefix
  and keeps its styles in its own container, so two documents crossfading
  can't restyle each other. "One page" is judged by content fitting the
  paper height, not section count - docx-preview only starts a new
  section at explicit page breaks, so a long unbroken document is one
  tall section.
- Document bytes are fetched on demand: the page sets its title to a
  request, slideshow.js answers via executeJavaScript - only for a .docx
  in that slideshow's own current listing (no file-read API exposed to
  pages; the preload is shared by every site).

Tested with the real main.js on Electron 44.5.1 under Xvfb + Openbox on a
folder of 2 images + a 1-page and a long .docx (+ a ~$ lock file): order,
crossfades, whole-page fit, scroll to the end, lock file skipped; the
single-.docx site still renders. The request handler answered a listed
.docx and refused /etc/passwd, a listed image, and a .docx outside the
folder.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Cjz8a58eB5P9sUweqd3NHm

kiosk-app/docview.html

@@ -7,10 +7,6 @@
      document's bytes arrive from main.js via window.kioskDocView.show(). -->
 <style>
   html, body { margin: 0; background: #666; }
-  #doc { transform-origin: top left; }
-  /* docx-preview's page wrapper: grey backdrop with white pages. */
-  #doc .docx-wrapper { background: #666; padding: 16px 0; }
-  #doc .docx-wrapper > section.docx { margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
   #msg {
     position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
     color: #eee; font: 22px sans-serif; text-align: center; padding: 2em; box-sizing: border-box;
@@ -18,6 +14,7 @@
 </style>
 <script src="node_modules/jszip/dist/jszip.min.js"></script>
 <script src="node_modules/docx-preview/dist/docx-preview.min.js"></script>
+<script src="docx-render.js"></script>
 </head>
 <body>
 <div id="msg">Loading document…</div>
@@ -26,6 +23,7 @@
 (() => {
   const docEl = document.getElementById('doc');
   const msg = document.getElementById('msg');
+  let cls = null;
 
   function showMessage(text) {
     msg.textContent = text;
@@ -33,65 +31,19 @@
     docEl.innerHTML = '';
   }
 
-  // Scale pages to the screen width (never above 100% + a little), so a
-  // portrait page is readable on a landscape kiosk without sideways
-  // scrolling. CSS zoom keeps scrolling and touch coordinates consistent.
-  function fitWidth() {
-    const page = docEl.querySelector('section.docx');
-    if (!page) return;
-    docEl.style.zoom = 1;
-    const pageWidth = page.getBoundingClientRect().width + 32;
-    docEl.style.zoom = Math.min(window.innerWidth / pageWidth, 1.6);
-  }
-  window.addEventListener('resize', fitWidth);
-
-  // Word draws most bullets with private-use characters from the Symbol
-  // and Wingdings fonts (U+F0B7 etc.), which a kiosk doesn't have - they
-  // render as blanks. docx-preview passes them through into its generated
-  // list CSS; swap the common ones for real Unicode equivalents.
-  const SYMBOL_BULLETS = {
-    '\uf0b7': '\u2022', // Symbol bullet        -> •
-    '\uf0a7': '\u25aa', // Wingdings square      -> ▪
-    '\uf0d8': '\u27a2', // Wingdings arrowhead   -> ➢
-    '\uf076': '\u2756', // Wingdings diamond     -> ❖
-    '\uf0fc': '\u2713', // Wingdings check       -> ✓
-    '\uf06e': '\u25a0', // Wingdings black square -> ■
-    '\uf071': '\u274f', // Wingdings box         -> ❏
-  };
-  function fixSymbolBullets() {
-    document.querySelectorAll('style').forEach((st) => {
-      let css = st.textContent;
-      const before = css;
-      for (const [from, to] of Object.entries(SYMBOL_BULLETS)) {
-        css = css.split(from).join(to);
-        // Also the CSS-escaped form ("\f0b7" / "\00f0b7 "), in case it's
-        // emitted that way.
-        const hex = from.charCodeAt(0).toString(16);
-        css = css.replace(new RegExp('\\\\0*' + hex + '\\s?', 'gi'), to);
-      }
-      if (css !== before) st.textContent = css;
-    });
-  }
+  window.addEventListener('resize', () => cls && KioskDocx.fit(docEl, cls, window.innerWidth));
 
   window.kioskDocView = {
     async show(d) {
       if (d.error) { showMessage(d.error); return; }
-      if (!window.docx || !window.JSZip) {
+      if (!window.KioskDocx || !KioskDocx.available()) {
         showMessage('Word document viewer is missing (docx-preview) - run Advanced -> Upgrade.');
         return;
       }
       try {
-        const bytes = Uint8Array.from(atob(d.data), (c) => c.charCodeAt(0));
-        docEl.innerHTML = '';
-        await window.docx.renderAsync(bytes, docEl, null, {
-          inWrapper: true,
-          ignoreLastRenderedPageBreak: true,
-          experimental: true,
-          useBase64URL: true,
-        });
+        cls = await KioskDocx.render(KioskDocx.base64ToBytes(d.data), docEl);
         msg.style.display = 'none';
-        fixSymbolBullets();
-        fitWidth();
+        KioskDocx.fit(docEl, cls, window.innerWidth);
         // Only called on first load or when the file changed on disk -
         // start a changed document from the top.
         window.scrollTo(0, 0);