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

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

@@ -19,7 +19,7 @@ import { isFirstMillisecondOfUTCYear } from '../../utils/local-date-from-utc';
 import '../image-block';
 import '../review-block';
 import '../text-snippet-block';
-import '../mediatype-icon';
+import '../tile-mediatype-icon';
 
 @customElement('tile-list')
 export class TileList extends BaseTileComponent {
@@ -126,12 +126,12 @@ export class TileList extends BaseTileComponent {
   private get iconRightTemplate() {
     return html`
       <a id="icon-right" href=${this.mediatypeURL}>
-        <mediatype-icon
+        <tile-mediatype-icon
           .mediatype=${this.model?.mediatype}
           .collections=${this.model?.collections}
           ?isTvSearchResult=${this.model?.isTvSearchResult}
         >
-        </mediatype-icon>
+        </tile-mediatype-icon>
       </a>
     `;
   }

package/src/tiles/{mediatype-icon.ts → tile-mediatype-icon.ts}

@@ -8,11 +8,11 @@ import {
 
 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']);
+const TV_COLLECTIONS = new Set(['tvnews', 'tvarchive', 'television']);
+const RADIO_COLLECTIONS = new Set(['radio', 'radioprogram']);
 
-@customElement('mediatype-icon')
-export class MediatypeIcon extends LitElement {
+@customElement('tile-mediatype-icon')
+export class TileMediatypeIcon extends LitElement {
   @property({ type: String }) mediatype?: MediatypeConfigKey;
 
   @property({ type: Array }) collections?: string[];
@@ -52,7 +52,7 @@ export class MediatypeIcon extends LitElement {
   private get isTvItem(): boolean {
     return (
       this.mediatype === 'movies' &&
-      !!this.collections?.some(id => TV_TOP_LEVEL_COLLECTIONS.has(id))
+      !!this.collections?.some(id => TV_COLLECTIONS.has(id))
     );
   }
 
@@ -62,7 +62,7 @@ export class MediatypeIcon extends LitElement {
   private get isRadioItem(): boolean {
     return (
       this.mediatype === 'audio' &&
-      !!this.collections?.some(id => RADIO_TOP_LEVEL_COLLECTIONS.has(id))
+      !!this.collections?.some(id => RADIO_COLLECTIONS.has(id))
     );
   }
 

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

@@ -1,13 +1,13 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import type { MediatypeIcon } from '../../src/tiles/mediatype-icon';
+import type { TileMediatypeIcon } from '../../src/tiles/tile-mediatype-icon';
 
-import '../../src/tiles/mediatype-icon';
+import '../../src/tiles/tile-mediatype-icon';
 
 describe('Mediatype Icon', () => {
   it('renders component', async () => {
-    const el = await fixture<MediatypeIcon>(html`
-      <mediatype-icon mediatype="texts"></mediatype-icon>
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon mediatype="texts"></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon');
@@ -15,8 +15,8 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders basic mediatype correctly', async () => {
-    const el = await fixture<MediatypeIcon>(html`
-      <mediatype-icon mediatype="movies"></mediatype-icon>
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon mediatype="movies"></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -26,11 +26,11 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders TV mediatype', async () => {
-    const el = await fixture<MediatypeIcon>(html`
-      <mediatype-icon
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon
         mediatype="movies"
         .collections=${['tvnews']}
-      ></mediatype-icon>
+      ></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -38,11 +38,11 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders TV Commercial mediatype', async () => {
-    const el = await fixture<MediatypeIcon>(html`
-      <mediatype-icon
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon
         mediatype="movies"
         .collections=${['tvnews', 'tv_ads']}
-      ></mediatype-icon>
+      ></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -50,12 +50,12 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders TV Fact Check mediatype for search results', async () => {
-    const el = await fixture<MediatypeIcon>(html`
-      <mediatype-icon
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon
         isTvSearchResult
         mediatype="movies"
         .collections=${['tvnews', 'factchecked']}
-      ></mediatype-icon>
+      ></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -63,11 +63,11 @@ describe('Mediatype Icon', () => {
   });
 
   it('does not use TV Fact Check mediatype for non-search results', async () => {
-    const el = await fixture<MediatypeIcon>(html`
-      <mediatype-icon
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon
         mediatype="movies"
         .collections=${['tvnews', 'factchecked']}
-      ></mediatype-icon>
+      ></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -75,11 +75,11 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders radio mediatype', async () => {
-    const el = await fixture<MediatypeIcon>(html`
-      <mediatype-icon
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon
         mediatype="audio"
         .collections=${['radio']}
-      ></mediatype-icon>
+      ></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon') as HTMLDivElement;
@@ -87,8 +87,8 @@ describe('Mediatype Icon', () => {
   });
 
   it('renders no icon if mediatype is unrecognized', async () => {
-    const el = await fixture<MediatypeIcon>(html`
-      <mediatype-icon mediatype="foobar"></mediatype-icon>
+    const el = await fixture<TileMediatypeIcon>(html`
+      <tile-mediatype-icon mediatype="foobar"></tile-mediatype-icon>
     `);
 
     const iconDiv = el.shadowRoot?.querySelector('#icon');

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

@@ -1 +0,0 @@
-{"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"]}