@internetarchive/collection-browser 0.2.11 → 0.2.14-a1

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

@@ -1,15 +1,14 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../../models';
 
-import { TileModel } from '../../models';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
 import { accountLabel } from './account-label';
 
-import '../item-image';
+import '../image-block';
 import '../mediatype-icon';
 
 @customElement('tile-list-compact')
@@ -28,12 +27,19 @@ export class TileListCompact extends LitElement {
 
   @property({ type: String }) baseImageUrl?: string;
 
+  @property({ type: Boolean }) loggedIn = false;
+
   render() {
     return html`
       <div id="list-line" class="${this.classSize}">
-        <div id="thumb" class="${ifDefined(this.model?.mediatype)}">
-          ${this.imageTemplate}
-        </div>
+        <image-block
+          .model=${this.model}
+          .baseImageUrl=${this.baseImageUrl}
+          .isCompactTile=${true}
+          .isListTile=${true}
+          .viewSize=${this.classSize}
+        >
+        </image-block>
         <div id="title">${DOMPurify.sanitize(this.model?.title ?? '')}</div>
         <div id="creator">
           ${this.model?.mediatype === 'account'
@@ -55,22 +61,6 @@ export class TileListCompact extends LitElement {
     `;
   }
 
-  private get imageTemplate() {
-    if (!this.model?.identifier) {
-      return nothing;
-    }
-    return html`
-      <item-image
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .isListTile=${true}
-        .isCompactTile=${true}
-        style="--imgHeight: 100%; --imgWidth: 100%"
-      >
-      </item-image>
-    `;
-  }
-
   /*
    * TODO: fix field names to match model in src/collection-browser.ts
    * private get dateSortSelector()
@@ -127,6 +117,8 @@ export class TileListCompact extends LitElement {
         border-top: 1px solid #ddd;
         align-items: center;
         line-height: 20px;
+        padding-top: 5px;
+        padding-bottom: 5px;
       }
 
       #list-line.mobile {
@@ -141,40 +133,6 @@ export class TileListCompact extends LitElement {
         text-decoration: underline;
       }
 
-      /* fields */
-      #thumb {
-        object-fit: cover;
-        display: block;
-      }
-
-      .mobile #thumb {
-        width: 30px;
-        height: 30px;
-        padding-top: 2px;
-        padding-bottom: 2px;
-        padding-left: 4px;
-      }
-
-      .desktop #thumb {
-        width: 45px;
-        height: 45px;
-        padding-top: 5px;
-        padding-bottom: 5px;
-        padding-left: 6px;
-      }
-
-      #thumb.collection {
-        --border-radius: 8px;
-      }
-
-      .mobile #thumb.account {
-        --border-radius: 15px;
-      }
-
-      .desktop #thumb.account {
-        --border-radius: 22.5px;
-      }
-
       #title {
         color: #4b64ff;
         text-decoration: none;
@@ -205,6 +163,11 @@ export class TileListCompact extends LitElement {
         --iconHeight: 20px;
         --iconWidth: 20px;
       }
+
+      item-image {
+        --imgHeight: 100%;
+        --imgWidth: 100%;
+      }
     `;
   }
 }

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

@@ -10,18 +10,18 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
 import { customElement, property, state } from 'lit/decorators.js';
-
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
 
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { SortParam } from '@internetarchive/search-service';
+import type { TileModel } from '../../models';
+
 import { dateLabel } from './date-label';
 import { accountLabel } from './account-label';
-import { TileModel } from '../../models';
 import { formatCount, NumberFormat } from '../../utils/format-count';
 import { formatDate, DateFormat } from '../../utils/format-date';
 
-import '../item-image';
+import '../image-block';
 import '../mediatype-icon';
 
 @customElement('tile-list')
@@ -45,6 +45,8 @@ export class TileList extends LitElement {
 
   @property({ type: String }) baseImageUrl?: string;
 
+  @property({ type: Boolean }) loggedIn = false;
+
   protected updated(changed: PropertyValues): void {
     if (changed.has('model')) {
       this.fetchCollectionNames();
@@ -90,11 +92,7 @@ export class TileList extends LitElement {
   private get mobileTemplate() {
     return html`
       <div id="list-line-top">
