@internetarchive/collection-browser 0.0.1-alpha.8 → 0.1.1

package/src/tiles/collection-browser-loading-tile.ts

@@ -0,0 +1,29 @@
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('collection-browser-loading-tile')
+export class CollectionBrowserLoadingTile extends LitElement {
+  render() {
+    return html` <div id="container"></div> `;
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      #container {
+        background: linear-gradient(
+          to right,
+          rgba(25, 69, 154, 0.1),
+          rgb(105, 161, 234, 0.2)
+        );
+        background-size: 100% 100%;
+        display: block;
+        height: 100%;
+      }
+    `;
+  }
+}

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

@@ -8,7 +8,7 @@ import { reviewsIcon } from './icons/reviews';
 import { uploadIcon } from './icons/upload';
 
 @customElement('account-tile')
-export class UserTile extends LitElement {
+export class AccountTile extends LitElement {
   @property({ type: Object }) model?: TileModel;
 
   render() {

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

@@ -1,10 +1,9 @@
-import { localized, msg } from '@lit/localize';
+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';
 
-@localized()
 @customElement('collection-tile')
 export class CollectionTile extends LitElement {
   @property({ type: Object }) model?: TileModel;

package/src/tiles/grid/icons/views.ts

@@ -1,6 +1,6 @@
-import { html } from 'lit';
+import { svg } from 'lit';
 
-export default html`
+export default svg`
   <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
     <path
       d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"

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

@@ -1,90 +1,74 @@
+/* eslint-disable import/no-duplicates */
 import { css, CSSResultGroup, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+
 import { TileModel } from '../../models';
 import { formatCount } from '../../utils/format-count';
 
-import '../../mediatype-icon';
-
 import { favoriteFilledIcon } from './icons/favorite-filled';
 import { reviewsIcon } from './icons/reviews';
 import viewsIcon from './icons/views';
 
+import '../mediatype-icon';
+import '../item-image';
+
 @customElement('item-tile')
 export class ItemTile extends LitElement {
   @property({ type: Object }) model?: TileModel;
 
   @property({ type: String }) baseNavigationUrl?: string;
 
-  get renderItemImageView() {
-    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;
-    const containsDeemphasize = this.model?.collections.includes('deemphasize');
-    return !containsDeemphasize
-      ? html`<div
-          id="item-image"
-          style="background-image:url(${imgSrcUrl})"
-        ></div>`
-      : html`<div id="item-image-box">
-          <div
-            id="item-image-deemphasize"
-            style="background-image:url(${imgSrcUrl})"
-          ></div>
-          <div class="tile-action no-preview">Content may be inappropriate</div>
-        </div>`;
-  }
-
   render() {
-    const imgSrcUrl = `${this.baseNavigationUrl}/services/img/${this.model?.collections[0]}`;
     const itemTitle = this.model?.title || '';
     const itemCreator = this.model?.creator || '-';
 
     return html`
       <div id="container">
-        <div id="stealth-popup">
-          <div id="collection-image" style="background-image:url(${imgSrcUrl})"></div>
-          <p id="collection-name">${this.model?.collections[0]}</p>
-        </div>
         <div id="title-image-container">
-          <p id="item-title" title=${itemTitle}>
-            ${this.model?.title}
-          </p>
+          <h1 id="item-title" title=${itemTitle}>${this.model?.title}</h1>
           <div id="item-image-container">
-            ${this.renderItemImageView}
+            <item-image
+              .model=${this.model}
+              .baseNavigationUrl=${this.baseNavigationUrl}
+            >
+            </item-image>
           </div>
           <div class="item-creator">
-            <span id="text-by">By:</span>
-            <span>${itemCreator}</span>
+            <div class="truncated">
+              <span><strong>By:&nbsp;</strong>${itemCreator}</span>
+            </div>
           </div>
         </div>
+
+        <div class="hr"></div>
+
         <div id="item-stats-container">
           <div id="stats-holder">
             <div class="col">
-              <mediatype-icon mediatype="${
-                this.model?.mediatype
-              }" showText="true">
+              <mediatype-icon
+                .mediatype=${this.model?.mediatype}
+                .collection=${this.model?.collections}
+                style="--iconHeight:25px; --iconWidth:25px;"
+              >
+              </mediatype-icon>
             </div>
             <div class="col">
               ${viewsIcon}
