@internetarchive/collection-browser 2.12.2 → 2.12.3-alpha-webdev7452.0

package/dist/src/tiles/mediatype-icon.js

@@ -1,25 +1,57 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { mediatypeConfig } from '../mediatype/mediatype-config';
+import { mediatypeConfig, } from '../mediatype/mediatype-config';
+const TV_COMMERCIAL_COLLECTION = 'tv_ads';
+const TV_FACT_CHECK_COLLECTION = 'factchecked';
+const TV_TOP_LEVEL_COLLECTIONS = new Set(['tvnews', 'tvarchive']);
+const RADIO_TOP_LEVEL_COLLECTIONS = new Set(['radio', 'radioprogram']);
 let MediatypeIcon = class MediatypeIcon extends LitElement {
     constructor() {
         super(...arguments);
+        this.isTvSearchResult = false;
         this.showText = false;
     }
+    /**
+     * Returns the appropriate mediatype config key for the current mediatype/collections.
+     */
     get displayMediatype() {
+        var _a;
+        if (this.isTvItem)
+            return this.tvDisplayMediatype;
+        if (this.isRadioItem)
+            return 'radio';
+        return (_a = this.mediatype) !== null && _a !== void 0 ? _a : 'none';
+    }
+    /**
+     * Returns the appropriate TV mediatype, depending on the current collections.
+     */
+    get tvDisplayMediatype() {
         var _a, _b;
-        const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
-        const radioIdentifier = ['radio', 'radioprogram'];
-        if (this.mediatype === 'movies' &&
-            ((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => tvIdentifier.indexOf(id) >= 0))) {
-            return 'tv';
+        if ((_a = this.collections) === null || _a === void 0 ? void 0 : _a.includes(TV_COMMERCIAL_COLLECTION)) {
+            return 'tvCommercial';
         }
-        if (this.mediatype === 'audio' &&
-            ((_b = this.collections) === null || _b === void 0 ? void 0 : _b.some(id => radioIdentifier.indexOf(id) >= 0))) {
-            return 'radio';
+        else if (this.isTvSearchResult &&
+            ((_b = this.collections) === null || _b === void 0 ? void 0 : _b.includes(TV_FACT_CHECK_COLLECTION))) {
+            return 'tvFactCheck';
         }
-        return this.mediatype || '';
+        return 'tv';
+    }
+    /**
+     * Whether this represents a TV item
+     */
+    get isTvItem() {
+        var _a;
+        return (this.mediatype === 'movies' &&
+            !!((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => TV_TOP_LEVEL_COLLECTIONS.has(id))));
+    }
+    /**
+     * Whether this represents a radio item
+     */
+    get isRadioItem() {
+        var _a;
+        return (this.mediatype === 'audio' &&
+            !!((_a = this.collections) === null || _a === void 0 ? void 0 : _a.some(id => RADIO_TOP_LEVEL_COLLECTIONS.has(id))));
     }
     render() {
         const config = mediatypeConfig[this.displayMediatype];
@@ -74,6 +106,9 @@ __decorate([
 __decorate([
     property({ type: Array })
 ], MediatypeIcon.prototype, "collections", void 0);
+__decorate([
+    property({ type: Boolean })
+], MediatypeIcon.prototype, "isTvSearchResult", void 0);
 __decorate([
     property({ type: Boolean })
 ], MediatypeIcon.prototype, "showText", void 0);

package/dist/src/tiles/mediatype-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGzD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAKwB,aAAQ,GAAG,KAAK,CAAC;IAqEhD,CAAC;IAnEC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D,CAAC;YACD,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA,EAAE,CAAC;QAChB,CAAC;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;iBACzC,MAAM,CAAC,IAAI;kCACM,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BT,CAAC;IACJ,CAAC;CACF,CAAA;AAzE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CA0EzB","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype: string | undefined;\n\n  @property({ type: Array }) collections: string[] | undefined;\n\n  @property({ type: Boolean }) showText = false;\n\n  private get displayMediatype(): string {\n    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n    const radioIdentifier = ['radio', 'radioprogram'];\n\n    if (\n      this.mediatype === 'movies' &&\n      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'tv';\n    }\n    if (\n      this.mediatype === 'audio' &&\n      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n    ) {\n      return 'radio';\n    }\n    return this.mediatype || '';\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        title=\"${config.text}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #icon {\n        height: var(--iconHeight, 25px);\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n        pointer-events: none;\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}
+{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport {\n  mediatypeConfig,\n  MediatypeConfigKey,\n} from '../mediatype/mediatype-config';\n\nconst TV_COMMERCIAL_COLLECTION = 'tv_ads';\nconst TV_FACT_CHECK_COLLECTION = 'factchecked';\nconst TV_TOP_LEVEL_COLLECTIONS = new Set(['tvnews', 'tvarchive']);\nconst RADIO_TOP_LEVEL_COLLECTIONS = new Set(['radio', 'radioprogram']);\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n  @property({ type: String }) mediatype?: MediatypeConfigKey;\n\n  @property({ type: Array }) collections?: string[];\n\n  @property({ type: Boolean }) isTvSearchResult = false;\n\n  @property({ type: Boolean }) showText = false;\n\n  /**\n   * Returns the appropriate mediatype config key for the current mediatype/collections.\n   */\n  private get displayMediatype(): MediatypeConfigKey {\n    if (this.isTvItem) return this.tvDisplayMediatype;\n    if (this.isRadioItem) return 'radio';\n    return this.mediatype ?? 'none';\n  }\n\n  /**\n   * Returns the appropriate TV mediatype, depending on the current collections.\n   */\n  private get tvDisplayMediatype(): MediatypeConfigKey {\n    if (this.collections?.includes(TV_COMMERCIAL_COLLECTION)) {\n      return 'tvCommercial';\n    } else if (\n      this.isTvSearchResult &&\n      this.collections?.includes(TV_FACT_CHECK_COLLECTION)\n    ) {\n      return 'tvFactCheck';\n    }\n\n    return 'tv';\n  }\n\n  /**\n   * Whether this represents a TV item\n   */\n  private get isTvItem(): boolean {\n    return (\n      this.mediatype === 'movies' &&\n      !!this.collections?.some(id => TV_TOP_LEVEL_COLLECTIONS.has(id))\n    );\n  }\n\n  /**\n   * Whether this represents a radio item\n   */\n  private get isRadioItem(): boolean {\n    return (\n      this.mediatype === 'audio' &&\n      !!this.collections?.some(id => RADIO_TOP_LEVEL_COLLECTIONS.has(id))\n    );\n  }\n\n  render() {\n    const config = mediatypeConfig[this.displayMediatype];\n    if (!config) {\n      return html``;\n    }\n\n    return html`\n      <div\n        id=\"icon\"\n        class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n        title=\"${config.text}\"\n        style=\"--iconFillColor: ${config.color}\"\n      >\n        ${config.icon}\n        <p class=\"status-text\">${config.text}</p>\n      </div>\n    `;\n  }\n\n  static get styles(): CSSResultGroup {\n    return css`\n      #icon {\n        height: var(--iconHeight, 25px);\n      }\n\n      .status-text {\n        font-size: 14px;\n        color: #2c2c2c;\n        margin: auto;\n        display: block;\n        text-align: var(--iconTextAlign, center);\n      }\n\n      #icon.hide-text p {\n        display: none;\n      }\n\n      svg {\n        height: var(--iconHeight, 10px);\n        width: var(--iconWidth, 10px);\n        pointer-events: none;\n      }\n\n      .fill-color {\n        fill: var(--iconFillColor, '#000000');\n      }\n    `;\n  }\n}\n"]}

package/dist/test/mediatype-config.test.js

@@ -1,12 +1,6 @@
 import { expect } from '@open-wc/testing';
 import { mediatypeConfig } from '../src/mediatype/mediatype-config';
 describe('mediatypeConfig', () => {
-    it('returns undefined', () => {
-        expect(mediatypeConfig['']).to.equal(undefined);
-        expect(mediatypeConfig.test).to.equal(undefined);
-        expect(mediatypeConfig.media).to.equal(undefined);
-        expect(mediatypeConfig.testing).to.equal(undefined);
-    });
     it('returns audio', () => {
         expect(mediatypeConfig.audio).to.exist;
         expect(mediatypeConfig.audio.color).to.exist;

package/dist/test/mediatype-config.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"mediatype-config.test.js","sourceRoot":"","sources":["../../test/mediatype-config.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;QAC3B,MAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAChD,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACjD,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAClD,MAAM,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;QACvB,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACvC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7C,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5C,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { mediatypeConfig } from '../src/mediatype/mediatype-config';\n\ndescribe('mediatypeConfig', () => {\n  it('returns undefined', () => {\n    expect(mediatypeConfig['']).to.equal(undefined);\n    expect(mediatypeConfig.test).to.equal(undefined);\n    expect(mediatypeConfig.media).to.equal(undefined);\n    expect(mediatypeConfig.testing).to.equal(undefined);\n  });\n\n  it('returns audio', () => {\n    expect(mediatypeConfig.audio).to.exist;\n    expect(mediatypeConfig.audio.color).to.exist;\n    expect(mediatypeConfig.audio.icon).to.exist;\n    expect(mediatypeConfig.audio.text).to.exist;\n  });\n});\n"]}
+{"version":3,"file":"mediatype-config.test.js","sourceRoot":"","sources":["../../test/mediatype-config.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;QACvB,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QACvC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC7C,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAC5C,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC9C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { mediatypeConfig } from '../src/mediatype/mediatype-config';\n\ndescribe('mediatypeConfig', () => {\n  it('returns audio', () => {\n    expect(mediatypeConfig.audio).to.exist;\n    expect(mediatypeConfig.audio.color).to.exist;\n    expect(mediatypeConfig.audio.icon).to.exist;\n    expect(mediatypeConfig.audio.text).to.exist;\n  });\n});\n"]}

package/dist/test/tiles/mediatype-icon.test.d.ts

@@ -0,0 +1 @@
+import '../../src/tiles/mediatype-icon';

package/dist/test/tiles/mediatype-icon.test.js

@@ -0,0 +1,88 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../../src/tiles/mediatype-icon';
+describe('Mediatype Icon', () => {
+    it('renders component', async () => {
+        var _a;
+        const el = await fixture(html `
+      <mediatype-icon mediatype="texts"></mediatype-icon>
+    `);
+        const iconDiv = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#icon');
+        expect(iconDiv).to.exist;
+    });
+    it('renders basic mediatype correctly', async () => {
+        var _a;
+        const el = await fixture(html `
+      <mediatype-icon mediatype="movies"></mediatype-icon>
+    `);
+        const iconDiv = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#icon');
+        expect(iconDiv.title).to.equal('Movie');
+        expect(iconDiv.getAttribute('style')).to.include('#f1644b');
+        expect(iconDiv.children[0]).to.be.instanceOf(SVGElement);
+    });
+    it('renders TV mediatype', async () => {
+        var _a;
+        const el = await fixture(html `
+      <mediatype-icon
+        mediatype="movies"
+        .collections=${['tvnews']}
+      ></mediatype-icon>
+    `);
+        const iconDiv = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#icon');
+        expect(iconDiv.title).to.equal('TV');
+    });
+    it('renders TV Commercial mediatype', async () => {
+        var _a;
+        const el = await fixture(html `
+      <mediatype-icon
+        mediatype="movies"
+        .collections=${['tvnews', 'tv_ads']}
+      ></mediatype-icon>
+    `);
+        const iconDiv = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#icon');
+        expect(iconDiv.title).to.equal('TV Commercial');
+    });
+    it('renders TV Fact Check mediatype for search results', async () => {
+        var _a;
+        const el = await fixture(html `
+      <mediatype-icon
+        isTvSearchResult
+        mediatype="movies"
+        .collections=${['tvnews', 'factchecked']}
+      ></mediatype-icon>
+    `);
+        const iconDiv = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#icon');
+        expect(iconDiv.title).to.equal('TV Fact Check');
+    });
+    it('does not use TV Fact Check mediatype for non-search results', async () => {
+        var _a;
+        const el = await fixture(html `
+      <mediatype-icon
+        mediatype="movies"
+        .collections=${['tvnews', 'factchecked']}
+      ></mediatype-icon>
+    `);
+        const iconDiv = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#icon');
+        expect(iconDiv.title).to.equal('TV');
+    });
+    it('renders radio mediatype', async () => {
+        var _a;
+        const el = await fixture(html `
+      <mediatype-icon
+        mediatype="audio"
+        .collections=${['radio']}
+      ></mediatype-icon>
+    `);
+        const iconDiv = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#icon');
+        expect(iconDiv.title).to.equal('Radio');
+    });
+    it('renders no icon if mediatype is unrecognized', async () => {
+        var _a;
+        const el = await fixture(html `
+      <mediatype-icon mediatype="foobar"></mediatype-icon>
+    `);
+        const iconDiv = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#icon');
+        expect(iconDiv).not.to.exist;
+    });
+});
+//# sourceMappingURL=mediatype-icon.test.js.map

package/dist/test/tiles/mediatype-icon.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mediatype-icon.test.js","sourceRoot":"","sources":["../../../test/tiles/mediatype-icon.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture } from '@open-wc/testing';\nimport { html } from 'lit';\nimport type { MediatypeIcon } from '../../src/tiles/mediatype-icon';\n\nimport '../../src/tiles/mediatype-icon';\n\ndescribe('Mediatype Icon', () => {\n  it('renders component', async () => {\n    const el = await fixture<MediatypeIcon>(html`\n      <mediatype-icon mediatype=\"texts\"></mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon');\n    expect(iconDiv).to.exist;\n  });\n\n  it('renders basic mediatype correctly', async () => {\n    const el = await fixture<MediatypeIcon>(html`\n      <mediatype-icon mediatype=\"movies\"></mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('Movie');\n    expect(iconDiv.getAttribute('style')).to.include('#f1644b');\n    expect(iconDiv.children[0]).to.be.instanceOf(SVGElement);\n  });\n\n  it('renders TV mediatype', async () => {\n    const el = await fixture<MediatypeIcon>(html`\n      <mediatype-icon\n        mediatype=\"movies\"\n        .collections=${['tvnews']}\n      ></mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('TV');\n  });\n\n  it('renders TV Commercial mediatype', async () => {\n    const el = await fixture<MediatypeIcon>(html`\n      <mediatype-icon\n        mediatype=\"movies\"\n        .collections=${['tvnews', 'tv_ads']}\n      ></mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('TV Commercial');\n  });\n\n  it('renders TV Fact Check mediatype for search results', async () => {\n    const el = await fixture<MediatypeIcon>(html`\n      <mediatype-icon\n        isTvSearchResult\n        mediatype=\"movies\"\n        .collections=${['tvnews', 'factchecked']}\n      ></mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('TV Fact Check');\n  });\n\n  it('does not use TV Fact Check mediatype for non-search results', async () => {\n    const el = await fixture<MediatypeIcon>(html`\n      <mediatype-icon\n        mediatype=\"movies\"\n        .collections=${['tvnews', 'factchecked']}\n      ></mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('TV');\n  });\n\n  it('renders radio mediatype', async () => {\n    const el = await fixture<MediatypeIcon>(html`\n      <mediatype-icon\n        mediatype=\"audio\"\n        .collections=${['radio']}\n      ></mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;\n    expect(iconDiv.title).to.equal('Radio');\n  });\n\n  it('renders no icon if mediatype is unrecognized', async () => {\n    const el = await fixture<MediatypeIcon>(html`\n      <mediatype-icon mediatype=\"foobar\"></mediatype-icon>\n    `);\n\n    const iconDiv = el.shadowRoot?.querySelector('#icon');\n    expect(iconDiv).not.to.exist;\n  });\n});\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "2.12.2",
+  "version": "2.12.3-alpha-webdev7452.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {

package/src/assets/img/icons/mediatype/tv-commercial.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+
+export const tvCommercialIcon = html`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      class="fill-color"
+      d="m38.4615385 55.5197275-4.8171501 7.0895871c4.1025641 2.9421734 8.9186633 4.7253407 14.4482976 5.3495018v13.0411836h5.6179067v-12.9749847c3.8356452-.357264 6.8905002-1.5278287 9.1645649-3.5116942 2.2740648-1.9838655 3.4110971-4.5582672 3.4110971-7.7232052v-.0661989c0-3.2553047-1.025641-5.7635075-3.076923-7.5246085-2.0512821-1.7611009-5.3068517-3.1544302-9.7667087-4.1799878v-6.2195444c2.6754939.6682937 5.083018 1.7379839 7.2225725 3.2090706l4.4136191-7.1557861c-3.2114333-2.2738797-6.9798234-3.6787675-11.3051702-4.2146634v-11.6383974h-5.5517024v11.5028473c-4.0584279.3131313-7.2026061 1.4721374-9.4325347 3.4770185-2.2299285 2.004881-3.3448928 4.5908413-3.3448928 7.7578808v.1323978c0 3.2111721 1.0372005 5.6857501 3.1116015 7.423734 2.074401 1.7379838 5.3625473 3.1197546 9.8644389 4.1453122v6.4212934c-3.1651955-.4896617-6.4869694-1.9386821-9.9653216-4.3470612zm-24.4136192-32.7716087c-4.32534679 3.7008338-7.74800337 8.0142702-10.26796974 12.9403091s-3.77994956 10.1536506-3.77994956 15.6828351c0 4.9050234 1.02564103 9.6093485 3.07692308 14.1129754 2.05128205 4.5036268 4.88335435 8.5606738 8.49621692 12.1711409.357293.3572639 1.1149642.6252118 2.2730138.8038438s2.2057588-.0220663 3.1431274-.6020948c.5800757-.4896617.8701135-1.1138228.8701135-1.8724832s-.1229508-1.3828215-.3688525-1.8724832c-.2459016-.4896617-.5023119-.8689919-.7692307-1.1379907-6.5111392-6.3761101-9.76670873-13.5770795-9.76670873-21.6029082 0-4.6822589 1.1034048-9.0850112 3.31021443-13.2082571 2.2068095-4.1232459 5.2059688-7.6570063 8.9974779-10.6012813.0882724-.0882652.1775956-.1880889.2679697-.2994712s.2574611-.3562131.5012611-.7344926c.2437999-.3782794.4224464-.7460511.5359394-1.103315.1134931-.3572639.1250526-.770219.0346785-1.2388652s-.3131568-.8816012-.6683481-1.2388651c-.668348-.6682937-1.4932745-1.0245068-2.4747793-1.0686394s-1.8064313.0893159-2.4747793.4003457zm71.9041614 0c4.3253468 3.7008338 7.7480034 8.0142702 10.2679697 12.9403091 2.5199664 4.9260389 3.7799496 10.1536506 3.7799496 15.6828351 0 4.8608908-1.025641 9.5536573-3.0769231 14.0782997-2.051282 4.5246424-4.8602354 8.593248-8.42686 12.2058166-.4014292.3572639-1.1822194.6252118-2.3423707.8038438-1.1601514.178632-2.1857924-.0220663-3.0769231-.6020948-.5800757-.4896617-.8806221-1.1138228-.9016394-1.8724832-.0210172-.7586604.0903741-1.3828215.3341741-1.8724832.2437999-.4896617.5002101-.8689919.7692307-1.1379907 6.4649012-6.3319775 9.6973519-13.5329469 9.6973519-21.6029082 0-4.6822589-1.1034048-9.0850112-3.3102144-13.2082571s-5.18285-7.6570063-8.9281211-10.6012813c-.0882724-.0882652-.1775956-.1880889-.2679697-.2994712s-.2574611-.3562131-.5012611-.7344926c-.2437999-.3782794-.4224464-.7460511-.5359394-1.103315-.1134931-.3572639-.1250526-.770219-.0346785-1.2388652s.3131568-.8816012.6683481-1.2388651c.668348-.6682937 1.4932745-1.0245068 2.4747793-1.0686394s1.7843632.0893159 2.408575.4003457zm-62.2730139 8.0920276c-3.1210592 2.4525117-5.6179066 5.4840011-7.4905422 9.0944682s-2.8089534 7.4447495-2.8089534 11.5028473c0 6.2878449 2.2068096 11.9725442 6.6204288 17.054098.1786465.3131313.858554.469697 2.0397226.469697 1.1811685 0 2.1290458-.2900143 2.8436318-.8700427.5359394-.4896618.8259773-1.1253814.8701134-1.9071589.0441362-.7817775-.045187-1.2167988-.2679697-1.305064-1.6939891-1.7842181-3.1094998-3.9582741-4.2465321-6.522168-1.1370324-2.563894-1.7055486-5.0720968-1.7055486-7.5246085 0-3.34357.7471627-6.3424853 2.241488-8.996746 1.4943254-2.6542607 3.5571669-4.7390008 6.1885246-6.2542201.0441362-.0441326.1113914-.12189.2017655-.2332723s.2238335-.3341468.4003783-.6682937c.1765447-.3341468.2994956-.6577859.3688524-.9709172.0693569-.3131313.0472888-.7029693-.0662043-1.1695139-.113493-.4665447-.3478352-.901566-.7030264-1.3050641-.4897016-.5358959-1.102354-.8364179-1.8379572-.901566s-1.3482555-.009457-1.8379571.1670734zm52.5063052 0c3.1651955 2.4966443 5.6956705 5.5396923 7.591425 9.1291438 1.8957545 3.5894516 2.8436318 7.4132262 2.8436318 11.471324 0 6.2416107-2.2519967 11.9263101-6.75599 17.054098-.1345103.3131313-.7923497.469697-1.9735182.469697-1.1811686 0-2.1290459-.2900142-2.8436318-.8700427-.5359395-.4896617-.8259773-1.1253813-.8701135-1.9071589-.0441362-.7817775.045187-1.2167988.2679697-1.305064 1.6498529-1.8283506 3.0432955-4.0244729 4.1803279-6.5883669s1.7055485-5.0500305 1.7055485-7.4584096c0-3.3435699-.7356032-6.3309267-2.2068095-8.9620704-1.4712064-2.6311436-3.5004204-4.7263914-6.0876419-6.2857433l-.2332913-.2332723s-.1450189-.2227646-.4350568-.6682937c-.2900378-.4455291-.4129886-.7691682-.3688524-.9709172.0441362-.2017491.0662043-.591587.0662043-1.169514 0-.5779269.2343421-1.0129482.7030265-1.305064.4897015-.5358959 1.1023539-.8364179 1.8379571-.901566.7356032-.0651482 1.3482555-.009457 1.8379571.1670734zm-31.3682219 10.2324588v-.0661989c0-1.605586 1.2263556-2.497695 3.6790668-2.676327v5.7529998c-1.4270702-.4013965-2.3970156-.8248593-2.9098361-1.2703884-.5128205-.4455292-.7692307-1.0255576-.7692307-1.7400855zm12.1721311 16.3196055v.0661989c0 1.5614535-1.2042875 2.4756288-3.6128625 2.7425259v-5.8853976c1.382934.4013965 2.3308112.8248594 2.8436317 1.2703885.5128206.4455291.7692308 1.0476239.7692308 1.8062843z"
+      fill="black"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

package/src/assets/img/icons/mediatype/tv-fact-check.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+
+export const tvFactCheckIcon = html`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      class="fill-color"
+      d="m53.8329111 72.530691-28.3707393-20.2314977c-1.2950216-.9306676-2.0122823-2.1279084-2.1517819-3.5917222-.1394997-1.4638139.1499621-2.9054133.8683852-4.3247984.7184232-1.419385 1.5275211-2.780311 2.4272938-4.0827779.8997726-1.302467 1.7204955-2.3488835 2.4621686-3.1392494l1.178772-1.1855489 20.6040968 16.1873027 36.4861309-43.88284817 3.885065-3.27955103c2.311044 1.53396469 4.1722017 3.06909856 5.5834731 4.60540161 1.4112713 1.53630309 2.2901191 2.86215359 2.6365432 3.97755169.3464241 1.1153982.5312611 2.1150474.5545111 2.9989478.0232494.8839004-.0813748 1.5351339-.3138742 1.9537004l-.4150115.6980007zm15.0520112 11.0943528v-5.022799c-.0464999-.1403016-.0813748-.2911259-.1046247-.4524728-.02325-.1613469-.0464999-.486379-.0697498-.9750964-.02325-.4887175.0116249-.8020578.1046247-.9400211.0464999-.1870689.2197119-.4898866.5196361-.9084532.2999243-.4185666.589386-.7903659.8683853-1.1153981l.4150114-.4875482 9.5731628-11.1645037v32.4412487h-80.1913681v-80.6524027h68.1874241l-7.1458691 8.5829534c-1.0183473 1.5807319-1.8041953 2.5113995-2.3575439 2.7920028h-47.3775653v57.9059979h57.574989z"
+      fill="black"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

package/src/assets/img/icons/mediatype/tv-quote.ts

@@ -0,0 +1,12 @@
+import { html } from 'lit';
+
+export const tvQuoteIcon = html`
+  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <path
+      class="fill-color"
+      d="m45.3394669 100.000002h7.4385828c6.4511217-.3595144 12.58904-1.9152224 18.4137548-4.6671261s10.8424956-6.3426695 15.0533425-10.7722976c4.2108468-4.429628 7.556034-9.6360206 10.0355616-15.6191778s3.7192914-12.2669975 3.7192914-18.8515208c0-9.0967521-2.2250498-17.4897316-6.6751493-25.1789383-4.4500995-7.6892068-10.5140669-13.7638762-18.1919023-18.22400833-7.6778355-4.46013212-16.0560287-6.68910874-25.1345797-6.68693148-6.8100007 0-13.2915728 1.31603472-19.4447163 3.94810096-6.1531434 2.63206624-11.4699901 6.17816545-15.9505399 10.63829755-4.4805499 4.4601321-8.03453942 9.7863622-10.66196865 15.9786902s-3.94114385 12.7005912-3.94114385 19.5247894c0 12.9271929 4.36092352 24.1624988 13.0827705 33.7059178 8.7218471 9.543419 19.4751667 14.9448198 32.2599589 16.2042045zm-28.136113-51.5246596c2.2707252-7.480036 5.6159125-13.1058597 10.0355616-16.8774711 4.2412972-3.9502783 8.9610997-5.4166529 14.1594076-4.399124.2979783.1786667.1783519.507675-.358879.9870248-.537231.4793498-1.433341 1.2572039-2.6883299 2.3335621-1.254989 1.0763582-2.3000881 2.1538058-3.1352974 3.2323429-1.074462 1.4358706-1.7911325 2.7976598-2.1500114 4.0853677-.358879 1.2877079-.448055 2.214814-.267528 2.7813184.180527.5665043.180527 1.1798542 0 1.8400496 3.1059345-.1786668 5.8236273.5545206 8.1530782 2.199562s3.9726817 3.7095139 4.9296923 6.1934174c.9570107 2.4839036 1.210401 5.2063926.760171 8.1674672-.45023 2.9610745-1.6595435 5.6094822-3.6279404 7.9452231-3.3451872 3.6495952-7.5712592 5.2205552-12.678216 4.7128802s-8.9154242-2.6767329-11.4254021-6.5071737c-1.5529673-2.1548953-2.4490773-4.8479697-2.6883299-8.0792232-.2392527-3.2312535.089176-6.1040841.9852859-8.6184917zm34.7655868 0c2.2098245-7.3013692 5.5854621-12.9271929 10.1269126-16.8774711 4.1825715-3.9502783 8.8719237-5.4166529 14.0680565-4.399124.358879.1786667.2838407.507675-.225115.9870248-.5089556.4793498-1.3898404 1.2572039-2.6426544 2.3335621-1.2528139 1.0763582-2.3283634 2.1538058-3.2266484 3.2323429-1.0744619 1.4358706-1.7911324 2.7976598-2.1500114 4.0853677s-.4632801 2.214814-.3132035 2.7813184c.1500767.5665043.1348515 1.1798542-.0456755 1.8400496 3.1059346-.1786668 5.8236273.5545206 8.1530782 2.199562s3.9726817 3.7095139 4.9296924 6.1934174c.9570106 2.4839036 1.2256261 5.2063926.8058464 8.1674672-.4197796 2.9610745-1.6443183 5.6094822-3.6736158 7.9452231-3.3451873 3.6495952-7.5712593 5.2205552-12.6782161 4.7128802s-8.9154242-2.6767329-11.4254021-6.5071737c-1.4942416-2.1548953-2.3609888-4.8479697-2.6002414-8.0792232-.2392527-3.2312535.0598131-6.1040841.8971975-8.6184917z"
+      fill="black"
+      fill-rule="evenodd"
+    />
+  </svg>
+`;

package/src/collection-browser.ts

@@ -2120,7 +2120,7 @@ export class CollectionBrowser
         .mobileBreakpoint=${this.mobileBreakpoint}
         .loggedIn=${this.loggedIn}
         .isManageView=${this.isManageView}
-        ?showTvClips=${this.isTVCollection}
+        ?showTvClips=${this.isTVCollection || this.searchType === SearchType.TV}
         ?enableHoverPane=${true}
         @resultSelected=${(e: CustomEvent) => this.resultSelected(e)}
       >

package/src/collection-facets/smart-facets/smart-facet-button.ts

@@ -1,6 +1,9 @@
 import { css, html, LitElement, CSSResultGroup, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { mediatypeConfig } from '../../mediatype/mediatype-config';
+import {
+  mediatypeConfig,
+  MediatypeConfigKey,
+} from '../../mediatype/mediatype-config';
 import type { SmartFacet, SmartFacetEvent } from './models';
 
 import closeCircleDark from '../../assets/img/icons/close-circle-dark';
@@ -38,7 +41,7 @@ export class SmartFacetButton extends LitElement {
 
     const icon =
       isSingleFacet && firstFacet.facetType === 'mediatype'
-        ? mediatypeConfig[firstFacet.bucketKey].icon
+        ? mediatypeConfig[firstFacet.bucketKey as MediatypeConfigKey].icon
         : nothing;
 
     return html`

package/src/data-source/collection-browser-data-source.ts

@@ -1190,6 +1190,7 @@ export class CollectionBrowserDataSource
           pageNumber + i,
           results.slice(pageStartIndex, pageStartIndex + this.pageSize),
           !isUnpagedElement || i === numPages - 1,
+          !this.host.withinCollection && this.host.searchType === SearchType.TV,
         );
       }
     }
@@ -1216,11 +1217,12 @@ export class CollectionBrowserDataSource
     pageNumber: number,
     results: SearchResult[],
     needsReload = true,
+    isTvSearch = false,
   ): void {
     const tiles: TileModel[] = [];
     results?.forEach(result => {
       if (!result.identifier) return;
-      tiles.push(new TileModel(result));
+      tiles.push(new TileModel(result, isTvSearch));
     });
 
     this.addPage(pageNumber, tiles);

package/src/mediatype/mediatype-config.ts

@@ -1,3 +1,4 @@
+import { html, TemplateResult } from 'lit';
 import { accountIcon } from '../assets/img/icons/mediatype/account';
 import { audioIcon } from '../assets/img/icons/mediatype/audio';
 import { collectionIcon } from '../assets/img/icons/mediatype/collection';
@@ -9,12 +10,44 @@ import { radioIcon } from '../assets/img/icons/mediatype/radio';
 import { softwareIcon } from '../assets/img/icons/mediatype/software';
 import { textsIcon } from '../assets/img/icons/mediatype/texts';
 import { tvIcon } from '../assets/img/icons/mediatype/tv';
+import { tvCommercialIcon } from '../assets/img/icons/mediatype/tv-commercial';
+import { tvFactCheckIcon } from '../assets/img/icons/mediatype/tv-fact-check';
 import { videoIcon } from '../assets/img/icons/mediatype/video';
 import { webIcon } from '../assets/img/icons/mediatype/web';
 import { searchIcon } from '../assets/img/icons/mediatype/search';
+import { tvQuoteIcon } from '../assets/img/icons/mediatype/tv-quote';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const mediatypeConfig: { [key: string]: any } = {
+/**
+ * Union of keys with valid mediatype config entries
+ */
+export type MediatypeConfigKey =
+  | 'account'
+  | 'audio'
+  | 'collection'
+  | 'data'
+  | 'etree'
+  | 'film'
+  | 'image'
+  | 'movies'
+  | 'none'
+  | 'radio'
+  | 'search'
+  | 'software'
+  | 'texts'
+  | 'tv'
+  | 'tvCommercial'
+  | 'tvFactCheck'
+  | 'tvQuote'
+  | 'video'
+  | 'web';
+
+export type MediatypeConfig = {
+  color: string;
+  icon: TemplateResult;
+  text: string;
+};
+
+export const mediatypeConfig: Record<MediatypeConfigKey, MediatypeConfig> = {
   account: {
     color: '#000000',
     icon: accountIcon,
@@ -55,6 +88,11 @@ export const mediatypeConfig: { [key: string]: any } = {
     icon: filmIcon,
     text: 'Movie',
   },
+  none: {
+    color: '#00000000',
+    icon: html``, // Empty
+    text: '',
+  },
   radio: {
     color: '#8fdaef',
     icon: radioIcon,
@@ -75,6 +113,21 @@ export const mediatypeConfig: { [key: string]: any } = {
     icon: tvIcon,
     text: 'TV',
   },
+  tvCommercial: {
+    color: '#84b648',
+    icon: tvCommercialIcon,
+    text: 'TV Commercial',
+  },
+  tvFactCheck: {
+    color: 'f1644b',
+    icon: tvFactCheckIcon,
+    text: 'TV Fact Check',
+  },
+  tvQuote: {
+    color: '',
+    icon: tvQuoteIcon,
+    text: 'TV Quote',
+  },
   video: {
     color: '#f1644b',
     icon: videoIcon,

package/src/models.ts

@@ -110,7 +110,9 @@ export class TileModel {
 
   contentWarning: boolean;
 
-  constructor(result: SearchResult) {
+  isTvSearchResult: boolean;
+
+  constructor(result: SearchResult, isFromTvSearch = false) {
     const flags = this.getFlags(result);
 
     this.averageRating = result.avg_rating?.value;
@@ -147,6 +149,7 @@ export class TileModel {
     this.weeklyViewCount = result.week?.value;
     this.loginRequired = flags.loginRequired;
     this.contentWarning = flags.contentWarning;
+    this.isTvSearchResult = isFromTvSearch && result.hit_type === 'tv_clip';
   }
 
   /**
@@ -186,6 +189,7 @@ export class TileModel {
     cloned.weeklyViewCount = this.weeklyViewCount;
     cloned.loginRequired = this.loginRequired;
     cloned.contentWarning = this.contentWarning;
+    cloned.isTvSearchResult = this.isTvSearchResult;
     return cloned;
   }
 

package/src/tiles/grid/tile-stats.ts

@@ -16,6 +16,9 @@ export class TileStats extends LitElement {
   /** The mediatype of the item these stats represent */
   @property({ type: String }) mediatype?: string;
 
+  /** The collections this item is part of */
+  @property({ type: Array }) collections?: string[];
+
   /** The number of uploaded items, if representing an account */
   @property({ type: Number }) itemCount?: number;
 
@@ -31,6 +34,9 @@ export class TileStats extends LitElement {
   /** The number of times the item has been reviewed */
   @property({ type: Number }) commentCount?: number;
 
+  /** Whether the tile represents the result of a search */
+  @property({ type: Boolean }) isTvSearchResult = false;
+
   /** Whether to show the number of TV clips in place of reviews */
   @property({ type: Boolean }) showTvClips = false;
 
@@ -64,7 +70,11 @@ export class TileStats extends LitElement {
     return html`
       <li class="col">
         <p class="sr-only">${msg('Mediatype:')}</p>
-        <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
+        <mediatype-icon
+          .mediatype=${this.mediatype}
+          .collections=${this.collections}
+          ?isTvSearchResult=${this.isTvSearchResult}
+        ></mediatype-icon>
       </li>
     `;
   }

package/src/tiles/list/tile-list-compact.ts

@@ -53,6 +53,7 @@ export class TileListCompact extends BaseTileComponent {
           <mediatype-icon
             .mediatype=${this.model?.mediatype}
             .collections=${this.model?.collections}
+            ?isTvSearchResult=${this.model?.isTvSearchResult}
           >
           </mediatype-icon>
         </div>

package/src/tiles/list/tile-list.ts

@@ -129,6 +129,7 @@ export class TileList extends BaseTileComponent {
         <mediatype-icon
           .mediatype=${this.model?.mediatype}
           .collections=${this.model?.collections}
+          ?isTvSearchResult=${this.model?.isTvSearchResult}
         >
         </mediatype-icon>
       </a>

package/src/tiles/mediatype-icon.ts

@@ -1,33 +1,69 @@
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-import { mediatypeConfig } from '../mediatype/mediatype-config';
+import {
+  mediatypeConfig,
+  MediatypeConfigKey,
+} from '../mediatype/mediatype-config';
+
+const TV_COMMERCIAL_COLLECTION = 'tv_ads';
+const TV_FACT_CHECK_COLLECTION = 'factchecked';
+const TV_TOP_LEVEL_COLLECTIONS = new Set(['tvnews', 'tvarchive']);
+const RADIO_TOP_LEVEL_COLLECTIONS = new Set(['radio', 'radioprogram']);
 
 @customElement('mediatype-icon')
 export class MediatypeIcon extends LitElement {
-  @property({ type: String }) mediatype: string | undefined;
+  @property({ type: String }) mediatype?: MediatypeConfigKey;
+
+  @property({ type: Array }) collections?: string[];
 
-  @property({ type: Array }) collections: string[] | undefined;
+  @property({ type: Boolean }) isTvSearchResult = false;
 
   @property({ type: Boolean }) showText = false;
 
-  private get displayMediatype(): string {
-    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
-    const radioIdentifier = ['radio', 'radioprogram'];
+  /**
+   * Returns the appropriate mediatype config key for the current mediatype/collections.
+   */
+  private get displayMediatype(): MediatypeConfigKey {
+    if (this.isTvItem) return this.tvDisplayMediatype;
+    if (this.isRadioItem) return 'radio';
+    return this.mediatype ?? 'none';
+  }
 
-    if (
-      this.mediatype === 'movies' &&
-      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)
+  /**
+   * Returns the appropriate TV mediatype, depending on the current collections.
+   */
+  private get tvDisplayMediatype(): MediatypeConfigKey {
+    if (this.collections?.includes(TV_COMMERCIAL_COLLECTION)) {
+      return 'tvCommercial';
+    } else if (
+      this.isTvSearchResult &&
+      this.collections?.includes(TV_FACT_CHECK_COLLECTION)
     ) {
-      return 'tv';
+      return 'tvFactCheck';
     }
-    if (
+
+    return 'tv';
+  }
+
+  /**
+   * Whether this represents a TV item
+   */
+  private get isTvItem(): boolean {
+    return (
+      this.mediatype === 'movies' &&
+      !!this.collections?.some(id => TV_TOP_LEVEL_COLLECTIONS.has(id))
+    );
+  }
+
+  /**
+   * Whether this represents a radio item
+   */
+  private get isRadioItem(): boolean {
+    return (
       this.mediatype === 'audio' &&
-      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)
-    ) {
-      return 'radio';
-    }
-    return this.mediatype || '';
+      !!this.collections?.some(id => RADIO_TOP_LEVEL_COLLECTIONS.has(id))
+    );
   }
 
   render() {

package/test/mediatype-config.test.ts

@@ -2,13 +2,6 @@ import { expect } from '@open-wc/testing';
 import { mediatypeConfig } from '../src/mediatype/mediatype-config';
 
 describe('mediatypeConfig', () => {
-  it('returns undefined', () => {
-    expect(mediatypeConfig['']).to.equal(undefined);
-    expect(mediatypeConfig.test).to.equal(undefined);
-    expect(mediatypeConfig.media).to.equal(undefined);
-    expect(mediatypeConfig.testing).to.equal(undefined);
-  });
-
   it('returns audio', () => {
     expect(mediatypeConfig.audio).to.exist;
     expect(mediatypeConfig.audio.color).to.exist;