@internetarchive/radio-player 0.0.3-a4 → 0.0.4-alpha.1

package/src/search-handler/transcript-index-interface.ts

@@ -1,42 +1,42 @@
-import { TranscriptEntryRange } from './search-models';
-
-/**
- * The TranscriptIndexInterface defines methods needed to access and rebuild the transcript.
- *
- * @export
- * @interface TranscriptIndexInterface
- */
-export interface TranscriptIndexInterface {
-  /**
-   * The merged transcript, combining all entries with a single space
-   *
-   * @type {string}
-   * @memberof TranscriptIndexInterface
-   */
-  mergedTranscript: string;
-
-  /**
-   * The merged transcript lowercased for case-insensitive lookups
-   *
-   * @type {string}
-   * @memberof TranscriptIndexInterface
-   */
-  mergedTranscriptLowercased: string;
-
-  /**
-   * An array of transcript entries with their associated character ranges
-   *
-   * @type {TranscriptEntryRange[]}
-   * @memberof TranscriptIndexInterface
-   */
-  transcriptEntryRanges: TranscriptEntryRange[];
-
-  /**
-   * Get the TranscriptEntryRange at a given index
-   *
-   * @param {number} overallCharIndex
-   * @returns {(TranscriptEntryRange | undefined)}
-   * @memberof TranscriptIndexInterface
-   */
-  getTranscriptEntryAt(overallCharIndex: number): TranscriptEntryRange | undefined;
-}
+import { TranscriptEntryRange } from './search-models';
+
+/**
+ * The TranscriptIndexInterface defines methods needed to access and rebuild the transcript.
+ *
+ * @export
+ * @interface TranscriptIndexInterface
+ */
+export interface TranscriptIndexInterface {
+  /**
+   * The merged transcript, combining all entries with a single space
+   *
+   * @type {string}
+   * @memberof TranscriptIndexInterface
+   */
+  mergedTranscript: string;
+
+  /**
+   * The merged transcript lowercased for case-insensitive lookups
+   *
+   * @type {string}
+   * @memberof TranscriptIndexInterface
+   */
+  mergedTranscriptLowercased: string;
+
+  /**
+   * An array of transcript entries with their associated character ranges
+   *
+   * @type {TranscriptEntryRange[]}
+   * @memberof TranscriptIndexInterface
+   */
+  transcriptEntryRanges: TranscriptEntryRange[];
+
+  /**
+   * Get the TranscriptEntryRange at a given index
+   *
+   * @param {number} overallCharIndex
+   * @returns {(TranscriptEntryRange | undefined)}
+   * @memberof TranscriptIndexInterface
+   */
+  getTranscriptEntryAt(overallCharIndex: number): TranscriptEntryRange | undefined;
+}

package/src/search-handler/transcript-index.ts

