@internetarchive/elements 0.2.14-webdev-9022.0 → 0.4.0

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

@@ -0,0 +1,38 @@
+import { msg } from '@lit/localize';
+/**
+ * One line of a transcript: a stretch of time and the words spoken in it.
+ */
+export class TranscriptEntryConfig {
+    constructor(id, start, end, rawText, isMusic, searchMatchIndex) {
+        this.id = id;
+        this.start = start;
+        this.end = end;
+        this.rawText = rawText;
+        this.isMusic = isMusic;
+        this.searchMatchIndex = searchMatchIndex;
+    }
+    /**
+     * What to show for this entry.
+     *
+     * Music stretches carry no words worth reading, so they say so instead.
+     */
+    get displayText() {
+        if (this.isMusic)
+            return msg('[Transcript unavailable]');
+        return this.rawText;
+    }
+}
+/**
+ * A whole transcript, as an ordered list of entries.
+ */
+export class TranscriptConfig {
+    constructor(entries) {
+        this.entries = [];
+        this.entries = entries;
+    }
+    /** Just the entries that matched the current search. */
+    get searchResults() {
+        return this.entries.filter((entry) => entry.searchMatchIndex !== undefined);
+    }
+}
+//# sourceMappingURL=models.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-transcript-view/models.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC;;GAEG;AACH,MAAM,OAAO,qBAAqB;IAmBhC,YACE,EAAU,EACV,KAAa,EACb,GAAW,EACX,OAAe,EACf,OAAgB,EAChB,gBAAyB;QAEzB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;IAC3C,CAAC;IAED;;;;OAIG;IACH,IAAI,WAAW;QACb,IAAI,IAAI,CAAC,OAAO;YAAE,OAAO,GAAG,CAAC,0BAA0B,CAAC,CAAC;QAEzD,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;CACF;AAED;;GAEG;AACH,MAAM,OAAO,gBAAgB;IAG3B,YAAY,OAAgC;QAF5C,YAAO,GAA4B,EAAE,CAAC;QAGpC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;IAED,wDAAwD;IACxD,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,gBAAgB,KAAK,SAAS,CAAC,CAAC;IAC9E,CAAC;CACF","sourcesContent":["import { msg } from '@lit/localize';\n\n/**\n * One line of a transcript: a stretch of time and the words spoken in it.\n */\nexport class TranscriptEntryConfig {\n  /** Identifies this entry within its transcript. */\n  id: number;\n\n  /** When the entry starts, in seconds into the track. */\n  start: number;\n\n  /** When the entry ends, in seconds into the track. */\n  end: number;\n\n  /** Whether this stretch is music rather than speech. */\n  isMusic: boolean;\n\n  /** Where this entry falls in the search results, if it is one. */\n  searchMatchIndex?: number;\n\n  /** The transcribed words. */\n  rawText: string;\n\n  constructor(\n    id: number,\n    start: number,\n    end: number,\n    rawText: string,\n    isMusic: boolean,\n    searchMatchIndex?: number,\n  ) {\n    this.id = id;\n    this.start = start;\n    this.end = end;\n    this.rawText = rawText;\n    this.isMusic = isMusic;\n    this.searchMatchIndex = searchMatchIndex;\n  }\n\n  /**\n   * What to show for this entry.\n   *\n   * Music stretches carry no words worth reading, so they say so instead.\n   */\n  get displayText(): string {\n    if (this.isMusic) return msg('[Transcript unavailable]');\n\n    return this.rawText;\n  }\n}\n\n/**\n * A whole transcript, as an ordered list of entries.\n */\nexport class TranscriptConfig {\n  entries: TranscriptEntryConfig[] = [];\n\n  constructor(entries: TranscriptEntryConfig[]) {\n    this.entries = entries;\n  }\n\n  /** Just the entries that matched the current search. */\n  get searchResults(): TranscriptEntryConfig[] {\n    return this.entries.filter((entry) => entry.searchMatchIndex !== undefined);\n  }\n}\n"]}

package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.d.ts

