@internetarchive/collection-browser 3.2.0 → 3.3.1-alpha1

package/src/data-source/collection-browser-query-state.ts

@@ -1,65 +1,65 @@
-import type {
-  CollectionExtraInfo,
-  PageElementName,
-  SearchServiceInterface,
-  SearchType,
-  SortDirection,
-  SortParam,
-} from '@internetarchive/search-service';
-import type {
-  FacetLoadStrategy,
-  SelectedFacets,
-  SortField,
-  TvClipFilterType,
-} from '../models';
-import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
-
-/**
- * Properties of collection browser that affect the overall search query
- */
-export interface CollectionBrowserQueryState {
-  baseQuery?: string;
-  identifiers?: string[];
-  withinCollection?: string;
-  withinProfile?: string;
-  profileElement?: PageElementName;
-  searchType: SearchType;
-  selectedFacets?: SelectedFacets;
-  internalFilters?: SelectedFacets;
-  minSelectedDate?: string;
-  maxSelectedDate?: string;
-  selectedTitleFilter: string | null;
-  selectedCreatorFilter: string | null;
-  tvClipFilter?: TvClipFilterType;
-  selectedSort?: SortField;
-  sortDirection: SortDirection | null;
-}
-
-/**
- * Interface representing search-related state and operations required by the
- * data source on its host component.
- */
-export interface CollectionBrowserSearchInterface
-  extends CollectionBrowserQueryState {
-  searchService?: SearchServiceInterface;
-  isTVCollection: boolean;
-  readonly sortParam: SortParam | null;
-  readonly defaultSortField: SortField | null;
-  readonly facetLoadStrategy: FacetLoadStrategy;
-  readonly initialPageNumber: number;
-  readonly maxPagesToManage: number;
-  readonly currentVisiblePageNumbers: number[];
-  readonly clearResultsOnEmptyQuery?: boolean;
-  readonly dataSource?: CollectionBrowserDataSourceInterface;
-
-  getSessionId(): Promise<string>;
-  setSearchResultsLoading(loading: boolean): void;
-  setFacetsLoading(loading: boolean): void;
-  setTotalResultCount(count: number): void;
-  setTileCount(count: number): void;
-  applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo): void;
-  emitEmptyResults(): void;
-  emitSearchError(): void;
-  emitQueryStateChanged(): void;
-  refreshVisibleResults(): void;
-}
+import type {
+  CollectionExtraInfo,
+  PageElementName,
+  SearchServiceInterface,
+  SearchType,
+  SortDirection,
+  SortParam,
+} from '@internetarchive/search-service';
+import type {
+  FacetLoadStrategy,
+  SelectedFacets,
+  SortField,
+  TvClipFilterType,
+} from '../models';
+import type { CollectionBrowserDataSourceInterface } from './collection-browser-data-source-interface';
+
+/**
+ * Properties of collection browser that affect the overall search query
+ */
+export interface CollectionBrowserQueryState {
+  baseQuery?: string;
+  identifiers?: string[];
+  withinCollection?: string;
+  withinProfile?: string;
+  profileElement?: PageElementName;
+  searchType: SearchType;
+  selectedFacets?: SelectedFacets;
+  internalFilters?: SelectedFacets;
+  minSelectedDate?: string;
+  maxSelectedDate?: string;
+  selectedTitleFilter: string | null;
+  selectedCreatorFilter: string | null;
+  tvClipFilter?: TvClipFilterType;
+  selectedSort?: SortField;
+  sortDirection: SortDirection | null;
+}
+
+/**
+ * Interface representing search-related state and operations required by the
+ * data source on its host component.
+ */
+export interface CollectionBrowserSearchInterface
+  extends CollectionBrowserQueryState {
+  searchService?: SearchServiceInterface;
+  isTVCollection: boolean;
+  readonly sortParam: SortParam | null;
+  readonly defaultSortField: SortField | null;
+  readonly facetLoadStrategy: FacetLoadStrategy;
+  readonly initialPageNumber: number;
+  readonly maxPagesToManage: number;
+  readonly currentVisiblePageNumbers: number[];
+  readonly clearResultsOnEmptyQuery?: boolean;
+  readonly dataSource?: CollectionBrowserDataSourceInterface;
+
+  getSessionId(): Promise<string>;
+  setSearchResultsLoading(loading: boolean): void;
+  setFacetsLoading(loading: boolean): void;
+  setTotalResultCount(count: number): void;
+  setTileCount(count: number): void;
+  applyDefaultCollectionSort(collectionInfo?: CollectionExtraInfo): void;
+  emitEmptyResults(): void;
+  emitSearchError(): void;
+  emitQueryStateChanged(): void;
+  refreshVisibleResults(): void;
+}