-        <div id="list-line-left">
-          <div id="thumb" class="${ifDefined(this.model?.mediatype)}">
-            ${this.imgTemplate}
-          </div>
-        </div>
+        <div id="list-line-left">${this.imageBlockTemplate}</div>
         <div id="list-line-right">
           <div id="title-line">
             <div id="title">${this.titleTemplate}</div>
@@ -108,11 +106,7 @@ export class TileList extends LitElement {
 
   private get desktopTemplate() {
     return html`
-      <div id="list-line-left">
-        <div id="thumb" class="${ifDefined(this.model?.mediatype)}">
-          ${this.imgTemplate}
-        </div>
-      </div>
+      <div id="list-line-left">${this.imageBlockTemplate}</div>
       <div id="list-line-right">
         <div id="title-line">
           <div id="title">${this.titleTemplate}</div>
@@ -123,6 +117,19 @@ export class TileList extends LitElement {
     `;
   }
 
+  private get imageBlockTemplate() {
+    return html`
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .isCompactTile=${false}
+        .isListTile=${true}
+        .viewSize=${this.classSize}
+      >
+      </image-block>
+    `;
+  }
+
   private get detailsTemplate() {
     return html`
       ${this.itemLineTemplate} ${this.creatorTemplate}
@@ -138,21 +145,6 @@ export class TileList extends LitElement {
   }
 
   // Data templates
-  private get imgTemplate() {
-    if (!this.model?.identifier) {
-      return nothing;
-    }
-    return html`
-      <item-image
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .isListTile=${true}
-        style="--imgHeight: 100%; --imgWidth: 100%"
-      >
-      </item-image>
-    `;
-  }
-
   private get iconRightTemplate() {
     return html`
       <div id="icon-right">
@@ -409,34 +401,6 @@ export class TileList extends LitElement {
       }
 
       /* fields */
-
-      #thumb img {
-        object-fit: cover;
-        display: block;
-      }
-
-      .mobile #thumb {
-        width: 90px;
-        height: 90px;
-      }
-
-      .desktop #thumb {
-        width: 100px;
-        height: 100px;
-      }
-
-      #thumb.collection {
-        --border-radius: 8px;
-      }
-
-      .mobile #thumb.account {
-        --border-radius: 45px;
-      }
-
-      .desktop #thumb.account {
-        --border-radius: 50px;
-      }
-
       #icon-right {
         width: 20px;
         padding-top: 5px;

package/src/tiles/overlay/icon-overlay.ts

@@ -0,0 +1,34 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { restrictedIcon } from '../../assets/img/icons/restricted';
+import { loginRequiredIcon } from '../../assets/img/icons/login-required';
+
+@customElement('icon-overlay')
+export class IconOverlay extends LitElement {
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) loginRequired = false;
+
+  render() {
+    if (this.loginRequired && !this.loggedIn) {
+      return html`${loginRequiredIcon} `;
+    }
+    return html`${restrictedIcon}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        width: 50%;
+        height: 50%;
+        z-index: 2;
+      }
+    `;
+  }
+}

package/src/tiles/overlay/text-overlay.ts

@@ -0,0 +1,48 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('text-overlay')
+export class TextOverlay extends LitElement {
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) loginRequired = false;
+
+  render() {
+    return html` <div class="overlay no-preview">${this.textDisplay}</div> `;
+  }
+
+  private get textDisplay() {
+    return this.loginRequired && !this.loggedIn
+      ? 'Log in\nto view this item'
+      : 'Content may be inappropriate';
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        align-items: center;
+        display: flex;
+      }
+
+      .overlay {
+        border: 1px solid #2c2c2c;
+        border-radius: 1px;
+        position: absolute;
+        right: 0;
+        left: 0;
+        width: auto;
+        height: auto;
+        padding: 5px;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        text-align: center;
+        white-space: pre-wrap; // for the newline character
+      }
+    `;
+  }
+}

package/src/tiles/tile-dispatcher.ts

@@ -1,12 +1,12 @@
 import { css, html, LitElement, nothing, PropertyValues } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import {
+import type {
   SharedResizeObserverInterface,
   SharedResizeObserverResizeHandlerInterface,
 } from '@internetarchive/shared-resize-observer';
 import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
-import { SortParam } from '@internetarchive/search-service';
+import type { SortParam } from '@internetarchive/search-service';
 import type { TileDisplayMode, TileModel } from '../models';
 import './grid/collection-tile';
 import './grid/item-tile';
@@ -43,6 +43,8 @@ export class TileDispatcher
 
   @property({ type: String }) baseImageUrl?: string;
 
+  @property({ type: Boolean }) loggedIn = false;
+
   render() {
     return html`
       <div id="container">