-              <p class="status-text">${formatCount(
-                this.model?.viewCount,
-                'short',
-                'short'
-              )}</p>
+              <p class="status-text">
+                ${formatCount(this.model?.viewCount, 'short', 'short')}
+              </p>
             </div>
             <div class="col">
               ${favoriteFilledIcon}
-              <p class="status-text">${formatCount(
-                this.model?.itemCount,
-                'short',
-                'short'
-              )}</p>
+              <p class="status-text">
+                ${formatCount(this.model?.itemCount, 'short', 'short')}
+              </p>
             </div>
             <div class="col">
               ${reviewsIcon}
-              <p class="status-text">${formatCount(
-                this.model?.favCount,
-                'short',
-                'short'
-              )}</p>
+              <p class="status-text">
+                ${formatCount(this.model?.favCount, 'short', 'short')}
+              </p>
             </div>
           </div>
         </div>
@@ -103,18 +87,18 @@ export class ItemTile extends LitElement {
         display: flex;
         flex-direction: column;
         height: 100%;
+        position: relative;
       }
 
       #title-image-container {
         display: flex;
         flex: 1;
         flex-direction: column;
-        padding: 0.5rem;
+        padding: 0.5rem 0.5rem 0 0.5rem;
       }
 
       #item-title {
-        font-weight: bold;
-        color: #000000;
+        color: #2c2c2c;
         font-size: 1.6rem;
         text-align: center;
         margin-top: 0rem;
@@ -134,59 +118,6 @@ export class ItemTile extends LitElement {
         flex: 1;
       }
 
-      #item-image {
-        width: 16rem;
-        height: 16rem;
-        border-radius: 0.8rem;
-        overflow: hidden;
-        box-shadow: 1px 1px 2px 0px;
-        object-fit: cover;
-        background-position: center;
-        background-size: cover;
-      }
-
-      #item-image-box {
-        width: 16rem;
-        height: 16rem;
-        border-radius: 0.8rem;
-        overflow: hidden;
-        box-shadow: 1px 1px 2px 0px;
-        border: 5px solid #0000000;
-        position: relative;
-        display: flex;
-      }
-
-      #item-image-deemphasize {
-        width: 16rem;
-        height: 16rem;
-        object-fit: cover;
-        background-position: center;
-        background-size: cover;
-        filter: blur(15px);
-        position: absolute;
-        z-index: 1;
-      }
-
-      .tile-action {
-        border: 2px solid currentColor;
-        border-radius: 1px;
-        padding: 5px;
-        font-weight: 500;
-        width: auto;
-        position: absolute;
-        z-index: 2;
-        display: flex;
-        top: 5.5rem;
-      }
-
-      .no-preview {
-        background-color: #fffecb;
-        color: #000000;
-        font-size: 1.4rem;
-        line-height: 2rem;
-        text-align: center;
-      }
-
       .hidden {
         display: none;
       }
@@ -205,21 +136,33 @@ export class ItemTile extends LitElement {
       }
 
       .item-creator {
-        color: #000000;
-        display: -webkit-box;
-        font-size: 1.4rem;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end; /* Important to start text from bottom */
         height: 3rem;
-        margin: 0px;
-        overflow: hidden;
-        padding: 0.5rem;
-        text-align: center;
-        text-overflow: ellipsis;
+        padding-top: 1rem;
+      }
+
+      .truncated {
+        flex: 1;
+        min-width: 0; /* Important for long words! */
+      }
+
+      .truncated span {
+        font-size: 1.4rem;
+        color: #2c2c2c;
         -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
         -webkit-box-orient: vertical;
+        word-wrap: break-word;
+        line-height: 2rem;
+        text-align: center;
       }
 
-      #text-by {
-        font-weight: bold;
+      .hr {
+        border: 0.5px solid #ccc;
       }
 
       #item-stats-container {
