@internetarchive/collection-browser 0.2.10 → 0.2.13

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

@@ -2,7 +2,7 @@ import { msg } from '@lit/localize';
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { collectionIcon } from '../../assets/img/icons/mediatype/collection';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 @customElement('collection-tile')
 export class CollectionTile extends LitElement {

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

@@ -2,40 +2,47 @@
 import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { SortParam } from '@internetarchive/search-service';
+import type { SortParam } from '@internetarchive/search-service';
 
 import { formatDate } from '../../utils/format-date';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
-import '../mediatype-icon';
+import '../image-block';
 import '../item-image';
+import '../mediatype-icon';
 import './tile-stats';
 
 @customElement('item-tile')
 export class ItemTile extends LitElement {
-  @property({ type: Object }) model?: TileModel;
-
   @property({ type: String }) baseImageUrl?: string;
 
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Object }) model?: TileModel;
+
   @property({ type: Object }) sortParam?: SortParam;
 
   render() {
     const itemTitle = this.model?.title;
+
     return html`
       <div class="container">
         <div class="item-info">
           <div id="title">
-            <h1 class="truncated" title=${ifDefined(
-              itemTitle
-            )}>${itemTitle}</h1>
+            <h1 class="truncated" title=${ifDefined(itemTitle)}>
+              ${itemTitle}
+            </h1>
           </div>
 
-          <div id="image">
-            <item-image
-              .model=${this.model}
-              .baseImageUrl=${this.baseImageUrl}>
-            </item-image>
-          </div>
+          <image-block 
+            .model=${this.model}
+            .baseImageUrl=${this.baseImageUrl}
+            .loggedIn=${this.loggedIn}
+            .isCompactTile=${false}
+            .isListTile=${false}
+            .viewSize=${'grid'}>
+          </image-block>
+
           ${
             this.doesSortedByDate
               ? this.sortedDateInfoTemplate
@@ -54,6 +61,9 @@ export class ItemTile extends LitElement {
     `;
   }
 
+  /**
+   * Templates
+   */
   private get doesSortedByDate() {
     return ['date', 'reviewdate', 'addeddate', 'publicdate'].includes(
       this.sortParam?.field as string
@@ -119,13 +129,6 @@ export class ItemTile extends LitElement {
         flex-shrink: 0;
       }
 
-      #image {
-        display: flex;
-        justify-content: center;
-        flex: 1;
-        height: 16rem;
-      }
-
       .hidden {
         display: none;
       }

package/src/tiles/image-block.ts

@@ -0,0 +1,124 @@
+import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
+
+import type { TileModel } from '../models';
+
+import './overlay/icon-overlay';
+import './overlay/text-overlay';
+
+@customElement('image-block')
+export class ImageBlock extends LitElement {
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: Boolean }) isCompactTile = false;
+
+  @property({ type: Boolean }) isListTile = false;
+
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: String }) viewSize: string = 'desktop';
+
+  render() {
+    if (!this.model?.identifier) {
+      return nothing;
+    }
+    return html`
+      <div class=${classMap(this.baseClass)}>
+        <item-image
+          .model=${this.model}
+          .baseImageUrl=${this.baseImageUrl}
+          .isListTile=${this.isListTile}
+          .isCompactTile=${this.isCompactTile}
+          .loggedIn=${this.loggedIn}
+          style="--imgHeight: 100%; --imgWidth: 100%"
+        >
+        </item-image>
+        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}
+      </div>
+    `;
+  }
+
+  private get baseClass(): ClassInfo {
+    return {
+      list: this.isListTile && !this.isCompactTile,
+      'list-compact': this.isListTile && this.isCompactTile,
+      [this.viewSize]: true,
+    };
+  }
+
+  private get iconOverlayTemplate() {
+    if (!this.isListTile) return nothing;
+
+    if (!this.model?.loginRequired && !this.model?.contentWarning) {
+      return nothing;
+    }
+    return html`
+      <icon-overlay
+        .loggedIn=${this.loggedIn}
+        .loginRequired=${this.model?.loginRequired}
+      >
+      </icon-overlay>
+    `;
+  }
+
+  private get textOverlayTemplate() {
+    if (this.isListTile) {
+      return nothing;
+    }
+
+    if (!this.model?.loginRequired && !this.model?.contentWarning) {
+      return nothing;
+    }
+    return html`
+      <text-overlay
+        .loggedIn=${this.loggedIn}
+        .loginRequired=${this.model?.loginRequired}
+      >
+      </text-overlay>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      div {
+        display: flex;
+        justify-content: center;
+        position: relative;
+      }
+
+      .grid {
+        height: 16rem;
+        flex: 1;
+      }
+
+      /** tile-list view */
+      .list.desktop {
+        width: 100px;
+        height: 100px;
+      }
+
+      .list.mobile {
+        width: 90px;
+        height: 90px;
+      }
+
+      /** tile-list-compact view */
+      .list-compact {
+        display: block;
+      }
+
+      .list-compact.desktop {
+        width: 45px;
+        height: 45px;
+      }
+
+      .list-compact.mobile {
+        width: 30px;
+        height: 30px;
+      }
+    `;
+  }
+}

package/src/tiles/item-image.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
-import { TileModel } from '../models';
+import type { TileModel } from '../models';
 
 import {
   baseItemImageStyles,
@@ -71,10 +71,12 @@ export class ItemImage extends LitElement {
   }
 
   private get itemImageClass(): ClassInfo {
+    const toBlur = this.model?.contentWarning || this.model?.loginRequired;
+
     return {
       contain: !this.isCompactTile && !this.isWaveform,
       cover: this.isCompactTile,
-      blur: this.model?.contentWarning || false,
+      blur: toBlur || false,
       waveform: this.isWaveform,
     };
   }

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

@@ -1,8 +1,8 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { SortParam } from '@internetarchive/search-service';
+import type { SortParam } from '@internetarchive/search-service';
 import { dateLabel } from './date-label';
-import { TileModel } from '../../models';
+import type { TileModel } from '../../models';
 
 @customElement('tile-list-compact-header')
 export class TileListCompactHeader extends LitElement {

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';
@@ -12,6 +12,9 @@ describe('Collection Browser', () => {
       html`<collection-browser></collection-browser>`
     );
 
+    el.baseQuery = 'hello';
+    await el.updateComplete;
+
     const facets = el.shadowRoot?.querySelector('collection-facets');
     const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');