@internetarchive/collection-browser 3.3.3 → 3.3.4-alpha-webdev7761.0

package/src/data-source/collection-browser-data-source.ts

@@ -24,7 +24,11 @@ import {
   SORT_OPTIONS,
   HitRequestSource,
 } from '../models';
-import { FACETLESS_PAGE_ELEMENTS, type PageSpecifierParams } from './models';
+import {
+  FACETLESS_PAGE_ELEMENTS,
+  TVChannelMaps,
+  type PageSpecifierParams,
+} from './models';
 import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
 import type { CollectionBrowserSearchInterface } from './collection-browser-query-state';
 import { sha1 } from '../utils/sha1';
@@ -121,6 +125,11 @@ export class CollectionBrowserDataSource
    */
   collectionTitles = new Map<string, string>();
 
+  /**
+   * @inheritdoc
+   */
+  tvChannelMaps: TVChannelMaps = {};
+
   /**
    * @inheritdoc
    */
@@ -162,6 +171,11 @@ export class CollectionBrowserDataSource
    */
   queryErrorMessage?: string;
 
+  /**
+   * Internal property to store the promise for any current TV channel maps fetch.
+   */
+  private _tvMapsPromise?: Promise<TVChannelMaps>;
+
   /**
    * Internal property to store the private value backing the `initialSearchComplete` getter.
    */
@@ -773,24 +787,6 @@ export class CollectionBrowserDataSource
       );
     }
 
-    // Add any TV clip type filter, if applicable
-    if (this.host.searchType === SearchType.TV) {
-      switch (this.host.tvClipFilter) {
-        case 'commercials':
-          builder.addFilter('ad_id', '*', FilterConstraint.INCLUDE);
-          break;
-        case 'factchecks':
-          builder.addFilter('factcheck', '*', FilterConstraint.INCLUDE);
-          break;
-        case 'quotes':
-          builder.addFilter('clip', '1', FilterConstraint.INCLUDE);
-          break;
-        case 'all':
-        default:
-          break;
-      }
-    }
-
     const filterMap = builder.build();
     return filterMap;
   }
@@ -1398,4 +1394,48 @@ export class CollectionBrowserDataSource
     this.updatePrefixFiltersForCurrentSort();
     this.requestHostUpdate();
   }
+
+  /**
+   * @inheritdoc
+   */
+  populateTVChannelMaps(): Promise<TVChannelMaps> {
+    // To ensure that we only make these requests once, cache the Promise returned by the
+    // first call, and return the same Promise on repeated calls.
+    // Resolves once both maps have been retrieved and saved in the data source.
+    if (!this._tvMapsPromise) {
+      this._tvMapsPromise = this._fetchTVChannelMaps();
+    }
+
+    return this._tvMapsPromise;
+  }
+
+  /**
+   * Internal function implementing the actual fetches for TV channel mappings.
+   * This should only called by the public populateTVChannelMaps method, which is guarded so
+   * that we do not make extra requests for these rather large mappings.
+   */
+  private async _fetchTVChannelMaps(): Promise<TVChannelMaps> {
+    const baseURL = 'https://av.archive.org/etc';
+    const dateStr = new Date().toISOString().slice(0, 10); // YYYY-MM-DD
+    const chan2networkPromise = fetch(
+      `${baseURL}/chan2network.json?date=${dateStr}`,
+    );
+    const program2chansPromise = fetch(
+      `${baseURL}/program2chans.json?date=${dateStr}`,
+    );
+
+    const [chan2networkResponse, program2chansResponse] = await Promise.all([
+      chan2networkPromise,
+      program2chansPromise,
+    ]);
+    this.tvChannelMaps.channelToNetwork = new Map(
+      Object.entries(await chan2networkResponse.json()),
+    );
+    this.tvChannelMaps.programToChannels = new Map(
+      Object.entries(await program2chansResponse.json()),
+    );
+
+    this.requestHostUpdate();
+    return this.tvChannelMaps;
+  }
 }

package/src/data-source/collection-browser-query-state.ts

@@ -6,12 +6,7 @@ import type {
   SortDirection,
   SortParam,
 } from '@internetarchive/search-service';
-import type {
-  FacetLoadStrategy,
-  SelectedFacets,
-  SortField,
-  TvClipFilterType,
-} from '../models';
+import type { FacetLoadStrategy, SelectedFacets, SortField } from '../models';
 import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
 
 /**
@@ -30,7 +25,6 @@ export interface CollectionBrowserQueryState {
   maxSelectedDate?: string;
   selectedTitleFilter: string | null;
   selectedCreatorFilter: string | null;
-  tvClipFilter?: TvClipFilterType;
   selectedSort?: SortField;
   sortDirection: SortDirection | null;
 }

package/src/data-source/models.ts

@@ -13,6 +13,19 @@ export type CollectionTitles = Map<string, string>;
  */
 export type TVChannelAliases = Map<string, string>;
 
