@internetarchive/collection-browser 3.4.1-alpha-webdev7761.4 → 3.4.1

package/src/collection-browser.ts

@@ -4,7 +4,6 @@ import {
   LitElement,
   PropertyValues,
   TemplateResult,
-  HTMLTemplateResult,
   nothing,
 } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
@@ -32,7 +31,6 @@ import '@internetarchive/infinite-scroller';
 import type { ModalManagerInterface } from '@internetarchive/modal-manager';
 import type { FeatureFeedbackServiceInterface } from '@internetarchive/feature-feedback';
 import type { RecaptchaManagerInterface } from '@internetarchive/recaptcha-manager';
-import type { IAComboBox } from '@internetarchive/elements/ia-combo-box/ia-combo-box';
 import {
   SelectedFacets,
   SortField,
@@ -47,11 +45,11 @@ import {
   FacetLoadStrategy,
   defaultFacetDisplayOrder,
   tvFacetDisplayOrder,
+  TvClipFilterType,
   TileBlurOverrideState,
   defaultSortAvailability,
   favoritesSortAvailability,
   tvSortAvailability,
-  FacetBucket,
 } from './models';
 import {
   RestorationStateHandlerInterface,
@@ -71,7 +69,6 @@ import {
   analyticsActions,
   analyticsCategories,
 } from './utils/analytics-events';
-import { updateSelectedFacetBucket } from './utils/facet-utils';
 import chevronIcon from './assets/img/icons/chevron';
 import { srOnlyStyle } from './styles/sr-only';
 import { sha1 } from './utils/sha1';
@@ -80,7 +77,6 @@ import type { PlaceholderType } from './empty-placeholder';
 import type { ManageBar } from './manage/manage-bar';
 import type { SmartFacetBar } from './collection-facets/smart-facets/smart-facet-bar';
 
-import '@internetarchive/elements/ia-combo-box/ia-combo-box';
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
 import './tiles/collection-browser-loading-tile';
@@ -150,6 +146,8 @@ export class CollectionBrowser
 
   @property({ type: String }) selectedCreatorFilter: string | null = null;
 
+  @property({ type: String }) tvClipFilter: TvClipFilterType = 'all';
+
   @property({ type: String }) sortDirection: SortDirection | null = null;
 
   @property({ type: String }) defaultSortField: Exclude<
@@ -358,16 +356,6 @@ export class CollectionBrowser
 
   @state() private placeholderType: PlaceholderType = null;
 
-  @state() private selectedTVNetwork?: string = undefined;
-
-  @state() private selectedTVShow?: string = undefined;
-
-  @state() private tvMapsPopulated: boolean = false;
-
-  @state() private loadingNetworks: boolean = false;
-
-  @state() private loadingShows: boolean = false;
-
   @query('#content-container') private contentContainer!: HTMLDivElement;
 
   @query('#left-column') private leftColumn?: HTMLDivElement;
@@ -378,10 +366,6 @@ export class CollectionBrowser
 
   @query('smart-facet-bar') private smartFacetBar?: SmartFacetBar;
 
-  @query('#tv-networks') private tvNetworksDropdown?: IAComboBox;
-
-  @query('#tv-shows') private tvShowsDropdown?: IAComboBox;
-
   @property({ type: Object, attribute: false })
   analyticsHandler?: AnalyticsManagerInterface;
 
@@ -545,29 +529,11 @@ export class CollectionBrowser
       this.selectedSort = SortField.default;
     }
 
-    this.clearTVDropdowns();
-
     if (this.smartFacetBar) {
       this.smartFacetBar.deselectAll();
     }
   }
 
