@internetarchive/collection-browser 4.5.1 → 4.6.0

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/tiles/hover/tile-hover-pane.ts

@@ -0,0 +1,184 @@
+import type { SortParam } from '@internetarchive/search-service';
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  TemplateResult,
+} from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import '@a11y/focus-trap';
+
+import { suppressedCollections, type TileModel } from '../../models';
+import type { CollectionTitles } from '../../data-source/models';
+import '../list/tile-list';
+
+@customElement('tile-hover-pane')
+export class TileHoverPane extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: Boolean }) loggedIn: boolean = false;
+
+  @property({ type: Boolean }) suppressBlurring: boolean = false;
+
+  @property({ type: Object }) sortParam?: SortParam;
+
+  @property({ type: Number }) mobileBreakpoint?: number;
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Object })
+  collectionTitles?: CollectionTitles;
+
+  protected render(): TemplateResult {
+    return html`
+      <div id="container">
+        <focus-trap>
+          ${this.headerTemplate}
+          <div id="hover-tile-list">
+            <tile-list
+              .model=${this.model}
+              .baseNavigationUrl=${this.baseNavigationUrl}
+              .baseImageUrl=${this.baseImageUrl}
+              .loggedIn=${this.loggedIn}
+              .suppressBlurring=${this.suppressBlurring}
+              .sortParam=${this.sortParam}
+              .collectionTitles=${this.collectionTitles}
+              .mobileBreakpoint=${this.mobileBreakpoint}
+              .currentWidth=${this.currentWidth}
+            ></tile-list>
+          </div>
+        </focus-trap>
+      </div>
+    `;
+  }
+
+  private get headerTemplate(): TemplateResult | typeof nothing {
+    // early return if item does't have parent collection
+    if (this.model?.collections?.length === 0) return nothing;
+
+    let collectionTitle = '';
+    let collectionIdentifier = '';
+
+    for (const collection of this.model?.collections || []) {
+      if (
+        !suppressedCollections[collection] &&
+        !collection.startsWith('fav-')
+      ) {
+        collectionTitle = this.collectionTitles?.get(collection) ?? collection;
+        collectionIdentifier = collection;
+        break;
+      }
+    }
+
+    // sometimes item does have collections but they are in suppressed or favorite list,
+    // let's not render that
+    if (!collectionIdentifier) return nothing;
+
+    return html`
+      <div id="list-line-header">
+        <a href="${this.baseNavigationUrl}/details/${collectionIdentifier}">
+          <img
+            src="${this.baseImageUrl}/services/img/${collectionIdentifier}"
+            alt=""
+          /><span>${collectionTitle}</span>
+        </a>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    const hoverPaneHeaderBGColor = css`var(--hoverPaneHeaderBGColor, #edf0ff)`;
+    const iaLinkColor = css`var(--ia-theme-link-color, #4b64ff)`;
+    const iaFontFamily = css`var(--ia-theme-base-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);`;
+
+    return css`
+      :host {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        overflow: visible;
+        color: inherit;
+        background: none;
+        visibility: hidden;
+        opacity: 0;
+        transform: translateY(8px);
+        transition:
+          opacity 0.1s ease-in,
+          transform 0.1s ease-in;
+        --image-width: auto;
+      }
+
+      :host(.visible) {
+        visibility: visible;
+      }
+
+      :host(.fade-in) {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          transition-duration: 0.001s !important; /* Imperceptibly fast */
+        }
+      }
+
+      #container {
+        width: max-content;
+        max-width: min(45vw, 600px);
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.8);
+        background: white;
+      }
+
+      @media screen and (max-width: 600px) {
+        #container {
+          max-width: 80vw;
+        }
+      }
+
+      /* main tile-list container */
+      #hover-tile-list {
+        padding: 10px;
+      }
+
+      /* header on hover panel to show collection icon and title */
+      #list-line-header {
+        background: ${hoverPaneHeaderBGColor};
+      }
+      #list-line-header a {
+        display: flex;
+        align-items: center;
+        column-gap: 5px;
+        height: 3.4rem;
+        padding: 0 10px;
+        border-radius: 4px 4px 0 0;
+        width: fit-content;
+        font-size: 1.4rem;
+        color: ${iaLinkColor};
+        font-family: ${iaFontFamily};
+        text-decoration: none;
+        width: auto;
+      }
+      #list-line-header a span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      #list-line-header a:hover {
+        text-decoration: underline;
+      }
+      #list-line-header a img {
+        width: 30px;
+        max-height: 30px;
+      }
+    `;
+  }
+}

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/tiles/image-block.ts

