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

package/dist/src/collection-browser.js

@@ -10,12 +10,10 @@ import { RestorationStateHandler, } from './restoration-state-handler';
 import { CollectionBrowserDataSource } from './data-source/collection-browser-data-source';
 import { FACETLESS_PAGE_ELEMENTS } from './data-source/models';
 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';
 import { log } from './utils/log';
-import '@internetarchive/elements/ia-combo-box/ia-combo-box';
 import './empty-placeholder';
 import './tiles/tile-dispatcher';
 import './tiles/collection-browser-loading-tile';
@@ -35,6 +33,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.selectedSort = SortField.default;
         this.selectedTitleFilter = null;
         this.selectedCreatorFilter = null;
+        this.tvClipFilter = 'all';
         this.sortDirection = null;
         this.defaultSortField = SortField.relevance;
         this.defaultSortDirection = null;
@@ -165,11 +164,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.tileBlurOverrideState = 'no-override';
         this.collapsibleFacetsVisible = false;
         this.placeholderType = null;
-        this.selectedTVNetwork = undefined;
-        this.selectedTVShow = undefined;
-        this.tvMapsPopulated = false;
-        this.loadingNetworks = false;
-        this.loadingShows = false;
         /** Whether layout size analytics have been sent already. */
         this.layoutSizeAnalyticsSent = false;
         /**
@@ -194,17 +188,18 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          * Arrow function ensures proper `this` binding.
          */
         this.updateLeftColumnHeight = () => {
+            var _a, _b, _c, _d, _e;
             if (this.mobileView) {
-                this.leftColumn?.style?.removeProperty('height');
+                (_b = (_a = this.leftColumn) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.removeProperty('height');
             }
             else {
-                const clientTop = this.leftColumn?.getBoundingClientRect().top;
-                const columnHeight = window.innerHeight - (clientTop ?? 0);
+                const clientTop = (_c = this.leftColumn) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().top;
+                const columnHeight = window.innerHeight - (clientTop !== null && clientTop !== void 0 ? clientTop : 0);
                 const cssHeightValue = clientTop === 0
                     ? null
                     : // Subtract off the column's top padding so that it doesn't overflow
                         `calc(${columnHeight}px - var(--leftColumnPaddingTop, 2rem))`;
-                this.leftColumn?.style?.setProperty('height', cssHeightValue);
+                (_e = (_d = this.leftColumn) === null || _d === void 0 ? void 0 : _d.style) === null || _e === void 0 ? void 0 : _e.setProperty('height', cssHeightValue);
             }
         };
         /**
@@ -213,8 +208,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          * Arrow function ensures proper `this` binding.
          */
         this.updateFacetFadeOut = (entries) => {
-            const fadeElmt = this.shadowRoot?.getElementById('facets-bottom-fade');
-            fadeElmt?.classList.toggle('hidden', entries?.[0]?.isIntersecting);
+            var _a, _b;
+            const fadeElmt = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('facets-bottom-fade');
+            fadeElmt === null || fadeElmt === void 0 ? void 0 : fadeElmt.classList.toggle('hidden', (_b = entries === null || entries === void 0 ? void 0 : entries[0]) === null || _b === void 0 ? void 0 : _b.isIntersecting);
         };
         // we only want to scroll on the very first query change
         // so this keeps track of whether we've already set the initial query
@@ -251,7 +247,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      */
     async getSessionId() {
         try {
-            const storedSessionId = sessionStorage?.getItem('cb-session');
+            const storedSessionId = sessionStorage === null || sessionStorage === void 0 ? void 0 : sessionStorage.getItem('cb-session');
             if (storedSessionId) {
                 return storedSessionId;
             }
@@ -262,10 +258,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             }
             this.sessionIdGenPromise = sha1(Math.random().toString());
             const newSessionId = await this.sessionIdGenPromise;
-            sessionStorage?.setItem('cb-session', newSessionId);
+            sessionStorage === null || sessionStorage === void 0 ? void 0 : sessionStorage.setItem('cb-session', newSessionId);
             return newSessionId;
         }
-        catch {
+        catch (_a) {
             // Either we can't generate the hash or we're restricted from accessing sessionStorage
             return '';
         }
@@ -326,24 +322,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.sortDirection = null;
             this.selectedSort = SortField.default;
         }
-        this.clearTVDropdowns();
         if (this.smartFacetBar) {
             this.smartFacetBar.deselectAll();
         }
     }