@@ -255,54 +198,6 @@ export class ItemTile extends LitElement {
       .col {
         width: 25%;
       }
-
-      #container:hover #stealth-popup {
-        margin-top: -30px;
-        visiblity: visible;
-        opacity: 1;
-      }
-
-      #stealth-popup {
-        transition: margin-top 0.3s ease, opacity 0.3s ease;
-        position: absolute;
-        visiblity: hidden;
-        z-index: 1;
-        opacity: 0;
-        color: black;
-        margin-top: -15px;
-        margin-left: -15px;
-        text-align: left;
-        display: flex;
-        align-items: center;
-      }
-
-      #collection-image {
-        transition: opacity 0.3s ease;
-        width: 4.5rem;
-        height: 4.5rem;
-        border-radius: 22px;
-        box-shadow: 0px 0px 10px #ccc;
-        background-color: white;
-        border: 2px solid #ddd;
-        overflow: hidden;
-        background-size: cover;
-        background-repeat: no-repeat;
-        background-position: center center;
-      }
-
-      #collection-name {
-        width: 160px;
-        line-height: 1;
-        max-height: 25px;
-        font-size: 12px;
-        font-weight: bold;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        bottom: 20px;
-        padding: 1rem;
-      }
     `;
   }
 }

package/src/tiles/item-image.ts

@@ -0,0 +1,218 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  nothing,
+  PropertyValues,
+  LitElement,
+} from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { TileModel } from '../models';
+
+@customElement('item-image')
+export class ItemImage extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: Boolean }) isListTile = false;
+
+  @state() private isDeemphasize = false;
+
+  @query('.item-image') private itemImageWaveform!: HTMLImageElement;
+
+  protected updated(changed: PropertyValues): void {
+    if (changed.has('model')) {
+      this.setDeemphsize();
+    }
+  }
+
+  private setDeemphsize() {
+    this.isDeemphasize =
+      this.model?.collections.includes('deemphasize') ?? false;
+  }
+
+  render() {
+    return html`
+      <div class=${ifDefined(this.imageBoxClass)}>
+        ${this.model?.mediatype === 'audio'
+          ? this.waveformTemplate
+          : this.backgroundImageTemplate}
+        ${this.tileActionTemplate}
+      </div>
+    `;
+  }
+
+  private get imageSrc() {
+    return `${this.baseNavigationUrl}/services/img/${this.model?.identifier}`;
+  }
+
+  // Templates
+  private get backgroundImageTemplate() {
+    return html`
+      <div
+        class=${this.imageClass}
+        style="background-image:url(${this.imageSrc})"
+      ></div>
+    `;
+  }
+
+  private get waveformTemplate() {
+    return html`
+      <div class="box" id=${this.randomGradient}>
+        <img
+          class="item-image"
+          src="${this.imageSrc}"
+          alt="${ifDefined(this.model?.identifier)}"
+          @load=${this.onLoadItemImageCheck}
+        />
+      </div>
+    `;
+  }
+
+  private get tileActionTemplate() {
+    if (!this.isDeemphasize) {
+      return nothing;
+    }
+    return html`
+      <div class="tile-action no-preview">Content may be inappropriate</div>
+    `;
+  }
+
+  private onLoadItemImageCheck() {
+    const aspectRatio =
+      this.itemImageWaveform.naturalWidth /
+      this.itemImageWaveform.naturalHeight;
+    if (aspectRatio === 4) {
+      this.itemImageWaveform.classList.add('waveform');
+    }
+  }
+
+  // Classes
+  private get imageClass() {
+    return `item-image ${this.isDeemphasize ? 'deemphasize' : 'default'}`;
+  }
+
+  private get imageBoxClass() {
+    return this.isDeemphasize ? 'item-image-box' : undefined;
+  }
+
+  private get randomGradient() {
+    return `grad${Math.floor(Math.random() * (6 - 1) + 1)}`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .item-image-box {
+        width: 16rem;
+        height: 16rem;
+        overflow: hidden;
+        position: relative;
+        box-shadow: 1px 1px 2px 0px;
+        display: flex;
+      }
+
+      .item-image {
+        width: 16rem;
+        height: 16rem;
+        object-fit: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        position: relative;
+        -webkit-appearance: none;
+        overflow: visible;
+      }
+
+      .waveform {
+        mix-blend-mode: screen;
+      }
+
+      .default {
+        background-size: contain;
+        filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.8));
+      }
+
+      .deemphasize {
+        background-size: cover;
+        filter: blur(15px);
+        z-index: 1;
+      }
+
+      .tile-action {
+        border: 1px solid currentColor;
+        border-radius: 1px;
+        padding: 5px;
+        font-weight: 500;
+        width: auto;
+        position: absolute;
+        z-index: 2;
+        display: flex;
+        top: 5.5rem;
+      }
+
+      .no-preview {
+        background-color: #fffecb;
+        color: #2c2c2c;
+        font-size: 1.4rem;
+        line-height: 2rem;
+        text-align: center;
+      }
+
+      #grad1 {
+        background: linear-gradient(
+          hsl(300, 80%, 55%),
+          hsl(330, 80%, 33%) 35%,
+          hsl(330, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad2 {
+        background: linear-gradient(
+          hsl(200, 80%, 55%),
+          hsl(230, 80%, 33%) 35%,
+          hsl(230, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad3 {
+        background: linear-gradient(
+          hsl(160, 80%, 55%),
+          hsl(190, 80%, 33%) 35%,
+          hsl(190, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad4 {
+        background: linear-gradient(
+          hsl(250, 80%, 55%),
+          hsl(280, 80%, 33%) 35%,
+          hsl(280, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad5 {
+        background: linear-gradient(
+          hsl(280, 80%, 55%),
+          hsl(310, 80%, 33%) 35%,
+          hsl(310, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+
+      #grad6 {
+        background: linear-gradient(
+          hsl(340, 80%, 55%),
+          hsl(0, 80%, 33%) 35%,
+          hsl(0, 80%, 22%) 70%,
+          hsl(0, 0%, 0%)
+        );
+      }
+    `;
+  }
+}

