@internetarchive/collection-browser 2.13.2-alpha-webdev7687.5 → 2.13.2-alpha-webdev7687.7

package/src/tiles/tile-mediatype-icon.ts

@@ -5,7 +5,7 @@ import {
   mediatypeConfig,
   MediatypeConfigKey,
 } from '../mediatype/mediatype-config';
-import { TileModel } from '../models';
+import type { TileModel } from '../models';
 
 const TV_COMMERCIAL_COLLECTION = 'tv_ads';
 const TV_FACT_CHECK_COLLECTION = 'factchecked';
@@ -14,14 +14,8 @@ const RADIO_COLLECTIONS = new Set(['radio', 'radioprogram']);
 
 @customElement('tile-mediatype-icon')
 export class TileMediatypeIcon extends LitElement {
-  @property({ type: String }) mediatype?: MediatypeConfigKey;
-
   @property({ type: Object }) model?: TileModel;
 
-  @property({ type: Array }) collections?: string[];
-
-  @property({ type: Boolean }) isTvSearchResult = false;
-
   @property({ type: Boolean }) showText = false;
 
   /**
@@ -30,7 +24,7 @@ export class TileMediatypeIcon extends LitElement {
   private get displayMediatype(): MediatypeConfigKey {
     if (this.isTvItem) return this.tvDisplayMediatype;
     if (this.isRadioItem) return 'radio';
-    return this.mediatype ?? 'none';
+    return this.model?.mediatype ?? 'none';
   }
 
   /**
@@ -39,9 +33,9 @@ export class TileMediatypeIcon extends LitElement {
   private get tvDisplayMediatype(): MediatypeConfigKey {
     if (this.isTvCommercial) {
       return 'tvCommercial';
-    } else if (this.isTvSearchResult && this.isTvFactCheck) {
+    } else if (this.model?.isTvSearchResult && this.isTvFactCheck) {
       return 'tvFactCheck';
-    } else if (this.isTvSearchResult && this.isTvQuote) {
+    } else if (this.model?.isTvSearchResult && this.isTvQuote) {
       return 'tvQuote';
     }
 
@@ -52,20 +46,26 @@ export class TileMediatypeIcon extends LitElement {
    * Whether this represents a TV item
    */
   private get isTvItem(): boolean {
-    return (
-      this.mediatype === 'movies' &&
-      !!this.collections?.some(id => TV_COLLECTIONS.has(id))
+    return !!(
+      this.model?.mediatype === 'movies' &&
+      this.model?.collections.some(id => TV_COLLECTIONS.has(id))
     );
   }
 
   private get isTvCommercial(): boolean {
-    // Contains one or more TV ad identifiers
-    return !!this.model?.adIds?.length;
+    // Contains one or more TV ad identifiers or is in the tv_ads collection
+    return !!(
+      this.model?.adIds?.length ||
+      this.model?.collections.includes(TV_COMMERCIAL_COLLECTION)
+    );
   }
 
   private get isTvFactCheck(): boolean {
-    // Contains one or more fact-check URLs
-    return !!this.model?.factChecks?.length;
+    // Contains one or more fact-check URLs or is in the factchecked collection
+    return !!(
+      this.model?.factChecks?.length ||
+      this.model?.collections.includes(TV_FACT_CHECK_COLLECTION)
+    );
   }
 
   private get isTvQuote(): boolean {
@@ -76,9 +76,9 @@ export class TileMediatypeIcon extends LitElement {
    * Whether this represents a radio item
    */
   private get isRadioItem(): boolean {
-    return (
-      this.mediatype === 'audio' &&
-      !!this.collections?.some(id => RADIO_COLLECTIONS.has(id))
+    return !!(
+      this.model?.mediatype === 'audio' &&
+      this.model?.collections.some(id => RADIO_COLLECTIONS.has(id))
     );
   }
 

package/test/restoration-state-handler.test.ts

@@ -1,7 +1,10 @@
 import { SearchType } from '@internetarchive/search-service';
 import { expect } from '@open-wc/testing';
 import { SortField, getDefaultSelectedFacets } from '../src/models';
-import { RestorationStateHandler } from '../src/restoration-state-handler';
+import {
+  RestorationState,
+  RestorationStateHandler,
+} from '../src/restoration-state-handler';
 
 describe('Restoration state handler', () => {
   it('should restore query from URL', async () => {
@@ -242,6 +245,35 @@ describe('Restoration state handler', () => {
     );
   });
 
+  it('should restore any TV clip filters from URL', async () => {
+    const handler = new RestorationStateHandler({ context: 'search' });
+    const url = new URL(window.location.href);
+
+    // Commercials
+    url.search = '?only_commercials=1';
+    window.history.replaceState({ path: url.href }, '', url.href);
+    const commercialsRestorationState = handler.getRestorationState();
+    expect(commercialsRestorationState.tvClipFilter).to.equal('commercials');
+
+    // Fact checks
+    url.search = '?only_factchecks=1';
+    window.history.replaceState({ path: url.href }, '', url.href);
+    const factchecksRestorationState = handler.getRestorationState();
+    expect(factchecksRestorationState.tvClipFilter).to.equal('factchecks');
+
+    // Quotes
+    url.search = '?only_quotes=1';
+    window.history.replaceState({ path: url.href }, '', url.href);
+    const quotesRestorationState = handler.getRestorationState();
+    expect(quotesRestorationState.tvClipFilter).to.equal('quotes');
+
+    // No filter param
+    url.search = '';
+    window.history.replaceState({ path: url.href }, '', url.href);
+    const unfilteredRestorationState = handler.getRestorationState();
+    expect(unfilteredRestorationState.tvClipFilter).not.to.exist;
+  });
+
   it('should restore sort from URL (space format)', async () => {
     const handler = new RestorationStateHandler({ context: 'search' });
 
@@ -373,6 +405,44 @@ describe('Restoration state handler', () => {
     expect(window.location.search).to.equal('?page=2');
   });
 
+  it('should persist TV clip filter types to the URL', async () => {
+    const url = new URL(window.location.href);
+    url.search = '';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    // Commercials
+    const handler = new RestorationStateHandler({ context: 'search' });
+    handler.persistState({
+      tvClipFilter: 'commercials',
+      selectedFacets: getDefaultSelectedFacets(),
+    });
+    expect(window.location.search).to.equal('?only_commercials=1');
+
+    // Fact checks
+    window.history.replaceState({ path: url.href }, '', url.href);
+    handler.persistState({
+      tvClipFilter: 'factchecks',
+      selectedFacets: getDefaultSelectedFacets(),
+    });
+    expect(window.location.search).to.equal('?only_factchecks=1');
+
+    // Quotes
+    window.history.replaceState({ path: url.href }, '', url.href);
+    handler.persistState({
+      tvClipFilter: 'quotes',
+      selectedFacets: getDefaultSelectedFacets(),
+    });
+    expect(window.location.search).to.equal('?only_quotes=1');
+
+    // Unfiltered
+    window.history.replaceState({ path: url.href }, '', url.href);
+    handler.persistState({
+      tvClipFilter: 'all',
+      selectedFacets: getDefaultSelectedFacets(),
+    });
+    expect(window.location.search).to.equal('');
+  });
+
   it('should upgrade legacy search params to new ones', async () => {
     const url = new URL(window.location.href);
     url.search = '?q=foo';

package/test/tiles/tile-mediatype-icon.test.ts

@@ -3,11 +3,19 @@ import { html } from 'lit';
 import type { TileMediatypeIcon } from '../../src/tiles/tile-mediatype-icon';
 
 import '../../src/tiles/tile-mediatype-icon';
+import { TileModel } from '../../src/models';
+import { MediaType } from '@internetarchive/field-parsers';
 
 describe('Mediatype Icon', () => {
+  let model: TileModel;
+  beforeEach(() => {
+    model = new TileModel({});
+  });
+
   it('renders component', async () => {
+    model.mediatype = 'texts';
     const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon mediatype="texts"></tile-mediatype-icon>
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon');
@@ -15,8 +23,9 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders basic mediatype correctly', async () => {
+    model.mediatype = 'movies';
     const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon mediatype="movies"></tile-mediatype-icon>
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -26,36 +35,60 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders TV mediatype', async () => {
+    model.mediatype = 'movies';
+    model.collections = ['tvnews'];
     const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon
-        mediatype="movies"
-        .collections=${['tvnews']}
-      ></tile-mediatype-icon>
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
     expect(iconDiv.title).to.equal('TV');
   });
 
-  it('renders TV Commercial mediatype', async () => {
+  it('renders TV Commercial mediatype for TV items with ad ids', async () => {
+    model.mediatype = 'movies';
+    model.collections = ['tvnews'];
+    model.adIds = ['foo'];
     const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon
-        mediatype="movies"
-        .collections=${['tvnews', 'tv_ads']}
-      ></tile-mediatype-icon>
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
     expect(iconDiv.title).to.equal('TV Commercial');
   });
 
-  it('renders TV Fact Check mediatype for search results', async () => {
+  it('renders TV Commercial mediatype for TV items in tv_ads collection', async () => {
+    model.mediatype = 'movies';
+    model.collections = ['tvnews', 'tv_ads'];
     const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon
-        isTvSearchResult
-        mediatype="movies"
-        .collections=${['tvnews', 'factchecked']}
-      ></tile-mediatype-icon>
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
+    `);
+
+    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
+    expect(iconDiv.title).to.equal('TV Commercial');
+  });
+
+  it('renders TV Fact Check mediatype for TV search results with fact check URLs', async () => {
+    model.hitType = 'tv_clip';
+    model.hitRequestSource = 'search_query';
+    model.mediatype = 'movies';
+    model.collections = ['tvnews'];
+    model.factChecks = ['https://example.com'];
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
+    `);
+
+    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
+    expect(iconDiv.title).to.equal('TV Fact Check');
+  });
+
+  it('renders TV Fact Check mediatype for TV search results in factchecked collection', async () => {
+    model.hitType = 'tv_clip';
+    model.hitRequestSource = 'search_query';
+    model.mediatype = 'movies';
+    model.collections = ['tvnews', 'factchecked'];
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -63,11 +96,41 @@ describe('Mediatype Icon', () => {
   });
 
   it('does not use TV Fact Check mediatype for non-search results', async () => {
+    model.hitType = 'tv_clip';
+    model.hitRequestSource = 'collection_members';
+    model.mediatype = 'movies';
+    model.collections = ['tvnews'];
+    model.factChecks = ['https://example.com'];
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
+    `);
+
+    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
+    expect(iconDiv.title).to.equal('TV');
+  });
+
+  it('renders TV Quote mediatype for TV search results that are clips', async () => {
+    model.hitType = 'tv_clip';
+    model.hitRequestSource = 'search_query';
+    model.mediatype = 'movies';
+    model.collections = ['tvnews'];
+    model.isClip = true;
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
+    `);
+
+    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
+    expect(iconDiv.title).to.equal('TV Quote');
+  });
+
+  it('does not use TV Quote mediatype for non-search results', async () => {
+    model.hitType = 'tv_clip';
+    model.hitRequestSource = 'collection_members';
+    model.mediatype = 'movies';
+    model.collections = ['tvnews'];
+    model.isClip = true;
     const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon
-        mediatype="movies"
-        .collections=${['tvnews', 'factchecked']}
-      ></tile-mediatype-icon>
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -75,11 +138,10 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders radio mediatype', async () => {
+    model.mediatype = 'audio';
+    model.collections = ['radio'];
     const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon
-        mediatype="audio"
-        .collections=${['radio']}
-      ></tile-mediatype-icon>
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -87,8 +149,9 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders no icon if mediatype is unrecognized', async () => {
+    model.mediatype = 'foobar' as MediaType;
     const el = await fixture<TileMediatypeIcon>(html`
-      <tile-mediatype-icon mediatype="foobar"></tile-mediatype-icon>
+      <tile-mediatype-icon .model=${model}></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon');