@internetarchive/elements 0.2.14-webdev-9022.0 → 0.4.0

package/dist/src/elements/ia-transcript-view/ia-transcript-view.js

@@ -0,0 +1,565 @@
+var IATranscriptView_1;
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { msg } from '@lit/localize';
+import { formatDuration } from './duration-formatter.js';
+import './ia-transcript-entry.js';
+/**
+ * Event names emitted by this component
+ */
+const Events = {
+    TranscriptEntrySelected: 'transcriptEntrySelected',
+    CurrentEntriesUpdated: 'currentEntriesUpdated',
+    AutoScrollChanged: 'autoScrollChanged',
+};
+/** How long a scroll animation runs, in seconds */
+const SCROLL_DURATION_SECONDS = 1;
+/**
+ * A scrolling transcript that follows playback.
+ *
+ * It keeps itself scrolled to whatever is being spoken, steps aside when the
+ * listener scrolls by hand, and picks the job back up once they've stopped.
+ */
+let IATranscriptView = IATranscriptView_1 = class IATranscriptView extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Playback position, in seconds into the track */
+        this.currentTime = 0;
+        /** How much room to leave above the entry being spoken, in pixels */
+        this.topContextHeight = 50;
+        /** How much room to leave below the entry being spoken, in pixels */
+        this.bottomContextHeight = 50;
+        /** Whether the transcript follows playback */
+        this.autoScroll = true;
+        /** Which search result is currently being looked at */
+        this.selectedSearchResultIndex = 0;
+        /** Whether to outline the context zones, for working on the scrolling */
+        this.showContextZones = false;
+        /** How long to wait after a manual scroll before following playback again */
+        this.scrollTimerDelay = 15000;
+        this.timeScrollTop = 0;
+        this.currentEntries = [];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this.scrollResumeTimerId);
+        this.cancelScrollAnimation();
+    }
+    render() {
+        return html `
+      <div class="container">
+        ${this.showContextZones ? this.contextZoneTemplates : nothing}
+
+        <div
+          class="scroll-container"
+          id="scroll-container"
+          @wheel=${this.didScroll}
+          @touchmove=${this.didScroll}
+        >
+          <div class="col time">${this.timeDisplayTemplate}</div>
+
+          <div class="col">
+            ${this.autoScrollButtonTemplate}
+            ${this.transcriptEntries.map((entry) => this.transcriptEntryTemplate(entry))}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    /** Scrolls the selected search result into view. */
+    scrollToSelectedSearchResult() {
+        const { selectedSearchResult } = this;
+        if (!selectedSearchResult)
+            return;
+        this.autoScroll = false;
+        this.scrollToElement(selectedSearchResult);
+    }
+    /** The id of the entry starting closest to a given time, if there is one. */
+    entryIdentifierClosestToTime(time) {
+        const entries = this.transcriptEntries;
+        if (entries.length === 0)
+            return null;
+        let closest = entries[0];
+        let smallestDelta = Math.abs(time - closest.start);
+        for (const entry of entries) {
+            const delta = Math.abs(time - entry.start);
+            if (delta < smallestDelta) {
+                smallestDelta = delta;
+                closest = entry;
+            }
+        }
+        return closest.id;
+    }
+    get autoScrollButtonTemplate() {
+        return html `
+      <button
+        type="button"
+        class="auto-scroll-button ${this.autoScroll ? 'hidden' : ''}"
+        @click=${this.enableAutoScroll}
+      >
+        ${msg('Scroll text with audio')}
+      </button>
+    `;
+    }
+    get timeDisplayTemplate() {
+        return html `
+      <div class="time-display" style="top: ${this.timeScrollTop}px">
+        ${formatDuration(this.currentTime)}
+      </div>
+    `;
+    }
+    transcriptEntryTemplate(entry) {
+        const isActive = this.currentEntries.some((currentEntry) => currentEntry.id === entry.id);
+        return html `
+      <ia-transcript-entry
+        .entry=${entry}
+        ?isActive=${isActive}
+        ?isSelected=${entry.searchMatchIndex === this.selectedSearchResultIndex}
+        ?isSearchResult=${entry.searchMatchIndex !== undefined}
+        ?isMusicEntry=${entry.isMusic}
+        isClickable
+        data-search-result-index=${ifDefined(entry.searchMatchIndex)}
+        data-identifier=${entry.id}
+        @click=${this.transcriptEntrySelected}
+      ></ia-transcript-entry>
+    `;
+    }
+    get contextZoneTemplates() {
+        return html `
+      <div
+        class="top context-overlay"
+        style="height: ${this.topContextHeight}px"
+      ></div>
+      <div
+        class="bottom context-overlay"
+        style="height: ${this.bottomContextHeight}px"
+      ></div>
+    `;
+    }
+    get transcriptEntries() {
+        return this.config?.entries ?? [];
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('currentTime'))
+            this.handleCurrentTimeChange();
+        if (changedProperties.has('selectedSearchResultIndex')) {
+            this.scrollToSelectedSearchResult();
+        }
+        if (changedProperties.has('currentEntries')) {
+            this.scrollToClosestEntry();
+            this.updateTimePosition();
+        }
+        if (changedProperties.has('autoScroll')) {
+            this.dispatchEvent(new CustomEvent(Events.AutoScrollChanged, {
+                detail: { autoScroll: this.autoScroll },
+            }));
+        }
+        if (changedProperties.has('config')) {
+            this.selectedSearchResultIndex = 0;
+            this.scrollToSelectedSearchResult();
+        }
+    }
+    transcriptEntrySelected(e) {
+        const { entry } = e.currentTarget;
+        if (!entry)
+            return;
+        this.dispatchEvent(new CustomEvent(Events.TranscriptEntrySelected, { detail: { entry } }));
+        if (entry.searchMatchIndex !== undefined) {
+            this.selectedSearchResultIndex = entry.searchMatchIndex;
+        }
+        this.autoScroll = false;
+    }
+    /**
+     * Works out which entries are being spoken now.
+     *
+     * Runs on every time update, several times a second, so it only touches the
+     * rendered state when the set of entries has actually changed.
+     */
+    handleCurrentTimeChange() {
+        const entries = this.transcriptEntries;
+        if (entries.length === 0)
+            return;
+        const activeEntries = entries.filter((entry) => this.currentTime >= entry.start && this.currentTime <= entry.end);
+        if (IATranscriptView_1.entryArraysMatch(activeEntries, this.currentEntries)) {
+            return;
+        }
+        this.dispatchEvent(new Event(Events.CurrentEntriesUpdated));
+        this.currentEntries = activeEntries;
+    }
+    static entryArraysMatch(a, b) {
+        if (a.length !== b.length)
+            return false;
+        const aIds = a.map((entry) => entry.id).sort((x, y) => x - y);
+        const bIds = b.map((entry) => entry.id).sort((x, y) => x - y);
+        return aIds.every((id, index) => bIds[index] === id);
+    }
+    elementClosestToTime(time) {
+        const closestIdentifier = this.entryIdentifierClosestToTime(time);
+        // Compared against null rather than tested for truthiness, so an entry
+        // whose id is 0 is still found.
+        if (closestIdentifier === null)
+            return null;
+        return this.elementForIdentifier(closestIdentifier);
+    }
+    elementForIdentifier(identifier) {
+        return (this.shadowRoot?.querySelector(`ia-transcript-entry[data-identifier="${identifier}"]`) ?? null);
+    }
+    /**
+     * Steps auto-scroll aside when the listener scrolls by hand, and arranges to
+     * pick it back up once they've left it alone for a while.
+     *
+     * A wheel that the transcript cannot act on, such as a wheel-up when it is
+     * already at the top, is ignored: the listener sees nothing move, so taking
+     * auto-scroll away from them reads as the page misbehaving.
+     */
+    didScroll(event) {
+        if (event instanceof WheelEvent && !this.canScrollBy(event.deltaY))
+            return;
+        this.autoScroll = false;
+        clearTimeout(this.scrollResumeTimerId);
+        this.scrollResumeTimerId = setTimeout(() => {
+            this.autoScroll = true;
+        }, this.scrollTimerDelay);
+    }
+    /** Whether the transcript has anywhere left to go in `deltaY`'s direction. */
+    canScrollBy(deltaY) {
+        const { scrollView } = this;
+        if (!scrollView)
+            return false;
+        const { scrollTop, scrollHeight, clientHeight } = scrollView;
+        if (deltaY < 0)
+            return scrollTop > 0;
+        if (deltaY > 0)
+            return Math.ceil(scrollTop + clientHeight) < scrollHeight;
+        return false;
+    }
+    enableAutoScroll() {
+        this.autoScroll = true;
+        this.scrollToClosestEntry();
+    }
+    get activeTranscriptEntry() {
+        return (this.shadowRoot?.querySelector('ia-transcript-entry[isActive]') ?? null);
+    }
+    get selectedSearchResult() {
+        return (this.shadowRoot?.querySelector(`ia-transcript-entry[data-search-result-index="${this.selectedSearchResultIndex}"]`) ?? null);
+    }
+    get closestEntryToCurrentTime() {
+        return (this.activeTranscriptEntry ?? this.elementClosestToTime(this.currentTime));
+    }
+    scrollToClosestEntry() {
+        if (!this.autoScroll)
+            return;
+        const closestEntry = this.closestEntryToCurrentTime;
+        if (closestEntry)
+            this.scrollToElement(closestEntry);
+    }
+    /**
+     * Scrolls an entry to the top of the focus area, if it isn't in there
+     * already.
+     */
+    scrollToElement(element) {
+        const { scrollView } = this;
+        if (!scrollView)
+            return;
+        const containerRect = scrollView.getBoundingClientRect();
+        const entryRect = element.getBoundingClientRect();
+        const focusBottom = containerRect.height - this.bottomContextHeight;
+        const isBelowFocusArea = entryRect.bottom > containerRect.top + focusBottom;
+        const isAboveFocusArea = entryRect.top < containerRect.top;
+        if (!isBelowFocusArea && !isAboveFocusArea)
+            return;
+        this.scrollToOffset(entryRect.top -
+            containerRect.top +
+            scrollView.scrollTop -
+            this.topContextHeight);
+    }
+    updateTimePosition() {
+        const scrollToEntry = this.closestEntryToCurrentTime;
+        if (!scrollToEntry)
+            return;
+        const parent = scrollToEntry.parentNode;
+        if (!parent)
+            return;
+        this.timeScrollTop =
+            scrollToEntry.getBoundingClientRect().top -
+                parent.getBoundingClientRect().top;
+    }
+    /**
+     * Eases the scroll container to an offset.
+     *
+     * Only one animation runs at a time: playback ticks arrive faster than an
+     * animation finishes, and two loops writing `scrollTop` fight each other.
+     */
+    scrollToOffset(offset) {
+        const { scrollView } = this;
+        if (!scrollView)
+            return;
+        this.cancelScrollAnimation();
+        const start = scrollView.scrollTop;
+        const change = offset - start;
+        const startTime = performance.now();
+        const easeInOutQuad = (time) => time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time;
+        const animate = () => {
+            const elapsed = (performance.now() - startTime) / 1000;
+            // Clamped so the last frame lands exactly on the target rather than
+            // overshooting past it.
+            const progress = Math.min(elapsed / SCROLL_DURATION_SECONDS, 1);
+            scrollView.scrollTop = start + change * easeInOutQuad(progress);
+            if (progress < 1) {
+                this.scrollAnimationId = requestAnimationFrame(animate);
+            }
+            else {
+                this.scrollAnimationId = undefined;
+            }
+        };
+        animate();
+    }
+    cancelScrollAnimation() {
+        if (this.scrollAnimationId === undefined)
+            return;
+        cancelAnimationFrame(this.scrollAnimationId);
+        this.scrollAnimationId = undefined;
+    }
+    static get styles() {
+        return css `
+      :host {
+        --transcript-height--: var(--ia-theme-transcript-height, 200px);
+
+        --transcript-normal-text-color--: var(
+          --ia-theme-transcript-normal-text-color,
+          gray
+        );
+        --transcript-active-text-color--: var(
+          --ia-theme-transcript-active-text-color,
+          white
+        );
+        --transcript-hover-text-color--: var(
+          --ia-theme-transcript-hover-text-color,
+          silver
+        );
+
+        --transcript-music-normal-text-color--: var(
+          --ia-theme-transcript-music-normal-text-color,
+          gray
+        );
+        --transcript-music-active-text-color--: var(
+          --ia-theme-transcript-music-active-text-color,
+          white
+        );
+        --transcript-music-hover-text-color--: var(
+          --ia-theme-transcript-music-hover-text-color,
+          silver
+        );
+
+        --transcript-search-result-inactive-border-color--: var(
+          --ia-theme-transcript-search-result-inactive-border-color,
+          gray
+        );
+        --transcript-search-result-active-border-color--: var(
+          --ia-theme-transcript-search-result-active-border-color,
+          green
+        );
+
+        --transcript-time-color--: var(--ia-theme-transcript-time-color, white);
+        --transcript-time-column-width--: var(
+          --ia-theme-transcript-time-column-width,
+          3rem
+        );
+        --transcript-time-font-size--: var(
+          --ia-theme-transcript-time-font-size,
+          1em
+        );
+        --transcript-time-line-height--: var(
+          --ia-theme-transcript-time-line-height,
+          1em
+        );
+        --transcript-time-display--: var(
+          --ia-theme-transcript-time-display,
+          block
+        );
+
+        --transcript-auto-scroll-button-color--: var(
+          --ia-theme-transcript-auto-scroll-button-color,
+          black
+        );
+        --transcript-auto-scroll-button-background--: var(
+          --ia-theme-transcript-auto-scroll-button-background,
+          white
+        );
+        --transcript-auto-scroll-button-width--: var(
+          --ia-theme-transcript-auto-scroll-button-width,
+          12rem
+        );
+        --transcript-auto-scroll-button-font-size--: var(
+          --ia-theme-transcript-auto-scroll-button-font-size,
+          1em
+        );
+
+        color: var(--transcript-normal-text-color--);
+      }
+
+      .container {
+        position: relative;
+      }
+
+      .auto-scroll-button {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 1rem;
+        margin: auto;
+        width: var(--transcript-auto-scroll-button-width--);
+        border-radius: 1em;
+        border: 0;
+        display: inline-block;
+        color: var(--transcript-auto-scroll-button-color--);
+        background-color: var(--transcript-auto-scroll-button-background--);
+        font-size: var(--transcript-auto-scroll-button-font-size--);
+        cursor: pointer;
+        z-index: 10;
+      }
+
+      .auto-scroll-button.hidden {
+        display: none;
+      }
+
+      .context-overlay {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 0;
+        /* Purely a guide. It sits over the top and bottom of the scroll area,
+           so without this it would swallow the wheel and the entry clicks
+           there, breaking the scrolling it exists to help you look at. */
+        pointer-events: none;
+      }
+
+      .context-overlay.top {
+        top: 0;
+        border-bottom: 1px solid green;
+      }
+
+      .context-overlay.bottom {
+        bottom: 0;
+        border-top: 1px solid green;
+      }
+
+      .time {
+        display: var(--transcript-time-display--);
+        flex: 0 0 var(--transcript-time-column-width--);
+        color: var(--transcript-time-color--);
+        position: relative;
+      }
+
+      .time-display {
+        position: absolute;
+        top: 0;
+        font-size: var(--transcript-time-font-size--);
+        line-height: var(--transcript-time-line-height--);
+        transition: top 1s;
+      }
+
+      .scroll-container {
+        display: flex;
+        overflow-y: auto;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        height: var(--transcript-height--);
+      }
+
+      .scroll-container::-webkit-scrollbar {
+        display: none;
+      }
+
+      ia-transcript-entry {
+        cursor: pointer;
+      }
+
+      ia-transcript-entry:hover {
+        color: var(--transcript-hover-text-color--);
+      }
+
+      ia-transcript-entry[ismusicentry] {
+        color: var(--transcript-music-normal-text-color--);
+        display: block;
+        font-style: italic;
+      }
+
+      ia-transcript-entry[ismusicentry]:hover {
+        color: var(--transcript-music-hover-text-color--);
+      }
+
+      ia-transcript-entry[ismusicentry][isactive] {
+        color: var(--transcript-music-active-text-color--);
+      }
+
+      ia-transcript-entry[isactive] {
+        color: var(--transcript-active-text-color--);
+      }
+
+      ia-transcript-entry[issearchresult] {
+        /* Inline-block, or the outline adds a space to the right of the text */
+        display: inline-block;
+        padding: 0 5px;
+        position: relative;
+      }
+
+      ia-transcript-entry[issearchresult]:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border: 2px solid
+          var(--transcript-search-result-inactive-border-color--);
+        border-radius: 5px;
+      }
+
+      ia-transcript-entry[issearchresult][isselected]:after {
+        border: 2px solid var(--transcript-search-result-active-border-color--);
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], IATranscriptView.prototype, "config", void 0);
+__decorate([
+    property({ type: Number })
+], IATranscriptView.prototype, "currentTime", void 0);
+__decorate([
+    property({ type: Number })
+], IATranscriptView.prototype, "topContextHeight", void 0);
+__decorate([
+    property({ type: Number })
+], IATranscriptView.prototype, "bottomContextHeight", void 0);
+__decorate([
+    property({ type: Boolean })
+], IATranscriptView.prototype, "autoScroll", void 0);
+__decorate([
+    property({ type: Number })
+], IATranscriptView.prototype, "selectedSearchResultIndex", void 0);
+__decorate([
+    property({ type: Boolean })
+], IATranscriptView.prototype, "showContextZones", void 0);
+__decorate([
+    property({ type: Number })
+], IATranscriptView.prototype, "scrollTimerDelay", void 0);
+__decorate([
+    state()
+], IATranscriptView.prototype, "timeScrollTop", void 0);
+__decorate([
+    state()
+], IATranscriptView.prototype, "currentEntries", void 0);
+__decorate([
+    query('#scroll-container')
+], IATranscriptView.prototype, "scrollView", void 0);
+IATranscriptView = IATranscriptView_1 = __decorate([
+    customElement('ia-transcript-view')
+], IATranscriptView);
+export { IATranscriptView };
+//# sourceMappingURL=ia-transcript-view.js.map

