@internetarchive/collection-browser 3.3.3 → 3.3.4-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;
@@ -460,6 +459,15 @@ 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 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 { mergeSelectedFacets, 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,8 @@ 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;
         /**
          * Updates the height of the left column according to its position on the page.
          * Arrow function ensures proper `this` binding.
@@ -969,6 +972,89 @@ 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();
+        (_b = this.tvShowsDropdown) === null || _b === void 0 ? void 0 : _b.classList.remove('loading');
+    }
+    async networksDropdownChanged() {
+        var _a;
+        if (((_a = this.tvNetworksDropdown) === null || _a === void 0 ? void 0 : _a.selectedIndex) === 0) {
+            this.selectedTVNetwork = undefined;
+            return;
+        }
+        this.selectedTVNetwork = this.tvNetworksDropdown.selectedOptions[0].value;
+        let newNetworkFacets = getDefaultSelectedFacets();
+        for (const [channel, network,] of this.dataSource.tvChannelMaps.channelToNetwork.entries()) {
+            if (network === this.selectedTVNetwork) {
+                newNetworkFacets = updateSelectedFacetBucket(newNetworkFacets, 'creator', {
+                    key: channel.toLowerCase(),
+                    count: 0,
+                    state: 'selected',
+                });
+            }
+        }
+        log(newNetworkFacets);
+        this.selectedFacets = mergeSelectedFacets(this.selectedFacets, newNetworkFacets);
+        log(this.selectedFacets);
+    }
+    async showsDropdownChanged() {
+        var _a;
+        if (((_a = this.tvShowsDropdown) === null || _a === void 0 ? void 0 : _a.selectedIndex) === 0) {
+            this.selectedTVShow = undefined;
+            return;
+        }
+        this.selectedTVShow = this.tvShowsDropdown.selectedOptions[0].value;
+        this.selectedFacets = updateSelectedFacetBucket(this.selectedFacets, 'program', {
+            key: this.selectedTVShow,
+            count: 0,
+            state: 'selected',
+        });
+    }
+    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());
+        return html `
+      <div id="tv-filters" slot="facets-top">
+        <select
+          id="tv-networks"
+          class="tv-filter-dropdown"
+          @click=${this.networksDropdownClicked}
+          @change=${this.networksDropdownChanged}
+        >
+          <option selected value="">${msg('Filter by Network')}</option>
+          ${map(networks, n => html `<option>${n}</option>`)}
+        </select>
+        <select
+          id="tv-shows"
+          class="tv-filter-dropdown"
+          @click=${this.showsDropdownClicked}
+          @change=${this.showsDropdownChanged}
+        >
+          <option selected value="">${msg('Filter by Show')}</option>
+          ${map(shows, s => html `<option>${s}</option>`)}
+        </select>
+      </div>
+    `;
+    }
     /**
      * The template for the facets component alone, without any surrounding wrappers.
      */
@@ -1026,6 +1112,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 +1228,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 +1246,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 +1574,6 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
                 sortDirection: this.sortDirection,
                 selectedTitleFilter: this.selectedTitleFilter,
                 selectedCreatorFilter: this.selectedCreatorFilter,
-                tvClipFilter: this.tvClipFilter,
             },
         }));
     }
@@ -1606,7 +1691,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 +1706,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 +1726,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 +2267,16 @@ let CollectionBrowser = class CollectionBrowser extends LitElement {
           line-height: 1.3rem;
         }
 
+        #tv-filters {
+          margin-bottom: 15px;
+        }
+
+        .tv-filter-dropdown {
+          width: 100%;
+          padding: 3px;
+          margin-bottom: 5px;
+        }
+
         #facets-container {
           position: relative;
           max-height: 0;
@@ -2389,9 +2482,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 +2650,18 @@ __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([
+    query('#tv-networks')
+], CollectionBrowser.prototype, "tvNetworksDropdown", void 0);
+__decorate([
+    query('#tv-shows')
+], CollectionBrowser.prototype, "tvShowsDropdown", void 0);
 CollectionBrowser = __decorate([
     customElement('collection-browser')
 ], CollectionBrowser);