@internetarchive/collection-browser 4.8.1-webdev-9227.4 → 4.9.1-webdev-9670.0

package/dist/src/tiles/preview/tile-preview-controller.js

@@ -0,0 +1,216 @@
+/** How long the pointer must rest on a tile before its preview starts. */
+export const HOVER_INTENT_MS = 300;
+/** Keyboard focus waits a little longer, so tabbing through tiles stays quiet. */
+export const FOCUS_INTENT_MS = 600;
+export const LONG_PRESS_MS = 500;
+/** How long the hover info pane waits on a tile that shows previews (a bit longer than one preview cycle). */
+export const PREVIEW_PANE_DELAY_MS = 5000;
+const LONG_PRESS_MOVE_TOLERANCE_PX = 10;
+/** The tile whose preview is currently showing. Only one is ever active. */
+let current;
+/** Whether this user and connection should see animated previews at all. */
+export function previewsAllowed() {
+    if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+        return false;
+    }
+    const connection = navigator.connection;
+    if (connection?.saveData)
+        return false;
+    if (/^(slow-)?2g$/.test(connection?.effectiveType ?? ''))
+        return false;
+    return true;
+}
+/**
+ * Decides when a tile's preview is active: after a hover-intent delay for a
+ * mouse, on keyboard focus, and on long-press for touch. Starting one preview
+ * stops whichever was active before.
+ */
+export class TilePreviewController {
+    constructor(host, options) {
+        this.host = host;
+        this.options = options;
+        this.active = false;
+        this.suppressClick = false;
+        /** Whether the press in progress is the one that started the preview. */
+        this.pressStartedPreview = false;
+        this.onAnyPointerDown = (e) => {
+            if (e.pointerType === 'touch' && !e.isPrimary)
+                this.deactivate();
+        };
+        this.onZoomGesture = () => {
+            this.deactivate();
+        };
+        this.onWheel = (e) => {
+            if (e.ctrlKey)
+                this.deactivate();
+        };
+        this.onPointerEnter = (e) => {
+            if (e.pointerType === 'touch')
+                return;
+            this.schedule('hover', HOVER_INTENT_MS);
+        };
+        this.onPointerLeave = (e) => {
+            if (e.pointerType === 'touch')
+                return;
+            this.deactivate();
+        };
+        this.onPointerDown = (e) => {
+            if (e.pointerType !== 'touch')
+                return;
+            if (!this.options.enabled() || !previewsAllowed())
+                return;
+            this.pressStartedPreview = false;
+            this.pressOrigin = { x: e.clientX, y: e.clientY };
+            this.schedule('long-press', LONG_PRESS_MS);
+        };
+        this.onPointerMove = (e) => {
+            if (!this.pressOrigin)
+                return;
+            const moved = Math.hypot(e.clientX - this.pressOrigin.x, e.clientY - this.pressOrigin.y);
+            if (moved > LONG_PRESS_MOVE_TOLERANCE_PX)
+                this.onPointerCancel();
+        };
+        /** Ends a press. If it started the preview, the click that follows is swallowed. */
+        this.onPointerUp = () => {
+            if (!this.pressOrigin)
+                return;
+            this.pressOrigin = undefined;
+            if (this.pressStartedPreview) {
+                this.pressStartedPreview = false;
+                this.suppressClick = true;
+                window.clearTimeout(this.suppressTimer);
+                this.suppressTimer = window.setTimeout(() => {
+                    this.suppressClick = false;
+                }, 400);
+            }
+            else {
+                window.clearTimeout(this.timer);
+            }
+        };
+        /** A cancelled or moved press never produces a click. */
+        this.onPointerCancel = () => {
+            if (!this.pressOrigin)
+                return;
+            this.pressOrigin = undefined;
+            this.pressStartedPreview = false;
+            window.clearTimeout(this.timer);
+        };
+        this.onClick = (e) => {
+            if (!this.suppressClick)
+                return;
+            this.suppressClick = false;
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        /** Keeps the long-press from opening the browser's link menu. */
+        this.onContextMenu = (e) => {
+            if (this.pressOrigin || this.active)
+                e.preventDefault();
+        };
+        this.onFocusIn = (e) => {
+            const target = e.composedPath()[0];
+            if (target?.matches?.(':focus-visible')) {
+                this.schedule('focus', FOCUS_INTENT_MS);
+            }
+        };
+        this.onFocusOut = () => {
+            this.deactivate();
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === 'Escape')
+                this.deactivate();
+        };
+        this.onOutsidePointerDown = (e) => {
+            if (!e.composedPath().includes(this.host))
+                this.deactivate();
+        };
+        this.onScroll = () => {
+            this.deactivate();
+        };
+        host.addController(this);
+    }
+    hostConnected() {
+        const h = this.host;
+        h.addEventListener('pointerenter', this.onPointerEnter);
+        h.addEventListener('pointerleave', this.onPointerLeave);
+        h.addEventListener('pointerdown', this.onPointerDown);
+        h.addEventListener('pointermove', this.onPointerMove);
+        h.addEventListener('pointerup', this.onPointerUp);
+        h.addEventListener('pointercancel', this.onPointerCancel);
+        h.addEventListener('contextmenu', this.onContextMenu);
+        h.addEventListener('click', this.onClick, true);
+        h.addEventListener('focusin', this.onFocusIn);
+        h.addEventListener('focusout', this.onFocusOut);
+        h.addEventListener('keydown', this.onKeyDown);
+    }
+    hostDisconnected() {
+        const h = this.host;
+        h.removeEventListener('pointerenter', this.onPointerEnter);
+        h.removeEventListener('pointerleave', this.onPointerLeave);
+        h.removeEventListener('pointerdown', this.onPointerDown);
+        h.removeEventListener('pointermove', this.onPointerMove);
+        h.removeEventListener('pointerup', this.onPointerUp);
+        h.removeEventListener('pointercancel', this.onPointerCancel);
+        h.removeEventListener('contextmenu', this.onContextMenu);
+        h.removeEventListener('click', this.onClick, true);
+        h.removeEventListener('focusin', this.onFocusIn);
+        h.removeEventListener('focusout', this.onFocusOut);
+        h.removeEventListener('keydown', this.onKeyDown);
+        this.deactivate();
+    }
+    /** Stops this tile's preview and any pending start. */
+    deactivate() {
+        window.clearTimeout(this.timer);
+        window.clearTimeout(this.suppressTimer);
+        this.timer = undefined;
+        this.pressOrigin = undefined;
+        this.pressStartedPreview = false;
+        document.removeEventListener('pointerdown', this.onOutsidePointerDown, true);
+        window.removeEventListener('scroll', this.onScroll, true);
+        this.removeZoomGuards();
+        if (current?.owner === this.host)
+            current = undefined;
+        if (this.active) {
+            this.active = false;
+            this.host.requestUpdate();
+        }
+    }
+    schedule(how, delay) {
+        window.clearTimeout(this.timer);
+        if (!this.options.enabled() || !previewsAllowed())
+            return;
+        this.timer = window.setTimeout(() => this.activate(how), delay);
+        this.addZoomGuards();
+    }
+    /**
+     * A pinch (a second finger, a Safari gesture or a trackpad ctrl+wheel) is a
+     * zoom, not a request for a preview, so it cancels a pending or active one.
+     * The listeners only exist while a preview is pending or showing.
+     */
+    addZoomGuards() {
+        document.addEventListener('pointerdown', this.onAnyPointerDown, true);
+        window.addEventListener('gesturestart', this.onZoomGesture);
+        window.addEventListener('wheel', this.onWheel, { passive: true });
+    }
+    removeZoomGuards() {
+        document.removeEventListener('pointerdown', this.onAnyPointerDown, true);
+        window.removeEventListener('gesturestart', this.onZoomGesture);
+        window.removeEventListener('wheel', this.onWheel);
+    }
+    activate(how) {
+        if (!this.options.enabled() || !previewsAllowed())
+            return;
+        if (current && current.owner !== this.host)
+            current.stop();
+        current = { owner: this.host, stop: () => this.deactivate() };
+        this.active = true;
+        this.host.requestUpdate();
+        if (how === 'long-press') {
+            this.pressStartedPreview = true;
+            // A touch preview stays up until the next touch elsewhere or a scroll.
+            document.addEventListener('pointerdown', this.onOutsidePointerDown, true);
+            window.addEventListener('scroll', this.onScroll, true);
+        }
+    }
+}
+//# sourceMappingURL=tile-preview-controller.js.map

