@internetarchive/collection-browser 3.4.0 → 3.4.1-alpha-webdev7761.0

package/dist/src/collection-browser.d.ts

@@ -7,7 +7,7 @@ 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 { SelectedFacets, SortField, CollectionBrowserContext, TileModel, CollectionDisplayMode, FacetEventDetails, FacetLoadStrategy, TvClipFilterType } from './models';
+import { SelectedFacets, SortField, CollectionBrowserContext, TileModel, CollectionDisplayMode, FacetEventDetails, FacetLoadStrategy } from './models';
 import { RestorationStateHandlerInterface } from './restoration-state-handler';
 import type { CollectionBrowserQueryState, CollectionBrowserSearchInterface } from './data-source/collection-browser-query-state';
 import type { CollectionBrowserDataSourceInterface } from './data-source/collection-browser-data-source-interface';
@@ -59,7 +59,6 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
     selectedSort: SortField;
     selectedTitleFilter: string | null;
     selectedCreatorFilter: string | null;
-    tvClipFilter: TvClipFilterType;
     sortDirection: SortDirection | null;
     defaultSortField: Exclude<SortField, SortField.default>;
     defaultSortDirection: SortDirection | null;
@@ -280,6 +279,10 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
         letterFilters?: boolean | undefined;
         sort?: boolean | undefined;
     }): void;
+    /**
+     * Resets any selected TV network/show dropdowns to their default state
+     */
+    private clearTVDropdowns;
     /**
      * Returns true if the current value of `this.selectedFacets` contains
      * any facet buckets than have been selected or negated, or false otherwise.
@@ -460,6 +463,16 @@ export declare class CollectionBrowser extends LitElement implements InfiniteScr
      * including the collapsible container (with header) and the facets themselves.
      */
     private get mobileFacetsTemplate();
+    private selectedTVNetwork?;
+    private selectedTVShow?;
+    private shouldPopulateShows;
+    private tvNetworksDropdown?;
+    private tvShowsDropdown?;
+    private networksDropdownClicked;
+    private showsDropdownClicked;
+    private networksDropdownChanged;
+    private showsDropdownChanged;
+    private get tvDropdownFiltersTemplate();
     /**
      * The template for the facets component alone, without any surrounding wrappers.
      */

package/dist/src/collection-browser.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement, nothing, } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { msg } from '@lit/localize';
 import { SearchType, } from '@internetarchive/search-service';
@@ -22,6 +23,7 @@ import './manage/manage-bar';
 import './collection-facets';
 import './circular-activity-indicator';
 import './collection-facets/smart-facets/smart-facet-bar';