@@ -0,0 +1,162 @@
+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, TileOverlayType } 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: Boolean }) suppressBlurring = 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}
+          .suppressBlurring=${this.suppressBlurring}
+          style="--imgHeight: 100%; --imgWidth: 100%"
+        >
+        </item-image>
+        ${this.textOverlayTemplate} ${this.iconOverlayTemplate}
+      </div>
+    `;
+  }
+
+  private get baseClass(): ClassInfo {
+    return {
+      container: true,
+      list: this.isListTile && !this.isCompactTile,
+      'list-compact': this.isListTile && this.isCompactTile,
+      collection: this.model?.mediatype === 'collection', // fill the image in container
+      [this.viewSize]: true,
+      'search-image': this.model?.mediatype === 'search',
+    };
+  }
+
+  private get iconOverlayTemplate() {
+    // Only list tiles use the icon overlay
+    if (!this.isListTile) return nothing;
+
+    const { overlayType } = this;
+    if (!overlayType) return nothing;
+
+    return html`
+      <icon-overlay
+        class=${this.isCompactTile ? 'list-compact' : 'list-detail'}
+        .type=${this.overlayType}
+      >
+      </icon-overlay>
+    `;
+  }
+
+  private get textOverlayTemplate() {
+    // List tiles do not require the text overlay
+    if (this.isListTile) return nothing;
+
+    const { overlayType } = this;
+    if (!overlayType) return nothing;
+
+    return html` <text-overlay .type=${this.overlayType}></text-overlay> `;
+  }
+
+  private get overlayType(): TileOverlayType | undefined {
+    if (this.suppressBlurring) return undefined;
+
+    // Prioritize showing the login-required overlay if needed.
+    // Otherwise, if a content warning is required, show that overlay instead.
+    // If neither flag is present, no overlay should be shown.
+    if (this.model?.loginRequired && !this.loggedIn) {
+      return 'login-required';
+    }
+    if (this.model?.contentWarning) {
+      return 'content-warning';
+    }
+    return undefined;
+  }
+
+  static get styles(): CSSResultGroup {
+    const imageBlockBackgroundColor = css`var(--imageBlockBackgroundColor, #f1f1f4)`;
+
+    return css`
+      div {
+        display: flex;
+        justify-content: center;
+        position: relative;
+        background-color: ${imageBlockBackgroundColor};
+        border-radius: 4px;
+      }
+
+      .grid {
+        height: var(--imgBlockHeight, 16rem);
+        flex: 1;
+        position: initial;
+        padding: 5px;
+        border-radius: 4px 4px 0 0;
+      }
+
+      .collection.grid,
+      .grid.search-image {
+        display: block;
+      }
+
+      /** tile-list view */
+      .list {
+        border-radius: 0;
+        background-color: var(--imageBlockListBackgroundColor, #ebebee);
+        box-shadow: 1px 1px 2px rgb(0, 0, 0, 0.2);
+      }
+
+      .list.desktop {
+        width: 100px;
+        max-width: 100%;
+        height: 100px;
+        max-width: 100%;
+        display: inline-block;
+        position: relative;
+        text-align: center;
+      }
+
+      .list.mobile {
+        width: var(--image-width, 90px);
+        height: 90px;
+      }
+
+      /** tile-list-compact view */
+      .container.list-compact {
+        display: block;
+        text-align: center;
+      }
+
+      .list-compact.desktop {
+        width: 45px;
+        height: 45px;
+      }
+
+      .list-compact.mobile {
+        width: 30px;
+        height: 30px;
+      }
+    `;
+  }
+}

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/tiles/item-image.ts