@@ -1,93 +1,93 @@
-import { TranscriptConfig, TranscriptEntryConfig } from '@internetarchive/transcript-view';
-import { Range, TranscriptEntryRange } from './search-models';
-import { TranscriptIndexInterface } from './transcript-index-interface';
-
-/**
- * The TranscriptIndex takes the original transcript and indexes it to make
- * transcript entry lookups more efficient.
- */
-export class TranscriptIndex implements TranscriptIndexInterface {
-  /** @inheritdoc */
-  get mergedTranscript(): string {
-    return this.mergedTranscriptCache;
-  }
-
-  /** @inheritdoc */
-  get mergedTranscriptLowercased(): string {
-    return this.mergedTranscriptLowercasedCache;
-  }
-
-  /** @inheritdoc */
-  get transcriptEntryRanges(): TranscriptEntryRange[] {
-    return this.transcriptEntryRangesCache;
-  }
-
-  /** @inheritdoc */
-  getTranscriptEntryAt(overallCharIndex: number): TranscriptEntryRange | undefined {
-    return this.transcriptEntryRanges.find((entry) => {
-      const { range } = entry;
-      return range.endIndex > overallCharIndex && range.startIndex <= overallCharIndex;
-    });
-  }
-
-  /**
-   * This gets populated as part of the search index build. It merges all of the transcript
-   * entries together so we can search it as a single document instead of a bunch of
-   * individual entries. This allows searches to cross over transcript entries.
-   *
-   * NOTE: When the mergedTranscript gets created, spaces are put between each transcript
-   * entry, otherwise the words would run into each other. We account for this in the
-   * indices above.
-   *
-   * @type {string}
-   * @memberof TranscriptIndex
-   */
-  private mergedTranscriptCache = '';
-
-  private mergedTranscriptLowercasedCache = '';
-
-  /**
-   * This gets populated as part of the search index build. It maps the start and end indicies
-   * of all of the transcript entries so we can quickly look up where an entry is in the
-   * overall transcript.
-   *
-   * @type {TranscriptEntryRange[]}
-   * @memberof TranscriptIndex
-   */
-  private transcriptEntryRangesCache: TranscriptEntryRange[] = [];
-
-  constructor(transcriptConfig: TranscriptConfig) {
-    this.buildIndex(transcriptConfig);
-  }
-
-  /**
-   * Build the search index. This method does two things:
-   * 1. Builds the "merged transcript" with all of the text combined into one long transcript.
-   *    This allows us to search the entire thing at once instead of entry by entry.
-   * 2. For each entry, get the start and end index of that particular entry within the overall
-   *    transcript. This allows us to reconstruct the transcript later from the original transcript
-   *    and the search results.
-   *
-   * @private
-   * @memberof TranscriptIndex
-   */
-  private buildIndex(transcriptConfig: TranscriptConfig): void {
-    let startIndex = 0;
-    const transcriptEntryRanges: TranscriptEntryRange[] = [];
-    let mergedTranscript = '';
-
-    transcriptConfig.entries.forEach((entry: TranscriptEntryConfig) => {
-      const { displayText } = entry;
-      const indexMapRange: Range = new Range(startIndex, startIndex + displayText.length);
-      const indexMap: TranscriptEntryRange = new TranscriptEntryRange(entry, indexMapRange);
-      transcriptEntryRanges.push(indexMap);
-      mergedTranscript += `${entry.rawText} `;
-      startIndex = mergedTranscript.length;
-    });
-    mergedTranscript = mergedTranscript.trim();
-
-    this.mergedTranscriptCache = mergedTranscript;
-    this.mergedTranscriptLowercasedCache = mergedTranscript.toLowerCase();
-    this.transcriptEntryRangesCache = transcriptEntryRanges;
-  }
-}
+import { TranscriptConfig, TranscriptEntryConfig } from '@internetarchive/transcript-view';
+import { Range, TranscriptEntryRange } from './search-models';
+import { TranscriptIndexInterface } from './transcript-index-interface';
+
+/**
+ * The TranscriptIndex takes the original transcript and indexes it to make
+ * transcript entry lookups more efficient.
+ */
+export class TranscriptIndex implements TranscriptIndexInterface {
+  /** @inheritdoc */
+  get mergedTranscript(): string {
+    return this.mergedTranscriptCache;
+  }
+
+  /** @inheritdoc */
+  get mergedTranscriptLowercased(): string {
+    return this.mergedTranscriptLowercasedCache;
+  }
+
+  /** @inheritdoc */
+  get transcriptEntryRanges(): TranscriptEntryRange[] {
+    return this.transcriptEntryRangesCache;
+  }
+
+  /** @inheritdoc */
+  getTranscriptEntryAt(overallCharIndex: number): TranscriptEntryRange | undefined {
+    return this.transcriptEntryRanges.find((entry) => {
+      const { range } = entry;
+      return range.endIndex > overallCharIndex && range.startIndex <= overallCharIndex;
+    });
+  }
+
+  /**
+   * This gets populated as part of the search index build. It merges all of the transcript
+   * entries together so we can search it as a single document instead of a bunch of
+   * individual entries. This allows searches to cross over transcript entries.
+   *
+   * NOTE: When the mergedTranscript gets created, spaces are put between each transcript
+   * entry, otherwise the words would run into each other. We account for this in the
+   * indices above.
+   *
+   * @type {string}
+   * @memberof TranscriptIndex
+   */
+  private mergedTranscriptCache = '';
+
+  private mergedTranscriptLowercasedCache = '';
+
+  /**
+   * This gets populated as part of the search index build. It maps the start and end indicies
+   * of all of the transcript entries so we can quickly look up where an entry is in the
+   * overall transcript.
+   *
+   * @type {TranscriptEntryRange[]}
+   * @memberof TranscriptIndex
+   */
+  private transcriptEntryRangesCache: TranscriptEntryRange[] = [];
+
+  constructor(transcriptConfig: TranscriptConfig) {
+    this.buildIndex(transcriptConfig);
+  }
+
+  /**
+   * Build the search index. This method does two things:
+   * 1. Builds the "merged transcript" with all of the text combined into one long transcript.
+   *    This allows us to search the entire thing at once instead of entry by entry.
+   * 2. For each entry, get the start and end index of that particular entry within the overall
+   *    transcript. This allows us to reconstruct the transcript later from the original transcript
+   *    and the search results.
+   *
+   * @private
+   * @memberof TranscriptIndex
+   */
+  private buildIndex(transcriptConfig: TranscriptConfig): void {
+    let startIndex = 0;
+    const transcriptEntryRanges: TranscriptEntryRange[] = [];
+    let mergedTranscript = '';
+
+    transcriptConfig.entries.forEach((entry: TranscriptEntryConfig) => {
+      const { displayText } = entry;
+      const indexMapRange: Range = new Range(startIndex, startIndex + displayText.length);
+      const indexMap: TranscriptEntryRange = new TranscriptEntryRange(entry, indexMapRange);
+      transcriptEntryRanges.push(indexMap);
+      mergedTranscript += `${entry.rawText} `;
+      startIndex = mergedTranscript.length;
+    });
+    mergedTranscript = mergedTranscript.trim();
+
+    this.mergedTranscriptCache = mergedTranscript;
+    this.mergedTranscriptLowercasedCache = mergedTranscript.toLowerCase();
+    this.transcriptEntryRangesCache = transcriptEntryRanges;
+  }
+}

