@internetarchive/collection-browser 4.9.0 → 4.9.1-webdev-9670.0

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

@@ -0,0 +1,494 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing } from 'lit';
+import { msg } from '@lit/localize';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { PREVIEW_CLIP_SECONDS, resolvePreviewMedia, } from './tile-preview-media';
+const SLIDE_INTERVAL_MS = 700;
+/** How long the first video frame may take before the frames take over. */
+const FIRST_FRAME_TIMEOUT_MS = 2500;
+const MAX_VOLUME = 0.5;
+const FADE_IN_MS = 250;
+const FADE_OUT_MS = 120;
+/**
+ * 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.
+ */
+let TilePreview = class TilePreview extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.baseUrl = 'https://archive.org';
+        this.active = false;
+        this.options = {};
+        this.slideUrls = [];
+        this.slide = 0;
+        this.ready = false;
+        /** Whether sound is audibly playing, as opposed to muted or refused. */
+        this.audible = false;
+        /** Pending fade animation frame per element, so one element's fade never cancels another's. */
+        this.fadeFrames = new WeakMap();
+        /** Bumped on every activation so a slow resolve can't show a stale preview. */
+        this.activation = 0;
+    }
+    willUpdate(changed) {
+        // Release while the media elements are still in the DOM.
+        if (changed.has('active') && !this.active)
+            this.stop();
+    }
+    updated(changed) {
+        if (changed.has('active') || changed.has('identifier')) {
+            if (this.active) {
+                this.stop();
+                this.start();
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stop();
+    }
+    async start() {
+        if (!this.identifier || !this.mediatype)
+            return;
+        const activation = ++this.activation;
+        const media = await resolvePreviewMedia(this.identifier, this.mediatype, this.baseUrl, this.options);
+        if (activation !== this.activation || !this.active)
+            return;
+        this.media = media;
+        this.slideUrls = media.kind === 'slides' ? media.urls : [];
+        this.slide = 0;
+        this.ready = media.kind === 'zoom' || media.kind === 'audio';
+        await this.updateComplete;
+        if (activation !== this.activation)
+            return;
+        if (media.kind === 'slides')
+            this.startSlides();
+        if (media.kind === 'audio' && this.options.sound)
+            this.playSnippet();
+        if (media.kind === 'video') {
+            this.frameTimer = window.setTimeout(() => this.useFallbackFrames(), FIRST_FRAME_TIMEOUT_MS);
+        }
+    }
+    stop() {
+        this.activation += 1;
+        window.clearInterval(this.slideTimer);
+        window.clearTimeout(this.frameTimer);
+        this.releaseMedia(this.video);
+        this.releaseMedia(this.audio);
+        this.media = undefined;
+        this.slideUrls = [];
+        this.ready = false;
+        this.audible = false;
+    }
+    /**
+     * Stops a media element: a short fade-out when it is audible, then pause and
+     * drop the source so the browser stops downloading it.
+     */
+    releaseMedia(el) {
+        if (!el)
+            return;
+        this.cancelFade(el);
+        const finish = () => {
+            el.pause();
+            el.removeAttribute('src');
+            el.load();
+        };
+        if (el.paused || el.muted || el.volume === 0) {
+            finish();
+            return;
+        }
+        this.fade(el, 0, FADE_OUT_MS, finish);
+    }
+    cancelFade(el) {
+        const frame = this.fadeFrames.get(el);
+        if (frame !== undefined)
+            window.cancelAnimationFrame(frame);
+        this.fadeFrames.delete(el);
+    }
+    /** Ramps a media element's volume to `target` over `ms`. */
+    fade(el, target, ms, done) {
+        this.cancelFade(el);
+        const from = el.volume;
+        const t0 = performance.now();
+        const step = (now) => {
+            const t = Math.min(1, (now - t0) / ms);
+            el.volume = from + (target - from) * t;
+            if (t < 1)
+                this.fadeFrames.set(el, window.requestAnimationFrame(step));
+            else {
+                this.fadeFrames.delete(el);
+                done?.();
+            }
+        };
+        this.fadeFrames.set(el, window.requestAnimationFrame(step));
+    }
+    /**
+     * Starts a media element, with sound when the options ask for it. A browser
+     * that refuses audible playback gets a muted one instead.
+     */
+    async playMedia(el, activation) {
+        if (this.options.sound) {
+            try {
+                el.muted = false;
+                el.volume = 0;
+                await el.play();
+                if (activation !== this.activation)
+                    return true;
+                this.audible = true;
+                this.fade(el, MAX_VOLUME, FADE_IN_MS);
+                return true;
+            }
+            catch {
+                // Refused, so play it muted below.
+            }
+        }
+        try {
+            el.muted = true;
+            await el.play();
+            return true;
+        }
+        catch {
+            // A stopped preview isn't a failure; only a current one needs the frames.
+            return activation !== this.activation;
+        }
+    }
+    /** Swaps a clip that is slow or unplayable for the item's frame thumbnails. */
+    useFallbackFrames() {
+        window.clearTimeout(this.frameTimer);
+        if (this.media?.kind !== 'video')
+            return;
+        const urls = this.media.fallbackUrls;
+        this.releaseMedia(this.video);
+        this.audible = false;
+        if (urls.length > 1) {
+            this.media = { kind: 'slides', fit: 'cover', urls };
+            this.slideUrls = urls;
+            this.slide = 0;
+            this.ready = false;
+            const { activation } = this;
+            this.updateComplete.then(() => {
+                if (activation === this.activation)
+                    this.startSlides();
+            });
+        }
+        else {
+            this.media = { kind: 'zoom' };
+            this.ready = true;
+        }
+    }
+    startSlides() {
+        window.clearInterval(this.slideTimer);
+        this.slideTimer = window.setInterval(() => {
+            const loaded = this.loadedSlides();
+            if (loaded.length < 2)
+                return;
+            let next = this.slide;
+            do {
+                next = (next + 1) % this.slideUrls.length;
+            } while (!loaded.includes(next));
+            this.slide = next;
+        }, SLIDE_INTERVAL_MS);
+    }
+    loadedSlides() {
+        const imgs = [...(this.shadowRoot?.querySelectorAll('.slides img') ?? [])];
+        return imgs.flatMap((img, i) => img.complete &&
+            img.naturalWidth
+            ? [i]
+            : []);
+    }
+    onSlideError(url) {
+        this.slideUrls = this.slideUrls.filter(u => u !== url);
+        this.slide = 0;
+        if (this.slideUrls.length < 2) {
+            window.clearInterval(this.slideTimer);
+            this.media = { kind: 'zoom' };
+            this.ready = true;
+        }
+    }
+    onSlideLoad() {
+        this.ready = true;
+    }
+    onVideoPlaying() {
+        window.clearTimeout(this.frameTimer);
+        this.ready = true;
+    }
+    /** Loops the clip within its start-to-start+clip-length window. */
+    onVideoTimeUpdate() {
+        const video = this.video;
+        if (this.media?.kind === 'video' &&
+            video &&
+            video.currentTime >= this.media.start + PREVIEW_CLIP_SECONDS) {
+            video.currentTime = this.media.start;
+        }
+    }
+    async onVideoLoaded() {
+        const { video, activation } = this;
+        if (video && !(await this.playMedia(video, activation))) {
+            this.useFallbackFrames();
+        }
+    }
+    async playSnippet() {
+        if (this.audio)
+            await this.playMedia(this.audio, this.activation);
+    }
+    render() {
+        if (!this.active || !this.media)
+            return nothing;
+        return html `<div
+      class="layer ${this.media.kind} ${this.ready ? 'ready' : ''}"
+      aria-hidden="true"
+    >
+      ${this.mediaTemplate(this.media)} ${this.soundBadgeTemplate}
+    </div>`;
+    }
+    /** A muted-speaker hint, so people know a clip or snippet could have sound. */
+    get soundBadgeTemplate() {
+        const kind = this.media?.kind;
+        if ((kind !== 'video' && kind !== 'audio') || this.audible)
+            return nothing;
+        return html `<span class="badge" title=${msg('Sound is off')}>
+      <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+        <path
+          fill="currentColor"
+          d="M3 9v6h4l5 5V4L7 9H3zm13.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4-2.7-2.7z"
+        />
+      </svg>
+    </span>`;
+    }
+    mediaTemplate(media) {
+        switch (media.kind) {
+            case 'video':
+                return html `<video
+          muted
+          loop
+          playsinline
+          preload="auto"
+          src="${media.src}#t=${media.start}"
+          @loadeddata=${this.onVideoLoaded}
+          @error=${this.useFallbackFrames}
+          @playing=${this.onVideoPlaying}
+          @timeupdate=${this.onVideoTimeUpdate}
+        ></video>`;
+            case 'slides':
+                return html `<div class="slides ${media.fit}">
+          ${this.slideUrls.map((url, i) => html `<img
+                src=${url}
+                alt=""
+                class=${i === this.slide ? 'on' : ''}
+                @load=${this.onSlideLoad}
+                @error=${() => this.onSlideError(url)}
+              />`)}
+        </div>`;
+            case 'audio':
+                return html `
+          ${media.waveform
+                    ? html `<img class="waveform" src=${media.waveform} alt="" />`
+                    : html `<div class="bars">
+                ${Array.from({ length: 12 }, (_, i) => html `<span style="animation-delay:${i * -97}ms"></span>`)}
+              </div>`}
+          <div class="playhead"></div>
+          ${this.options.sound
+                    ? html `<audio
+                preload="auto"
+                src="${media.src}#t=${media.start}"
+              ></audio>`
+                    : nothing}
+        `;
+            default:
+                return html `<img
+          class="pan"
+          src=${ifDefined(this.thumbnailUrl)}
+          alt=""
+        />`;
+        }
+    }
+    static { this.styles = css `
+    :host {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      overflow: hidden;
+      border-radius: inherit;
+    }
+
+    .layer {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      transition: opacity 200ms ease-out;
+    }
+
+    .layer.ready {
+      opacity: 1;
+    }
+
+    video,
+    .slides img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .slides {
+      position: absolute;
+      inset: 0;
+      background: #fff;
+    }
+
+    .slides.contain img {
+      object-fit: contain;
+    }
+
+    .slides img {
+      opacity: 0;
+    }
+
+    .slides img.on {
+      opacity: 1;
+    }
+
+    .audio {
+      background: #10161b;
+    }
+
+    .waveform {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+      filter: invert(1) hue-rotate(180deg);
+      opacity: 0.85;
+    }
+
+    .badge {
+      position: absolute;
+      left: 6px;
+      bottom: 6px;
+      display: flex;
+      padding: 3px;
+      border-radius: 4px;
+      color: #fff;
+      background: rgb(0 0 0 / 0.65);
+    }
+
+    .playhead {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: #f0a500;
+      box-shadow: 0 0 8px #f0a500;
+      animation: scan 2.4s linear infinite;
+    }
+
+    .bars {
+      position: absolute;
+      inset: 20% 10%;
+      display: flex;
+      gap: 4px;
+      align-items: end;
+    }
+
+    .bars span {
+      flex: 1;
+      height: 30%;
+      background: #5bb8e0;
+      animation: bounce 700ms ease-in-out infinite alternate;
+    }
+
+    .pan {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      animation: pan 6s ease-in-out infinite alternate;
+    }
+
+    @keyframes pan {
+      from {
+        transform: scale(1) translate(0, 0);
+      }
+      to {
+        transform: scale(1.3) translate(-5%, -4%);
+      }
+    }
+
+    @keyframes scan {
+      from {
+        left: 0;
+      }
+      to {
+        left: 100%;
+      }
+    }
+
+    @keyframes bounce {
+      to {
+        height: 95%;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .layer {
+        transition: none;
+      }
+
+      .playhead,
+      .pan,
+      .bars span {
+        animation: none;
+      }
+    }
+  `; }
+};
+__decorate([
+    property({ type: String })
+], TilePreview.prototype, "identifier", void 0);
+__decorate([
+    property({ type: String })
+], TilePreview.prototype, "mediatype", void 0);
+__decorate([
+    property({ type: String })
+], TilePreview.prototype, "baseUrl", void 0);
+__decorate([
+    property({ type: String })
+], TilePreview.prototype, "thumbnailUrl", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TilePreview.prototype, "active", void 0);
+__decorate([
+    property({ type: Object })
+], TilePreview.prototype, "options", void 0);
+__decorate([
+    state()
+], TilePreview.prototype, "media", void 0);
+__decorate([
+    state()
+], TilePreview.prototype, "slideUrls", void 0);
+__decorate([
+    state()
+], TilePreview.prototype, "slide", void 0);
+__decorate([
+    state()
+], TilePreview.prototype, "ready", void 0);
+__decorate([
+    state()
+], TilePreview.prototype, "audible", void 0);
+__decorate([
+    query('video')
+], TilePreview.prototype, "video", void 0);
+__decorate([
+    query('audio')
+], TilePreview.prototype, "audio", void 0);
+TilePreview = __decorate([
+    customElement('tile-preview')
+], TilePreview);
+export { TilePreview };
+//# sourceMappingURL=tile-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile-preview.js","sourceRoot":"","sources":["../../../../src/tiles/preview/tile-preview.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement, nothing, PropertyValues } from 'lit';\nimport { msg } from '@lit/localize';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport {\n  PREVIEW_CLIP_SECONDS,\n  resolvePreviewMedia,\n  type TilePreviewMedia,\n  type TilePreviewOptions,\n} from './tile-preview-media';\n\nconst SLIDE_INTERVAL_MS = 700;\n/** How long the first video frame may take before the frames take over. */\nconst FIRST_FRAME_TIMEOUT_MS = 2500;\nconst MAX_VOLUME = 0.5;\nconst FADE_IN_MS = 250;\nconst FADE_OUT_MS = 120;\n\n/**\n * Fills a tile's image area with a live preview of the item while `active`:\n * a muted clip for movies, a few page images for texts, a waveform for audio,\n * cycling images for images, and a slow pan over the thumbnail for anything\n * else. It is absolutely positioned over the existing thumbnail, so showing\n * and hiding it never moves the layout.\n */\n@customElement('tile-preview')\nexport class TilePreview extends LitElement {\n  @property({ type: String }) identifier?: string;\n\n  @property({ type: String }) mediatype?: string;\n\n  @property({ type: String }) baseUrl = 'https://archive.org';\n\n  /** The tile's thumbnail, panned slowly when there is nothing richer to show. */\n  @property({ type: String }) thumbnailUrl?: string;\n\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  @property({ type: Object }) options: TilePreviewOptions = {};\n\n  @state() private media?: TilePreviewMedia;\n\n  @state() private slideUrls: string[] = [];\n\n  @state() private slide = 0;\n\n  @state() private ready = false;\n\n  /** Whether sound is audibly playing, as opposed to muted or refused. */\n  @state() private audible = false;\n\n  @query('video') private video?: HTMLVideoElement;\n\n  @query('audio') private audio?: HTMLAudioElement;\n\n  private slideTimer?: number;\n\n  private frameTimer?: number;\n\n  /** Pending fade animation frame per element, so one element's fade never cancels another's. */\n  private fadeFrames = new WeakMap<HTMLMediaElement, number>();\n\n  /** Bumped on every activation so a slow resolve can't show a stale preview. */\n  private activation = 0;\n\n  protected willUpdate(changed: PropertyValues<this>): void {\n    // Release while the media elements are still in the DOM.\n    if (changed.has('active') && !this.active) this.stop();\n  }\n\n  protected updated(changed: PropertyValues<this>): void {\n    if (changed.has('active') || changed.has('identifier')) {\n      if (this.active) {\n        this.stop();\n        this.start();\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.stop();\n  }\n\n  private async start(): Promise<void> {\n    if (!this.identifier || !this.mediatype) return;\n    const activation = ++this.activation;\n    const media = await resolvePreviewMedia(\n      this.identifier,\n      this.mediatype,\n      this.baseUrl,\n      this.options,\n    );\n    if (activation !== this.activation || !this.active) return;\n\n    this.media = media;\n    this.slideUrls = media.kind === 'slides' ? media.urls : [];\n    this.slide = 0;\n    this.ready = media.kind === 'zoom' || media.kind === 'audio';\n    await this.updateComplete;\n    if (activation !== this.activation) return;\n\n    if (media.kind === 'slides') this.startSlides();\n    if (media.kind === 'audio' && this.options.sound) this.playSnippet();\n    if (media.kind === 'video') {\n      this.frameTimer = window.setTimeout(\n        () => this.useFallbackFrames(),\n        FIRST_FRAME_TIMEOUT_MS,\n      );\n    }\n  }\n\n  private stop(): void {\n    this.activation += 1;\n    window.clearInterval(this.slideTimer);\n    window.clearTimeout(this.frameTimer);\n    this.releaseMedia(this.video);\n    this.releaseMedia(this.audio);\n    this.media = undefined;\n    this.slideUrls = [];\n    this.ready = false;\n    this.audible = false;\n  }\n\n  /**\n   * Stops a media element: a short fade-out when it is audible, then pause and\n   * drop the source so the browser stops downloading it.\n   */\n  private releaseMedia(el?: HTMLMediaElement): void {\n    if (!el) return;\n    this.cancelFade(el);\n    const finish = () => {\n      el.pause();\n      el.removeAttribute('src');\n      el.load();\n    };\n    if (el.paused || el.muted || el.volume === 0) {\n      finish();\n      return;\n    }\n    this.fade(el, 0, FADE_OUT_MS, finish);\n  }\n\n  private cancelFade(el: HTMLMediaElement): void {\n    const frame = this.fadeFrames.get(el);\n    if (frame !== undefined) window.cancelAnimationFrame(frame);\n    this.fadeFrames.delete(el);\n  }\n\n  /** Ramps a media element's volume to `target` over `ms`. */\n  private fade(\n    el: HTMLMediaElement,\n    target: number,\n    ms: number,\n    done?: () => void,\n  ): void {\n    this.cancelFade(el);\n    const from = el.volume;\n    const t0 = performance.now();\n    const step = (now: number) => {\n      const t = Math.min(1, (now - t0) / ms);\n      el.volume = from + (target - from) * t;\n      if (t < 1) this.fadeFrames.set(el, window.requestAnimationFrame(step));\n      else {\n        this.fadeFrames.delete(el);\n        done?.();\n      }\n    };\n    this.fadeFrames.set(el, window.requestAnimationFrame(step));\n  }\n\n  /**\n   * Starts a media element, with sound when the options ask for it. A browser\n   * that refuses audible playback gets a muted one instead.\n   */\n  private async playMedia(\n    el: HTMLMediaElement,\n    activation: number,\n  ): Promise<boolean> {\n    if (this.options.sound) {\n      try {\n        el.muted = false;\n        el.volume = 0;\n        await el.play();\n        if (activation !== this.activation) return true;\n        this.audible = true;\n        this.fade(el, MAX_VOLUME, FADE_IN_MS);\n        return true;\n      } catch {\n        // Refused, so play it muted below.\n      }\n    }\n    try {\n      el.muted = true;\n      await el.play();\n      return true;\n    } catch {\n      // A stopped preview isn't a failure; only a current one needs the frames.\n      return activation !== this.activation;\n    }\n  }\n\n  /** Swaps a clip that is slow or unplayable for the item's frame thumbnails. */\n  private useFallbackFrames(): void {\n    window.clearTimeout(this.frameTimer);\n    if (this.media?.kind !== 'video') return;\n    const urls = this.media.fallbackUrls;\n    this.releaseMedia(this.video);\n    this.audible = false;\n    if (urls.length > 1) {\n      this.media = { kind: 'slides', fit: 'cover', urls };\n      this.slideUrls = urls;\n      this.slide = 0;\n      this.ready = false;\n      const { activation } = this;\n      this.updateComplete.then(() => {\n        if (activation === this.activation) this.startSlides();\n      });\n    } else {\n      this.media = { kind: 'zoom' };\n      this.ready = true;\n    }\n  }\n\n  private startSlides(): void {\n    window.clearInterval(this.slideTimer);\n    this.slideTimer = window.setInterval(() => {\n      const loaded = this.loadedSlides();\n      if (loaded.length < 2) return;\n      let next = this.slide;\n      do {\n        next = (next + 1) % this.slideUrls.length;\n      } while (!loaded.includes(next));\n      this.slide = next;\n    }, SLIDE_INTERVAL_MS);\n  }\n\n  private loadedSlides(): number[] {\n    const imgs = [...(this.shadowRoot?.querySelectorAll('.slides img') ?? [])];\n    return imgs.flatMap((img, i) =>\n      (img as HTMLImageElement).complete &&\n      (img as HTMLImageElement).naturalWidth\n        ? [i]\n        : [],\n    );\n  }\n\n  private onSlideError(url: string): void {\n    this.slideUrls = this.slideUrls.filter(u => u !== url);\n    this.slide = 0;\n    if (this.slideUrls.length < 2) {\n      window.clearInterval(this.slideTimer);\n      this.media = { kind: 'zoom' };\n      this.ready = true;\n    }\n  }\n\n  private onSlideLoad(): void {\n    this.ready = true;\n  }\n\n  private onVideoPlaying(): void {\n    window.clearTimeout(this.frameTimer);\n    this.ready = true;\n  }\n\n  /** Loops the clip within its start-to-start+clip-length window. */\n  private onVideoTimeUpdate(): void {\n    const video = this.video;\n    if (\n      this.media?.kind === 'video' &&\n      video &&\n      video.currentTime >= this.media.start + PREVIEW_CLIP_SECONDS\n    ) {\n      video.currentTime = this.media.start;\n    }\n  }\n\n  private async onVideoLoaded(): Promise<void> {\n    const { video, activation } = this;\n    if (video && !(await this.playMedia(video, activation))) {\n      this.useFallbackFrames();\n    }\n  }\n\n  private async playSnippet(): Promise<void> {\n    if (this.audio) await this.playMedia(this.audio, this.activation);\n  }\n\n  render() {\n    if (!this.active || !this.media) return nothing;\n    return html`<div\n      class=\"layer ${this.media.kind} ${this.ready ? 'ready' : ''}\"\n      aria-hidden=\"true\"\n    >\n      ${this.mediaTemplate(this.media)} ${this.soundBadgeTemplate}\n    </div>`;\n  }\n\n  /** A muted-speaker hint, so people know a clip or snippet could have sound. */\n  private get soundBadgeTemplate() {\n    const kind = this.media?.kind;\n    if ((kind !== 'video' && kind !== 'audio') || this.audible) return nothing;\n    return html`<span class=\"badge\" title=${msg('Sound is off')}>\n      <svg viewBox=\"0 0 24 24\" width=\"14\" height=\"14\" aria-hidden=\"true\">\n        <path\n          fill=\"currentColor\"\n          d=\"M3 9v6h4l5 5V4L7 9H3zm13.6 3 2.7-2.7-1.4-1.4-2.7 2.7-2.7-2.7-1.4 1.4 2.7 2.7-2.7 2.7 1.4 1.4 2.7-2.7 2.7 2.7 1.4-1.4-2.7-2.7z\"\n        />\n      </svg>\n    </span>`;\n  }\n\n  private mediaTemplate(media: TilePreviewMedia) {\n    switch (media.kind) {\n      case 'video':\n        return html`<video\n          muted\n          loop\n          playsinline\n          preload=\"auto\"\n          src=\"${media.src}#t=${media.start}\"\n          @loadeddata=${this.onVideoLoaded}\n          @error=${this.useFallbackFrames}\n          @playing=${this.onVideoPlaying}\n          @timeupdate=${this.onVideoTimeUpdate}\n        ></video>`;\n      case 'slides':\n        return html`<div class=\"slides ${media.fit}\">\n          ${this.slideUrls.map(\n            (url, i) =>\n              html`<img\n                src=${url}\n                alt=\"\"\n                class=${i === this.slide ? 'on' : ''}\n                @load=${this.onSlideLoad}\n                @error=${() => this.onSlideError(url)}\n              />`,\n          )}\n        </div>`;\n      case 'audio':\n        return html`\n          ${media.waveform\n            ? html`<img class=\"waveform\" src=${media.waveform} alt=\"\" />`\n            : html`<div class=\"bars\">\n                ${Array.from(\n                  { length: 12 },\n                  (_, i) =>\n                    html`<span style=\"animation-delay:${i * -97}ms\"></span>`,\n                )}\n              </div>`}\n          <div class=\"playhead\"></div>\n          ${this.options.sound\n            ? html`<audio\n                preload=\"auto\"\n                src=\"${media.src}#t=${media.start}\"\n              ></audio>`\n            : nothing}\n        `;\n      default:\n        return html`<img\n          class=\"pan\"\n          src=${ifDefined(this.thumbnailUrl)}\n          alt=\"\"\n        />`;\n    }\n  }\n\n  static styles = css`\n    :host {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      overflow: hidden;\n      border-radius: inherit;\n    }\n\n    .layer {\n      position: absolute;\n      inset: 0;\n      opacity: 0;\n      transition: opacity 200ms ease-out;\n    }\n\n    .layer.ready {\n      opacity: 1;\n    }\n\n    video,\n    .slides img {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    .slides {\n      position: absolute;\n      inset: 0;\n      background: #fff;\n    }\n\n    .slides.contain img {\n      object-fit: contain;\n    }\n\n    .slides img {\n      opacity: 0;\n    }\n\n    .slides img.on {\n      opacity: 1;\n    }\n\n    .audio {\n      background: #10161b;\n    }\n\n    .waveform {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: fill;\n      filter: invert(1) hue-rotate(180deg);\n      opacity: 0.85;\n    }\n\n    .badge {\n      position: absolute;\n      left: 6px;\n      bottom: 6px;\n      display: flex;\n      padding: 3px;\n      border-radius: 4px;\n      color: #fff;\n      background: rgb(0 0 0 / 0.65);\n    }\n\n    .playhead {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      width: 2px;\n      background: #f0a500;\n      box-shadow: 0 0 8px #f0a500;\n      animation: scan 2.4s linear infinite;\n    }\n\n    .bars {\n      position: absolute;\n      inset: 20% 10%;\n      display: flex;\n      gap: 4px;\n      align-items: end;\n    }\n\n    .bars span {\n      flex: 1;\n      height: 30%;\n      background: #5bb8e0;\n      animation: bounce 700ms ease-in-out infinite alternate;\n    }\n\n    .pan {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      object-fit: contain;\n      animation: pan 6s ease-in-out infinite alternate;\n    }\n\n    @keyframes pan {\n      from {\n        transform: scale(1) translate(0, 0);\n      }\n      to {\n        transform: scale(1.3) translate(-5%, -4%);\n      }\n    }\n\n    @keyframes scan {\n      from {\n        left: 0;\n      }\n      to {\n        left: 100%;\n      }\n    }\n\n    @keyframes bounce {\n      to {\n        height: 95%;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .layer {\n        transition: none;\n      }\n\n      .playhead,\n      .pan,\n      .bars span {\n        animation: none;\n      }\n    }\n  `;\n}\n"]}

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

@@ -14,6 +14,7 @@ import type { TileHoverPane } from './hover/tile-hover-pane';
 import { BaseTileComponent } from './base-tile-component';
 import { LayoutType } from './models';
 import { HoverPaneProperties, HoverPaneProviderInterface } from './hover/hover-pane-controller';
+import type { TilePreviewOptions } from './preview/tile-preview-media';
 export declare class TileDispatcher extends BaseTileComponent implements SharedResizeObserverResizeHandlerInterface, HoverPaneProviderInterface {
     tileDisplayMode?: TileDisplayMode;
     isManageView: boolean;
@@ -24,6 +25,10 @@ export declare class TileDispatcher extends BaseTileComponent implements SharedR
     layoutType: LayoutType;
     /** Whether this tile should include a hover pane at all (for applicable tile modes) */
     enableHoverPane: boolean;
+    /** Whether hovering, focusing or long-pressing this tile starts a live preview */
+    enableTilePreview: boolean;
+    tilePreviewOptions: TilePreviewOptions;
+    private previewController;
     manageCheckTitle: string;
     private hoverPaneController?;
     private container;
@@ -45,6 +50,8 @@ export declare class TileDispatcher extends BaseTileComponent implements SharedR
      * (e.g., whether mouse listeners should be attached, etc.)
      */
     private get shouldPrepareHoverPane();
+    /** Only plain item tiles preview: not collections, accounts, searches or gated items. */
+    private get shouldPreview();
     private get isHoverEnabled();
     /**
      * Whether the info button should be shown on this tile.

package/dist/src/tiles/tile-dispatcher.js

@@ -17,6 +17,7 @@ import { BaseTileComponent } from './base-tile-component';
 import { HoverPaneController, } from './hover/hover-pane-controller';
 import { srOnlyStyle } from '../styles/sr-only';
 import { tileActionStyles } from '../styles/tile-action-styles';
+import { PREVIEW_PANE_DELAY_MS, TilePreviewController, } from './preview/tile-preview-controller';
 let TileDispatcher = class TileDispatcher extends BaseTileComponent {
     constructor() {
         /*
@@ -43,6 +44,12 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
         this.layoutType = 'default';
         /** Whether this tile should include a hover pane at all (for applicable tile modes) */
         this.enableHoverPane = false;
+        /** Whether hovering, focusing or long-pressing this tile starts a live preview */
+        this.enableTilePreview = false;
+        this.tilePreviewOptions = {};
+        this.previewController = new TilePreviewController(this, {
+            enabled: () => this.shouldPreview,
+        });
         this.manageCheckTitle = msg('Remove this item from the list');
         /**
          * When the mouse enters the grid-mode tile actions area, dispatch a
@@ -90,6 +97,8 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
             this.hoverPaneController = new HoverPaneController(this, {
                 mobileBreakpoint: this.mobileBreakpoint,
                 enableLongPress: false,
+                // A playing preview gets the tile to itself; the info pane follows later.
+                showDelay: () => (this.shouldPreview ? PREVIEW_PANE_DELAY_MS : 300),
             });
         }
     }
@@ -170,6 +179,18 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
             !this.model?.captureDates // don't show hover panes on web archive tiles
         );
     }
+    /** Only plain item tiles preview: not collections, accounts, searches or gated items. */
+    get shouldPreview() {
+        const { model } = this;
+        return (this.enableTilePreview &&
+            this.tileDisplayMode === 'grid' &&
+            !this.isManageView &&
+            !!model?.identifier &&
+            !['collection', 'account', 'search'].includes(model.mediatype) &&
+            !model.captureDates &&
+            (this.suppressBlurring ||
+                (!model.contentWarning && !(model.loginRequired && !this.loggedIn))));
+    }
     get isHoverEnabled() {
         return window.matchMedia('(hover: hover)').matches;
     }
@@ -210,6 +231,8 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
         });
     }
     updated(props) {
+        if (!this.shouldPreview)
+            this.previewController.deactivate();
         if (props.has('resizeObserver')) {
             const previousObserver = props.get('resizeObserver');
             this.stopResizeObservation(previousObserver);
@@ -342,6 +365,8 @@ let TileDispatcher = class TileDispatcher extends BaseTileComponent {
               ?showTvClips=${this.showTvClips}
               ?showInfoButton=${this.shouldShowInfoButton}
               ?useLocalTime=${this.useLocalTime}
+              ?previewActive=${this.previewController.active}
+              .previewOptions=${this.tilePreviewOptions}
               @infoButtonPressed=${this.tileInfoButtonPressed}
             >
             </item-tile>`;
@@ -557,6 +582,12 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], TileDispatcher.prototype, "enableHoverPane", void 0);
+__decorate([
+    property({ type: Boolean })
+], TileDispatcher.prototype, "enableTilePreview", void 0);
+__decorate([
+    property({ type: Object })
+], TileDispatcher.prototype, "tilePreviewOptions", void 0);
 __decorate([
     property({ type: String })
 ], TileDispatcher.prototype, "manageCheckTitle", void 0);