@@ -0,0 +1,214 @@
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
+
+import type { TileModel } from '../models';
+
+import {
+  baseItemImageStyles,
+  waveformGradientStyles,
+} from '../styles/item-image-styles';
+import { searchIcon } from '../assets/img/icons/mediatype/search';
+
+@customElement('item-image')
+export class ItemImage extends LitElement {
+  /**
+   * Map to cache which identifiers have waveform-style thumbnails, so that
+   * they can have their waveform styling applied immediately, rather than
+   * waiting for the image content to load before applying it (which can
+   * cause noticeable flicker when such tiles refresh).
+   */
+  private static readonly waveformByIdentifier = new Map<string, boolean>();
+
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: Boolean }) isListTile = false;
+
+  @property({ type: Boolean }) isCompactTile = false;
+
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) suppressBlurring = false;
+
+  @state() private isWaveform = false;
+
+  @state() private isNotFound = false;
+
+  @query('img') private baseImage!: HTMLImageElement;
+
+  protected willUpdate(changed: PropertyValues): void {
+    if (changed.has('model')) {
+      // If this identifier is known to have a waveform image, then set isWaveform upfront
+      const identifier = this.model?.identifier;
+      this.isWaveform =
+        ItemImage.waveformByIdentifier.get(identifier as string) === true;
+    }
+  }
+
+  render() {
+    return html`
+      <div class=${classMap(this.itemBaseClass)}>${this.imageTemplate}</div>
+    `;
+  }
+
+  private get imageTemplate() {
+    if (this.model?.mediatype === 'search') {
+      return html`${searchIcon}`;
+    }
+
+    return html`
+      <img
+        class=${classMap(this.itemImageClass)}
+        src="${this.imageSrc}"
+        alt=""
+        @load=${this.onLoad}
+        @error=${this.onError}
+      />
+    `;
+  }
+
+  /**
+   * Helpers
+   */
+  private get imageSrc() {
+    if (this.isNotFound) return this.notFoundSrc;
+
+    // Use the correct image for web capture tiles, if possible
+    if (this.model?.captureDates && this.model.identifier) {
+      try {
+        const url = new URL(this.model.identifier);
+        const domain = encodeURIComponent(url.hostname);
+        return this.baseImageUrl
+          ? `https://web.archive.org/thumb/${domain}?generate=1`
+          : nothing;
+      } catch {
+        return this.notFoundSrc;
+      }
+    }
+
+    // Use the thumbnail URL specified in the model if it exists
+    if (this.model?.thumbnailUrl) return this.model.thumbnailUrl;
+
+    // Don't try to load invalid image URLs
+    return this.baseImageUrl && this.model?.identifier
+      ? `${this.baseImageUrl}/services/img/${this.model.identifier}`
+      : nothing;
+  }
+
+  private get notFoundSrc() {
+    return this.baseImageUrl
+      ? `${this.baseImageUrl}/images/notfound.png`
+      : nothing;
+  }
+
+  private get hashBasedGradient() {
+    if (!this.model?.identifier) {
+      return 'waveform-grad0';
+    }
+    const gradient = this.hashStrToInt(this.model.identifier) % 6; // returns 0-5
+    return `waveform-grad${gradient}`;
+  }
+
+  private hashStrToInt(str: string): number {
+    return str
+      .split('')
+      .reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0);
+  }
+
+  /**
+   * Classes
+   */
+  private get itemBaseClass(): ClassInfo {
+    return {
+      'drop-shadow': true,
+      'list-box': this.isListTile,
+      'search-image': this.model?.mediatype === 'search',
+      [this.hashBasedGradient]: this.isWaveform,
+    };
+  }
+
+  private get itemImageClass(): ClassInfo {
+    const hasSensitiveContent = !!(
+      this.model?.contentWarning || this.model?.loginRequired
+    );
+    const shouldBlur = hasSensitiveContent && !this.suppressBlurring;
+
+    return {
+      contain: !this.isCompactTile && !this.isWaveform,
+      cover: this.isCompactTile,
+      blur: shouldBlur,
+      waveform: this.isWaveform,
+      'account-image': this.isAccountImage, // for account tile image
+      'collection-image': this.model?.mediatype === 'collection', // for collection tile image
+    };
+  }
+
+  /**
+   * Helper function to determine if account tile image
+   */
+  private get isAccountImage() {
+    return (
+      this.model?.mediatype === 'account' &&
+      !this.isCompactTile &&
+      !this.isListTile
+    );
+  }
+
+  /**
+   * Event listener sets isWaveform true if image is waveform
+   */
+  private onLoad() {
+    if (
+      (this.model?.mediatype === 'audio' ||
+        this.model?.mediatype === 'etree') &&
+      this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4
+    ) {
+      this.isWaveform = true;
+      if (this.model?.identifier) {
+        ItemImage.waveformByIdentifier.set(this.model.identifier, true);
+      }
+    }
+  }
+
+  private onError() {
+    this.isNotFound = true;
+  }
+
+  /**
+   * CSS
+   */
+  static get styles(): CSSResultGroup {
+    return [
+      baseItemImageStyles,
+      waveformGradientStyles,
+      css`
+        img {
+          height: var(--imgHeight, 16rem);
+          width: var(--imgWidth, 16rem);
+        }
+
+        .search-image {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background: rgb(245, 245, 247);
+          border-radius: 4px;
+        }
+
+        svg {
+          height: 10rem;
+          width: 10rem;
+        }
+      `,
+    ];
+  }
+}

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/src/tiles/list/tile-list-compact-header.ts