package/src/search-results-switcher.ts

@@ -1,131 +1,131 @@
-import {
-  LitElement,
-  html,
-  css,
-  CSSResult,
-  TemplateResult,
-  PropertyValues,
-} from 'lit';
-import {
-  customElement,
-  property,
-} from 'lit/decorators.js';
-import leftImage from './assets/img/left';
-import rightImage from './assets/img/right';
-
-/**
- * A widget to switch between search results that looks like this:
- * < 3 / 7 >
- *
- * @export
- * @class SearchResultsSwitcher
- * @extends {LitElement}
- */
-@customElement('search-results-switcher')
-export default class SearchResultsSwitcher extends LitElement {
-  @property({ type: Number }) numberOfResults = 0;
-
-  @property({ type: Number }) currentResultIndex = 0;
-
-  /**
-   * LitElement life cycle render method. Entrypoint for rendering the element.
-   *
-   * @returns {TemplateResult}
-   * @memberof SearchResultsSwitcher
-   */
-  render(): TemplateResult {
-    return html`
-      <div class="container">
-        <button @click=${this.goToPreviousResult} id="previous-button">
-          ${leftImage}
-        </button>
-        <span class="results-range">
-          <span id="current-result">${this.currentResultIndex + 1}</span> /
-          <span id="number-of-results">${this.numberOfResults}</span>
-        </span>
-        <button @click=${this.goToNextResult} id="next-button">
-          ${rightImage}
-        </button>
-      </div>
-    `;
-  }
-
-  /**
-   * LitElement life cycle CSS for this element
-   *
-   * @readonly
-   * @static
-   * @type {CSSResult}
-   * @memberof SearchResultsSwitcher
-   */
-  static get styles(): CSSResult {
-    return css`
-      .container {
-        text-align: center;
-      }
-
-      button {
-        background: none;
-        border: 0;
-        cursor: pointer;
-      }
-    `;
-  }
-
-  /**
-   * LitElement lifecycle updated method
-   *
-   * @param {PropertyValues} changedProperties
-   * @memberof SearchResultsSwitcher
-   */
-  updated(changedProperties: PropertyValues): void {
-    // reset the index if we change the number of results
-    if (changedProperties.has('numberOfResults')) {
-      this.currentResultIndex = 0;
-    }
-  }
-
-  /**
-   * Called when user clicks on the previous result button.
-   * Loops around to the last result when we reach the first.
-   *
-   * @memberof SearchResultsSwitcher
-   */
-  goToPreviousResult(): void {
-    if (this.currentResultIndex < 1) {
-      this.currentResultIndex = this.numberOfResults - 1;
-    } else {
-      this.currentResultIndex -= 1;
-    }
-    this.emitSearchResultIndexChangedEvent();
-  }
-
-  /**
-   * Called when user clicks on the next result button.
-   * Loops around to the first result when we reach the last.
-   *
-   * @memberof SearchResultsSwitcher
-   */
-  goToNextResult(): void {
-    if (this.currentResultIndex === this.numberOfResults - 1) {
-      this.currentResultIndex = 0;
-    } else {
-      this.currentResultIndex += 1;
-    }
-    this.emitSearchResultIndexChangedEvent();
-  }
-
-  /**
-   * Emit an searchResultIndexChanged event that the index has been changed
-   *
-   * ie: `e.detail.searchResultIndex = 2`
-   *
-   * @memberof SearchResultsSwitcher
-   */
-  emitSearchResultIndexChangedEvent(): void {
-    const event = new CustomEvent('searchResultIndexChanged', {
-      detail: { searchResultIndex: this.currentResultIndex },
-    });
-    this.dispatchEvent(event);
-  }
-}
+import {
+  LitElement,
+  html,
+  css,
+  CSSResult,
+  TemplateResult,
+  PropertyValues,
+} from 'lit';
+import {
+  customElement,
+  property,
+} from 'lit/decorators.js';
+import leftImage from './assets/img/left';
+import rightImage from './assets/img/right';
+
+/**
+ * A widget to switch between search results that looks like this:
+ * < 3 / 7 >
+ *
+ * @export
+ * @class SearchResultsSwitcher
+ * @extends {LitElement}
+ */
+@customElement('search-results-switcher')
+export default class SearchResultsSwitcher extends LitElement {
+  @property({ type: Number }) numberOfResults = 0;
+
+  @property({ type: Number }) currentResultIndex = 0;
+
+  /**
+   * LitElement life cycle render method. Entrypoint for rendering the element.
+   *
+   * @returns {TemplateResult}
+   * @memberof SearchResultsSwitcher
+   */
+  render(): TemplateResult {
+    return html`
+      <div class="container">
+        <button @click=${this.goToPreviousResult} id="previous-button">
+          ${leftImage}
+        </button>
+        <span class="results-range">
+          <span id="current-result">${this.currentResultIndex + 1}</span> /
+          <span id="number-of-results">${this.numberOfResults}</span>
+        </span>
+        <button @click=${this.goToNextResult} id="next-button">
+          ${rightImage}
+        </button>
+      </div>
+    `;
+  }
+
+  /**
+   * LitElement life cycle CSS for this element
+   *
+   * @readonly
+   * @static
+   * @type {CSSResult}
+   * @memberof SearchResultsSwitcher
+   */
+  static get styles(): CSSResult {
+    return css`
+      .container {
+        text-align: center;
+      }
+
+      button {
+        background: none;
+        border: 0;
+        cursor: pointer;
+      }
+    `;
+  }
+
+  /**
+   * LitElement lifecycle updated method
+   *
+   * @param {PropertyValues} changedProperties
+   * @memberof SearchResultsSwitcher
+   */
+  updated(changedProperties: PropertyValues): void {
+    // reset the index if we change the number of results
+    if (changedProperties.has('numberOfResults')) {
+      this.currentResultIndex = 0;
+    }
+  }
+
+  /**
+   * Called when user clicks on the previous result button.
+   * Loops around to the last result when we reach the first.
+   *
+   * @memberof SearchResultsSwitcher
+   */
+  goToPreviousResult(): void {
+    if (this.currentResultIndex < 1) {
+      this.currentResultIndex = this.numberOfResults - 1;
+    } else {
+      this.currentResultIndex -= 1;
+    }
+    this.emitSearchResultIndexChangedEvent();
+  }
+
+  /**
+   * Called when user clicks on the next result button.
+   * Loops around to the first result when we reach the last.
+   *
+   * @memberof SearchResultsSwitcher
+   */
+  goToNextResult(): void {
+    if (this.currentResultIndex === this.numberOfResults - 1) {
+      this.currentResultIndex = 0;
+    } else {
+      this.currentResultIndex += 1;
+    }
+    this.emitSearchResultIndexChangedEvent();
+  }
+
+  /**
+   * Emit an searchResultIndexChanged event that the index has been changed
+   *
+   * ie: `e.detail.searchResultIndex = 2`
+   *
+   * @memberof SearchResultsSwitcher
+   */
+  emitSearchResultIndexChangedEvent(): void {
+    const event = new CustomEvent('searchResultIndexChanged', {
+      detail: { searchResultIndex: this.currentResultIndex },
+    });
+    this.dispatchEvent(event);
+  }
+}