package/dist/src/tiles/preview/tile-preview-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-preview-controller.js","sourceRoot":"","sources":["../../../../src/tiles/preview/tile-preview-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/** How long the pointer must rest on a tile before its preview starts. */\nexport const HOVER_INTENT_MS = 300;\n/** Keyboard focus waits a little longer, so tabbing through tiles stays quiet. */\nexport const FOCUS_INTENT_MS = 600;\nexport const LONG_PRESS_MS = 500;\n/** How long the hover info pane waits on a tile that shows previews (a bit longer than one preview cycle). */\nexport const PREVIEW_PANE_DELAY_MS = 5000;\nconst LONG_PRESS_MOVE_TOLERANCE_PX = 10;\n\ntype Activation = 'hover' | 'focus' | 'long-press';\n\n/** The tile whose preview is currently showing. Only one is ever active. */\nlet current: { owner: object; stop: () => void } | undefined;\n\n/** Whether this user and connection should see animated previews at all. */\nexport function previewsAllowed(): boolean {\n  if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {\n    return false;\n  }\n  const connection = (\n    navigator as Navigator & {\n      connection?: { saveData?: boolean; effectiveType?: string };\n    }\n  ).connection;\n  if (connection?.saveData) return false;\n  if (/^(slow-)?2g$/.test(connection?.effectiveType ?? '')) return false;\n  return true;\n}\n\n/**\n * Decides when a tile's preview is active: after a hover-intent delay for a\n * mouse, on keyboard focus, and on long-press for touch. Starting one preview\n * stops whichever was active before.\n */\nexport class TilePreviewController implements ReactiveController {\n  active = false;\n\n  private timer?: number;\n\n  private pressOrigin?: { x: number; y: number };\n\n  private suppressClick = false;\n\n  private suppressTimer?: number;\n\n  /** Whether the press in progress is the one that started the preview. */\n  private pressStartedPreview = false;\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private options: { enabled: () => boolean },\n  ) {\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    const h = this.host;\n    h.addEventListener('pointerenter', this.onPointerEnter);\n    h.addEventListener('pointerleave', this.onPointerLeave);\n    h.addEventListener('pointerdown', this.onPointerDown);\n    h.addEventListener('pointermove', this.onPointerMove);\n    h.addEventListener('pointerup', this.onPointerUp);\n    h.addEventListener('pointercancel', this.onPointerCancel);\n    h.addEventListener('contextmenu', this.onContextMenu);\n    h.addEventListener('click', this.onClick, true);\n    h.addEventListener('focusin', this.onFocusIn);\n    h.addEventListener('focusout', this.onFocusOut);\n    h.addEventListener('keydown', this.onKeyDown);\n  }\n\n  hostDisconnected(): void {\n    const h = this.host;\n    h.removeEventListener('pointerenter', this.onPointerEnter);\n    h.removeEventListener('pointerleave', this.onPointerLeave);\n    h.removeEventListener('pointerdown', this.onPointerDown);\n    h.removeEventListener('pointermove', this.onPointerMove);\n    h.removeEventListener('pointerup', this.onPointerUp);\n    h.removeEventListener('pointercancel', this.onPointerCancel);\n    h.removeEventListener('contextmenu', this.onContextMenu);\n    h.removeEventListener('click', this.onClick, true);\n    h.removeEventListener('focusin', this.onFocusIn);\n    h.removeEventListener('focusout', this.onFocusOut);\n    h.removeEventListener('keydown', this.onKeyDown);\n    this.deactivate();\n  }\n\n  /** Stops this tile's preview and any pending start. */\n  deactivate(): void {\n    window.clearTimeout(this.timer);\n    window.clearTimeout(this.suppressTimer);\n    this.timer = undefined;\n    this.pressOrigin = undefined;\n    this.pressStartedPreview = false;\n    document.removeEventListener(\n      'pointerdown',\n      this.onOutsidePointerDown,\n      true,\n    );\n    window.removeEventListener('scroll', this.onScroll, true);\n    this.removeZoomGuards();\n    if (current?.owner === this.host) current = undefined;\n    if (this.active) {\n      this.active = false;\n      this.host.requestUpdate();\n    }\n  }\n\n  private schedule(how: Activation, delay: number): void {\n    window.clearTimeout(this.timer);\n    if (!this.options.enabled() || !previewsAllowed()) return;\n    this.timer = window.setTimeout(() => this.activate(how), delay);\n    this.addZoomGuards();\n  }\n\n  /**\n   * A pinch (a second finger, a Safari gesture or a trackpad ctrl+wheel) is a\n   * zoom, not a request for a preview, so it cancels a pending or active one.\n   * The listeners only exist while a preview is pending or showing.\n   */\n  private addZoomGuards(): void {\n    document.addEventListener('pointerdown', this.onAnyPointerDown, true);\n    window.addEventListener('gesturestart', this.onZoomGesture);\n    window.addEventListener('wheel', this.onWheel, { passive: true });\n  }\n\n  private removeZoomGuards(): void {\n    document.removeEventListener('pointerdown', this.onAnyPointerDown, true);\n    window.removeEventListener('gesturestart', this.onZoomGesture);\n    window.removeEventListener('wheel', this.onWheel);\n  }\n\n  private onAnyPointerDown = (e: PointerEvent): void => {\n    if (e.pointerType === 'touch' && !e.isPrimary) this.deactivate();\n  };\n\n  private onZoomGesture = (): void => {\n    this.deactivate();\n  };\n\n  private onWheel = (e: WheelEvent): void => {\n    if (e.ctrlKey) this.deactivate();\n  };\n\n  private activate(how: Activation): void {\n    if (!this.options.enabled() || !previewsAllowed()) return;\n    if (current && current.owner !== this.host) current.stop();\n    current = { owner: this.host, stop: () => this.deactivate() };\n    this.active = true;\n    this.host.requestUpdate();\n    if (how === 'long-press') {\n      this.pressStartedPreview = true;\n      // A touch preview stays up until the next touch elsewhere or a scroll.\n      document.addEventListener('pointerdown', this.onOutsidePointerDown, true);\n      window.addEventListener('scroll', this.onScroll, true);\n    }\n  }\n\n  private onPointerEnter = (e: PointerEvent): void => {\n    if (e.pointerType === 'touch') return;\n    this.schedule('hover', HOVER_INTENT_MS);\n  };\n\n  private onPointerLeave = (e: PointerEvent): void => {\n    if (e.pointerType === 'touch') return;\n    this.deactivate();\n  };\n\n  private onPointerDown = (e: PointerEvent): void => {\n    if (e.pointerType !== 'touch') return;\n    if (!this.options.enabled() || !previewsAllowed()) return;\n    this.pressStartedPreview = false;\n    this.pressOrigin = { x: e.clientX, y: e.clientY };\n    this.schedule('long-press', LONG_PRESS_MS);\n  };\n\n  private onPointerMove = (e: PointerEvent): void => {\n    if (!this.pressOrigin) return;\n    const moved = Math.hypot(\n      e.clientX - this.pressOrigin.x,\n      e.clientY - this.pressOrigin.y,\n    );\n    if (moved > LONG_PRESS_MOVE_TOLERANCE_PX) this.onPointerCancel();\n  };\n\n  /** Ends a press. If it started the preview, the click that follows is swallowed. */\n  private onPointerUp = (): void => {\n    if (!this.pressOrigin) return;\n    this.pressOrigin = undefined;\n    if (this.pressStartedPreview) {\n      this.pressStartedPreview = false;\n      this.suppressClick = true;\n      window.clearTimeout(this.suppressTimer);\n      this.suppressTimer = window.setTimeout(() => {\n        this.suppressClick = false;\n      }, 400);\n    } else {\n      window.clearTimeout(this.timer);\n    }\n  };\n\n  /** A cancelled or moved press never produces a click. */\n  private onPointerCancel = (): void => {\n    if (!this.pressOrigin) return;\n    this.pressOrigin = undefined;\n    this.pressStartedPreview = false;\n    window.clearTimeout(this.timer);\n  };\n\n  private onClick = (e: MouseEvent): void => {\n    if (!this.suppressClick) return;\n    this.suppressClick = false;\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  /** Keeps the long-press from opening the browser's link menu. */\n  private onContextMenu = (e: Event): void => {\n    if (this.pressOrigin || this.active) e.preventDefault();\n  };\n\n  private onFocusIn = (e: FocusEvent): void => {\n    const target = e.composedPath()[0] as Element | undefined;\n    if (target?.matches?.(':focus-visible')) {\n      this.schedule('focus', FOCUS_INTENT_MS);\n    }\n  };\n\n  private onFocusOut = (): void => {\n    this.deactivate();\n  };\n\n  private onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape') this.deactivate();\n  };\n\n  private onOutsidePointerDown = (e: PointerEvent): void => {\n    if (!e.composedPath().includes(this.host)) this.deactivate();\n  };\n\n  private onScroll = (): void => {\n    this.deactivate();\n  };\n}\n"]}

package/dist/src/tiles/preview/tile-preview-media.d.ts

@@ -0,0 +1,44 @@
+/** What a tile preview shows, resolved from an item's file list. */
+export type TilePreviewMedia = {
+    kind: 'video';
+    src: string;
+    start: number;
+    fallbackUrls: string[];
+} | {
+    kind: 'slides';
+    urls: string[];
+    fit: 'contain' | 'cover';
+} | {
+    kind: 'audio';
+    src: string;
+    start: number;
+    waveform?: string;
+} | {
+    kind: 'zoom';
+};
+/** Clip and snippet length, in seconds. */
+export declare const PREVIEW_CLIP_SECONDS = 4;
+/** What the previews are allowed to fetch. */
+export interface TilePreviewOptions {
+    /**
+     * Play a real clip of the movie, taken from its smallest playable derivative.
+     * A clip costs up to about 4 MB per preview (the browser buffers ahead), so by
+     * default movies cycle a few of their stored frame thumbnails instead (about
+     * 35 KB). Movies with no playable derivative always use the frames.
+     */
+    clips?: boolean;
+    /**
+     * Play video clips and audio snippets with sound. Only takes effect once the
+     * page has been activated by a click or key press; otherwise the browser
+     * refuses and the preview stays muted.
+     */
+    sound?: boolean;
+}
+/**
+ * Resolves the preview media for an item. One request at most per item per
+ * page load (none for texts and fallbacks), and the result, including a
+ * failure, is cached so re-hovering never hits the network again.
+ */
+export declare function resolvePreviewMedia(identifier: string, mediatype: string, baseUrl?: string, options?: TilePreviewOptions): Promise<TilePreviewMedia>;
+/** Test hook. */
+export declare function clearPreviewMediaCache(): void;

package/dist/src/tiles/preview/tile-preview-media.js

@@ -0,0 +1,151 @@
+/** Clip and snippet length, in seconds. */
+export const PREVIEW_CLIP_SECONDS = 4;
+const MAX_SLIDES = 4;
+const MAX_FRAMES = 6;
+const MIN_CLIP_SOURCE_SECONDS = 8;
+const MAX_IMAGE_BYTES = 1_500_000;
+const PAGE_NUMBERS = [1, 3, 5, 8];
+const cache = new Map();
+/**
+ * Resolves the preview media for an item. One request at most per item per
+ * page load (none for texts and fallbacks), and the result, including a
+ * failure, is cached so re-hovering never hits the network again.
+ */
+export function resolvePreviewMedia(identifier, mediatype, baseUrl = 'https://archive.org', options = {}) {
+    const key = `${baseUrl}|${identifier}|${options.clips ? 'clip' : ''}`;
+    let pending = cache.get(key);
+    if (!pending) {
+        pending = resolve(identifier, mediatype, baseUrl, options).catch(() => ({
+            kind: 'zoom',
+        }));
+        cache.set(key, pending);
+    }
+    return pending;
+}
+/** Test hook. */
+export function clearPreviewMediaCache() {
+    cache.clear();
+}
+async function resolve(identifier, mediatype, baseUrl, options) {
+    const download = (name) => `${baseUrl}/download/${identifier}/${name
+        .split('/')
+        .map(encodeURIComponent)
+        .join('/')}`;
+    // Page images come from the BookReader endpoint, so no file list is needed.
+    // Pages that don't exist are dropped when they fail to load.
+    if (mediatype === 'texts') {
+        return {
+            kind: 'slides',
+            fit: 'contain',
+            urls: PAGE_NUMBERS.map(n => download(`page/n${n}_w300.jpg`)),
+        };
+    }
+    const files = await fetchFiles(identifier, baseUrl);
+    if (mediatype === 'movies') {
+        // Frames are spread across the whole film, skipping the first (the cover).
+        const frames = spread(files
+            .filter(f => f.format === 'Thumbnail')
+            .map(f => f.name)
+            .sort()
+            .slice(1), MAX_FRAMES).map(download);
+        const clip = options.clips ? smallestPlayable(files) : undefined;
+        if (clip) {
+            return {
+                kind: 'video',
+                src: download(clip.name),
+                start: clipStart(clip.length),
+                fallbackUrls: frames,
+            };
+        }
+        return frames.length > 1
+            ? { kind: 'slides', fit: 'cover', urls: frames }
+            : { kind: 'zoom' };
+    }
+    if (mediatype === 'audio' || mediatype === 'etree') {
+        const mp3 = files
+            .filter(f => f.name.toLowerCase().endsWith('.mp3'))
+            .sort((a, b) => a.name.localeCompare(b.name))[0];
+        if (!mp3)
+            return { kind: 'zoom' };
+        const png = files.find(f => f.name === mp3.name.replace(/\.mp3$/i, '.png'));
+        return {
+            kind: 'audio',
+            src: download(mp3.name),
+            start: startAt(mp3.length),
+            waveform: png && download(png.name),
+        };
+    }
+    if (mediatype === 'image') {
+        const images = files
+            .filter(f => f.format === 'JPEG' &&
+            Number(f.size ?? 0) > 0 &&
+            Number(f.size) <= MAX_IMAGE_BYTES)
+            .map(f => download(f.name))
+            .slice(0, MAX_SLIDES);
+        return images.length > 1
+            ? { kind: 'slides', fit: 'cover', urls: images }
+            : { kind: 'zoom' };
+    }
+    return { kind: 'zoom' };
+}
+async function fetchFiles(identifier, baseUrl) {
+    const res = await fetch(`${baseUrl}/metadata/${identifier}/files`);
+    if (!res.ok)
+        return [];
+    const body = await res.json();
+    return Array.isArray(body.result) ? body.result : [];
+}
+/**
+ * The smallest derivative this browser can play (mp4 or webm, at least a few
+ * seconds long). The smallest has the lowest bitrate and the shortest header, so
+ * it starts soonest.
+ */
+function smallestPlayable(files) {
+    const video = document.createElement('video');
+    return files
+        .filter(f => {
+        const ext = f.name.toLowerCase().split('.').pop();
+        const type = ext === 'webm'
+            ? 'video/webm'
+            : ext === 'mp4' || ext === 'm4v'
+                ? 'video/mp4'
+                : '';
+        const seconds = parseLength(f.length);
+        return (!!type &&
+            f.format !== 'Thumbnail' &&
+            Number(f.size) > 0 &&
+            (seconds === 0 || seconds >= MIN_CLIP_SOURCE_SECONDS) &&
+            !!video.canPlayType(type));
+    })
+        .sort((a, b) => Number(a.size) - Number(b.size))[0];
+}
+/** Seconds into a film to start at: 10% in, to skip leading black, capped at 60. */
+function clipStart(length) {
+    const seconds = parseLength(length);
+    if (!seconds)
+        return 0;
+    return Math.max(0, Math.min(60, Math.floor(seconds / 10), seconds - PREVIEW_CLIP_SECONDS));
+}
+/** Picks `count` evenly spaced entries from `list`. */
+function spread(list, count) {
+    if (list.length <= count)
+        return list;
+    return Array.from({ length: count }, (_, i) => list[Math.floor((i * list.length) / count)]);
+}
+/** Seconds into the media to start at: a third of the way in, capped at 60. */
+function startAt(length) {
+    const seconds = parseLength(length);
+    if (!seconds)
+        return 0;
+    return Math.max(0, Math.min(60, Math.floor(seconds / 3), seconds - PREVIEW_CLIP_SECONDS));
+}
+/** Parses a file `length`, either plain seconds ("16.23") or "mm:ss" / "h:mm:ss". */
+function parseLength(length) {
+    if (!length)
+        return 0;
+    const parts = length.split(':').map(Number);
+    if (parts.some(Number.isNaN))
+        return 0;
+    return parts.reduce((total, part) => total * 60 + part, 0);
+}
+//# sourceMappingURL=tile-preview-media.js.map

package/dist/src/tiles/preview/tile-preview-media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-preview-media.js","sourceRoot":"","sources":["../../../../src/tiles/preview/tile-preview-media.ts"],"names":[],"mappings":"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","sourcesContent":["/** What a tile preview shows, resolved from an item's file list. */\nexport type TilePreviewMedia =\n  | { kind: 'video'; src: string; start: number; fallbackUrls: string[] }\n  | { kind: 'slides'; urls: string[]; fit: 'contain' | 'cover' }\n  | { kind: 'audio'; src: string; start: number; waveform?: string }\n  | { kind: 'zoom' };\n\ninterface ItemFile {\n  name: string;\n  format?: string;\n  length?: string;\n  size?: string;\n}\n\n/** Clip and snippet length, in seconds. */\nexport const PREVIEW_CLIP_SECONDS = 4;\n\n/** What the previews are allowed to fetch. */\nexport interface TilePreviewOptions {\n  /**\n   * Play a real clip of the movie, taken from its smallest playable derivative.\n   * A clip costs up to about 4 MB per preview (the browser buffers ahead), so by\n   * default movies cycle a few of their stored frame thumbnails instead (about\n   * 35 KB). Movies with no playable derivative always use the frames.\n   */\n  clips?: boolean;\n  /**\n   * Play video clips and audio snippets with sound. Only takes effect once the\n   * page has been activated by a click or key press; otherwise the browser\n   * refuses and the preview stays muted.\n   */\n  sound?: boolean;\n}\n\nconst MAX_SLIDES = 4;\nconst MAX_FRAMES = 6;\nconst MIN_CLIP_SOURCE_SECONDS = 8;\nconst MAX_IMAGE_BYTES = 1_500_000;\nconst PAGE_NUMBERS = [1, 3, 5, 8];\n\nconst cache = new Map<string, Promise<TilePreviewMedia>>();\n\n/**\n * Resolves the preview media for an item. One request at most per item per\n * page load (none for texts and fallbacks), and the result, including a\n * failure, is cached so re-hovering never hits the network again.\n */\nexport function resolvePreviewMedia(\n  identifier: string,\n  mediatype: string,\n  baseUrl = 'https://archive.org',\n  options: TilePreviewOptions = {},\n): Promise<TilePreviewMedia> {\n  const key = `${baseUrl}|${identifier}|${options.clips ? 'clip' : ''}`;\n  let pending = cache.get(key);\n  if (!pending) {\n    pending = resolve(identifier, mediatype, baseUrl, options).catch(() => ({\n      kind: 'zoom' as const,\n    }));\n    cache.set(key, pending);\n  }\n  return pending;\n}\n\n/** Test hook. */\nexport function clearPreviewMediaCache(): void {\n  cache.clear();\n}\n\nasync function resolve(\n  identifier: string,\n  mediatype: string,\n  baseUrl: string,\n  options: TilePreviewOptions,\n): Promise<TilePreviewMedia> {\n  const download = (name: string) =>\n    `${baseUrl}/download/${identifier}/${name\n      .split('/')\n      .map(encodeURIComponent)\n      .join('/')}`;\n\n  // Page images come from the BookReader endpoint, so no file list is needed.\n  // Pages that don't exist are dropped when they fail to load.\n  if (mediatype === 'texts') {\n    return {\n      kind: 'slides',\n      fit: 'contain',\n      urls: PAGE_NUMBERS.map(n => download(`page/n${n}_w300.jpg`)),\n    };\n  }\n\n  const files = await fetchFiles(identifier, baseUrl);\n\n  if (mediatype === 'movies') {\n    // Frames are spread across the whole film, skipping the first (the cover).\n    const frames = spread(\n      files\n        .filter(f => f.format === 'Thumbnail')\n        .map(f => f.name)\n        .sort()\n        .slice(1),\n      MAX_FRAMES,\n    ).map(download);\n\n    const clip = options.clips ? smallestPlayable(files) : undefined;\n    if (clip) {\n      return {\n        kind: 'video',\n        src: download(clip.name),\n        start: clipStart(clip.length),\n        fallbackUrls: frames,\n      };\n    }\n    return frames.length > 1\n      ? { kind: 'slides', fit: 'cover', urls: frames }\n      : { kind: 'zoom' };\n  }\n\n  if (mediatype === 'audio' || mediatype === 'etree') {\n    const mp3 = files\n      .filter(f => f.name.toLowerCase().endsWith('.mp3'))\n      .sort((a, b) => a.name.localeCompare(b.name))[0];\n    if (!mp3) return { kind: 'zoom' };\n    const png = files.find(f => f.name === mp3.name.replace(/\\.mp3$/i, '.png'));\n    return {\n      kind: 'audio',\n      src: download(mp3.name),\n      start: startAt(mp3.length),\n      waveform: png && download(png.name),\n    };\n  }\n\n  if (mediatype === 'image') {\n    const images = files\n      .filter(\n        f =>\n          f.format === 'JPEG' &&\n          Number(f.size ?? 0) > 0 &&\n          Number(f.size) <= MAX_IMAGE_BYTES,\n      )\n      .map(f => download(f.name))\n      .slice(0, MAX_SLIDES);\n    return images.length > 1\n      ? { kind: 'slides', fit: 'cover', urls: images }\n      : { kind: 'zoom' };\n  }\n\n  return { kind: 'zoom' };\n}\n\nasync function fetchFiles(\n  identifier: string,\n  baseUrl: string,\n): Promise<ItemFile[]> {\n  const res = await fetch(`${baseUrl}/metadata/${identifier}/files`);\n  if (!res.ok) return [];\n  const body = await res.json();\n  return Array.isArray(body.result) ? body.result : [];\n}\n\n/**\n * The smallest derivative this browser can play (mp4 or webm, at least a few\n * seconds long). The smallest has the lowest bitrate and the shortest header, so\n * it starts soonest.\n */\nfunction smallestPlayable(files: ItemFile[]): ItemFile | undefined {\n  const video = document.createElement('video');\n  return files\n    .filter(f => {\n      const ext = f.name.toLowerCase().split('.').pop();\n      const type =\n        ext === 'webm'\n          ? 'video/webm'\n          : ext === 'mp4' || ext === 'm4v'\n            ? 'video/mp4'\n            : '';\n      const seconds = parseLength(f.length);\n      return (\n        !!type &&\n        f.format !== 'Thumbnail' &&\n        Number(f.size) > 0 &&\n        (seconds === 0 || seconds >= MIN_CLIP_SOURCE_SECONDS) &&\n        !!video.canPlayType(type)\n      );\n    })\n    .sort((a, b) => Number(a.size) - Number(b.size))[0];\n}\n\n/** Seconds into a film to start at: 10% in, to skip leading black, capped at 60. */\nfunction clipStart(length?: string): number {\n  const seconds = parseLength(length);\n  if (!seconds) return 0;\n  return Math.max(\n    0,\n    Math.min(60, Math.floor(seconds / 10), seconds - PREVIEW_CLIP_SECONDS),\n  );\n}\n\n/** Picks `count` evenly spaced entries from `list`. */\nfunction spread<T>(list: T[], count: number): T[] {\n  if (list.length <= count) return list;\n  return Array.from(\n    { length: count },\n    (_, i) => list[Math.floor((i * list.length) / count)],\n  );\n}\n\n/** Seconds into the media to start at: a third of the way in, capped at 60. */\nfunction startAt(length?: string): number {\n  const seconds = parseLength(length);\n  if (!seconds) return 0;\n  return Math.max(\n    0,\n    Math.min(60, Math.floor(seconds / 3), seconds - PREVIEW_CLIP_SECONDS),\n  );\n}\n\n/** Parses a file `length`, either plain seconds (\"16.23\") or \"mm:ss\" / \"h:mm:ss\". */\nfunction parseLength(length?: string): number {\n  if (!length) return 0;\n  const parts = length.split(':').map(Number);\n  if (parts.some(Number.isNaN)) return 0;\n  return parts.reduce((total, part) => total * 60 + part, 0);\n}\n"]}

package/dist/src/tiles/preview/tile-preview.d.ts

@@ -0,0 +1,66 @@
+import { LitElement, nothing, PropertyValues } from 'lit';
+import { type TilePreviewOptions } from './tile-preview-media';
+/**
+ * Fills a tile's image area with a live preview of the item while `active`:
+ * a muted clip for movies, a few page images for texts, a waveform for audio,
+ * cycling images for images, and a slow pan over the thumbnail for anything
+ * else. It is absolutely positioned over the existing thumbnail, so showing
+ * and hiding it never moves the layout.
+ */
+export declare class TilePreview extends LitElement {
+    identifier?: string;
+    mediatype?: string;
+    baseUrl: string;
+    /** The tile's thumbnail, panned slowly when there is nothing richer to show. */
+    thumbnailUrl?: string;
+    active: boolean;
+    options: TilePreviewOptions;
+    private media?;
+    private slideUrls;
+    private slide;
+    private ready;
+    /** Whether sound is audibly playing, as opposed to muted or refused. */
+    private audible;
+    private video?;
+    private audio?;
+    private slideTimer?;
+    private frameTimer?;
+    /** Pending fade animation frame per element, so one element's fade never cancels another's. */
+    private fadeFrames;
+    /** Bumped on every activation so a slow resolve can't show a stale preview. */
+    private activation;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private start;
+    private stop;
+    /**
+     * Stops a media element: a short fade-out when it is audible, then pause and
+     * drop the source so the browser stops downloading it.
+     */
+    private releaseMedia;
+    private cancelFade;
+    /** Ramps a media element's volume to `target` over `ms`. */
+    private fade;
+    /**
+     * Starts a media element, with sound when the options ask for it. A browser
+     * that refuses audible playback gets a muted one instead.
+     */
+    private playMedia;
+    /** Swaps a clip that is slow or unplayable for the item's frame thumbnails. */
+    private useFallbackFrames;
+    private startSlides;
+    private loadedSlides;
+    private onSlideError;
+    private onSlideLoad;
+    private onVideoPlaying;
+    /** Loops the clip within its start-to-start+clip-length window. */
+    private onVideoTimeUpdate;
+    private onVideoLoaded;
+    private playSnippet;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+    /** A muted-speaker hint, so people know a clip or snippet could have sound. */
+    private get soundBadgeTemplate();
+    private mediaTemplate;
+    static styles: import("lit").CSSResult;
+}