@@ -0,0 +1,62 @@
+import { LitElement, type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
+import type { ZoneOfSilence } from './models.js';
+/**
+ * Renders a waveform image with a progress fill over it, optionally marking
+ * out the stretches of silence.
+ *
+ * When `interactive` is set, dragging anywhere across the waveform scrubs, and
+ * the element emits `valuechange` with the new percentage.
+ */
+export declare class IAWaveformProgress extends LitElement {
+    /** How far through the track playback is, as a percentage (0 to 100) */
+    percentComplete: number;
+    /** URL of the waveform image to render */
+    waveformUrl: string;
+    /** Whether dragging across the waveform scrubs the track */
+    interactive: boolean;
+    /** Stretches of the track with no audio, to mark on the waveform */
+    zonesOfSilence: ZoneOfSilence[];
+    /**
+     * The percentage actually rendered.
+     *
+     * `percentComplete` is driven from outside by whatever is playing the audio,
+     * but while the listener is dragging, their position wins. Keeping the two
+     * apart is what lets the drag survive the playback updates arriving
+     * underneath it.
+     */
+    private displayedPercent;
+    private userIsInteracting;
+    private container?;
+    render(): TemplateResult;
+    private get zonesOfSilenceTemplate();
+    private get interactionCoverTemplate();
+    updated(changedProperties: PropertyValues): void;
+    private drag;
+    /**
+     * Only the primary mouse button scrubs.
+     *
+     * A right-click would otherwise seek the track on its way to opening the
+     * context menu, and the menu swallows the `mouseup`, so the drag would stay
+     * latched on afterwards.
+     */
+    private dragStart;
+    /**
+     * Ends the drag.
+     *
+     * Bound to `touchcancel` as well as `touchend`, because a touch taken over by
+     * the system (an incoming call, a browser gesture) never delivers `touchend`,
+     * and a drag left latched on would ignore playback updates from then on.
+     */
+    private dragEnd;
+    private updateDisplayedPercent;
+    /**
+     * The horizontal page position of a pointer, from either flavour of event.
+     *
+     * A `TouchEvent` carries no `pageX` of its own, so the first touch supplies
+     * it. A `touchend` has no touches left to read, which is why this can come
+     * back undefined.
+     */
+    private static pageXFrom;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-waveform-progress.d.ts.map

package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-waveform-progress.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/ia-waveform-progress.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAS9C;;;;;;GAMG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,wEAAwE;IAC5C,eAAe,SAAK;IAEhD,0CAA0C;IACd,WAAW,SAAM;IAE7C,4DAA4D;IAC/B,WAAW,UAAS;IAEjD,oEAAoE;IACzC,cAAc,EAAE,aAAa,EAAE,CAAM;IAEhE;;;;;;;OAOG;IACM,OAAO,CAAC,gBAAgB,CAAK;IAEtC,OAAO,CAAC,iBAAiB,CAAS;IAEb,OAAO,CAAC,SAAS,CAAC,CAAqB;IAE5D,MAAM,IAAI,cAAc;IAWxB,OAAO,KAAK,sBAAsB,GAYjC;IAED,OAAO,KAAK,wBAAwB,GAcnC;IAED,OAAO,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAQhD,OAAO,CAAC,IAAI;IAKZ;;;;;;OAMG;IACH,OAAO,CAAC,SAAS;IAOjB;;;;;;OAMG;IACH,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,sBAAsB;IAqB9B;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,SAAS;IAKxB,MAAM,KAAK,MAAM,IAAI,cAAc,CAsDlC;CACF"}

package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.js

@@ -0,0 +1,217 @@
+var IAWaveformProgress_1;
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+/**
+ * Event names emitted by this component
+ */
+const Events = {
+    ValueChange: 'valuechange',
+};
+/**
+ * Renders a waveform image with a progress fill over it, optionally marking
+ * out the stretches of silence.
+ *
+ * When `interactive` is set, dragging anywhere across the waveform scrubs, and
+ * the element emits `valuechange` with the new percentage.
+ */
+let IAWaveformProgress = IAWaveformProgress_1 = class IAWaveformProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** How far through the track playback is, as a percentage (0 to 100) */
+        this.percentComplete = 0;
+        /** URL of the waveform image to render */
+        this.waveformUrl = '';
+        /** Whether dragging across the waveform scrubs the track */
+        this.interactive = false;
+        /** Stretches of the track with no audio, to mark on the waveform */
+        this.zonesOfSilence = [];
+        /**
+         * The percentage actually rendered.
+         *
+         * `percentComplete` is driven from outside by whatever is playing the audio,
+         * but while the listener is dragging, their position wins. Keeping the two
+         * apart is what lets the drag survive the playback updates arriving
+         * underneath it.
+         */
+        this.displayedPercent = 0;
+        this.userIsInteracting = false;
+    }
+    render() {
+        return html `
+      <div class="container">
+        <div id="fill" style="width: ${this.displayedPercent}%"></div>
+        <img class="waveform-image" src=${this.waveformUrl} alt="" />
+        ${this.zonesOfSilenceTemplate}
+        ${this.interactive ? this.interactionCoverTemplate : nothing}
+      </div>
+    `;
+    }
+    get zonesOfSilenceTemplate() {
+        return html `
+      ${this.zonesOfSilence.map((zone) => html `
+          <div
+            class="zone-of-silence"
+            style="left: ${zone.startPercent}%; width: ${zone.endPercent -
+            zone.startPercent}%"
+          ></div>
+        `)}
+    `;
+    }
+    get interactionCoverTemplate() {
+        return html `
+      <div
+        id="dragcover"
+        @mousedown=${this.dragStart}
+        @mouseup=${this.dragEnd}
+        @mouseleave=${this.dragEnd}
+        @mousemove=${this.drag}
+        @touchstart=${this.dragStart}
+        @touchend=${this.dragEnd}
+        @touchcancel=${this.dragEnd}
+        @touchmove=${this.drag}
+      ></div>
+    `;
+    }
+    updated(changedProperties) {
+        if (!changedProperties.has('percentComplete') || this.userIsInteracting) {
+            return;
+        }
+        this.displayedPercent = this.percentComplete;
+    }
+    drag(e) {
+        if (!this.userIsInteracting)
+            return;
+        this.updateDisplayedPercent(e);
+    }
+    /**
+     * Only the primary mouse button scrubs.
+     *
+     * A right-click would otherwise seek the track on its way to opening the
+     * context menu, and the menu swallows the `mouseup`, so the drag would stay
+     * latched on afterwards.
+     */
+    dragStart(e) {
+        if ('button' in e && e.button !== 0)
+            return;
+        this.userIsInteracting = true;
+        this.updateDisplayedPercent(e);
+    }
+    /**
+     * Ends the drag.
+     *
+     * Bound to `touchcancel` as well as `touchend`, because a touch taken over by
+     * the system (an incoming call, a browser gesture) never delivers `touchend`,
+     * and a drag left latched on would ignore playback updates from then on.
+     */
+    dragEnd() {
+        this.userIsInteracting = false;
+    }
+    updateDisplayedPercent(e) {
+        const pageX = IAWaveformProgress_1.pageXFrom(e);
+        if (pageX === undefined || !this.container)
+            return;
+        const bounds = this.container.getBoundingClientRect();
+        if (bounds.width === 0)
+            return;
+        // `pageX` is measured from the document origin, so the container's own
+        // viewport position has to be put back into document space before the two
+        // can be subtracted.
+        const offsetX = pageX - (bounds.left + window.scrollX);
+        const percent = (offsetX / bounds.width) * 100;
+        this.displayedPercent = Math.min(Math.max(percent, 0), 100);
+        this.dispatchEvent(new CustomEvent(Events.ValueChange, {
+            detail: { value: this.displayedPercent },
+        }));
+    }
+    /**
+     * The horizontal page position of a pointer, from either flavour of event.
+     *
+     * A `TouchEvent` carries no `pageX` of its own, so the first touch supplies
+     * it. A `touchend` has no touches left to read, which is why this can come
+     * back undefined.
+     */
+    static pageXFrom(e) {
+        if ('touches' in e)
+            return e.touches[0]?.pageX;
+        return e.pageX;
+    }
+    static get styles() {
+        return css `
+      :host {
+        --waveform-fill-color--: var(--ia-theme-waveform-fill-color, #3272b6);
+        --waveform-zone-of-silence-color--: var(
+          --ia-theme-waveform-zone-of-silence-color,
+          #f6e652
+        );
+        --waveform-side-margin--: var(--ia-theme-waveform-side-margin, 10px);
+
+        display: inline-block;
+      }
+
+      #dragcover {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        touch-action: none;
+      }
+
+      .container {
+        display: block;
+        position: relative;
+        background-color: white;
+        height: 100%;
+        margin-left: var(--waveform-side-margin--);
+        margin-right: var(--waveform-side-margin--);
+      }
+
+      .waveform-image {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+      }
+
+      .zone-of-silence {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        background: linear-gradient(
+          #000,
+          #000 47%,
+          var(--waveform-zone-of-silence-color--) 50%,
+          #000 53%,
+          #000 100%
+        );
+      }
+
+      #fill {
+        position: absolute;
+        height: 100%;
+        background-color: var(--waveform-fill-color--);
+      }
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], IAWaveformProgress.prototype, "percentComplete", void 0);
+__decorate([
+    property({ type: String })
+], IAWaveformProgress.prototype, "waveformUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], IAWaveformProgress.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Array })
+], IAWaveformProgress.prototype, "zonesOfSilence", void 0);
+__decorate([
+    state()
+], IAWaveformProgress.prototype, "displayedPercent", void 0);
+__decorate([
+    query('.container')
+], IAWaveformProgress.prototype, "container", void 0);
+IAWaveformProgress = IAWaveformProgress_1 = __decorate([
+    customElement('ia-waveform-progress')
+], IAWaveformProgress);
+export { IAWaveformProgress };
+//# sourceMappingURL=ia-waveform-progress.js.map

package/dist/src/elements/ia-waveform-progress/ia-waveform-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-waveform-progress.js","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/ia-waveform-progress.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';\n\nimport type { ZoneOfSilence } from './models';\n\n/**\n * Event names emitted by this component\n */\nconst Events = {\n  ValueChange: 'valuechange',\n};\n\n/**\n * Renders a waveform image with a progress fill over it, optionally marking\n * out the stretches of silence.\n *\n * When `interactive` is set, dragging anywhere across the waveform scrubs, and\n * the element emits `valuechange` with the new percentage.\n */\n@customElement('ia-waveform-progress')\nexport class IAWaveformProgress extends LitElement {\n  /** How far through the track playback is, as a percentage (0 to 100) */\n  @property({ type: Number }) percentComplete = 0;\n\n  /** URL of the waveform image to render */\n  @property({ type: String }) waveformUrl = '';\n\n  /** Whether dragging across the waveform scrubs the track */\n  @property({ type: Boolean }) interactive = false;\n\n  /** Stretches of the track with no audio, to mark on the waveform */\n  @property({ type: Array }) zonesOfSilence: ZoneOfSilence[] = [];\n\n  /**\n   * The percentage actually rendered.\n   *\n   * `percentComplete` is driven from outside by whatever is playing the audio,\n   * but while the listener is dragging, their position wins. Keeping the two\n   * apart is what lets the drag survive the playback updates arriving\n   * underneath it.\n   */\n  @state() private displayedPercent = 0;\n\n  private userIsInteracting = false;\n\n  @query('.container') private container?: HTMLElement | null;\n\n  render(): TemplateResult {\n    return html`\n      <div class=\"container\">\n        <div id=\"fill\" style=\"width: ${this.displayedPercent}%\"></div>\n        <img class=\"waveform-image\" src=${this.waveformUrl} alt=\"\" />\n        ${this.zonesOfSilenceTemplate}\n        ${this.interactive ? this.interactionCoverTemplate : nothing}\n      </div>\n    `;\n  }\n\n  private get zonesOfSilenceTemplate(): TemplateResult {\n    return html`\n      ${this.zonesOfSilence.map(\n        (zone) => html`\n          <div\n            class=\"zone-of-silence\"\n            style=\"left: ${zone.startPercent}%; width: ${zone.endPercent -\n            zone.startPercent}%\"\n          ></div>\n        `,\n      )}\n    `;\n  }\n\n  private get interactionCoverTemplate(): TemplateResult {\n    return html`\n      <div\n        id=\"dragcover\"\n        @mousedown=${this.dragStart}\n        @mouseup=${this.dragEnd}\n        @mouseleave=${this.dragEnd}\n        @mousemove=${this.drag}\n        @touchstart=${this.dragStart}\n        @touchend=${this.dragEnd}\n        @touchcancel=${this.dragEnd}\n        @touchmove=${this.drag}\n      ></div>\n    `;\n  }\n\n  updated(changedProperties: PropertyValues): void {\n    if (!changedProperties.has('percentComplete') || this.userIsInteracting) {\n      return;\n    }\n\n    this.displayedPercent = this.percentComplete;\n  }\n\n  private drag(e: MouseEvent | TouchEvent): void {\n    if (!this.userIsInteracting) return;\n    this.updateDisplayedPercent(e);\n  }\n\n  /**\n   * Only the primary mouse button scrubs.\n   *\n   * A right-click would otherwise seek the track on its way to opening the\n   * context menu, and the menu swallows the `mouseup`, so the drag would stay\n   * latched on afterwards.\n   */\n  private dragStart(e: MouseEvent | TouchEvent): void {\n    if ('button' in e && e.button !== 0) return;\n\n    this.userIsInteracting = true;\n    this.updateDisplayedPercent(e);\n  }\n\n  /**\n   * Ends the drag.\n   *\n   * Bound to `touchcancel` as well as `touchend`, because a touch taken over by\n   * the system (an incoming call, a browser gesture) never delivers `touchend`,\n   * and a drag left latched on would ignore playback updates from then on.\n   */\n  private dragEnd(): void {\n    this.userIsInteracting = false;\n  }\n\n  private updateDisplayedPercent(e: MouseEvent | TouchEvent): void {\n    const pageX = IAWaveformProgress.pageXFrom(e);\n    if (pageX === undefined || !this.container) return;\n\n    const bounds = this.container.getBoundingClientRect();\n    if (bounds.width === 0) return;\n\n    // `pageX` is measured from the document origin, so the container's own\n    // viewport position has to be put back into document space before the two\n    // can be subtracted.\n    const offsetX = pageX - (bounds.left + window.scrollX);\n    const percent = (offsetX / bounds.width) * 100;\n\n    this.displayedPercent = Math.min(Math.max(percent, 0), 100);\n    this.dispatchEvent(\n      new CustomEvent<{ value: number }>(Events.ValueChange, {\n        detail: { value: this.displayedPercent },\n      }),\n    );\n  }\n\n  /**\n   * The horizontal page position of a pointer, from either flavour of event.\n   *\n   * A `TouchEvent` carries no `pageX` of its own, so the first touch supplies\n   * it. A `touchend` has no touches left to read, which is why this can come\n   * back undefined.\n   */\n  private static pageXFrom(e: MouseEvent | TouchEvent): number | undefined {\n    if ('touches' in e) return e.touches[0]?.pageX;\n    return e.pageX;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      :host {\n        --waveform-fill-color--: var(--ia-theme-waveform-fill-color, #3272b6);\n        --waveform-zone-of-silence-color--: var(\n          --ia-theme-waveform-zone-of-silence-color,\n          #f6e652\n        );\n        --waveform-side-margin--: var(--ia-theme-waveform-side-margin, 10px);\n\n        display: inline-block;\n      }\n\n      #dragcover {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        touch-action: none;\n      }\n\n      .container {\n        display: block;\n        position: relative;\n        background-color: white;\n        height: 100%;\n        margin-left: var(--waveform-side-margin--);\n        margin-right: var(--waveform-side-margin--);\n      }\n\n      .waveform-image {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n      }\n\n      .zone-of-silence {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        background: linear-gradient(\n          #000,\n          #000 47%,\n          var(--waveform-zone-of-silence-color--) 50%,\n          #000 53%,\n          #000 100%\n        );\n      }\n\n      #fill {\n        position: absolute;\n        height: 100%;\n        background-color: var(--waveform-fill-color--);\n      }\n    `;\n  }\n}\n"]}