package/src/data-source/models.ts

@@ -1,43 +1,43 @@
-import type {
-  PageElementName,
-  PageType,
-} from '@internetarchive/search-service';
-
-/**
- * A Map from collection identifiers to their corresponding collection titles.
- */
-export type CollectionTitles = Map<string, string>;
-
-/**
- * A Map from channel names to their corresponding, more human-readable network name.
- */
-export type TVChannelAliases = Map<string, string>;
-
-/**
- * The subset of search service params that uniquely specify the type of results
- * that are sought by an instance of collection browser.
- */
-export type PageSpecifierParams = {
-  /**
-   * What high-level type of page is being fetched for (search results, collection, or profile)
-   */
-  pageType: PageType;
-  /**
-   * The target identifier for collection or profile pages (e.g., "prelinger", "@brewster", ...)
-   */
-  pageTarget?: string;
-  /**
-   * Which specific elements of a profile page to fetch. Corresponds to individual tab data
-   * (e.g., "uploads", "reviews", ...)
-   */
-  pageElements?: PageElementName[];
-};
-
-/**
- * List of profile page elements that do not currently allow faceting
- */
-export const FACETLESS_PAGE_ELEMENTS: PageElementName[] = [
-  'forum_posts',
-  'lending',
-  'web_archives',
-];
+import type {
+  PageElementName,
+  PageType,
+} from '@internetarchive/search-service';
+
+/**
+ * A Map from collection identifiers to their corresponding collection titles.
+ */
+export type CollectionTitles = Map<string, string>;
+
+/**
+ * A Map from channel names to their corresponding, more human-readable network name.
+ */
+export type TVChannelAliases = Map<string, string>;
+
+/**
+ * The subset of search service params that uniquely specify the type of results
+ * that are sought by an instance of collection browser.
+ */
+export type PageSpecifierParams = {
+  /**
+   * What high-level type of page is being fetched for (search results, collection, or profile)
+   */
+  pageType: PageType;
+  /**
+   * The target identifier for collection or profile pages (e.g., "prelinger", "@brewster", ...)
+   */
+  pageTarget?: string;
+  /**
+   * Which specific elements of a profile page to fetch. Corresponds to individual tab data
+   * (e.g., "uploads", "reviews", ...)
+   */
+  pageElements?: PageElementName[];
+};
+
+/**
+ * List of profile page elements that do not currently allow faceting
+ */
+export const FACETLESS_PAGE_ELEMENTS: PageElementName[] = [
+  'forum_posts',
+  'lending',
+  'web_archives',
+];

package/src/tiles/base-tile-component.ts