+/**
+ * A Map from program (show) names to a mapping of all the channels that run them.
+ */
+export type TVProgramChannels = Map<string, Record<string, number>>;
+
+/**
+ * Object storing the different TV channel mappings used by the data source.
+ */
+export type TVChannelMaps = {
+  channelToNetwork?: TVChannelAliases;
+  programToChannels?: TVProgramChannels;
+};
+
 /**
  * The subset of search service params that uniquely specify the type of results
  * that are sought by an instance of collection browser.

package/src/manage/manage-bar.ts

@@ -1,247 +1,247 @@
-import { msg } from '@lit/localize';
-import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
-import {
-  ModalConfig,
-  type ModalManagerInterface,
-} from '@internetarchive/modal-manager';
-import type { ManageableItem } from '../models';
-import iaButtonStyle from '../styles/ia-button';
-import './remove-items-modal-content';
-
-@customElement('manage-bar')
-export class ManageBar extends LitElement {
-  /**
-   * The label displayed in front of the management buttons
-   */
-  @property({ type: String }) label = msg('Select items to remove');
-
-  /**
-   * The shared modal manager component for displaying modal dialogs on this page
-   */
-  @property({ type: Object }) modalManager?: ModalManagerInterface;
-
-  /**
-   * Array of items that have been selected for management
-   */
-  @property({ type: Object }) selectedItems: Array<ManageableItem> = [];
-
-  /**
-   * Message shows as note in the modal when removing items
-   */
-  @property({ type: String }) manageViewModalMsg?: string;
-
-  /**
-   * Whether to show the "Select All" button (default false)
-   */
-  @property({ type: Boolean }) showSelectAll = false;
-
-  /**
-   * Whether to show the "Unselect All" button (default false)
-   */
-  @property({ type: Boolean }) showUnselectAll = false;
-
-  /**
-   * Whether to show "Item Manager the items" button (default false)
-   */
-  @property({ type: Boolean }) showItemManageButton = false;
-
-  /**
-   * Whether to active delete button for selectable items
-   */
-  @property({ type: Boolean }) removeAllowed = false;
-
-  render(): TemplateResult {
-    return html`
-      <div class="manage-container">
-        <span class="manage-label">${this.label}</span>
-        <div class="manage-buttons">
-          <button class="ia-button dark" @click=${this.cancelClicked}>
-            ${msg('Cancel')}
-          </button>
-          <button
-            class="ia-button danger"
-            ?disabled=${!this.removeAllowed}
-            @click=${this.showRemoveItemsModal}
-          >
-            ${msg('Remove selected items')} (${this.selectedItems.length})...
-          </button>
-          ${when(
-            this.showItemManageButton,
-            () =>
-              html` <button
-                class="ia-button warning"
-                ?disabled=${!this.removeAllowed}
-                @click=${this.manageItemsClicked}
-              >
-                ${msg('Item Manager the items')} (${this.selectedItems.length})
-              </button>`,
-          )}
-          <div class="selection-buttons">
-            ${when(
-              this.showSelectAll,
-              () =>
-                html` <button
-                  class="ia-button link select-all-btn"
-                  @click=${this.selectAllClicked}
-                >
-                  ${msg('Select all')}
-                </button>`,
-            )}
-            ${when(
-              this.showUnselectAll,
-              () =>
-                html` <button
-                  class="ia-button link unselect-all-btn"
-                  @click=${this.unselectAllClicked}
-                >
-                  ${msg('Unselect all')}
-                </button>`,
-            )}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  private cancelClicked(): void {
-    this.dispatchEvent(new CustomEvent('cancel'));
-  }
-
-  private removeItemsClicked(): void {
-    this.dispatchEvent(new CustomEvent('removeItems'));
-  }
-
-  private manageItemsClicked(): void {
-    this.dispatchEvent(new CustomEvent('manageItems'));
-  }
-
-  private selectAllClicked(): void {
-    this.dispatchEvent(new CustomEvent('selectAll'));
-  }
-
-  private unselectAllClicked(): void {
-    this.dispatchEvent(new CustomEvent('unselectAll'));
-  }
-
-  /**
-   * Shows a modal dialog confirming the list of items to be removed
-   * @param items Which items to list in the modal
-   */
-  private showRemoveItemsModal(): void {
-    const customModalContent = html`
-      <remove-items-modal-content
-        .items=${this.selectedItems}
-        .message=${this.manageViewModalMsg}
-        @confirm=${() => this.removeItemsClicked()}
-      ></remove-items-modal-content>
-    `;
-
-    const config = new ModalConfig({
-      showProcessingIndicator: false,
-      processingImageMode: 'processing',
-      bodyColor: '#fff',
-      headerColor: '#194880',
-      showHeaderLogo: false,
-      closeOnBackdropClick: true,
-      title: html`${msg('Are you sure you want to remove these items?')}`,
-    });
-
-    this.modalManager?.classList.add('remove-items');
-    this.modalManager?.showModal({
-      config,
-      customModalContent,
-      userClosedModalCallback: () => {
-        this.modalManager?.classList.remove('remove-items');
-      },
-    });
-  }
-
-  /**
-   * Shows a modal dialog indicating that item removal is being processed
-   */
-  showRemoveItemsProcessingModal(): void {
-    const config = new ModalConfig({
-      showProcessingIndicator: true,
-      processingImageMode: 'processing',
-      bodyColor: '#fff',
-      headerColor: '#194880',
-      showHeaderLogo: false,
-      closeOnBackdropClick: true,
-      title: html`${msg('Removing selected items...')}`,
-    });
-
-    this.modalManager?.classList.add('remove-items');
-    this.modalManager?.showModal({
-      config,
-      userClosedModalCallback: () => {
-        this.modalManager?.classList.remove('remove-items');
-      },
-    });
-  }
-
-  /**
-   * Shows a modal dialog indicating that an error occurred while removing items
-   */
-  showRemoveItemsErrorModal(): void {
-    const config = new ModalConfig({
-      showProcessingIndicator: false,
-      processingImageMode: 'processing',
-      bodyColor: '#fff',
-      headerColor: '#691916',
-      showHeaderLogo: false,
-      closeOnBackdropClick: true,
-      title: html`${msg('Error: unable to remove items')}`,
-      message: html`${msg(
-        'An error occurred while removing items. Please try again in a few minutes.',
-      )}`,
-    });
-
-    this.modalManager?.classList.add('remove-items');
-    this.modalManager?.showModal({
-      config,
-      userClosedModalCallback: () => {
-        this.modalManager?.classList.remove('remove-items');
-      },
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ${iaButtonStyle}
-      .manage-container {
-        display: flex;
-        align-items: center;
-        column-gap: 5px;
-        padding: 20px 0 20px;
-        flex-wrap: wrap;
-      }
-
-      .manage-label {
-        display: inline-block;
-        font-weight: bold;
-        font-size: 1.8rem;
-        padding-right: 10px;
-      }
-
-      .manage-buttons {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        column-gap: 5px;
-      }
-
-      .selection-buttons {
-        display: inherit;
-      }
-
-      .ia-button,
-      button {
-        padding: 6px 12px;
-        font-size: 1.4rem;
-        margin: 3px 0;
-      }
-    `;
-  }
-}
+import { msg } from '@lit/localize';
+import { LitElement, html, css, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import {
+  ModalConfig,
+  type ModalManagerInterface,
+} from '@internetarchive/modal-manager';
+import type { ManageableItem } from '../models';
+import iaButtonStyle from '../styles/ia-button';
+import './remove-items-modal-content';
+
+@customElement('manage-bar')
+export class ManageBar extends LitElement {
+  /**
+   * The label displayed in front of the management buttons
+   */
+  @property({ type: String }) label = msg('Select items to remove');
+
+  /**
+   * The shared modal manager component for displaying modal dialogs on this page
+   */
+  @property({ type: Object }) modalManager?: ModalManagerInterface;
+
+  /**
+   * Array of items that have been selected for management
+   */
+  @property({ type: Object }) selectedItems: Array<ManageableItem> = [];
+
+  /**
+   * Message shows as note in the modal when removing items
+   */
+  @property({ type: String }) manageViewModalMsg?: string;
+
+  /**
+   * Whether to show the "Select All" button (default false)
+   */
+  @property({ type: Boolean }) showSelectAll = false;
+
+  /**
+   * Whether to show the "Unselect All" button (default false)
+   */
+  @property({ type: Boolean }) showUnselectAll = false;
+
+  /**
+   * Whether to show "Item Manager the items" button (default false)
+   */
+  @property({ type: Boolean }) showItemManageButton = false;
+
+  /**
+   * Whether to active delete button for selectable items
+   */
+  @property({ type: Boolean }) removeAllowed = false;
+
+  render(): TemplateResult {
+    return html`
+      <div class="manage-container">
+        <span class="manage-label">${this.label}</span>
+        <div class="manage-buttons">
+          <button class="ia-button dark" @click=${this.cancelClicked}>
+            ${msg('Cancel')}
+          </button>
+          <button
+            class="ia-button danger"
+            ?disabled=${!this.removeAllowed}
+            @click=${this.showRemoveItemsModal}
+          >
+            ${msg('Remove selected items')} (${this.selectedItems.length})...
+          </button>
+          ${when(
+            this.showItemManageButton,
+            () =>
+              html` <button
+                class="ia-button warning"
+                ?disabled=${!this.removeAllowed}
+                @click=${this.manageItemsClicked}
+              >
+                ${msg('Item Manager the items')} (${this.selectedItems.length})
+              </button>`,
+          )}
+          <div class="selection-buttons">
+            ${when(
+              this.showSelectAll,
+              () =>
+                html` <button
+                  class="ia-button link select-all-btn"
+                  @click=${this.selectAllClicked}
+                >
+                  ${msg('Select all')}
+                </button>`,
+            )}
+            ${when(
+              this.showUnselectAll,
+              () =>
+                html` <button
+                  class="ia-button link unselect-all-btn"
+                  @click=${this.unselectAllClicked}
+                >
+                  ${msg('Unselect all')}
+                </button>`,
+            )}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  private cancelClicked(): void {
+    this.dispatchEvent(new CustomEvent('cancel'));
+  }
+
+  private removeItemsClicked(): void {
+    this.dispatchEvent(new CustomEvent('removeItems'));
+  }
+
+  private manageItemsClicked(): void {
+    this.dispatchEvent(new CustomEvent('manageItems'));
+  }
+
+  private selectAllClicked(): void {
+    this.dispatchEvent(new CustomEvent('selectAll'));
+  }
+
+  private unselectAllClicked(): void {
+    this.dispatchEvent(new CustomEvent('unselectAll'));
+  }
+
+  /**
+   * Shows a modal dialog confirming the list of items to be removed
+   * @param items Which items to list in the modal
+   */
+  private showRemoveItemsModal(): void {
+    const customModalContent = html`
+      <remove-items-modal-content
+        .items=${this.selectedItems}
+        .message=${this.manageViewModalMsg}
+        @confirm=${() => this.removeItemsClicked()}
+      ></remove-items-modal-content>
+    `;
+
+    const config = new ModalConfig({
+      showProcessingIndicator: false,
+      processingImageMode: 'processing',
+      bodyColor: '#fff',
+      headerColor: '#194880',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true,
+      title: html`${msg('Are you sure you want to remove these items?')}`,
+    });
+
+    this.modalManager?.classList.add('remove-items');
+    this.modalManager?.showModal({
+      config,
+      customModalContent,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('remove-items');
+      },
+    });
+  }
+
+  /**
+   * Shows a modal dialog indicating that item removal is being processed
+   */
+  showRemoveItemsProcessingModal(): void {
+    const config = new ModalConfig({
+      showProcessingIndicator: true,
+      processingImageMode: 'processing',
+      bodyColor: '#fff',
+      headerColor: '#194880',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true,
+      title: html`${msg('Removing selected items...')}`,
+    });
+
+    this.modalManager?.classList.add('remove-items');
+    this.modalManager?.showModal({
+      config,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('remove-items');
+      },
+    });
+  }
+
+  /**
+   * Shows a modal dialog indicating that an error occurred while removing items
+   */
+  showRemoveItemsErrorModal(): void {
+    const config = new ModalConfig({
+      showProcessingIndicator: false,
+      processingImageMode: 'processing',
+      bodyColor: '#fff',
+      headerColor: '#691916',
+      showHeaderLogo: false,
+      closeOnBackdropClick: true,
+      title: html`${msg('Error: unable to remove items')}`,
+      message: html`${msg(
+        'An error occurred while removing items. Please try again in a few minutes.',
+      )}`,
+    });
+
+    this.modalManager?.classList.add('remove-items');
+    this.modalManager?.showModal({
+      config,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('remove-items');
+      },
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ${iaButtonStyle}
+      .manage-container {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+        padding: 20px 0 20px;
+        flex-wrap: wrap;
+      }
+
+      .manage-label {
+        display: inline-block;
+        font-weight: bold;
+        font-size: 1.8rem;
+        padding-right: 10px;
+      }
+
+      .manage-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        column-gap: 5px;
+      }
+
+      .selection-buttons {
+        display: inherit;
+      }
+
+      .ia-button,
+      button {
+        padding: 6px 12px;
+        font-size: 1.4rem;
+        margin: 3px 0;
+      }
+    `;
+  }
+}