package/dist/src/elements/ia-waveform-progress/models.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A stretch of the waveform with no audio in it, marked out so listeners can
+ * see where the quiet parts are before they get there.
+ *
+ * Both bounds are percentages of the whole track, not seconds.
+ */
+export interface ZoneOfSilence {
+    /** Where the zone begins, as a percentage of the track (0 to 100). */
+    startPercent: number;
+    /** Where the zone ends, as a percentage of the track (0 to 100). */
+    endPercent: number;
+}
+//# sourceMappingURL=models.d.ts.map

package/dist/src/elements/ia-waveform-progress/models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/models.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,aAAa;IAC5B,sEAAsE;IACtE,YAAY,EAAE,MAAM,CAAC;IAErB,oEAAoE;IACpE,UAAU,EAAE,MAAM,CAAC;CACpB"}

package/dist/src/elements/ia-waveform-progress/models.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=models.js.map

package/dist/src/elements/ia-waveform-progress/models.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-waveform-progress/models.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * A stretch of the waveform with no audio in it, marked out so listeners can\n * see where the quiet parts are before they get there.\n *\n * Both bounds are percentages of the whole track, not seconds.\n */\nexport interface ZoneOfSilence {\n  /** Where the zone begins, as a percentage of the track (0 to 100). */\n  startPercent: number;\n\n  /** Where the zone ends, as a percentage of the track (0 to 100). */\n  endPercent: number;\n}\n"]}