-    /**
-     * Resets any selected TV network/show dropdowns to their default state
-     */
-    clearTVDropdowns() {
-        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.
@@ -413,9 +395,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      *  - An error occurred on the most recent search attempt
      */
     setPlaceholderType() {
+        var _a, _b;
         const isInitialized = this.dataSource.queryInitialized;
-        const hasQuery = !!this.baseQuery?.trim();
-        const hasIdentifiers = !!this.identifiers?.length;
+        const hasQuery = !!((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim());
+        const hasIdentifiers = !!((_b = this.identifiers) === null || _b === void 0 ? void 0 : _b.length);
         const isCollection = !!this.withinCollection;
         const isProfile = !!this.withinProfile;
         const isSearchResults = !isCollection && !isProfile;
@@ -445,12 +428,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Template for the placeholder content to show when no results are available.
      */
     get emptyPlaceholderTemplate() {
+        var _a;
         return html `
       <empty-placeholder
         .placeholderType=${this.placeholderType}
         ?isMobileView=${this.mobileView}
         ?isCollection=${!!this.withinCollection}
-        .detailMessage=${this.dataSource.queryErrorMessage ?? ''}
+        .detailMessage=${(_a = this.dataSource.queryErrorMessage) !== null && _a !== void 0 ? _a : ''}
         .baseNavigationUrl=${this.baseNavigationUrl}
       ></empty-placeholder>
     `;
@@ -523,15 +507,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Changes to the "Searching..." label if the search results are still loading.
      */
     get resultsCountTemplate() {
+        var _a;
         if (this.suppressResultCount)
             return nothing;
         const shouldShowSearching = this.searchResultsLoading || this.totalResults === undefined;
-        const classes = classMap({ filtered: this.hasActiveFilters });
-        const resultsCount = this.totalResults?.toLocaleString();
+        const resultsCount = (_a = this.totalResults) === null || _a === void 0 ? void 0 : _a.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>
@@ -597,8 +581,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * given the current display mode & placeholder case.
      */
     get infiniteScrollerClasses() {
+        var _a;
         return classMap({
-            [this.displayMode ?? '']: !!this.displayMode,
+            [(_a = this.displayMode) !== null && _a !== void 0 ? _a : '']: !!this.displayMode,
             hidden: !!this.placeholderType,
         });
     }
@@ -606,6 +591,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Template for the sort & filtering bar that appears atop the search results.
      */
     get sortFilterBarTemplate() {
+        var _a;
         if (this.suppressSortBar)
             return nothing;
         // Determine the set of sortable fields that should be shown in the sort bar
@@ -613,7 +599,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         let defaultDateSort = SortField.date;
         let sortFieldAvailability = defaultSortAvailability;
         // We adjust the sort options for a couple of special cases...
-        if (this.withinCollection?.startsWith('fav-')) {
+        if ((_a = this.withinCollection) === null || _a === void 0 ? void 0 : _a.startsWith('fav-')) {
             // When viewing a fav- collection, we include the Date Favorited option and show
             // it as the default in the date dropdown.
             defaultDateSort = SortField.datefavorited;
@@ -661,8 +647,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * sensitive content in result tiles.
      */
     get tileBlurCheckboxTemplate() {
+        var _a;
         // Only show the checkbox for @archive.org users
-        if (!this.dataSource.sessionContext?.is_archive_user)
+        if (!((_a = this.dataSource.sessionContext) === null || _a === void 0 ? void 0 : _a.is_archive_user))
             return nothing;
         return html `
       <label
@@ -734,9 +721,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.dispatchEvent(new CustomEvent('itemRemovalRequested', {
             detail: {
                 items: this.dataSource.checkedTileModels.map(model => {
+                    var _a;
                     // For favorited searches, we attach a search: prefix to differentiate it from an item
-                    const searchPrefix = model?.mediatype === 'search' ? 'search:' : '';
-                    const identifier = model?.identifier ?? '';
+                    const searchPrefix = (model === null || model === void 0 ? void 0 : model.mediatype) === 'search' ? 'search:' : '';
+                    const identifier = (_a = model === null || model === void 0 ? void 0 : model.identifier) !== null && _a !== void 0 ? _a : '';
                     return `${searchPrefix}${identifier}`;
                 }),
             },
@@ -748,24 +736,27 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     handleManageItems() {
         this.dispatchEvent(new CustomEvent('itemManagerRequested', {
             detail: {
-                items: this.dataSource.checkedTileModels.map(model => model?.identifier ? model.identifier : ''),
+                items: this.dataSource.checkedTileModels.map(model => (model === null || model === void 0 ? void 0 : model.identifier) ? model.identifier : ''),
             },
         }));
     }
     refreshSmartFacets() {
-        this.smartFacetBar?.refresh();
+        var _a;
+        (_a = this.smartFacetBar) === null || _a === void 0 ? void 0 : _a.refresh();
     }
     /**
      * Handler to show processing modal while removing item
      */
     showRemoveItemsProcessingModal() {
-        this.manageBar?.showRemoveItemsProcessingModal();
+        var _a;
+        (_a = this.manageBar) === null || _a === void 0 ? void 0 : _a.showRemoveItemsProcessingModal();
     }
     /**
      * Handler to show error modal when item removal failed
      */
     showRemoveItemsErrorModal() {
-        this.manageBar?.showRemoveItemsErrorModal();
+        var _a;
+        (_a = this.manageBar) === null || _a === void 0 ? void 0 : _a.showRemoveItemsErrorModal();
     }
     /**
      * Removes all tile models that are currently checked & adjusts the paging
@@ -778,9 +769,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Handler for when the tile blurring checkbox state is toggled
      */
     tileBlurCheckboxChanged(e) {
+        var _a;
         const { checked } = e.target;
         this.tileBlurOverrideState = checked ? 'on' : 'off';
-        this.infiniteScroller?.refreshAllVisibleCells();
+        (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
     }
     /**
      * Whether result tiles should have the default blurring of sensitive content suppressed.
@@ -795,8 +787,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         // Not overriding, so use the preference from session context
         const { sessionContext } = this.dataSource;
-        const userPrefs = sessionContext?.pps_relevant_user_preferences;
-        const blurringPref = userPrefs?.display__blur_moderated_content;
+        const userPrefs = sessionContext === null || sessionContext === void 0 ? void 0 : sessionContext.pps_relevant_user_preferences;
+        const blurringPref = userPrefs === null || userPrefs === void 0 ? void 0 : userPrefs.display__blur_moderated_content;
         // Only suppress blurring if the preference is disabled.
         // If enabled or missing, tile blurring remains on.
         return blurringPref === 'off';
@@ -805,10 +797,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Handler for when the user changes the selected sort option or direction.
      */
     userChangedSort(e) {
+        var _a;
         const { selectedSort, sortDirection } = e.detail;
         this.selectedSort = selectedSort;
         this.sortDirection = sortDirection;
-        if ((this.currentPage ?? 1) > 1) {
+        if (((_a = this.currentPage) !== null && _a !== void 0 ? _a : 1) > 1) {
             this.goToPage(1);
         }
         this.currentPage = 1;
@@ -818,8 +811,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * @param prevSortDirection Which sort direction was previously set.
      */
     sendSortByAnalytics(prevSortDirection) {
+        var _a;
         const directionCleared = prevSortDirection && !this.sortDirection;
-        this.analyticsHandler?.sendEvent({
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
             category: this.searchContext,
             action: analyticsActions.sortBy,
             label: `${this.selectedSort}${this.sortDirection || directionCleared ? `-${this.sortDirection}` : ''}`,
@@ -837,13 +831,14 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * An object representing the current sort field & direction.
      */
     get sortParam() {
+        var _a;
         const sortOption = SORT_OPTIONS[this.selectedSort];
-        if (!sortOption?.handledBySearchService) {
+        if (!(sortOption === null || sortOption === void 0 ? void 0 : sortOption.handledBySearchService)) {
             return null;
         }
         // If the sort option specified in the URL is unrecognized, we just use it as-is
         const urlSortParam = new URL(window.location.href).searchParams.get('sort');
-        const sortField = sortOption.searchServiceKey ?? urlSortParam?.replace(/^-/, '');
+        const sortField = (_a = sortOption.searchServiceKey) !== null && _a !== void 0 ? _a : urlSortParam === null || urlSortParam === void 0 ? void 0 : urlSortParam.replace(/^-/, '');
         // If the sort direction is still null at this point, then we assume ascending
         // (i.e., it was unrecognized and had no directional flag)
         if (!this.sortDirection)
@@ -856,7 +851,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * An object representing the default sort field & direction, if none are explicitly set.
      */
     get defaultSortParam() {
-        const direction = this.defaultSortDirection ?? 'asc';
+        var _a;
+        const direction = (_a = this.defaultSortDirection) !== null && _a !== void 0 ? _a : 'asc';
         const field = SORT_OPTIONS[this.defaultSortField].searchServiceKey;
         if (!field)
             return null;
@@ -866,9 +862,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Handler for when the display mode option is changed (grid/list/compact-list views).
      */
     displayModeChanged(e) {
+        var _a;
         this.displayMode = e.detail.displayMode;
         if (this.displayMode) {
-            this.analyticsHandler?.sendEvent({
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
                 category: this.searchContext,
                 action: analyticsActions.displayMode,
                 label: this.displayMode,
@@ -898,11 +895,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
      */
     sendFilterByTitleAnalytics(prevSelectedLetter) {
+        var _a;
         if (!prevSelectedLetter && !this.selectedTitleFilter) {
             return;
         }
         const cleared = prevSelectedLetter && !this.selectedTitleFilter;
-        this.analyticsHandler?.sendEvent({
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
             category: this.searchContext,
             action: analyticsActions.filterByTitle,
             label: cleared
@@ -915,11 +913,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * labels: 'start-<ToLetter>' | 'clear-<FromLetter>' | '<FromLetter>-<ToLetter>'
      */
     sendFilterByCreatorAnalytics(prevSelectedLetter) {
+        var _a;
         if (!prevSelectedLetter && !this.selectedCreatorFilter) {
             return;
         }
         const cleared = prevSelectedLetter && !this.selectedCreatorFilter;
-        this.analyticsHandler?.sendEvent({
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
             category: this.searchContext,
             action: analyticsActions.filterByCreator,
             label: cleared
@@ -949,10 +948,11 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         if (FACETLESS_PAGE_ELEMENTS.includes(this.profileElement))
             return nothing;
         const toggleFacetsVisible = (e) => {
+            var _a;
             const target = e.target;
             this.isResizeToMobile = false;
             this.collapsibleFacetsVisible = target.open;
-            this.analyticsHandler?.sendEvent({
+            (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
                 category: this.searchContext,
                 action: analyticsActions.mobileFacetsToggled,
                 label: target.open ? 'open' : 'closed',
@@ -969,122 +969,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       </details>
     `;
     }
-    async networksDropdownToggled() {
-        if (this.tvMapsPopulated)
-            return;
-        this.loadingNetworks = true;
-        await this.dataSource.populateTVChannelMaps();
-        this.loadingNetworks = false;
-        this.tvMapsPopulated = true;
-    }
-    async showsDropdownToggled() {
-        if (this.tvMapsPopulated)
-            return;
-        this.loadingShows = true;
-        await this.dataSource.populateTVChannelMaps();
-        this.loadingShows = false;
-        this.tvMapsPopulated = true;
-    }
-    async networksDropdownChanged() {
-        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 = {
-                    key: channel.toLowerCase(),
-                    count: 0,
-                    state: 'none',
-                };
-                this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'creator', removedBucket, true);
-            }
-            else if (network === this.selectedTVNetwork) {
-                const newBucket = {
-                    key: channel.toLowerCase(),
-                    count: 0,
-                    state: 'selected',
-                };
-                this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'creator', newBucket);
-            }
-        }
-    }
-    async showsDropdownChanged() {
-        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 = {
-                key: previousShow,
-                count: 0,
-                state: 'none',
-            };
-            this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'program', removedBucket, true);
-        }
-        if (this.selectedTVShow) {
-            const newBucket = {
-                key: this.selectedTVShow,
-                count: 0,
-                state: 'selected',
-            };
-            this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'program', newBucket);
-        }
-    }
-    get tvDropdownFiltersTemplate() {
-        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.
      */
@@ -1142,7 +1026,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         @facetsChanged=${this.facetsChanged}
         @histogramDateRangeUpdated=${this.histogramDateRangeUpdated}
       >
-        ${this.tvDropdownFiltersTemplate}
       </collection-facets>
     `;
         // If we are using one of the opt-in facet load strategies, we may need to wrap the
@@ -1218,9 +1101,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Handler for when the date picker's date range is changed.
      */
     histogramDateRangeUpdated(e) {
+        var _a;
         const { minDate, maxDate } = e.detail;
         [this.minSelectedDate, this.maxSelectedDate] = [minDate, maxDate];
-        this.analyticsHandler?.sendEvent({
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
             category: this.searchContext,
             action: analyticsActions.histogramChanged,
             label: this.dateRangeQueryClause,
@@ -1257,6 +1141,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * represent, such as the search query, sort option, and any filters applied.
      */
     async installDataSourceAndQueryState(dataSource, queryState) {
+        var _a, _b, _c;
         log('Installing data source & query state in CB:', dataSource, queryState);
         if (this.dataSource)
             this.removeController(this.dataSource);
@@ -1266,14 +1151,15 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.profileElement = queryState.profileElement;
         this.searchType = queryState.searchType;
         this.selectedFacets =
-            queryState.selectedFacets ?? getDefaultSelectedFacets();
+            (_a = queryState.selectedFacets) !== null && _a !== void 0 ? _a : getDefaultSelectedFacets();
         this.internalFilters = queryState.internalFilters;
         this.minSelectedDate = queryState.minSelectedDate;
         this.maxSelectedDate = queryState.maxSelectedDate;
-        this.selectedSort = queryState.selectedSort ?? SortField.default;
+        this.selectedSort = (_b = queryState.selectedSort) !== null && _b !== void 0 ? _b : SortField.default;
         this.sortDirection = queryState.sortDirection;
         this.selectedTitleFilter = queryState.selectedTitleFilter;
         this.selectedCreatorFilter = queryState.selectedCreatorFilter;
+        this.tvClipFilter = (_c = queryState.tvClipFilter) !== null && _c !== void 0 ? _c : 'all';
         this.pagesToRender = this.initialPageNumber;
         // We set this flag during the update to prevent the URL state persistence
         // from creating an unwanted extra history entry.
@@ -1317,6 +1203,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
     }
     updated(changed) {
+        var _a, _b, _c;
         if (changed.has('placeholderType') && this.placeholderType === null) {
             if (!this.leftColIntersectionObserver) {
                 this.setupLeftColumnScrollListeners();
@@ -1333,7 +1220,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             changed.has('baseNavigationUrl') ||
             changed.has('baseImageUrl') ||
             changed.has('loggedIn')) {
-            this.infiniteScroller?.reload();
+            (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.reload();
         }
         if (changed.has('baseQuery') ||
             changed.has('identifiers') ||
@@ -1360,9 +1247,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 });
             }
         }
-        if (changed.has('searchType') && this.searchType === SearchType.TV) {
-            this.applyDefaultTVSearchSort();
-        }
         if (changed.has('profileElement')) {
             this.applyDefaultProfileSort();
         }
@@ -1434,8 +1318,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 this.fetchManageableSearchResults();
             }
             else if (this.pageContext === 'search')
-                this.infiniteScroller?.reload();
-            this.infiniteScroller?.refreshAllVisibleCells();
+                (_b = this.infiniteScroller) === null || _b === void 0 ? void 0 : _b.reload();
+            (_c = this.infiniteScroller) === null || _c === void 0 ? void 0 : _c.refreshAllVisibleCells();
             // Only emit change event if changing b/w true & false, not on initial value set.
             if (changed.get('isManageView') !== undefined) {
                 this.emitManageModeChangedEvent();
@@ -1450,19 +1334,21 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.ensureAvailableTilesDisplayed();
     }
     connectedCallback() {
-        super.connectedCallback?.();
+        var _a;
+        (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
         this.setupStateRestorationObserver();
         this.setupResizeObserver();
     }
     disconnectedCallback() {
+        var _a, _b;
         if (this.resizeObserver) {
             this.disconnectResizeObserver(this.resizeObserver);
         }
         if (this.boundNavigationHandler) {
             window.removeEventListener('popstate', this.boundNavigationHandler);
         }
-        this.leftColIntersectionObserver?.disconnect();
-        this.facetsIntersectionObserver?.disconnect();
+        (_a = this.leftColIntersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.facetsIntersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
         window.removeEventListener('resize', this.updateLeftColumnHeight);
     }
     handleResize(entry) {
@@ -1516,11 +1402,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Sets up listeners for events that may require updating the left column height.
      */
     setupLeftColumnScrollListeners() {
+        var _a;
         // We observe intersections between the left column's scroll sentinel and
         // the viewport, so that we can ensure the left column is always sized to
         // match the _available_ viewport height. This should generally be more
         // performant than listening to scroll events on the page or column.
-        const leftColumnSentinel = this.shadowRoot?.querySelector('#left-column-scroll-sentinel');
+        const leftColumnSentinel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#left-column-scroll-sentinel');
         if (leftColumnSentinel) {
             this.leftColIntersectionObserver = new IntersectionObserver(this.updateLeftColumnHeight, {
                 threshold: [...Array(201).keys()].map(n => n / 200), // Threshold every 0.5%
@@ -1537,7 +1424,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * don't need granular intersection thresholds for this.
      */
     setupFacetsScrollListeners() {
-        const facetsSentinel = this.shadowRoot?.querySelector('#facets-scroll-sentinel');
+        var _a;
+        const facetsSentinel = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#facets-scroll-sentinel');
         if (facetsSentinel) {
             this.facetsIntersectionObserver = new IntersectionObserver(this.updateFacetFadeOut);
             this.facetsIntersectionObserver.observe(facetsSentinel);
@@ -1600,6 +1488,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 sortDirection: this.sortDirection,
                 selectedTitleFilter: this.selectedTitleFilter,
                 selectedCreatorFilter: this.selectedCreatorFilter,
+                tvClipFilter: this.tvClipFilter,
             },
         }));
     }
@@ -1668,6 +1557,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * fetching new results.
      */
     async handleQueryChange() {
+        var _a;
         // only reset if the query has actually changed
         if (!this.searchService ||
             this.dataSource.pageFetchQueryKey === this.previousQueryKey) {
@@ -1689,7 +1579,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.infiniteScroller.itemCount = this.estimatedTileCount;
             this.infiniteScroller.reload();
         }
-        if (this.withinCollection && this.baseQuery?.trim()) {
+        if (this.withinCollection && ((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim())) {
             this.defaultSortField = SortField.relevance;
             this.defaultSortDirection = null;
         }
@@ -1716,40 +1606,43 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.restoreState();
     }
     restoreState() {
+        var _a, _b, _c, _d, _e, _f;
         const restorationState = this.restorationStateHandler.getRestorationState();
         this.displayMode = restorationState.displayMode;
         if (!this.suppressURLSinParam && restorationState.searchType != null)
             this.searchType = restorationState.searchType;
-        this.selectedSort = restorationState.selectedSort ?? SortField.default;
-        this.sortDirection = restorationState.sortDirection ?? null;
-        this.selectedTitleFilter = restorationState.selectedTitleFilter ?? null;
-        this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
+        this.selectedSort = (_a = restorationState.selectedSort) !== null && _a !== void 0 ? _a : SortField.default;
+        this.sortDirection = (_b = restorationState.sortDirection) !== null && _b !== void 0 ? _b : null;
+        this.selectedTitleFilter = (_c = restorationState.selectedTitleFilter) !== null && _c !== void 0 ? _c : null;
+        this.selectedCreatorFilter = (_d = restorationState.selectedCreatorFilter) !== null && _d !== void 0 ? _d : null;
         this.selectedFacets = restorationState.selectedFacets;
         if (!this.suppressURLQuery)
             this.baseQuery = restorationState.baseQuery;
-        this.currentPage = restorationState.currentPage ?? 1;
+        this.currentPage = (_e = restorationState.currentPage) !== null && _e !== void 0 ? _e : 1;
         this.minSelectedDate = restorationState.minSelectedDate;
         this.maxSelectedDate = restorationState.maxSelectedDate;
+        this.tvClipFilter = (_f = restorationState.tvClipFilter) !== null && _f !== void 0 ? _f : 'all';
         if (this.currentPage > 1) {
             this.goToPage(this.currentPage);
         }
     }
     persistState() {
-        const isDefaultSort = this.selectedSort === this.defaultSortField;
+        var _a, _b, _c, _d;
         const restorationState = {
             displayMode: this.displayMode,
             searchType: this.suppressURLSinParam ? undefined : this.searchType,
-            selectedSort: isDefaultSort ? SortField.default : this.selectedSort,
-            sortDirection: this.sortDirection ?? undefined,
-            selectedFacets: this.selectedFacets ?? getDefaultSelectedFacets(),
+            selectedSort: this.selectedSort,
+            sortDirection: (_a = this.sortDirection) !== null && _a !== void 0 ? _a : undefined,
+            selectedFacets: (_b = this.selectedFacets) !== null && _b !== void 0 ? _b : getDefaultSelectedFacets(),
             baseQuery: this.suppressURLQuery ? undefined : this.baseQuery,
             currentPage: this.currentPage,
             titleQuery: this.titleQuery,
             creatorQuery: this.creatorQuery,
             minSelectedDate: this.minSelectedDate,
             maxSelectedDate: this.maxSelectedDate,
-            selectedTitleFilter: this.selectedTitleFilter ?? undefined,
-            selectedCreatorFilter: this.selectedCreatorFilter ?? undefined,
+            selectedTitleFilter: (_c = this.selectedTitleFilter) !== null && _c !== void 0 ? _c : undefined,
+            selectedCreatorFilter: (_d = this.selectedCreatorFilter) !== null && _d !== void 0 ? _d : undefined,
+            tvClipFilter: this.tvClipFilter,
         };
         const persistOptions = {
             forceReplace: this.dataSourceInstallInProgress,
@@ -1779,6 +1672,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Fires analytics indicating the type of facet event that took place.
      */
     facetClickHandler({ detail: { facetType, bucket, negative }, }) {
+        var _a;
         let action;
         if (negative) {
             action =
@@ -1792,7 +1686,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                     ? analyticsActions.facetSelected
                     : analyticsActions.facetDeselected;
         }
-        this.analyticsHandler?.sendEvent({
+        (_a = this.analyticsHandler) === null || _a === void 0 ? void 0 : _a.sendEvent({
             category: this.searchContext,
             action,
             label: facetType,
@@ -1804,15 +1698,17 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             // without this setTimeout, Safari just pauses until the `fetchPage` is complete
             // then scrolls to the cell
             setTimeout(() => {
+                var _a;
                 this.isScrollingToCell = true;
-                this.infiniteScroller?.scrollToCell(cellIndexToScrollTo, true);
+                (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.scrollToCell(cellIndexToScrollTo, true);
                 // This timeout is to give the scroll animation time to finish
                 // then updating the infinite scroller once we're done scrolling
                 // There's no scroll animation completion callback so we're
                 // giving it 0.5s to finish.
                 setTimeout(() => {
+                    var _a;
                     this.isScrollingToCell = false;
-                    this.infiniteScroller?.refreshAllVisibleCells();
+                    (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
                     resolve();
                 }, 500);
             }, 0);
@@ -1823,7 +1719,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * Currently equivalent to having a non-empty query.
      */
     get isRelevanceSortAvailable() {
-        return !!this.baseQuery?.trim();
+        var _a;
+        return !!((_a = this.baseQuery) === null || _a === void 0 ? void 0 : _a.trim());
     }
     /**
      * Sets the total number of tiles displayed in the infinite scroller.
@@ -1833,13 +1730,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             this.infiniteScroller.itemCount = count;
         }
     }
-    /**
-     * Applies the default sort options for the TV search results page
-     */
-    applyDefaultTVSearchSort() {
-        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
@@ -1848,6 +1738,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      *  - Weekly views for all other collections
      */
     applyDefaultCollectionSort(collectionInfo) {
+        var _a, _b, _c;
         if (this.baseQuery) {
             // If there's a query set, then we default to relevance sorting regardless of
             // the collection metadata-specified sort.
@@ -1857,13 +1748,13 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         }
         // Favorite collections sort on Date Favorited by default.
         // Other collections fall back to sorting on weekly views.
-        const baseDefaultSort = collectionInfo?.public_metadata?.identifier?.startsWith('fav-')
+        const baseDefaultSort = ((_b = (_a = collectionInfo === null || collectionInfo === void 0 ? void 0 : collectionInfo.public_metadata) === null || _a === void 0 ? void 0 : _a.identifier) === null || _b === void 0 ? void 0 : _b.startsWith('fav-'))
             ? '-favoritedate'
             : '-week';
         // The collection metadata may override the default sorting with something else
-        const metadataSort = collectionInfo?.public_metadata?.['sort-by'];
+        const metadataSort = (_c = collectionInfo === null || collectionInfo === void 0 ? void 0 : collectionInfo.public_metadata) === null || _c === void 0 ? void 0 : _c['sort-by'];
         // Prefer the metadata-specified sort if one exists
-        const defaultSortToApply = metadataSort ?? baseDefaultSort;
+        const defaultSortToApply = metadataSort !== null && metadataSort !== void 0 ? metadataSort : baseDefaultSort;
         // Account for both -field and field:dir formats
         let [field, dir] = defaultSortToApply.split(':');
         if (field.startsWith('-')) {
@@ -1886,7 +1777,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
     applyDefaultProfileSort() {
         if (this.profileElement) {
             const defaultSortField = defaultProfileElementSorts[this.profileElement];
-            this.defaultSortField = defaultSortField ?? SortField.weeklyview;
+            this.defaultSortField = defaultSortField !== null && defaultSortField !== void 0 ? defaultSortField : SortField.weeklyview;
         }
         else {
             this.defaultSortField = SortField.weeklyview;
@@ -1900,7 +1791,8 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * page are visible, but if the page is not currenlty visible, we don't need to reload
      */
     get currentVisiblePageNumbers() {
-        const visibleCells = this.infiniteScroller?.getVisibleCellIndices() ?? [];
+        var _a, _b;
+        const visibleCells = (_b = (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.getVisibleCellIndices()) !== null && _b !== void 0 ? _b : [];
         const visiblePages = new Set();
         visibleCells.forEach(cellIndex => {
             const visiblePage = Math.floor(cellIndex / this.pageSize) + 1;
@@ -1915,33 +1807,35 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         const { withinCollection } = this;
         const topCollections = ['radio'];
         const isTopCollection = topCollections.includes(withinCollection);
-        const isSubCollection = topCollections.some(topCollxn => this.dataSource.parentCollections?.includes(topCollxn));
+        const isSubCollection = topCollections.some(topCollxn => { var _a; return (_a = this.dataSource.parentCollections) === null || _a === void 0 ? void 0 : _a.includes(topCollxn); });
         return isTopCollection || isSubCollection;
     }
     /**
      * Refreshes all visible result cells in the infinite scroller.
      */
     refreshVisibleResults() {
-        this.infiniteScroller?.refreshAllVisibleCells();
+        var _a;
+        (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshAllVisibleCells();
     }
     /**
      * Callback when a result is selected
      */
     resultSelected(event) {
+        var _a, _b, _c;
         if (this.isManageView) {
             // Checked/unchecked state change -- rerender to ensure it propagates
             // this.mapDataSource(model => ({ ...model }));
             const cellIndex = this.dataSource.indexOf(event.detail);
             if (cellIndex >= 0)
-                this.infiniteScroller?.refreshCell(cellIndex);
+                (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.refreshCell(cellIndex);
             this.requestUpdate();
         }
-        this.analyticsHandler?.sendEvent({
+        (_b = this.analyticsHandler) === null || _b === void 0 ? void 0 : _b.sendEvent({
             category: this.searchContext,
             action: analyticsActions.resultSelected,
             label: event.detail.mediatype,
         });
-        this.analyticsHandler?.sendEvent({
+        (_c = this.analyticsHandler) === null || _c === void 0 ? void 0 : _c.sendEvent({
             category: this.searchContext,
             action: analyticsActions.resultSelected,
             label: `page-${this.currentPage}`,
@@ -2004,13 +1898,14 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
      * 4. Reloads the infinite scroller to display new results
      */
     fetchManageableSearchResults() {
+        var _a;
         const hasNotLoadedInitialResults = !this.dataSource.totalResults;
         const hasLoadedWithMoreResultsAvailable = !this.searchResultsLoading && this.dataSource.totalResults > 100;
         if (this.pageContext === 'search' &&
             (hasNotLoadedInitialResults || hasLoadedWithMoreResultsAvailable)) {
             this.dataSource.resetPages();
             this.dataSource.fetchPage(1, this.maxPagesToManage);
-            this.infiniteScroller?.reload();
+            (_a = this.infiniteScroller) === null || _a === void 0 ? void 0 : _a.reload();
         }
     }
     static get styles() {
@@ -2183,10 +2078,10 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         #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;
@@ -2289,46 +2184,12 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           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;
         }
 
@@ -2358,10 +2219,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           align-items: baseline;
         }
 
-        #results-total:not(.filtered) {
-          padding-bottom: 2rem;
-        }
-
         .mobile #results-total {
           position: absolute;
           right: 10px;
@@ -2532,6 +2389,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "selectedCreatorFilter", void 0);
+__decorate([
+    property({ type: String })
+], CollectionBrowser.prototype, "tvClipFilter", void 0);
 __decorate([
     property({ type: String })
 ], CollectionBrowser.prototype, "sortDirection", void 0);
@@ -2679,21 +2539,6 @@ __decorate([
 __decorate([
     state()
 ], CollectionBrowser.prototype, "placeholderType", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "selectedTVNetwork", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "selectedTVShow", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "tvMapsPopulated", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "loadingNetworks", void 0);
-__decorate([
-    state()
-], CollectionBrowser.prototype, "loadingShows", void 0);
 __decorate([
     query('#content-container')
 ], CollectionBrowser.prototype, "contentContainer", void 0);
@@ -2709,12 +2554,6 @@ __decorate([
 __decorate([
     query('smart-facet-bar')
 ], CollectionBrowser.prototype, "smartFacetBar", void 0);
-__decorate([
-    query('#tv-networks')
-], CollectionBrowser.prototype, "tvNetworksDropdown", void 0);
-__decorate([
-    query('#tv-shows')
-], CollectionBrowser.prototype, "tvShowsDropdown", void 0);
 __decorate([
     property({ type: Object, attribute: false })
 ], CollectionBrowser.prototype, "analyticsHandler", void 0);