@@ -1,53 +1,65 @@
-import { LitElement, PropertyValues } from 'lit';
-import { property } from 'lit/decorators.js';
-import type { SortParam } from '@internetarchive/search-service';
-import { TileDisplayValueProvider } from './tile-display-value-provider';
-import type { TileModel } from '../models';
-
-export abstract class BaseTileComponent extends LitElement {
-  @property({ type: Object }) model?: TileModel;
-
-  @property({ type: Number }) currentWidth?: number;
-
-  @property({ type: Number }) currentHeight?: number;
-
-  @property({ type: String }) baseNavigationUrl?: string;
-
-  @property({ type: String }) baseImageUrl?: string;
-
-  @property({ type: String }) collectionPagePath?: string;
-
-  @property({ type: Object }) sortParam: SortParam | null = null;
-
-  @property({ type: Object }) defaultSortParam: SortParam | null = null;
-
-  @property({ type: String }) creatorFilter?: string;
-
-  @property({ type: Number }) mobileBreakpoint?: number;
-
-  @property({ type: Boolean }) loggedIn = false;
-
-  @property({ type: Boolean }) suppressBlurring = false;
-
-  protected displayValueProvider = new TileDisplayValueProvider();
-
-  protected willUpdate(changed: PropertyValues<this>) {
-    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
-    if (
-      changed.has('model') ||
-      changed.has('baseNavigationUrl') ||
-      changed.has('collectionPagePath') ||
-      changed.has('sortParam') ||
-      changed.has('defaultSortParam') ||
-      changed.has('creatorFilter')
-    ) {
-      this.displayValueProvider = new TileDisplayValueProvider({
-        model: this.model,
-        baseNavigationUrl: this.baseNavigationUrl,
-        collectionPagePath: this.collectionPagePath,
-        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
-        creatorFilter: this.creatorFilter,
-      });
-    }
-  }
-}
+import { LitElement, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import type { SortParam } from '@internetarchive/search-service';
+import { TileDisplayValueProvider } from './tile-display-value-provider';
+import type { TileModel } from '../models';
+import { DateFormat, formatDate } from '../utils/format-date';
+
+export abstract class BaseTileComponent extends LitElement {
+  @property({ type: Object }) model?: TileModel;
+
+  @property({ type: Number }) currentWidth?: number;
+
+  @property({ type: Number }) currentHeight?: number;
+
+  @property({ type: String }) baseNavigationUrl?: string;
+
+  @property({ type: String }) baseImageUrl?: string;
+
+  @property({ type: String }) collectionPagePath?: string;
+
+  @property({ type: Object }) sortParam: SortParam | null = null;
+
+  @property({ type: Object }) defaultSortParam: SortParam | null = null;
+
+  @property({ type: String }) creatorFilter?: string;
+
+  @property({ type: Number }) mobileBreakpoint?: number;
+
+  @property({ type: Boolean }) loggedIn = false;
+
+  @property({ type: Boolean }) suppressBlurring = false;
+
+  @property({ type: Boolean }) useLocalTime = false;
+
+  protected displayValueProvider = new TileDisplayValueProvider();
+
+  protected willUpdate(changed: PropertyValues<this>) {
+    // Ensure the TileDisplayValueProvider stays up-to-date as properties change
+    if (
+      changed.has('model') ||
+      changed.has('baseNavigationUrl') ||
+      changed.has('collectionPagePath') ||
+      changed.has('sortParam') ||
+      changed.has('defaultSortParam') ||
+      changed.has('creatorFilter')
+    ) {
+      this.displayValueProvider = new TileDisplayValueProvider({
+        model: this.model,
+        baseNavigationUrl: this.baseNavigationUrl,
+        collectionPagePath: this.collectionPagePath,
+        sortParam: this.sortParam ?? this.defaultSortParam ?? undefined,
+        creatorFilter: this.creatorFilter,
+      });
+    }
+  }
+
+  /**
+   * The formatted date string for given date and format type, taking into
+   * account whether this tile component should be using local time or UTC.
+   */
+  protected getFormattedDate(date?: Date, format?: DateFormat): string {
+    const { useLocalTime } = this;
+    return formatDate(date, format, { useLocalTime });
+  }
+}

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

@@ -1,112 +1,113 @@
-import { css, html, nothing, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
-import { BaseTileComponent } from '../base-tile-component';
-
-import { baseTileStyles } from './styles/tile-grid-shared-styles';
-import '../image-block';
-import './tile-stats';
-
-@customElement('account-tile')
-export class AccountTile extends BaseTileComponent {
-  /*
-   * Reactive properties inherited from BaseTileComponent:
-   *  - model?: TileModel;
-   *  - currentWidth?: number;
-   *  - currentHeight?: number;
-   *  - baseNavigationUrl?: string;
-   *  - baseImageUrl?: string;
-   *  - collectionPagePath?: string;
-   *  - sortParam: SortParam | null = null;
-   *  - creatorFilter?: string;
-   *  - mobileBreakpoint?: number;
-   *  - loggedIn = false;
-   *  - suppressBlurring = false;
-   */
-
-  @property({ type: Boolean }) showInfoButton = false;
-
-  render() {
-    return html`
-      <div class="container">
-        ${this.infoButtonTemplate}
-        <div class="tile-details">
-          <div class="item-info">
-            ${this.getAvatarTemplate} ${this.getTitleTemplate}
-            ${this.getArchivistTemplate}
-          </div>
-          ${this.getTileStatsTemplate}
-        </div>
-      </div>
-    `;
-  }
-
-  private get getAvatarTemplate(): TemplateResult {
-    return html`
-      <image-block
-        .model=${this.model}
-        .baseImageUrl=${this.baseImageUrl}
-        .viewSize=${'grid'}
-        .suppressBlurring=${this.suppressBlurring}
-      >
-      </image-block>
-    `;
-  }
-
-  private get getTitleTemplate() {
-    return html`<div id="title">
-      <h4 class="truncated">${this.model?.identifier}</h4>
-    </div>`;
-  }
-
-  private get getArchivistTemplate() {
-    return html`<div class="archivist-since">
-      <span>${this.displayValueProvider.accountLabel}</span>
-    </div>`;
-  }
-
-  private get getTileStatsTemplate() {
-    return html`<tile-stats
-      .mediatype=${this.model?.mediatype}
-      .itemCount=${this.model?.itemCount}
-      .favCount=${this.model?.favCount}
-      .commentCount=${this.model?.commentCount}
-    >
-    </tile-stats>`;
-  }
-
-  private get infoButtonTemplate(): TemplateResult | typeof nothing {
-    // &#9432; is an information icon
-    return this.showInfoButton
-      ? html`<button class="info-button" @click=${this.infoButtonPressed}>
-          &#9432;
-          <span class="sr-only">${msg('More info')}</span>
-        </button>`
-      : nothing;
-  }
-
-  private infoButtonPressed(e: PointerEvent) {
-    e.preventDefault();
-    const event = new CustomEvent<{ x: number; y: number }>(
-      'infoButtonPressed',
-      { detail: { x: e.clientX, y: e.clientY } },
-    );
-    this.dispatchEvent(event);
-  }
-
-  /**
-   * CSS
-   */
-  static get styles() {
-    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;
-
-    return [
-      baseTileStyles,
-      css`
-        .container {
-          border: 1px solid ${tileBorderColor};
-        }
-      `,
-    ];
-  }
-}
+import { css, html, nothing, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { msg } from '@lit/localize';
+import { BaseTileComponent } from '../base-tile-component';
+
+import { baseTileStyles } from './styles/tile-grid-shared-styles';
+import '../image-block';
+import './tile-stats';
+
+@customElement('account-tile')
+export class AccountTile extends BaseTileComponent {
+  /*
+   * Reactive properties inherited from BaseTileComponent:
+   *  - model?: TileModel;
+   *  - currentWidth?: number;
+   *  - currentHeight?: number;
+   *  - baseNavigationUrl?: string;
+   *  - baseImageUrl?: string;
+   *  - collectionPagePath?: string;
+   *  - sortParam: SortParam | null = null;
+   *  - creatorFilter?: string;
+   *  - mobileBreakpoint?: number;
+   *  - loggedIn = false;
+   *  - suppressBlurring = false;
+   *  - useLocalTime = false;
+   */
+
+  @property({ type: Boolean }) showInfoButton = false;
+
+  render() {
+    return html`
+      <div class="container">
+        ${this.infoButtonTemplate}
+        <div class="tile-details">
+          <div class="item-info">
+            ${this.getAvatarTemplate} ${this.getTitleTemplate}
+            ${this.getArchivistTemplate}
+          </div>
+          ${this.getTileStatsTemplate}
+        </div>
+      </div>
+    `;
+  }
+
+  private get getAvatarTemplate(): TemplateResult {
+    return html`
+      <image-block
+        .model=${this.model}
+        .baseImageUrl=${this.baseImageUrl}
+        .viewSize=${'grid'}
+        .suppressBlurring=${this.suppressBlurring}
+      >
+      </image-block>
+    `;
+  }
+
+  private get getTitleTemplate() {
+    return html`<div id="title">
+      <h4 class="truncated">${this.model?.identifier}</h4>
+    </div>`;
+  }
+
+  private get getArchivistTemplate() {
+    return html`<div class="archivist-since">
+      <span>${this.displayValueProvider.accountLabel}</span>
+    </div>`;
+  }
+
+  private get getTileStatsTemplate() {
+    return html`<tile-stats
+      .mediatype=${this.model?.mediatype}
+      .itemCount=${this.model?.itemCount}
+      .favCount=${this.model?.favCount}
+      .commentCount=${this.model?.commentCount}
+    >
+    </tile-stats>`;
+  }
+
+  private get infoButtonTemplate(): TemplateResult | typeof nothing {
+    // &#9432; is an information icon
+    return this.showInfoButton
+      ? html`<button class="info-button" @click=${this.infoButtonPressed}>
+          &#9432;
+          <span class="sr-only">${msg('More info')}</span>
+        </button>`
+      : nothing;
+  }
+
+  private infoButtonPressed(e: PointerEvent) {
+    e.preventDefault();
+    const event = new CustomEvent<{ x: number; y: number }>(
+      'infoButtonPressed',
+      { detail: { x: e.clientX, y: e.clientY } },
+    );
+    this.dispatchEvent(event);
+  }
+
+  /**
+   * CSS
+   */
+  static get styles() {
+    const tileBorderColor = css`var(--tileBorderColor, #dddddd)`;
+
+    return [
+      baseTileStyles,
+      css`
+        .container {
+          border: 1px solid ${tileBorderColor};
+        }
+      `,
+    ];
+  }
+}