package/dist/src/elements/index.d.ts

@@ -1,9 +1,36 @@
+export * from './ia-audio-element/ia-audio-element.js';
+export * from './ia-audio-element/models.js';
 export * from './ia-button/ia-button.js';
 export * from './ia-combo-box/ia-combo-box.js';
 export * from './ia-dropdown-search-bar/ia-dropdown-search-bar.js';
+export * from './ia-expandable-search-bar/ia-expandable-search-bar.js';
+export * from './ia-expandable-search-bar/ia-quick-search.js';
+export * from './ia-expandable-search-bar/models.js';
 export * from './ia-image-viewer/ia-image-viewer.js';
 export * from './ia-item-navigator/ia-item-navigator.js';
 export * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js';
 export * from './ia-item-navigator/menus/ia-itemnav-sort-files-button.js';
 export * from './ia-item-navigator/menus/ia-itemnav-share-panel.js';
+export * from './ia-playback-controls/ia-playback-controls.js';
+export * from './ia-playback-controls/models.js';
+export * from './ia-radio-player/ia-radio-player.js';
+export * from './ia-radio-player/ia-search-results-switcher.js';
+export * from './ia-radio-player/models.js';
+export * from './ia-radio-player/search/backends/full-text-search-backend.js';
+export * from './ia-radio-player/search/backends/full-text-search-response.js';
+export * from './ia-radio-player/search/backends/local-search-backend.js';
+export * from './ia-radio-player/search/backends/search-backend.js';
+export * from './ia-radio-player/search/models.js';
+export * from './ia-radio-player/search/search-handler.js';
+export * from './ia-radio-player/search/search-helper.js';
+export * from './ia-radio-player/search/transcript-index.js';
+export * from './ia-scrubber-bar/ia-scrubber-bar.js';
+export * from './ia-scrubber-bar/ia-section-marker.js';
+export * from './ia-scrubber-bar/models.js';
+export * from './ia-transcript-view/duration-formatter.js';
+export * from './ia-transcript-view/ia-transcript-entry.js';
+export * from './ia-transcript-view/ia-transcript-view.js';
+export * from './ia-transcript-view/models.js';
+export * from './ia-waveform-progress/ia-waveform-progress.js';
+export * from './ia-waveform-progress/models.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/elements/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC"}