package/dist/src/elements/ia-transcript-view/ia-transcript-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-transcript-view.js","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/ia-transcript-view.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type CSSResultGroup,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { msg } from '@lit/localize';\n\nimport { formatDuration } from './duration-formatter';\nimport type { TranscriptConfig, TranscriptEntryConfig } from './models';\nimport type { IATranscriptEntry } from './ia-transcript-entry';\n\nimport './ia-transcript-entry';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  TranscriptEntrySelected: 'transcriptEntrySelected',\n  CurrentEntriesUpdated: 'currentEntriesUpdated',\n  AutoScrollChanged: 'autoScrollChanged',\n};\n\n/** How long a scroll animation runs, in seconds */\nconst SCROLL_DURATION_SECONDS = 1;\n\n/**\n * A scrolling transcript that follows playback.\n *\n * It keeps itself scrolled to whatever is being spoken, steps aside when the\n * listener scrolls by hand, and picks the job back up once they've stopped.\n */\n@customElement('ia-transcript-view')\nexport class IATranscriptView extends LitElement {\n  /** The transcript to render */\n  @property({ type: Object }) config?: TranscriptConfig;\n\n  /** Playback position, in seconds into the track */\n  @property({ type: Number }) currentTime = 0;\n\n  /** How much room to leave above the entry being spoken, in pixels */\n  @property({ type: Number }) topContextHeight = 50;\n\n  /** How much room to leave below the entry being spoken, in pixels */\n  @property({ type: Number }) bottomContextHeight = 50;\n\n  /** Whether the transcript follows playback */\n  @property({ type: Boolean }) autoScroll = true;\n\n  /** Which search result is currently being looked at */\n  @property({ type: Number }) selectedSearchResultIndex = 0;\n\n  /** Whether to outline the context zones, for working on the scrolling */\n  @property({ type: Boolean }) showContextZones = false;\n\n  /** How long to wait after a manual scroll before following playback again */\n  @property({ type: Number }) scrollTimerDelay = 15000;\n\n  @state() private timeScrollTop = 0;\n\n  @state() private currentEntries: TranscriptEntryConfig[] = [];\n\n  @query('#scroll-container') private scrollView?: HTMLElement | null;\n\n  private scrollResumeTimerId?: ReturnType<typeof setTimeout>;\n\n  private scrollAnimationId?: number;\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    clearTimeout(this.scrollResumeTimerId);\n    this.cancelScrollAnimation();\n  }\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        ${this.showContextZones ? this.contextZoneTemplates : nothing}\n\n        <div\n          class=\"scroll-container\"\n          id=\"scroll-container\"\n          @wheel=${this.didScroll}\n          @touchmove=${this.didScroll}\n        >\n          <div class=\"col time\">${this.timeDisplayTemplate}</div>\n\n          <div class=\"col\">\n            ${this.autoScrollButtonTemplate}\n            ${this.transcriptEntries.map((entry) =>\n              this.transcriptEntryTemplate(entry),\n            )}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  /** Scrolls the selected search result into view. */\n  scrollToSelectedSearchResult(): void {\n    const { selectedSearchResult } = this;\n    if (!selectedSearchResult) return;\n\n    this.autoScroll = false;\n    this.scrollToElement(selectedSearchResult);\n  }\n\n  /** The id of the entry starting closest to a given time, if there is one. */\n  entryIdentifierClosestToTime(time: number): number | null {\n    const entries = this.transcriptEntries;\n    if (entries.length === 0) return null;\n\n    let closest = entries[0];\n    let smallestDelta = Math.abs(time - closest.start);\n\n    for (const entry of entries) {\n      const delta = Math.abs(time - entry.start);\n      if (delta < smallestDelta) {\n        smallestDelta = delta;\n        closest = entry;\n      }\n    }\n\n    return closest.id;\n  }\n\n  private get autoScrollButtonTemplate(): TemplateResult {\n    return html`\n      <button\n        type=\"button\"\n        class=\"auto-scroll-button ${this.autoScroll ? 'hidden' : ''}\"\n        @click=${this.enableAutoScroll}\n      >\n        ${msg('Scroll text with audio')}\n      </button>\n    `;\n  }\n\n  private get timeDisplayTemplate(): TemplateResult {\n    return html`\n      <div class=\"time-display\" style=\"top: ${this.timeScrollTop}px\">\n        ${formatDuration(this.currentTime)}\n      </div>\n    `;\n  }\n\n  private transcriptEntryTemplate(\n    entry: TranscriptEntryConfig,\n  ): TemplateResult {\n    const isActive = this.currentEntries.some(\n      (currentEntry) => currentEntry.id === entry.id,\n    );\n\n    return html`\n      <ia-transcript-entry\n        .entry=${entry}\n        ?isActive=${isActive}\n        ?isSelected=${entry.searchMatchIndex === this.selectedSearchResultIndex}\n        ?isSearchResult=${entry.searchMatchIndex !== undefined}\n        ?isMusicEntry=${entry.isMusic}\n        isClickable\n        data-search-result-index=${ifDefined(entry.searchMatchIndex)}\n        data-identifier=${entry.id}\n        @click=${this.transcriptEntrySelected}\n      ></ia-transcript-entry>\n    `;\n  }\n\n  private get contextZoneTemplates(): TemplateResult {\n    return html`\n      <div\n        class=\"top context-overlay\"\n        style=\"height: ${this.topContextHeight}px\"\n      ></div>\n      <div\n        class=\"bottom context-overlay\"\n        style=\"height: ${this.bottomContextHeight}px\"\n      ></div>\n    `;\n  }\n\n  private get transcriptEntries(): TranscriptEntryConfig[] {\n    return this.config?.entries ?? [];\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('currentTime')) this.handleCurrentTimeChange();\n    if (changedProperties.has('selectedSearchResultIndex')) {\n      this.scrollToSelectedSearchResult();\n    }\n    if (changedProperties.has('currentEntries')) {\n      this.scrollToClosestEntry();\n      this.updateTimePosition();\n    }\n    if (changedProperties.has('autoScroll')) {\n      this.dispatchEvent(\n        new CustomEvent<{ autoScroll: boolean }>(Events.AutoScrollChanged, {\n          detail: { autoScroll: this.autoScroll },\n        }),\n      );\n    }\n    if (changedProperties.has('config')) {\n      this.selectedSearchResultIndex = 0;\n      this.scrollToSelectedSearchResult();\n    }\n  }\n\n  private transcriptEntrySelected(e: Event): void {\n    const { entry } = e.currentTarget as IATranscriptEntry;\n    if (!entry) return;\n\n    this.dispatchEvent(\n      new CustomEvent<{ entry: TranscriptEntryConfig }>(\n        Events.TranscriptEntrySelected,\n        { detail: { entry } },\n      ),\n    );\n\n    if (entry.searchMatchIndex !== undefined) {\n      this.selectedSearchResultIndex = entry.searchMatchIndex;\n    }\n    this.autoScroll = false;\n  }\n\n  /**\n   * Works out which entries are being spoken now.\n   *\n   * Runs on every time update, several times a second, so it only touches the\n   * rendered state when the set of entries has actually changed.\n   */\n  private handleCurrentTimeChange(): void {\n    const entries = this.transcriptEntries;\n    if (entries.length === 0) return;\n\n    const activeEntries = entries.filter(\n      (entry) =>\n        this.currentTime >= entry.start && this.currentTime <= entry.end,\n    );\n\n    if (IATranscriptView.entryArraysMatch(activeEntries, this.currentEntries)) {\n      return;\n    }\n\n    this.dispatchEvent(new Event(Events.CurrentEntriesUpdated));\n    this.currentEntries = activeEntries;\n  }\n\n  private static entryArraysMatch(\n    a: TranscriptEntryConfig[],\n    b: TranscriptEntryConfig[],\n  ): boolean {\n    if (a.length !== b.length) return false;\n\n    const aIds = a.map((entry) => entry.id).sort((x, y) => x - y);\n    const bIds = b.map((entry) => entry.id).sort((x, y) => x - y);\n\n    return aIds.every((id, index) => bIds[index] === id);\n  }\n\n  private elementClosestToTime(time: number): HTMLElement | null {\n    const closestIdentifier = this.entryIdentifierClosestToTime(time);\n    // Compared against null rather than tested for truthiness, so an entry\n    // whose id is 0 is still found.\n    if (closestIdentifier === null) return null;\n\n    return this.elementForIdentifier(closestIdentifier);\n  }\n\n  private elementForIdentifier(identifier: number): HTMLElement | null {\n    return (\n      this.shadowRoot?.querySelector(\n        `ia-transcript-entry[data-identifier=\"${identifier}\"]`,\n      ) ?? null\n    );\n  }\n\n  /**\n   * Steps auto-scroll aside when the listener scrolls by hand, and arranges to\n   * pick it back up once they've left it alone for a while.\n   *\n   * A wheel that the transcript cannot act on, such as a wheel-up when it is\n   * already at the top, is ignored: the listener sees nothing move, so taking\n   * auto-scroll away from them reads as the page misbehaving.\n   */\n  private didScroll(event: Event): void {\n    if (event instanceof WheelEvent && !this.canScrollBy(event.deltaY)) return;\n\n    this.autoScroll = false;\n\n    clearTimeout(this.scrollResumeTimerId);\n    this.scrollResumeTimerId = setTimeout(() => {\n      this.autoScroll = true;\n    }, this.scrollTimerDelay);\n  }\n\n  /** Whether the transcript has anywhere left to go in `deltaY`'s direction. */\n  private canScrollBy(deltaY: number): boolean {\n    const { scrollView } = this;\n    if (!scrollView) return false;\n\n    const { scrollTop, scrollHeight, clientHeight } = scrollView;\n    if (deltaY < 0) return scrollTop > 0;\n    if (deltaY > 0) return Math.ceil(scrollTop + clientHeight) < scrollHeight;\n    return false;\n  }\n\n  private enableAutoScroll(): void {\n    this.autoScroll = true;\n    this.scrollToClosestEntry();\n  }\n\n  private get activeTranscriptEntry(): HTMLElement | null {\n    return (\n      this.shadowRoot?.querySelector('ia-transcript-entry[isActive]') ?? null\n    );\n  }\n\n  private get selectedSearchResult(): HTMLElement | null {\n    return (\n      this.shadowRoot?.querySelector(\n        `ia-transcript-entry[data-search-result-index=\"${this.selectedSearchResultIndex}\"]`,\n      ) ?? null\n    );\n  }\n\n  private get closestEntryToCurrentTime(): HTMLElement | null {\n    return (\n      this.activeTranscriptEntry ?? this.elementClosestToTime(this.currentTime)\n    );\n  }\n\n  private scrollToClosestEntry(): void {\n    if (!this.autoScroll) return;\n\n    const closestEntry = this.closestEntryToCurrentTime;\n    if (closestEntry) this.scrollToElement(closestEntry);\n  }\n\n  /**\n   * Scrolls an entry to the top of the focus area, if it isn't in there\n   * already.\n   */\n  private scrollToElement(element: HTMLElement): void {\n    const { scrollView } = this;\n    if (!scrollView) return;\n\n    const containerRect = scrollView.getBoundingClientRect();\n    const entryRect = element.getBoundingClientRect();\n    const focusBottom = containerRect.height - this.bottomContextHeight;\n\n    const isBelowFocusArea = entryRect.bottom > containerRect.top + focusBottom;\n    const isAboveFocusArea = entryRect.top < containerRect.top;\n    if (!isBelowFocusArea && !isAboveFocusArea) return;\n\n    this.scrollToOffset(\n      entryRect.top -\n        containerRect.top +\n        scrollView.scrollTop -\n        this.topContextHeight,\n    );\n  }\n\n  private updateTimePosition(): void {\n    const scrollToEntry = this.closestEntryToCurrentTime;\n    if (!scrollToEntry) return;\n\n    const parent = scrollToEntry.parentNode as HTMLElement | null;\n    if (!parent) return;\n\n    this.timeScrollTop =\n      scrollToEntry.getBoundingClientRect().top -\n      parent.getBoundingClientRect().top;\n  }\n\n  /**\n   * Eases the scroll container to an offset.\n   *\n   * Only one animation runs at a time: playback ticks arrive faster than an\n   * animation finishes, and two loops writing `scrollTop` fight each other.\n   */\n  private scrollToOffset(offset: number): void {\n    const { scrollView } = this;\n    if (!scrollView) return;\n\n    this.cancelScrollAnimation();\n\n    const start = scrollView.scrollTop;\n    const change = offset - start;\n    const startTime = performance.now();\n\n    const easeInOutQuad = (time: number): number =>\n      time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time;\n\n    const animate = (): void => {\n      const elapsed = (performance.now() - startTime) / 1000;\n      // Clamped so the last frame lands exactly on the target rather than\n      // overshooting past it.\n      const progress = Math.min(elapsed / SCROLL_DURATION_SECONDS, 1);\n\n      scrollView.scrollTop = start + change * easeInOutQuad(progress);\n\n      if (progress < 1) {\n        this.scrollAnimationId = requestAnimationFrame(animate);\n      } else {\n        this.scrollAnimationId = undefined;\n      }\n    };\n\n    animate();\n  }\n\n  private cancelScrollAnimation(): void {\n    if (this.scrollAnimationId === undefined) return;\n\n    cancelAnimationFrame(this.scrollAnimationId);\n    this.scrollAnimationId = undefined;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --transcript-height--: var(--ia-theme-transcript-height, 200px);\n\n        --transcript-normal-text-color--: var(\n          --ia-theme-transcript-normal-text-color,\n          gray\n        );\n        --transcript-active-text-color--: var(\n          --ia-theme-transcript-active-text-color,\n          white\n        );\n        --transcript-hover-text-color--: var(\n          --ia-theme-transcript-hover-text-color,\n          silver\n        );\n\n        --transcript-music-normal-text-color--: var(\n          --ia-theme-transcript-music-normal-text-color,\n          gray\n        );\n        --transcript-music-active-text-color--: var(\n          --ia-theme-transcript-music-active-text-color,\n          white\n        );\n        --transcript-music-hover-text-color--: var(\n          --ia-theme-transcript-music-hover-text-color,\n          silver\n        );\n\n        --transcript-search-result-inactive-border-color--: var(\n          --ia-theme-transcript-search-result-inactive-border-color,\n          gray\n        );\n        --transcript-search-result-active-border-color--: var(\n          --ia-theme-transcript-search-result-active-border-color,\n          green\n        );\n\n        --transcript-time-color--: var(--ia-theme-transcript-time-color, white);\n        --transcript-time-column-width--: var(\n          --ia-theme-transcript-time-column-width,\n          3rem\n        );\n        --transcript-time-font-size--: var(\n          --ia-theme-transcript-time-font-size,\n          1em\n        );\n        --transcript-time-line-height--: var(\n          --ia-theme-transcript-time-line-height,\n          1em\n        );\n        --transcript-time-display--: var(\n          --ia-theme-transcript-time-display,\n          block\n        );\n\n        --transcript-auto-scroll-button-color--: var(\n          --ia-theme-transcript-auto-scroll-button-color,\n          black\n        );\n        --transcript-auto-scroll-button-background--: var(\n          --ia-theme-transcript-auto-scroll-button-background,\n          white\n        );\n        --transcript-auto-scroll-button-width--: var(\n          --ia-theme-transcript-auto-scroll-button-width,\n          12rem\n        );\n        --transcript-auto-scroll-button-font-size--: var(\n          --ia-theme-transcript-auto-scroll-button-font-size,\n          1em\n        );\n\n        color: var(--transcript-normal-text-color--);\n      }\n\n      .container {\n        position: relative;\n      }\n\n      .auto-scroll-button {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 1rem;\n        margin: auto;\n        width: var(--transcript-auto-scroll-button-width--);\n        border-radius: 1em;\n        border: 0;\n        display: inline-block;\n        color: var(--transcript-auto-scroll-button-color--);\n        background-color: var(--transcript-auto-scroll-button-background--);\n        font-size: var(--transcript-auto-scroll-button-font-size--);\n        cursor: pointer;\n        z-index: 10;\n      }\n\n      .auto-scroll-button.hidden {\n        display: none;\n      }\n\n      .context-overlay {\n        position: absolute;\n        left: 0;\n        width: 100%;\n        height: 0;\n        /* Purely a guide. It sits over the top and bottom of the scroll area,\n           so without this it would swallow the wheel and the entry clicks\n           there, breaking the scrolling it exists to help you look at. */\n        pointer-events: none;\n      }\n\n      .context-overlay.top {\n        top: 0;\n        border-bottom: 1px solid green;\n      }\n\n      .context-overlay.bottom {\n        bottom: 0;\n        border-top: 1px solid green;\n      }\n\n      .time {\n        display: var(--transcript-time-display--);\n        flex: 0 0 var(--transcript-time-column-width--);\n        color: var(--transcript-time-color--);\n        position: relative;\n      }\n\n      .time-display {\n        position: absolute;\n        top: 0;\n        font-size: var(--transcript-time-font-size--);\n        line-height: var(--transcript-time-line-height--);\n        transition: top 1s;\n      }\n\n      .scroll-container {\n        display: flex;\n        overflow-y: auto;\n        -ms-overflow-style: none;\n        scrollbar-width: none;\n        height: var(--transcript-height--);\n      }\n\n      .scroll-container::-webkit-scrollbar {\n        display: none;\n      }\n\n      ia-transcript-entry {\n        cursor: pointer;\n      }\n\n      ia-transcript-entry:hover {\n        color: var(--transcript-hover-text-color--);\n      }\n\n      ia-transcript-entry[ismusicentry] {\n        color: var(--transcript-music-normal-text-color--);\n        display: block;\n        font-style: italic;\n      }\n\n      ia-transcript-entry[ismusicentry]:hover {\n        color: var(--transcript-music-hover-text-color--);\n      }\n\n      ia-transcript-entry[ismusicentry][isactive] {\n        color: var(--transcript-music-active-text-color--);\n      }\n\n      ia-transcript-entry[isactive] {\n        color: var(--transcript-active-text-color--);\n      }\n\n      ia-transcript-entry[issearchresult] {\n        /* Inline-block, or the outline adds a space to the right of the text */\n        display: inline-block;\n        padding: 0 5px;\n        position: relative;\n      }\n\n      ia-transcript-entry[issearchresult]:after {\n        content: '';\n        display: block;\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        border: 2px solid\n          var(--transcript-search-result-inactive-border-color--);\n        border-radius: 5px;\n      }\n\n      ia-transcript-entry[issearchresult][isselected]:after {\n        border: 2px solid var(--transcript-search-result-active-border-color--);\n      }\n    `;\n  }\n}\n"]}