package/src/tiles/list/account-label.ts

@@ -0,0 +1,6 @@
+export function accountLabel(date: Date | undefined): string {
+  if (!date) {
+    return '';
+  }
+  return `Archivist since ${date.getFullYear()}`;
+}

package/src/tiles/list/date-label.ts

@@ -0,0 +1,12 @@
+export function dateLabel(sortField: string | undefined): string {
+  switch (sortField) {
+    case 'date':
+      return 'Published';
+    case 'reviewdate':
+      return 'Reviewed';
+    case 'addeddate':
+      return 'Added';
+    default:
+      return 'Archived';
+  }
+}

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

@@ -0,0 +1,77 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { SortParam } from '@internetarchive/search-service';
+import { dateLabel } from './date-label';
+import { TileModel } from '../../models';
+
+@customElement('tile-list-compact-header')
+export class TileListCompactHeader extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Object }) sortParam: SortParam | null = null;
+
+  @property({ type: Number }) mobileBreakpoint?: number;
+
+  render() {
+    return html`
+      <div id="list-line-header" class="${this.classSize}">
+        <div id="thumb"></div>
+        <div id="title">Title</div>
+        <div id="creator">Creator</div>
+        <div id="date">${dateLabel(this.sortParam?.field)}</div>
+        <div id="icon"></div>
+        <div id="views">Views</div>
+      </div>
+    `;
+  }
+
+  private get classSize(): string {
+    if (
+      this.mobileBreakpoint &&
+      this.currentWidth &&
+      this.currentWidth < this.mobileBreakpoint
+    ) {
+      return 'mobile';
+    }
+    return 'desktop';
+  }
+
+  static get styles() {
+    return css`
+      html {
+        font-size: unset;
+      }
+
+      div {
+        font-size: 14px;
+        font-weight: bold;
+        line-height: 20px;
+      }
+
+      .mobile #views {
+        display: none;
+      }
+
+      #views {
+        text-align: right;
+      }
+
+      #list-line-header {
+        display: grid;
+        column-gap: 10px;
+        align-items: flex-end;
+        padding-bottom: 2px;
+      }
+
+      #list-line-header.mobile {
+        grid-template-columns: 36px 3fr 2fr 91px;
+      }
+
+      #list-line-header.desktop {
+        grid-template-columns: 51px 3fr 2fr 100px 20px 60px;
+      }
+    `;
+  }
+}