+import { updateSelectedFacetBucket, } from './utils/facet-utils';
 let CollectionBrowser = class CollectionBrowser extends LitElement {
     constructor() {
         super();
@@ -33,7 +35,6 @@ 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;
@@ -183,6 +184,9 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
          */
         this.dataSourceInstallInProgress = false;
         this.placeholderCellTemplate = html `<collection-browser-loading-tile></collection-browser-loading-tile>`;
+        this.selectedTVNetwork = undefined;
+        this.selectedTVShow = undefined;
+        this.shouldPopulateShows = false;
         /**
          * Updates the height of the left column according to its position on the page.
          * Arrow function ensures proper `this` binding.
@@ -322,10 +326,24 @@ 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.selectedIndex = 0;
+        }
+        if (this.tvShowsDropdown) {
+            this.tvShowsDropdown.selectedIndex = 0;
+        }
+    }
     /**
      * Returns true if the current value of `this.selectedFacets` contains
      * any facet buckets than have been selected or negated, or false otherwise.
@@ -969,6 +987,129 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
       </details>
     `;
     }
+    async networksDropdownClicked() {
+        var _a, _b;
+        (_a = this.tvNetworksDropdown) === null || _a === void 0 ? void 0 : _a.classList.add('loading');
+        await this.dataSource.populateTVChannelMaps();
+        (_b = this.tvNetworksDropdown) === null || _b === void 0 ? void 0 : _b.classList.remove('loading');
+    }
+    async showsDropdownClicked() {
+        var _a, _b;
+        (_a = this.tvShowsDropdown) === null || _a === void 0 ? void 0 : _a.classList.add('loading');
+        await this.dataSource.populateTVChannelMaps();
+        // Delay for a single tick so that the loading indicator will be rendered
+        // while the dropdown options are being added
+        await new Promise(res => setTimeout(res, 0));
+        this.shouldPopulateShows = true;
+        await this.updateComplete;
+        (_b = this.tvShowsDropdown) === null || _b === void 0 ? void 0 : _b.classList.remove('loading');
+    }
+    async networksDropdownChanged() {
+        const previousNetwork = this.selectedTVNetwork;
+        this.selectedTVNetwork =
+            this.tvNetworksDropdown.selectedOptions[0].value || 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;
+        this.selectedTVShow =
+            this.tvShowsDropdown.selectedOptions[0].value || 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;
+        log('start filters template preprocess', Date.now());
+        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);
+        log('end filters template preprocess', Date.now());
+        const makeNetworkOption = (network) => html `
+      <option ?selected=${this.selectedTVNetwork === network}>
+        ${network}
+      </option>
+    `;
+        const makeShowOption = (show) => html `
+      <option ?selected=${this.selectedTVShow === show}>${show}</option>
+    `;
+        const loadingIndicator = html `
+      <img src="https://archive.org/images/loading.gif" />
+    `;
+        return html `
+      <div id="tv-filters" slot="facets-top">
+        <div class="tv-filter-dropdown-wrap">
+          <select
+            id="tv-networks"
+            class="tv-filter-dropdown"
+            @click=${this.networksDropdownClicked}
+            @change=${this.networksDropdownChanged}
+          >
+            <option value="" ?selected=${!this.selectedTVNetwork}>
+              ${msg('Filter by Network')}
+            </option>
+            ${map(networks, makeNetworkOption)}
+          </select>
+          ${loadingIndicator}
+        </div>
+
+        <div class="tv-filter-dropdown-wrap">
+          <select
+            id="tv-shows"
+            class="tv-filter-dropdown"
+            @click=${this.showsDropdownClicked}
+            @change=${this.showsDropdownChanged}
+          >
+            <option value="" ?selected=${!this.selectedTVShow}>
+              ${msg('Filter by Show')}
+            </option>
+            ${this.shouldPopulateShows ? map(shows, makeShowOption) : nothing}
+          </select>
+          ${loadingIndicator}
+        </div>
+      </div>
+    `;
+    }
     /**
      * The template for the facets component alone, without any surrounding wrappers.
      */
@@ -1026,6 +1167,7 @@ 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
@@ -1141,7 +1283,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;
+        var _a, _b;
         log('Installing data source & query state in CB:', dataSource, queryState);
         if (this.dataSource)
             this.removeController(this.dataSource);
@@ -1159,7 +1301,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         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.
@@ -1488,7 +1629,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 sortDirection: this.sortDirection,
                 selectedTitleFilter: this.selectedTitleFilter,
                 selectedCreatorFilter: this.selectedCreatorFilter,
-                tvClipFilter: this.tvClipFilter,
             },
         }));
     }
@@ -1606,7 +1746,7 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         this.restoreState();
     }
     restoreState() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         const restorationState = this.restorationStateHandler.getRestorationState();
         this.displayMode = restorationState.displayMode;
         if (!this.suppressURLSinParam && restorationState.searchType != null)
@@ -1621,7 +1761,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
         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);
         }
@@ -1642,7 +1781,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
             maxSelectedDate: this.maxSelectedDate,
             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,
@@ -2184,6 +2322,31 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           line-height: 1.3rem;
         }
 
+        #tv-filters {
+          margin-bottom: 15px;
+        }
+
+        .tv-filter-dropdown {
+          width: 100%;
+          padding: 3px;
+        }
+
+        .tv-filter-dropdown-wrap {
+          display: flex;
+          align-items: center;
+          column-gap: 5px;
+          margin-bottom: 5px;
+        }
+
+        .tv-filter-dropdown-wrap > img {
+          flex: 1;
+          visibility: hidden;
+        }
+
+        .tv-filter-dropdown.loading + img {
+          visibility: visible;
+        }
+
         #facets-container {
           position: relative;
           max-height: 0;
@@ -2389,9 +2552,6 @@ __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);
@@ -2560,6 +2720,21 @@ __decorate([
 __decorate([
     query('infinite-scroller')
 ], CollectionBrowser.prototype, "infiniteScroller", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "selectedTVNetwork", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "selectedTVShow", void 0);
+__decorate([
+    state()
+], CollectionBrowser.prototype, "shouldPopulateShows", void 0);
+__decorate([
+    query('#tv-networks')
+], CollectionBrowser.prototype, "tvNetworksDropdown", void 0);
+__decorate([
+    query('#tv-shows')
+], CollectionBrowser.prototype, "tvShowsDropdown", void 0);
 CollectionBrowser = __decorate([
     customElement('collection-browser')
 ], CollectionBrowser);