-  /**
-   * Resets any selected TV network/show dropdowns to their default state
-   */
-  private clearTVDropdowns(): void {
-    this.selectedTVNetwork = undefined;
-    this.selectedTVShow = undefined;
-
-    if (this.tvNetworksDropdown) {
-      this.tvNetworksDropdown.clearSelectedOption();
-    }
-
-    if (this.tvShowsDropdown) {
-      this.tvShowsDropdown.clearSelectedOption();
-    }
-  }
-
   /**
    * Returns true if the current value of `this.selectedFacets` contains
    * any facet buckets than have been selected or negated, or false otherwise.
@@ -765,13 +731,12 @@ export class CollectionBrowser
 
     const shouldShowSearching =
       this.searchResultsLoading || this.totalResults === undefined;
-    const classes = classMap({ filtered: this.hasActiveFilters });
     const resultsCount = this.totalResults?.toLocaleString();
     const resultsLabel = this.totalResults === 1 ? 'Result' : 'Results';
 
     // Added data-testid for Playwright testing
     return html`
-      <div id="results-total" class=${classes} data-testid="results-total">
+      <div id="results-total" data-testid="results-total">
         <span id="big-results-count">
           ${shouldShowSearching ? html`Searching&hellip;` : resultsCount}
         </span>
@@ -1281,154 +1246,6 @@ export class CollectionBrowser
     `;
   }
 
-  private async networksDropdownToggled(): Promise<void> {
-    if (this.tvMapsPopulated) return;
-    this.loadingNetworks = true;
-    await this.dataSource.populateTVChannelMaps();
-    this.loadingNetworks = false;
-    this.tvMapsPopulated = true;
-  }
-
-  private async showsDropdownToggled(): Promise<void> {
-    if (this.tvMapsPopulated) return;
-    this.loadingShows = true;
-    await this.dataSource.populateTVChannelMaps();
-    this.loadingShows = false;
-    this.tvMapsPopulated = true;
-  }
-
-  private async networksDropdownChanged(): Promise<void> {
-    const previousNetwork = this.selectedTVNetwork;
-    const newNetwork = this.tvNetworksDropdown!.selectedOption?.text;
-    this.selectedTVNetwork = newNetwork ?? undefined;
-
-    const entries = this.dataSource.tvChannelMaps.channelToNetwork!.entries();
-    for (const [channel, network] of entries) {
-      if (network === previousNetwork) {
-        // Remove any previously-applied network filter
-        const removedBucket: FacetBucket = {
-          key: channel.toLowerCase(),
-          count: 0,
-          state: 'none',
-        };
-        this.selectedFacets = updateSelectedFacetBucket(
-          this.selectedFacets,
-          'creator',
-          removedBucket,
-          true,
-        );
-      } else if (network === this.selectedTVNetwork) {
-        const newBucket: FacetBucket = {
-          key: channel.toLowerCase(),
-          count: 0,
-          state: 'selected',
-        };
-        this.selectedFacets = updateSelectedFacetBucket(
-          this.selectedFacets,
-          'creator',
-          newBucket,
-        );
-      }
-    }
-  }
-
-  private async showsDropdownChanged(): Promise<void> {
-    const previousShow = this.selectedTVShow;
-    const newShow = this.tvShowsDropdown!.selectedOption?.text;
-    this.selectedTVShow = newShow ?? undefined;
-
-    // Remove any previously-applied shows filter
-    if (previousShow !== undefined) {
-      const removedBucket: FacetBucket = {
-        key: previousShow,
-        count: 0,
-        state: 'none',
-      };
-      this.selectedFacets = updateSelectedFacetBucket(
-        this.selectedFacets,
-        'program',
-        removedBucket,
-        true,
-      );
-    }
-
-    if (this.selectedTVShow) {
-      const newBucket: FacetBucket = {
-        key: this.selectedTVShow,
-        count: 0,
-        state: 'selected',
-      };
-      this.selectedFacets = updateSelectedFacetBucket(
-        this.selectedFacets,
-        'program',
-        newBucket,
-      );
-    }
-  }
-
-  private get tvDropdownFiltersTemplate(): TemplateResult | typeof nothing {
-    if (this.searchType !== SearchType.TV) return nothing;
-
-    const { channelToNetwork, programToChannels } =
-      this.dataSource.tvChannelMaps;
-    const networks = channelToNetwork
-      ? [...new Set(channelToNetwork.values())]
-      : [];
-
-    let showEntries = programToChannels ? [...programToChannels.entries()] : [];
-
-    if (channelToNetwork && this.selectedTVNetwork) {
-      showEntries = showEntries.filter(([, channels]) =>
-        Object.keys(channels).some(
-          c => channelToNetwork.get(c) === this.selectedTVNetwork,
-        ),
-      );
-    }
-
-    const shows = showEntries.map(([show]) => show);
-    const loadingIndicator = html`
-      <img src="https://archive.org/images/loading.gif" />
-    `;
-
-    return html`
-      <div id="tv-filters" slot="facets-top">
-        <ia-combo-box
-          id="tv-networks"
-          class="tv-filter-dropdown"
-          placeholder="Filter by Network"
-          clearable
-          wrap-arrow-keys
-          sort
-          .options=${networks.map((n, i) => ({ id: `network-${i}`, text: n }))}
-          @toggle=${this.networksDropdownToggled}
-          @change=${this.networksDropdownChanged}
-        >
-          <span slot="label" class="sr-only">${msg('Filter by Network')}</span>
-          ${this.loadingNetworks
-            ? html`<span slot="empty-options">${loadingIndicator}</span>`
-            : nothing}
-        </ia-combo-box>
-        <ia-combo-box
-          id="tv-shows"
-          class="tv-filter-dropdown"
-          placeholder="Filter by Show"
-          max-autocomplete-entries="500"
-          clearable
-          wrap-arrow-keys
-          sort
-          .options=${shows.map((s, i) => ({ id: `show-${i}`, text: s }))}
-          @toggle=${this.showsDropdownToggled}
-          @change=${this.showsDropdownChanged}
-        >
-          <span slot="label" class="sr-only">${msg('Filter by Show')}</span>
-          ${this.loadingShows
-            ? html`<span slot="empty-options">${loadingIndicator}</span>`
-            : nothing}
-        </ia-combo-box>
-      </div>
-    `;
-  }
-
   /**
    * The template for the facets component alone, without any surrounding wrappers.
    */
