@internetarchive/collection-browser 0.0.1-alpha.9 → 0.1.0

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

@@ -1,21 +1,24 @@
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+  TemplateResult,
+} from 'lit';
+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 { SortParam } from '@internetarchive/search-service';
 import DOMPurify from 'dompurify';
-// import * as HtmlSanitizer from '@jitbit/htmlsanitizer';
-// import sanitizeHtml from 'sanitize-html';
-// - error
-// import DOMPurify from 'dompurify';
-// - no types
-import { CollectionDisplayMode, TileModel } from '../../models';
+import { CollectionNameCacheInterface } from '@internetarchive/collection-name-cache';
+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 '../../mediatype-icon';
-
-/*
-at 750 creator, title trimmed
-at 530
-*/
+import '../mediatype-icon';
 
 @customElement('tile-list')
 export class TileList extends LitElement {
@@ -23,71 +26,313 @@ export class TileList extends LitElement {
 
   @property({ type: String }) baseNavigationUrl?: string;
 
+  @property({ type: Object })
+  collectionNameCache?: CollectionNameCacheInterface;
+
   @property({ type: Number }) currentWidth?: number;
 
   @property({ type: Number }) currentHeight?: number;
 
-  @property({ type: Object }) sortParam?: SortParam;
+  @property({ type: Object }) sortParam: SortParam | null = null;
+
+  @property({ type: Number }) mobileBreakpoint?: number;
 
-  @property({ type: String }) displayMode: CollectionDisplayMode =
-    'list-compact';
+  @state() private collectionLinks: TemplateResult[] = [];
 
-  // private HtmlSanitizer = HtmlSanitizer();
+  protected updated(changed: PropertyValues): void {
+    if (changed.has('model')) {
+      this.fetchCollectionNames();
+    }
+  }
+
+  private async fetchCollectionNames() {
+    if (
+      !this.model?.collections ||
+      this.model.collections.length === 0 ||
+      !this.collectionNameCache
+    ) {
+      return;
+    }
+    // Note: quirk of Lit: need to replace collectionLinks array,
+    // otherwise it will not re-render. Can't simply alter the array.
+    this.collectionLinks = [];
+    const newCollellectionLinks: TemplateResult[] = [];
+    const promises: Promise<void>[] = [];
+    for (const collection of this.model.collections) {
+      promises.push(
+        this.collectionNameCache?.collectionNameFor(collection).then(name => {
+          newCollellectionLinks.push(
+            this.detailsLink(collection, name ?? collection)
+          );
+        })
+      );
+    }
+    await Promise.all(promises);
+    this.collectionLinks = newCollellectionLinks;
+  }
 
   render() {
     return html`
       <div id="list-line" class="${this.classSize}">
-        <div id="views">
-          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}
+        ${this.classSize === 'mobile'
+          ? this.mobileTemplate
+          : this.desktopTemplate}
+      </div>
+    `;
+  }
+
+  private get mobileTemplate() {
+    return html`
+      <div id="list-line-top">
+        <div id="list-line-left">
+          <div id="thumb">${this.imgTemplate}</div>
+        </div>
+        <div id="list-line-right">
+          <div id="title-line">
+            <div id="title">${this.titleTemplate}</div>
+            ${this.iconRightTemplate}
+          </div>
         </div>
-        <div id="title">${this.model?.title}</div>
-        <div id="date">${formatDate(this.date, this.formatSize)}</div>
-        <div id="creator">${this.model?.creator}</div>
-        <div id="icon">
-          <mediatype-icon .mediatype=${this.model?.mediatype}></mediatype-icon>
+      </div>
+      <div id="list-line-bottom">${this.detailsTemplate}</div>
+    `;
+  }
+
+  private get desktopTemplate() {
+    return html`
+      <div id="list-line-left">
+        <div id="thumb">${this.imgTemplate}</div>
+      </div>
+      <div id="list-line-right">
+        <div id="title-line">
+          <div id="title">${this.titleTemplate}</div>
+          ${this.iconRightTemplate}
         </div>
+        ${this.detailsTemplate}
+      </div>
+    `;
+  }
+
+  private get detailsTemplate() {
+    return html`
+      ${this.itemLineTemplate} ${this.creatorTemplate}
+      <div id="dates-line">
+        ${this.datePublishedTemplate} ${this.dateSortByTemplate}
+      </div>
+      <div id="views-line">
+        ${this.viewsTemplate} ${this.ratingTemplate} ${this.reviewsTemplate}
+      </div>
+      ${this.topicsTemplate} ${this.collectionsTemplate}
+      ${this.descriptionTemplate}
+    `;
+  }
+
+  // Data templates
+  private get imgTemplate() {
+    if (!this.model?.identifier) {
+      return nothing;
+    }
+    return html` <img
+      src="${this.baseNavigationUrl}/services/img/${this.model.identifier}"
+      alt="${this.model.identifier}"
+      class=${this.model?.mediatype}
+    />`;
+  }
+
+  private get iconRightTemplate() {
+    return html`
+      <div id="icon-right">
+        <mediatype-icon
+          .mediatype=${this.model?.mediatype}
+          .collections=${this.model?.collections}
+          style="--iconCustomFillColor: ${ifDefined(this.collectionColor)}"
+        >
+        </mediatype-icon>
       </div>
-      ${this.displayMode === 'list-detail' ? this.detail() : html``}
     `;
   }
 
-  private detail() {
-    const descriptionHtml = this.description();
-    const topicHtml = this.topic();
-    const sourceHtml = this.source();
+  // Only in list, not tile
+  private get collectionColor() {
+    if (this.model?.mediatype !== 'collection') {
+      return undefined;
+    }
+    return '#4666FF';
+  }
+
+  private get titleTemplate() {
+    if (!this.model?.title) {
+      return nothing;
+    }
+    return html` ${this.detailsLink(this.model.identifier, this.model.title)} `;
+  }
+
+  private get itemLineTemplate() {
+    const source = this.sourceTemplate;
+    const volume = this.volumeTemplate;
+    const issue = this.issueTemplate;
+    if (!source && !volume && !issue) {
+      return nothing;
+    }
+    return html` <div id="item-line">${source} ${volume} ${issue}</div> `;
+  }
+
+  private get sourceTemplate() {
+    if (!this.model?.source) {
+      return nothing;
+    }
+    return html`
+      <div id="source" class="metadata">
+        ${this.labelTemplate('Source')}
+        ${this.searchLink('source', this.model.source)}
+      </div>
+    `;
+  }
+
+  private get volumeTemplate() {
+    return this.metadataTemplate(this.model?.volume, 'Volume');
+  }
+
+  private get issueTemplate() {
+    return this.metadataTemplate(this.model?.issue, 'Issue');
+  }
 
-    if (descriptionHtml || topicHtml || sourceHtml) {
+  private get creatorTemplate() {
+    // "Achivist since" if account
+    if (this.model?.mediatype === 'account') {
       return html`
-        <div id="list-detail" class="${this.classSize}">
-          <div></div>
-          <div id="details">${descriptionHtml} ${topicHtml} ${sourceHtml}</div>
-          <div></div>
+        <div id="creator" class="metadata">
+          <span class="label"> ${accountLabel(this.model?.dateAdded)} </span>
         </div>
       `;
     }
-    return html``;
+    // "Creator" if not account tile
+    if (!this.model?.creators || this.model.creators.length === 0) {
+      return nothing;
+    }
+    return html`
+      <div id="creator" class="metadata">
+        ${this.labelTemplate('By')}
+        ${join(
+          map(this.model.creators, id => this.searchLink('creator', id)),
+          html`, `
+        )}
+      </div>
+    `;
+  }
+
+  private get datePublishedTemplate() {
+    return this.metadataTemplate(
+      formatDate(this.model?.datePublished, 'long'),
+      'Published'
+    );
   }
 
-  private description() {
-    if (this.model?.description) {
-      const description = DOMPurify.sanitize(`${this.model?.description}`);
-      return html` <div id="description">${description}</div> `;
+  // Show date label/value when sorted by date type
+  // Except datePublished which is always shown
+  private get dateSortByTemplate() {
+    if (
+      this.sortParam &&
+      (this.sortParam.field === 'addeddate' ||
+        this.sortParam.field === 'reviewdate' ||
+        this.sortParam.field === 'publicdate')
+    ) {
+      return this.metadataTemplate(
+        formatDate(this.date, 'long'),
+        dateLabel(this.sortParam.field)
+      );
     }
-    return html``;
+    return nothing;
   }
 
-  private topic() {
-    if (this.model?.subject) {
-      return html` <div id="topic">Topic: ${this.model?.subject}</div> `;
+  private get viewsTemplate() {
+    return this.metadataTemplate(
+      `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,
+      'Views'
+    );
+  }
+
+  private get ratingTemplate() {
+    return this.metadataTemplate(this.model?.averageRating, 'Avg Rating');
+  }
+
+  private get reviewsTemplate() {
+    return this.metadataTemplate(this.model?.commentCount, 'Reviews');
+  }
+
+  private get topicsTemplate() {
+    if (!this.model?.subjects || this.model.subjects.length === 0) {
+      return nothing;
     }
-    return html``;
+    return html`
+      <div id="topics" class="metadata">
+        ${this.labelTemplate('Topics')}
+        ${join(
+          map(this.model.subjects, id => this.searchLink('subject', id)),
+          html`, `
+        )}
+      </div>
+    `;
   }
 
-  private source() {
-    if (this.model?.source) {
-      return html` <div id="source">Source: ${this.model?.source}</div> `;
+  private get collectionsTemplate() {
+    if (!this.collectionLinks || this.collectionLinks.length === 0) {
+      return nothing;
     }
-    return html``;
+    return html`
+      <div id="collections" class="metadata">
+        ${this.labelTemplate('Collections')}
+        ${join(this.collectionLinks, html`, `)}
+      </div>
+    `;
+  }
+
+  private get descriptionTemplate() {
+    return this.metadataTemplate(
+      DOMPurify.sanitize(this.model?.description ?? ''),
+      '',
+      'description'
+    );
+  }
+
+  // Utility functions
+  private metadataTemplate(text: any, label = '', id?: string) {
+    if (!text) return nothing;
+    return html`
+      <div id=${ifDefined(id)} class="metadata">
+        ${this.labelTemplate(label)} ${text}
+      </div>
+    `;
+  }
+
+  private labelTemplate(label: string) {
+    return html` ${label
+      ? html`<span class="label">${label}: </span>`
+      : nothing}`;
+  }
+
+  private searchLink(field: string, searchTerm: string) {
+    if (!field || !searchTerm) {
+      return nothing;
+    }
+    const query = encodeURIComponent(`${field}:"${searchTerm}"`);
+    // No whitespace after closing tag
+    // Note: single ' for href='' to wrap " in query var gets changed back by yarn format
+
+    // eslint-disable-next-line lit/no-invalid-html
+    return html`<a href="${this.baseNavigationUrl}/search.php?query=${query}">
+      ${DOMPurify.sanitize(searchTerm)}</a
+    >`;
+  }
+
+  private detailsLink(identifier: string, text?: string): TemplateResult {
+    const linkText = text ?? identifier;
+    // No whitespace after closing tag
+    // identifiers (all ASCII in their creation) should be safe to use in href, but sanitize anyway
+    return html`<a
+      href="${this.baseNavigationUrl}/details/${encodeURI(identifier)}"
+      >${DOMPurify.sanitize(linkText)}</a
+    >`;
   }
 
   /*
@@ -109,118 +354,178 @@ export class TileList extends LitElement {
   }
 
   private get classSize(): string {
-    return (this.currentWidth ?? 531) < 530 ? 'mobile' : 'desktop';
+    if (
+      this.mobileBreakpoint &&
+      this.currentWidth &&
+      this.currentWidth < this.mobileBreakpoint
+    ) {
+      return 'mobile';
+    }
+    return 'desktop';
   }
 
   private get formatSize(): DateFormat | NumberFormat {
-    return (this.currentWidth ?? 531) < 530 ? 'short' : 'long';
+    if (
+      this.mobileBreakpoint &&
+      this.currentWidth &&
+      this.currentWidth < this.mobileBreakpoint
+    ) {
+      return 'short';
+    }
+    return 'long';
   }
 
   static get styles() {
     return css`
-      .mobile div {
-        font-size: 11px;
+      html {
+        font-size: unset;
       }
-      .desktop div {
+
+      div {
         font-size: 14px;
       }
 
+      div a {
+        text-decoration: none;
+      }
+
+      .label {
+        font-weight: bold;
+      }
+
+      #list-line.mobile {
+        --infiniteScrollerRowGap: 20px;
+        --infiniteScrollerRowHeight: auto;
+      }
+
+      #list-line.desktop {
+        --infiniteScrollerRowGap: 30px;
+        --infiniteScrollerRowHeight: auto;
+      }
+
       /* fields */
 
-      #title {
-        color: #4b64ff;
-        text-decoration: none;
+      #thumb img {
+        object-fit: cover;
+        display: block;
       }
 
-      #title,
-      #creator,
-      #topic,
-      #source {
-        text-overflow: ellipsis;
-        overflow: hidden;
+      .mobile #thumb img {
+        width: 90px;
+        height: 90px;
       }
 
-      #title,
-      #creator {
-        white-space: nowrap;
+      .desktop #thumb img {
+        width: 100px;
+        height: 100px;
       }
 
-      #views,
-      #date {
-        text-align: right;
+      #thumb img.collection {
+        border-radius: 8px;
+        -webkit-border-radius: 8px;
+        -moz-border-radius: 8px;
       }
 
-      #views,
-      #details {
-        color: #767676;
+      .mobile #thumb img.account {
+        border-radius: 45px;
+        -webkit-border-radius: 45px;
+        -moz-border-radius: 45px;
       }
 
-      #icon {
-        padding-right: 6px;
+      .desktop #thumb img.account {
+        border-radius: 50px;
+        -webkit-border-radius: 50px;
+        -moz-border-radius: 50px;
       }
 
-      .desktop #description,
-      .desktop #topic,
-      .desktop #source {
-        font-size: 12px;
+      #icon-right {
+        width: 20px;
+        padding-top: 5px;
+        --iconHeight: 20px;
+        --iconWidth: 20px;
+        --iconTextAlign: right;
+        margin-top: -8px;
+        text-align: right;
       }
 
-      .mobile #description,
-      .mobile #topic,
-      .mobile #source {
-        font-size: 11px;
+      #title {
+        color: #4b64ff;
+        text-decoration: none;
+        font-size: 22px;
+        font-weight: bold;
+        /* align top of text with image */
+        line-height: 25px;
+        margin-top: -4px;
+        padding-bottom: 2px;
+        flex-grow: 1;
       }
 
-      #description {
+      .metadata {
+        line-height: 20px;
+      }
+
+      #description,
+      #creator,
+      #topics,
+      #source {
+        text-align: left;
         overflow: hidden;
         text-overflow: ellipsis;
-        -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         display: -webkit-box;
         word-break: break-word;
         -webkit-line-clamp: 3; /* number of lines to show */
         line-clamp: 3;
-        -webkit-box-orient: vertical;
-        text-align: left;
       }
 
-      /* list-line */
+      #icon {
+        padding-top: 5px;
+      }
+
+      #description {
+        padding-top: 10px;
+      }
 