package/dist/src/elements/ia-transcript-view/models.d.ts

@@ -0,0 +1,34 @@
+/**
+ * One line of a transcript: a stretch of time and the words spoken in it.
+ */
+export declare class TranscriptEntryConfig {
+    /** Identifies this entry within its transcript. */
+    id: number;
+    /** When the entry starts, in seconds into the track. */
+    start: number;
+    /** When the entry ends, in seconds into the track. */
+    end: number;
+    /** Whether this stretch is music rather than speech. */
+    isMusic: boolean;
+    /** Where this entry falls in the search results, if it is one. */
+    searchMatchIndex?: number;
+    /** The transcribed words. */
+    rawText: string;
+    constructor(id: number, start: number, end: number, rawText: string, isMusic: boolean, searchMatchIndex?: number);
+    /**
+     * What to show for this entry.
+     *
+     * Music stretches carry no words worth reading, so they say so instead.
+     */
+    get displayText(): string;
+}
+/**
+ * A whole transcript, as an ordered list of entries.
+ */
+export declare class TranscriptConfig {
+    entries: TranscriptEntryConfig[];
+    constructor(entries: TranscriptEntryConfig[]);
+    /** Just the entries that matched the current search. */
+    get searchResults(): TranscriptEntryConfig[];
+}
+//# sourceMappingURL=models.d.ts.map

package/dist/src/elements/ia-transcript-view/models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/models.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,qBAAa,qBAAqB;IAChC,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAC;IAEX,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IAEd,sDAAsD;IACtD,GAAG,EAAE,MAAM,CAAC;IAEZ,wDAAwD;IACxD,OAAO,EAAE,OAAO,CAAC;IAEjB,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,6BAA6B;IAC7B,OAAO,EAAE,MAAM,CAAC;gBAGd,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,OAAO,EAChB,gBAAgB,CAAC,EAAE,MAAM;IAU3B;;;;OAIG;IACH,IAAI,WAAW,IAAI,MAAM,CAIxB;CACF;AAED;;GAEG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,EAAE,qBAAqB,EAAE,CAAM;gBAE1B,OAAO,EAAE,qBAAqB,EAAE;IAI5C,wDAAwD;IACxD,IAAI,aAAa,IAAI,qBAAqB,EAAE,CAE3C;CACF"}