@@ -0,0 +1,112 @@
+import { css, html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { msg } from '@lit/localize';
+import { BaseTileComponent } from '../base-tile-component';
+
+@customElement('tile-list-compact-header')
+export class TileListCompactHeader extends BaseTileComponent {
+  /*
+   * Reactive properties inherited from BaseTileComponent:
+   *  - model?: TileModel;
+   *  - tileActions: TileAction[] = [];
+   *  - currentWidth?: number;
+   *  - currentHeight?: number;
+   *  - baseNavigationUrl?: string;
+   *  - baseImageUrl?: string;
+   *  - collectionPagePath?: string;
+   *  - sortParam: SortParam | null = null;
+   *  - creatorFilter?: string;
+   *  - mobileBreakpoint?: number;
+   *  - loggedIn = false;
+   *  - suppressBlurring = false;
+   */
+
+  render() {
+    const hasActions = this.tileActions.length > 0;
+    const headerClasses = classMap({
+      mobile: this.classSize === 'mobile',
+      desktop: this.classSize === 'desktop',
+      'has-actions': hasActions,
+    });
+
+    return html`
+      <div id="list-line-header" class=${headerClasses}>
+        <div id="thumb"></div>
+        ${hasActions ? html`<div id="actions-header"></div>` : nothing}
+        <div id="title">${msg('Title')}</div>
+        <div id="creator">${msg('Creator')}</div>
+        <div id="date">
+          ${this.displayValueProvider.dateLabel || msg('Published')}
+        </div>
+        <div id="icon">${msg('Type')}</div>
+        <div id="views">${this.displayValueProvider.viewsLabel}</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;
+        padding-right: 8px;
+      }
+
+      #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 68px 35px;
+      }
+
+      #list-line-header.desktop {
+        grid-template-columns: 51px 3fr 2fr 95px 30px 115px;
+      }
+
+      /*
+       * When tile actions are present in the rows below, reserve a matching
+       * column here so the columns stay aligned with each row.
+       */
+      #list-line-header.mobile.has-actions {
+        grid-template-columns:
+          36px var(--tileActionColumnWidth, 90px) 3fr 2fr
+          68px 35px;
+      }
+
+      #list-line-header.desktop.has-actions {
+        grid-template-columns:
+          51px var(--tileActionColumnWidth, 100px) 3fr 2fr
+          95px 30px 115px;
+      }
+    `;
+  }
+}