+      /* Top level container */
       #list-line {
-        display: grid;
-        column-gap: 10px;
-        line-height: 1.42857143;
-        border-top: 1px solid #ddd !important;
-        padding-top: 5px;
-        align-items: center;
+        display: flex;
       }
 
       #list-line.mobile {
-        grid-template-columns: 33px 3fr 30px 2fr 29.5px;
+        flex-direction: column;
       }
+
       #list-line.desktop {
-        grid-template-columns: 60px 3fr 90px 2fr 29.5px;
+        column-gap: 10px;
       }
 
-      #list-line:hover #title {
-        text-decoration: underline;
+      #list-line-top {
+        display: flex;
+        column-gap: 7px;
       }
 
-      /* list-detail */
+      #list-line-bottom {
+        padding-top: 4px;
+      }
 
-      #list-detail {
-        display: grid;
-        column-gap: 10px;
-        line-height: 1.42857143;
-        align-items: center;
+      #list-line-right,
+      #list-line-top,
+      #list-line-bottom {
+        width: 100%;
       }
 
-      #list-detail.mobile {
-        grid-template-columns: 33px auto 29.5px;
+      div a:hover {
+        text-decoration: underline;
       }
 
-      #list-detail.desktop {
-        grid-template-columns: 60px auto 29.5px;
+      /* Lines containing multiple div as row */
+      #item-line,
+      #dates-line,
+      #views-line,
+      #title-line {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
       }
     `;
   }

package/src/tiles/mediatype-icon.ts

@@ -0,0 +1,75 @@
+import { css, CSSResultGroup, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { mediatypeConfig } from '../mediatype/mediatype-config';
+
+@customElement('mediatype-icon')
+export class MediatypeIcon extends LitElement {
+  @property({ type: String }) mediatype: string | undefined;
+
+  @property({ type: Array }) collections: string[] | undefined;
+
+  @property({ type: Boolean }) showText = false;
+
+  private get displayMediatype(): string {
+    const tvIdentifier = ['tvnews', 'tvarchive', 'television'];
+    const radioIdentifier = ['radio', 'radioprogram'];
+
+    if (
+      this.mediatype === 'movies' &&
+      this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)
+    ) {
+      return 'tv';
+    }
+    if (
+      this.mediatype === 'audio' &&
+      this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)
+    ) {
+      return 'radio';
+    }
+    return this.mediatype || '';
+  }
+
+  render() {
+    const config = mediatypeConfig[this.displayMediatype];
+    if (!config) {
+      return html``;
+    }
+
+    return html`
+      <div
+        id="icon"
+        class="${this.showText ? 'show-text' : 'hide-text'}"
+        style="--iconFillColor: ${config.color}"
+      >
+        ${config.icon}
+        <p class="status-text">${config.text}</p>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .status-text {
+        font-size: 14px;
+        color: #2c2c2c;
+        margin: auto;
+        display: block;
+        text-align: var(--iconTextAlign, center);
+      }
+
+      #icon.hide-text p {
+        display: none;
+      }
+
+      svg {
+        height: var(--iconHeight, 10px);
+        width: var(--iconWidth, 10px);
+      }
+
+      .fill-color {
+        fill: var(--iconCustomFillColor, var(--iconFillColor, '#000000'));
+      }
+    `;
+  }
+}