package/dist/src/elements/index.js

@@ -1,9 +1,36 @@
+export * from './ia-audio-element/ia-audio-element.js';
+export * from './ia-audio-element/models.js';
 export * from './ia-button/ia-button.js';
 export * from './ia-combo-box/ia-combo-box.js';
 export * from './ia-dropdown-search-bar/ia-dropdown-search-bar.js';
+export * from './ia-expandable-search-bar/ia-expandable-search-bar.js';
+export * from './ia-expandable-search-bar/ia-quick-search.js';
+export * from './ia-expandable-search-bar/models.js';
 export * from './ia-image-viewer/ia-image-viewer.js';
 export * from './ia-item-navigator/ia-item-navigator.js';
 export * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel.js';
 export * from './ia-item-navigator/menus/ia-itemnav-sort-files-button.js';
 export * from './ia-item-navigator/menus/ia-itemnav-share-panel.js';
+export * from './ia-playback-controls/ia-playback-controls.js';
+export * from './ia-playback-controls/models.js';
+export * from './ia-radio-player/ia-radio-player.js';
+export * from './ia-radio-player/ia-search-results-switcher.js';
+export * from './ia-radio-player/models.js';
+export * from './ia-radio-player/search/backends/full-text-search-backend.js';
+export * from './ia-radio-player/search/backends/full-text-search-response.js';
+export * from './ia-radio-player/search/backends/local-search-backend.js';
+export * from './ia-radio-player/search/backends/search-backend.js';
+export * from './ia-radio-player/search/models.js';
+export * from './ia-radio-player/search/search-handler.js';
+export * from './ia-radio-player/search/search-helper.js';
+export * from './ia-radio-player/search/transcript-index.js';
+export * from './ia-scrubber-bar/ia-scrubber-bar.js';
+export * from './ia-scrubber-bar/ia-section-marker.js';
+export * from './ia-scrubber-bar/models.js';
+export * from './ia-transcript-view/duration-formatter.js';
+export * from './ia-transcript-view/ia-transcript-entry.js';
+export * from './ia-transcript-view/ia-transcript-view.js';
+export * from './ia-transcript-view/models.js';
+export * from './ia-waveform-progress/ia-waveform-progress.js';
+export * from './ia-waveform-progress/models.js';
 //# sourceMappingURL=index.js.map