@@ -1488,7 +1305,6 @@ export class CollectionBrowser
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
       >
-        ${this.tvDropdownFiltersTemplate}
       </collection-facets>
     `;
 
@@ -1645,6 +1461,7 @@ export class CollectionBrowser
     this.sortDirection = queryState.sortDirection;
     this.selectedTitleFilter = queryState.selectedTitleFilter;
     this.selectedCreatorFilter = queryState.selectedCreatorFilter;
+    this.tvClipFilter = queryState.tvClipFilter ?? 'all';
 
     this.pagesToRender = this.initialPageNumber;
 
@@ -1753,10 +1570,6 @@ export class CollectionBrowser
       }
     }
 
-    if (changed.has('searchType') && this.searchType === SearchType.TV) {
-      this.applyDefaultTVSearchSort();
-    }
-
     if (changed.has('profileElement')) {
       this.applyDefaultProfileSort();
     }
@@ -2094,6 +1907,7 @@ export class CollectionBrowser
           sortDirection: this.sortDirection,
           selectedTitleFilter: this.selectedTitleFilter,
           selectedCreatorFilter: this.selectedCreatorFilter,
+          tvClipFilter: this.tvClipFilter,
         },
       }),
     );
@@ -2257,17 +2071,17 @@ export class CollectionBrowser
     this.currentPage = restorationState.currentPage ?? 1;
     this.minSelectedDate = restorationState.minSelectedDate;
     this.maxSelectedDate = restorationState.maxSelectedDate;
+    this.tvClipFilter = restorationState.tvClipFilter ?? 'all';
     if (this.currentPage > 1) {
       this.goToPage(this.currentPage);
     }
   }
 
   private persistState() {
-    const isDefaultSort = this.selectedSort === this.defaultSortField;
     const restorationState: RestorationState = {
       displayMode: this.displayMode,
       searchType: this.suppressURLSinParam ? undefined : this.searchType,
-      selectedSort: isDefaultSort ? SortField.default : this.selectedSort,
+      selectedSort: this.selectedSort,
       sortDirection: this.sortDirection ?? undefined,
       selectedFacets: this.selectedFacets ?? getDefaultSelectedFacets(),
       baseQuery: this.suppressURLQuery ? undefined : this.baseQuery,
@@ -2278,6 +2092,7 @@ export class CollectionBrowser
       maxSelectedDate: this.maxSelectedDate,
       selectedTitleFilter: this.selectedTitleFilter ?? undefined,
       selectedCreatorFilter: this.selectedCreatorFilter ?? undefined,
+      tvClipFilter: this.tvClipFilter,
     };
     const persistOptions: RestorationStatePersistOptions = {
       forceReplace: this.dataSourceInstallInProgress,
@@ -2372,14 +2187,6 @@ export class CollectionBrowser
     }
   }
 
-  /**
-   * Applies the default sort options for the TV search results page
-   */
-  applyDefaultTVSearchSort(): void {
-    this.defaultSortField = SortField.datearchived;
-    this.defaultSortDirection = 'desc';
-  }
-
   /**
    * Applies any default sort option for the current collection, by checking
    * for one in the collection's metadata. If none is found, defaults to sorting
@@ -2503,7 +2310,7 @@ export class CollectionBrowser
     });
   }
 
-  cellForIndex(index: number): HTMLTemplateResult | undefined {
+  cellForIndex(index: number): TemplateResult | undefined {
     const model = this.tileModelAtCellIndex(index);
     if (!model) return undefined;
 
@@ -2748,10 +2555,10 @@ export class CollectionBrowser
         #facets-bottom-fade {
           background: linear-gradient(
             to bottom,
-            #fbfbfd00 0%,
-            #fbfbfdc0 50%,
-            #fbfbfd 80%,
-            #fbfbfd 100%
+            #f5f5f700 0%,
+            #f5f5f7c0 50%,
+            #f5f5f7 80%,
+            #f5f5f7 100%
           );
           position: fixed;
           bottom: 0;
@@ -2854,46 +2661,12 @@ export class CollectionBrowser
           line-height: 1.3rem;
         }
 
-        #tv-filters {
-          margin-bottom: 15px;
-        }
-
-        #tv-shows {
-          --comboBoxListWidth: 300px;
-        }
-
-        .tv-filter-dropdown {
-          display: block;
-          font-size: 14px;
-          margin-left: 1px;
-          margin-bottom: 5px;
-        }
-
-        .tv-filter-dropdown::part(combo-box) {
-          outline-offset: 1px;
-        }
-
-        .tv-filter-dropdown::part(option) {
-          line-height: 1.1;
-          padding: 7px;
-        }
-
-        .tv-filter-dropdown::part(clear-button) {
-          flex: 0 0 26px;
-          --combo-box-clear-icon-size: 14px;
-        }
-
-        .tv-filter-dropdown::part(icon) {
-          width: 1.4rem;
-          height: 1.4rem;
-        }
-
         #facets-container {
           position: relative;
           max-height: 0;
           transition: max-height 0.2s ease-in-out;
           z-index: 1;
-          margin-top: var(--facetsContainerMarginTop, 3rem);
+          margin-top: var(--facetsContainerMarginTop, 5rem);
           padding-bottom: 2rem;
         }
 
@@ -2923,10 +2696,6 @@ export class CollectionBrowser
           align-items: baseline;
         }
 
-        #results-total:not(.filtered) {
-          padding-bottom: 2rem;
-        }
-
         .mobile #results-total {
           position: absolute;
           right: 10px;