@internetarchive/collection-browser 2.22.1-alpha-webdev7818.4 → 2.22.1-alpha-webdev7761.0

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';
 
 /**
@@ -29,7 +24,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/models.ts

@@ -636,6 +636,7 @@ export type FacetOption =
   | 'collection'
   | 'year'
   // TV-specific facet options:
+  | 'clip_type'
   | 'program'
   | 'person'
   | 'sponsor';
@@ -693,6 +694,7 @@ export const getDefaultSelectedFacets = (): Required<SelectedFacets> => ({
   creator: {},
   collection: {},
   year: {},
+  clip_type: {},
   program: {},
   person: {},
   sponsor: {},
@@ -701,25 +703,15 @@ export const getDefaultSelectedFacets = (): Required<SelectedFacets> => ({
 /**
  * For TV search results, what types of TV clips to restrict the results to.
  */
-export type TvClipFilterType = 'all' | 'commercials' | 'factchecks' | 'quotes';
-
-/**
- * Map from TV clip filter types to their corresponding URL params
- */
-export const tvClipFiltersToURLParams: Record<TvClipFilterType, string> = {
-  all: '',
-  commercials: 'only_commercials',
-  factchecks: 'only_factchecks',
-  quotes: 'only_quotes',
-};
+export type TvClipFilterType = 'commercial' | 'fact check' | 'quote';
 
 /**
  * Map from allowed TV filtering parameters in the URL to their corresponding filter type
  */
 export const tvClipURLParamsToFilters: Record<string, TvClipFilterType> = {
-  only_commercials: 'commercials',
-  only_factchecks: 'factchecks',
-  only_quotes: 'quotes',
+  only_commercials: 'commercial',
+  only_factchecks: 'fact check',
+  only_quotes: 'quote',
 };
 
 /**
@@ -739,6 +731,7 @@ export const defaultFacetDisplayOrder: FacetOption[] = [
  * Specialized facet ordering when displaying TV search results
  */
 export const tvFacetDisplayOrder: FacetOption[] = [
+  'clip_type',
   'program',
   'creator',
   'year',
@@ -760,6 +753,7 @@ export const facetTitles: Record<FacetOption, string> = {
   creator: 'Creator',
   collection: 'Collection',
   year: 'Year',
+  clip_type: 'Clip Type',
   program: 'Program',
   person: 'Person',
   sponsor: 'Sponsor',
@@ -776,6 +770,7 @@ export const defaultFacetSort: Record<FacetOption, AggregationSortType> = {
   creator: AggregationSortType.COUNT,
   collection: AggregationSortType.COUNT,
   year: AggregationSortType.NUMERIC, // Year facets are ordered by their numeric value by default
+  clip_type: AggregationSortType.COUNT,
   program: AggregationSortType.COUNT,
   person: AggregationSortType.COUNT,
   sponsor: AggregationSortType.COUNT,
@@ -793,6 +788,7 @@ export const valueFacetSort: Record<FacetOption, AggregationSortType> = {
   creator: AggregationSortType.ALPHABETICAL,
   collection: AggregationSortType.ALPHABETICAL,
   year: AggregationSortType.NUMERIC, // Year facets' values should be compared numerically, not lexicographically (year 2001 > year 3)
+  clip_type: AggregationSortType.ALPHABETICAL,
   program: AggregationSortType.ALPHABETICAL,
   person: AggregationSortType.ALPHABETICAL,
   sponsor: AggregationSortType.ALPHABETICAL,

package/src/restoration-state-handler.ts

@@ -5,14 +5,12 @@ import {
   CollectionBrowserContext,
   CollectionDisplayMode,
   SelectedFacets,
-  TvClipFilterType,
   SortField,
   FacetBucket,
   FacetState,
   getDefaultSelectedFacets,
   sortOptionFromAPIString,
   SORT_OPTIONS,
-  tvClipFiltersToURLParams,
   tvClipURLParamsToFilters,
 } from './models';
 import { arrayEquals } from './utils/array-equals';
@@ -31,7 +29,6 @@ export interface RestorationState {
   maxSelectedDate?: string;
   selectedTitleFilter?: string;
   selectedCreatorFilter?: string;
-  tvClipFilter?: TvClipFilterType;
 }
 
 export interface RestorationStatePersistOptions {
@@ -210,12 +207,6 @@ export class RestorationStateHandler
       newParams.append('and[]', state.creatorQuery);
     }
 
-    // TV clip special filters
-    if (state.tvClipFilter) {
-      const tvClipParam = tvClipFiltersToURLParams[state.tvClipFilter];
-      if (tvClipParam) newParams.append(tvClipParam, '1');
-    }
-
     // Ensure we aren't pushing consecutive identical states to the history stack.
     //  - If the state has changed, we push a new history entry.
     //  - If only the page number has changed, we replace the current history entry.
@@ -412,9 +403,16 @@ export class RestorationStateHandler
     }
 
     // TV clip special filters (carryovers from legacy page)
-    for (const [paramKey, filter] of Object.entries(tvClipURLParamsToFilters)) {
+    for (const [paramKey, facetKey] of Object.entries(
+      tvClipURLParamsToFilters,
+    )) {
       if (url.searchParams.get(paramKey)) {
-        restorationState.tvClipFilter = filter;
+        this.setSelectedFacetState(
+          restorationState.selectedFacets,
+          'clip_type',
+          facetKey,
+          'selected',
+        );
         break;
       }
     }

package/src/tiles/list/tile-list-compact-header.ts

@@ -1,86 +1,86 @@
-import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { BaseTileComponent } from '../base-tile-component';
-
-@customElement('tile-list-compact-header')
-export class TileListCompactHeader extends BaseTileComponent {
-  /*
-   * Reactive properties inherited from BaseTileComponent:
-   *  - model?: TileModel;
-   *  - currentWidth?: number;
-   *  - currentHeight?: number;
-   *  - baseNavigationUrl?: string;
-   *  - baseImageUrl?: string;
-   *  - collectionPagePath?: string;
-   *  - sortParam: SortParam | null = null;
-   *  - creatorFilter?: string;
-   *  - mobileBreakpoint?: number;
-   *  - loggedIn = false;
-   *  - suppressBlurring = false;
-   */
-
-  render() {
-    return html`
-      <div id="list-line-header" class="${this.classSize}">
-        <div id="thumb"></div>
-        <div id="title">${msg('Title')}</div>
-        <div id="creator">${msg('Creator')}</div>
-        <div id="date">
-          ${this.displayValueProvider.dateLabel || msg('Published')}
-        </div>
-        <div id="icon">${msg('Type')}</div>
-        <div id="views">${msg('Views')}</div>
-      </div>
-    `;
-  }
-
-  private get classSize(): string {
-    if (
-      this.mobileBreakpoint &&
-      this.currentWidth &&
-      this.currentWidth < this.mobileBreakpoint
-    ) {
-      return 'mobile';
-    }
-    return 'desktop';
-  }
-
-  static get styles() {
-    return css`
-      html {
-        font-size: unset;
-      }
-
-      div {
-        font-size: 14px;
-        font-weight: bold;
-        line-height: 20px;
-      }
-
-      .mobile #views {
-        display: none;
-      }
-
-      #views {
-        text-align: right;
-        padding-right: 8px;
-      }
-
-      #list-line-header {
-        display: grid;
-        column-gap: 10px;
-        align-items: flex-end;
-        padding-bottom: 2px;
-      }
-
-      #list-line-header.mobile {
-        grid-template-columns: 36px 3fr 2fr 68px 35px;
-      }
-
-      #list-line-header.desktop {
-        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;
-      }
-    `;
-  }
-}
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { BaseTileComponent } from '../base-tile-component';
+
+@customElement('tile-list-compact-header')
+export class TileListCompactHeader extends BaseTileComponent {
+  /*
+   * Reactive properties inherited from BaseTileComponent:
+   *  - model?: TileModel;
+   *  - currentWidth?: number;
+   *  - currentHeight?: number;
+   *  - baseNavigationUrl?: string;
+   *  - baseImageUrl?: string;
+   *  - collectionPagePath?: string;
+   *  - sortParam: SortParam | null = null;
+   *  - creatorFilter?: string;
+   *  - mobileBreakpoint?: number;
+   *  - loggedIn = false;
+   *  - suppressBlurring = false;
+   */
+
+  render() {
+    return html`
+      <div id="list-line-header" class="${this.classSize}">
+        <div id="thumb"></div>
+        <div id="title">${msg('Title')}</div>
+        <div id="creator">${msg('Creator')}</div>
+        <div id="date">
+          ${this.displayValueProvider.dateLabel || msg('Published')}
+        </div>
+        <div id="icon">${msg('Type')}</div>
+        <div id="views">${msg('Views')}</div>
+      </div>
+    `;
+  }
+
+  private get classSize(): string {
+    if (
+      this.mobileBreakpoint &&
+      this.currentWidth &&
+      this.currentWidth < this.mobileBreakpoint
+    ) {
+      return 'mobile';
+    }
+    return 'desktop';
+  }
+
+  static get styles() {
+    return css`
+      html {
+        font-size: unset;
+      }
+
+      div {
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 20px;
+      }
+
+      .mobile #views {
+        display: none;
+      }
+
+      #views {
+        text-align: right;
+        padding-right: 8px;
+      }
+
+      #list-line-header {
+        display: grid;
+        column-gap: 10px;
+        align-items: flex-end;
+        padding-bottom: 2px;
+      }
+
+      #list-line-header.mobile {
+        grid-template-columns: 36px 3fr 2fr 68px 35px;
+      }
+
+      #list-line-header.desktop {
+        grid-template-columns: 51px 3fr 2fr 95px 30px 60px;
+      }
+    `;
+  }
+}