@@ -146,7 +148,8 @@ export class TileDispatcher
               .model=${model}
               .currentWidth=${currentWidth}
               .currentHeight=${currentHeight}
-            ></account-tile>`;
+            >
+            </account-tile>`;
           default:
             return html`<item-tile
               .model=${model}
@@ -155,7 +158,9 @@ export class TileDispatcher
               .collectionNameCache=${this.collectionNameCache}
               .baseImageUrl=${this.baseImageUrl}
               .sortParam=${sortParam}
-            ></item-tile>`;
+              .loggedIn=${this.loggedIn}
+            >
+            </item-tile>`;
         }
       case 'list-compact':
         return html`<tile-list-compact
@@ -166,7 +171,9 @@ export class TileDispatcher
           .sortParam=${sortParam}
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
-        ></tile-list-compact>`;
+          .loggedIn=${this.loggedIn}
+        >
+        </tile-list-compact>`;
       case 'list-detail':
         return html`<tile-list
           .model=${model}
@@ -177,7 +184,9 @@ export class TileDispatcher
           .sortParam=${sortParam}
           .mobileBreakpoint=${mobileBreakpoint}
           .baseImageUrl=${this.baseImageUrl}
-        ></tile-list>`;
+          .loggedIn=${this.loggedIn}
+        >
+        </tile-list>`;
       default:
         return nothing;
     }

package/test/collection-browser.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { CollectionBrowser } from '../src/collection-browser';
+import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 import { MockSearchService } from './mocks/mock-search-service';
 import { MockCollectionNameCache } from './mocks/mock-collection-name-cache';

package/test/empty-placeholder.test.ts

@@ -1,9 +1,10 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { EmptyPlaceholder } from '../src/empty-placeholder';
 import '../src/empty-placeholder';
 
+import type { EmptyPlaceholder } from '../src/empty-placeholder';
+
 describe('Empty Placeholder', () => {
   it('should render with empty-query placeholder', async () => {
     const el = await fixture<EmptyPlaceholder>(

package/test/icon-overlay.test.ts

@@ -0,0 +1,41 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { IconOverlay } from '../src/tiles/overlay/icon-overlay';
+
+import '../src/tiles/overlay/icon-overlay';
+
+describe('Icon Overlay component', () => {
+  it('should render component if loggedIn required', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .loggedIn=${false} .loginRequired=${true}> </icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Log in to view this item');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .loggedIn=${false} .loginRequired=${false}> </icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Content may be inappropriate');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .loggedIn=${true} .loginRequired=${true}> </icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Content may be inappropriate');
+  });
+});

package/test/item-image.test.ts

@@ -0,0 +1,82 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+
+import type { TileModel } from '../src/models';
+import type { ItemImage } from '../src/tiles/item-image';
+
+import '../src/tiles/item-image';
+
+const baseImageUrl = 'https://archive.org';
+const testBookModel: TileModel = {
+  collections: [],
+  commentCount: 0,
+  creators: [],
+  favCount: 0,
+  identifier: '18730130BloomfieldRecordCompleteIssue',
+  itemCount: 0,
+  mediatype: 'texts',
+  subjects: [],
+  title: 'Sample Waveform',
+  viewCount: 0,
+  loginRequired: false,
+  contentWarning: false,
+};
+
+const testAudioModel: TileModel = {
+  collections: [],
+  commentCount: 0,
+  creators: [],
+  favCount: 0,
+  identifier: 'dwd2015-01-24',
+  itemCount: 0,
+  mediatype: 'audio',
+  subjects: [],
+  title: 'Sample Waveform',
+  viewCount: 0,
+  loginRequired: false,
+  contentWarning: false,
+};
+
+describe('ItemImage component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testBookModel}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    const imgClassName = dropShadow?.querySelector('img')?.className;
+
+    expect(dropShadow).to.exist;
+    expect(imgClassName).to.eql(' contain ');
+  });
+
+  it('should render component if mediatype is waveform', async () => {
+    const el = await fixture<ItemImage>(html`
+      <item-image
+        .isListTile=${false}
+        .isCompactTile=${false}
+        .model=${testAudioModel}
+        .baseImageUrl=${baseImageUrl}
+      >
+      </item-image>
+    `);
+
+    const dropShadow = el.shadowRoot?.querySelector('.drop-shadow');
+    const image = dropShadow?.querySelector('img');
+    expect(dropShadow).to.exist;
+    expect(image).to.exist;
+
+    // simulate image onLoad event check if image className is waveform
+    setTimeout(() => {
+      const imgClassName = image?.className;
+      expect(imgClassName).to.eql(' waveform ');
+    }, 1000);
+  });
+});

package/test/mocks/mock-collection-name-cache.ts

@@ -1,4 +1,4 @@
-import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+import type { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
 
 export class MockCollectionNameCache implements CollectionNameCacheInterface {
   collectionNamesRequested: string[] = [];

package/test/mocks/mock-search-responses.ts

@@ -1,4 +1,4 @@
-import { Result } from '@internetarchive/result-type';
+import type { Result } from '@internetarchive/result-type';
 import {
   Metadata,
   SearchResponse,

package/test/mocks/mock-search-service.ts

@@ -1,5 +1,5 @@
-import { Result } from '@internetarchive/result-type';
-import {
+import type { Result } from '@internetarchive/result-type';
+import type {
   MetadataResponse,
   SearchParams,
   SearchResponse,

package/test/text-overlay.test.ts

@@ -0,0 +1,57 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { TextOverlay } from '../src/tiles/overlay/text-overlay';
+
+import '../src/tiles/overlay/text-overlay';
+
+describe('Text Overlay component', () => {
+  it('should render initial component', async () => {
+    const el = await fixture<TextOverlay>(html`<text-overlay></text-overlay>`);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+  });
+
+  it('should render component if loggedIn required', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${false} .loginRequired=${true}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Log in\nto view this item');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${false} .loginRequired=${false}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Content may be inappropriate');
+  });
+
+  it('should render component if content warning', async () => {
+    const el = await fixture<TextOverlay>(html`
+      <text-overlay .loggedIn=${true} .loginRequired=${true}> </text-overlay>
+    `);
+
+    const overlay = el.shadowRoot?.querySelector('.overlay');
+    const noPreview = el.shadowRoot?.querySelector('.no-preview');
+
+    expect(overlay).to.exist;
+    expect(noPreview).to.exist;
+    expect(noPreview?.textContent).to.equal('Content may be inappropriate');
+  });
+});

package/test/tile-stats.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { TileStats } from '../src/tiles/grid/tile-stats';
+import type { TileStats } from '../src/tiles/grid/tile-stats';
 
 import '../src/tiles/grid/tile-stats';
 

package/test/tiles/grid/item-tile.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { ItemTile } from '../../../src/tiles/grid/item-tile';
+import type { ItemTile } from '../../../src/tiles/grid/item-tile';
 
 import '../../../src/tiles/grid/item-tile';
 
@@ -10,11 +10,11 @@ describe('Item Tile', () => {
     const el = await fixture<ItemTile>(html`<item-tile></item-tile>`);
 
     const itemInfo = el.shadowRoot?.querySelector('.item-info');
-    const itemImage = el.shadowRoot?.querySelector('item-image');
     const itemTitle = el.shadowRoot?.querySelector('#title');
+    const imageBlock = el.shadowRoot?.querySelector('image-block');
 
     expect(itemInfo).to.exist;
-    expect(itemImage).to.exist;
+    expect(imageBlock).to.exist;
     expect(itemTitle).to.exist;
   });
 

package/tsconfig.json

@@ -14,7 +14,8 @@
     "sourceMap": true,
     "inlineSources": true,
     "rootDir": "./",
-    "declaration": true
+    "declaration": true,
+    "importsNotUsedAsValues": "error"
   },
-  "include": ["src", "test", "index.ts"],
+  "include": ["src", "test", "index.ts", "types"],
 }

package/types/dompurify.d.ts

@@ -0,0 +1 @@
+declare module 'dompurify';