@internetarchive/collection-browser 0.2.11 → 0.2.12

package/package.json

@@ -3,11 +3,11 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
-    "start": "yarn run prepare && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "start": "yarn run prepare && tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "prepare:ghpages": "rimraf ghpages && yarn run prepare && vite build",
     "prepare": "rimraf dist && tsc && husky install",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",

package/renovate.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "config:base",
+    ":preserveSemverRanges"
+  ]
+}

package/src/assets/img/icons/login-required.ts

@@ -0,0 +1,30 @@
+import { svg } from 'lit';
+
+export const loginRequiredIcon = svg`
+  <svg
+    viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill="none" fill-rule="nonzero">
+      <path
+        d="m11 48h11c-.0377367 5.0230706-.0377367 17.6897373 0 38h28v-38h12c-14.7643578-21.746483-22.9310245-33.4131497-24.5-35z"
+        fill="#fff"
+        transform="matrix(0 1 -1 0 86 13)"
+      />
+      <path
+        d="m17 44h9c-.0377367 5.0230706-.0377367 17.0230706 0 36h18v-36h10c-10.0976911-15.0798163-15.9310245-23.4131497-17.5-25z"
+        fill="#000"
+        transform="matrix(0 1 -1 0 85 14)"
+      />
+      <path
+        d="m84.3595506 0h-55.7191012c-8.6379817 0-15.6404494 6.39593215-15.6404494 14.2857143v15.7142857h20v-11h47v62l-47-1v-11h-20v16.7142857c0 7.8897822 7.0024677 14.2857143 15.6404494 14.2857143h55.7191012c8.6379817 0 15.6404494-6.3959321 15.6404494-14.2857143v-71.4285714c0-7.88978215-7.0024677-14.2857143-15.6404494-14.2857143z"
+        fill="#fff"
+      />
+      <path
+        d="m84.2597403 5c5.3793969 0 9.7402597 4.02943725 9.7402597 9v72c0 4.9705627-4.3608628 9-9.7402597 9h-55.5194806c-5.3793969 0-9.7402597-4.0294373-9.7402597-9v-12h8v7.5c0 2.4198792 1.8593897 4.3936363 4.4510815 4.4958424l48.9709964.0041576c2.6189169 0 4.4673094-2.6052767 4.5779221-5v-62c0-2.4852814-2.3103015-5-5-5h-48.3376623c-2.618917 0-4.551725 1.6052767-4.6623377 4v7h-8v-11c0-4.97056275 4.3608628-9 9.7402597-9z"
+        fill="#000"
+      />
+    </g>
+    <title>Log in to view this item</title>
+  </svg>
+`;

package/src/collection-browser.ts

@@ -456,6 +456,7 @@ export class CollectionBrowser
           .resizeObserver=${this.resizeObserver}
           .sortParam=${this.sortParam}
           .mobileBreakpoint=${this.mobileBreakpoint}
+          .loggedIn=${this.loggedIn}
         >
         </tile-dispatcher>
       </div>
@@ -1119,16 +1120,20 @@ export class CollectionBrowser
     const model = this.tileModelAtCellIndex(index);
     if (!model) return undefined;
 
-    return html` <tile-dispatcher
-      .baseNavigationUrl=${this.baseNavigationUrl}
-      .baseImageUrl=${this.baseImageUrl}
-      .model=${model}
-      .tileDisplayMode=${this.displayMode}
-      .resizeObserver=${this.resizeObserver}
-      .collectionNameCache=${this.collectionNameCache}
-      .sortParam=${this.sortParam}
-      .mobileBreakpoint=${this.mobileBreakpoint}
-    ></tile-dispatcher>`;
+    return html`
+      <tile-dispatcher
+        .baseNavigationUrl=${this.baseNavigationUrl}
+        .baseImageUrl=${this.baseImageUrl}
+        .model=${model}
+        .tileDisplayMode=${this.displayMode}
+        .resizeObserver=${this.resizeObserver}
+        .collectionNameCache=${this.collectionNameCache}
+        .sortParam=${this.sortParam}
+        .mobileBreakpoint=${this.mobileBreakpoint}
+        .loggedIn=${this.loggedIn}
+      >
+      </tile-dispatcher>
+    `;
   }
 
   /**

package/src/styles/item-image-styles.ts

@@ -17,10 +17,13 @@ export const baseItemImageStyles = css`
     box-sizing: border-box;
     display: flex;
     position: relative;
+    max-width: 100px;
   }
 
   .contain {
     object-fit: contain;
+    height: 100%;
+    width: 100%;
   }
 
   .cover {
@@ -28,9 +31,7 @@ export const baseItemImageStyles = css`
   }
 
   .blur {
-    filter: blur(15px);
-    width: 100%;
-    transform: scale(1.1);
+    filter: blur(5px);
   }
 `;
 

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

@@ -7,35 +7,42 @@ import { SortParam } from '@internetarchive/search-service';
 import { formatDate } from '../../utils/format-date';
 import { 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 { 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

@@ -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.ts

@@ -1,5 +1,4 @@
-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';
@@ -9,7 +8,7 @@ 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

@@ -21,7 +21,7 @@ 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
+      }
+    `;
+  }
+}