package/dist/src/elements/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC","sourcesContent":["export * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\nexport * from './ia-image-viewer/ia-image-viewer';\nexport * from './ia-item-navigator/ia-item-navigator';\nexport * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel';\nexport * from './ia-item-navigator/menus/ia-itemnav-sort-files-button';\nexport * from './ia-item-navigator/menus/ia-itemnav-share-panel';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/elements/index.ts"],"names":[],"mappings":"AAAA,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,qDAAqD,CAAC;AACpE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2DAA2D,CAAC;AAC1E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,0BAA0B,CAAC;AACzC,cAAc,4DAA4D,CAAC;AAC3E,cAAc,6DAA6D,CAAC;AAC5E,cAAc,wDAAwD,CAAC;AACvE,cAAc,kDAAkD,CAAC;AACjE,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AACvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AACzC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0CAA0C,CAAC;AACzD,cAAc,yCAAyC,CAAC;AACxD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './ia-audio-element/ia-audio-element';\nexport * from './ia-audio-element/models';\nexport * from './ia-button/ia-button';\nexport * from './ia-combo-box/ia-combo-box';\nexport * from './ia-dropdown-search-bar/ia-dropdown-search-bar';\nexport * from './ia-expandable-search-bar/ia-expandable-search-bar';\nexport * from './ia-expandable-search-bar/ia-quick-search';\nexport * from './ia-expandable-search-bar/models';\nexport * from './ia-image-viewer/ia-image-viewer';\nexport * from './ia-item-navigator/ia-item-navigator';\nexport * from './ia-item-navigator/menus/ia-itemnav-viewable-files-panel';\nexport * from './ia-item-navigator/menus/ia-itemnav-sort-files-button';\nexport * from './ia-item-navigator/menus/ia-itemnav-share-panel';\nexport * from './ia-playback-controls/ia-playback-controls';\nexport * from './ia-playback-controls/models';\nexport * from './ia-radio-player/ia-radio-player';\nexport * from './ia-radio-player/ia-search-results-switcher';\nexport * from './ia-radio-player/models';\nexport * from './ia-radio-player/search/backends/full-text-search-backend';\nexport * from './ia-radio-player/search/backends/full-text-search-response';\nexport * from './ia-radio-player/search/backends/local-search-backend';\nexport * from './ia-radio-player/search/backends/search-backend';\nexport * from './ia-radio-player/search/models';\nexport * from './ia-radio-player/search/search-handler';\nexport * from './ia-radio-player/search/search-helper';\nexport * from './ia-radio-player/search/transcript-index';\nexport * from './ia-scrubber-bar/ia-scrubber-bar';\nexport * from './ia-scrubber-bar/ia-section-marker';\nexport * from './ia-scrubber-bar/models';\nexport * from './ia-transcript-view/duration-formatter';\nexport * from './ia-transcript-view/ia-transcript-entry';\nexport * from './ia-transcript-view/ia-transcript-view';\nexport * from './ia-transcript-view/models';\nexport * from './ia-waveform-progress/ia-waveform-progress';\nexport * from './ia-waveform-progress/models';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/elements",
-  "version": "0.2.14-webdev-9022.0",
+  "version": "0.4.0",
   "description": "A web component library from the Internet Archive.",
   "license": "AGPL-3.0-only",
   "types": "./dist/src/elements/index.d.ts",