@internetarchive/collection-browser 4.3.2-alpha-webdev7939.12 → 4.3.2-rc-webdev-8334.0

package/src/collection-browser.ts

@@ -421,7 +421,7 @@ export class CollectionBrowser
     const model = this.dataSource.getTileModelAt(index);
     /**
      * If we encounter a model we don't have yet and we're not in the middle of an
-     * automated scroll, schedule a fetch for the missing page and return undefined.
+     * automated scroll, fetch the page and just return undefined.
      * The datasource will be updated once the page is loaded and the cell will be rendered.
      *
      * We disable it during the automated scroll since we don't want to fetch pages for intervening cells the
@@ -429,59 +429,9 @@ export class CollectionBrowser
      */
     if (!model && !this.isScrollingToCell && this.dataSource.queryInitialized) {
       const pageNumber = Math.floor(index / this.pageSize) + 1;
-      this.scheduleDeferredPageFetch(pageNumber);
-    }
-    return model;
-  }
-
-  /**
-   * Debounce delay for page fetches initiated by new cells becoming visible.
-   * Tuned so quick scrolling through unloaded regions doesn't send rapid-fire
-   * search requests for every page we pass through, but to still feel responsive
-   * when the scroll ends.
-   */
-  private static readonly DEFERRED_FETCH_DELAY_MS = 150;
-
-  private deferredFetchTimer = 0;
-
-  /**
-   * Schedules a fetch for the given page, debounced to ensure we don't
-   * rapid-fire fetches while scrolling through pages quickly.
-   *
-   * If there's no pending fetch timer yet, it will fire a fetch immediately.
-   * Otherwise, it will reset any existing timer. In either case, a deferred
-   * fetch for the visible pages is scheduled after a brief delay to account
-   * for whatever pages we land on after scrolling.
-   */
-  private scheduleDeferredPageFetch(pageNumber: number): void {
-    if (!this.deferredFetchTimer) {
       this.dataSource.fetchPage(pageNumber);
-    } else {
-      window.clearTimeout(this.deferredFetchTimer);
-    }
-
-    this.deferredFetchTimer = window.setTimeout(() => {
-      this.deferredFetchTimer = 0;
-      this.fetchVisiblePages();
-    }, CollectionBrowser.DEFERRED_FETCH_DELAY_MS);
-  }
-
-  /**
-   * Fetch each currently-visible page whose first cell still has no
-   * loaded model.
-   */
-  private fetchVisiblePages(): void {
-    const visibleIndices = this.infiniteScroller?.getVisibleCellIndices() ?? [];
-    const visiblePages = new Set(
-      visibleIndices.map(i => Math.floor(i / this.pageSize) + 1),
-    );
-
-    for (const page of visiblePages) {
-      const firstCellOfPage = (page - 1) * this.pageSize;
-      if (!this.dataSource.getTileModelAt(firstCellOfPage)) {
-        this.dataSource.fetchPage(page);
-      }
     }
+    return model;
   }
 
   // this is the total number of tiles we expect if
@@ -916,7 +866,6 @@ export class CollectionBrowser
       class=${this.infiniteScrollerClasses}
       itemCount=${this.placeholderType ? 0 : nothing}
       ariaLandmarkLabel="Search results"
-      .estimatedCellHeight=${this.estimatedTileHeight}
       .cellProvider=${this}
       .placeholderCellTemplate=${this.placeholderCellTemplate}
       @scrollThresholdReached=${this.scrollThresholdReached}
@@ -938,25 +887,6 @@ export class CollectionBrowser
     });
   }
 
-  /**
-   * Best-effort hint of how tall a single rendered tile is, by display mode.
-   * The scroller uses this to better estimate the size its initial scroll
-   * spacer and buffer position before real cell heights are measured.
-   * Should roughly match the placeholder heights since the initial render
-   * of a new page generally shows placeholders only anyway.
-   */
-  private get estimatedTileHeight(): number {
-    switch (this.displayMode) {
-      case 'list-detail':
-        return 80;
-      case 'list-compact':
-        return 45;
-      case 'grid':
-      default:
-        return 225;
-    }
-  }
-
   /**
    * Template for the sort & filtering bar that appears atop the search results.
    */
@@ -1168,7 +1098,7 @@ export class CollectionBrowser
     if ((this.currentPage ?? 1) > 1) {
       this.goToPage(1);
     }
-    this.setCurrentPage(1);
+    this.currentPage = 1;
   }
 
   /**
@@ -1941,11 +1871,6 @@ export class CollectionBrowser
       window.removeEventListener('popstate', this.boundNavigationHandler);
     }
 
-    if (this.deferredFetchTimer) {
-      window.clearTimeout(this.deferredFetchTimer);
-      this.deferredFetchTimer = 0;
-    }
-
     this.leftColIntersectionObserver?.disconnect();
     this.facetsIntersectionObserver?.disconnect();
     window.removeEventListener('resize', this.updateLeftColumnHeight);
@@ -2198,45 +2123,27 @@ export class CollectionBrowser
   private visibleCellsChanged(
     e: CustomEvent<{ visibleCellIndices: number[] }>,
   ) {
-    this.updateVisiblePage(e.detail.visibleCellIndices);
-  }
-
-  /**
-   * Recomputes the current page from the given set of visible cell indices
-   * and emits `visiblePageChanged` if the page actually changed.
-   */
-  private updateVisiblePage(visibleCellIndices: number[]): void {
     if (this.isScrollingToCell) return;
+    const { visibleCellIndices } = e.detail;
     if (visibleCellIndices.length === 0) return;
 
-    // The indices aren't necessarily sorted, so sort them here to ensure our
-    // calculations below find the right cell/page.
-    const sorted = [...visibleCellIndices].sort((a, b) => a - b);
-
     // For page determination, do not count more than a single page of visible cells,
     // since otherwise patrons using very tall screens will be treated as one page
     // further than they actually are.
     const lastIndexWithinCurrentPage =
-      Math.min(this.pageSize, sorted.length) - 1;
-    const lastVisibleCellIndex = sorted[lastIndexWithinCurrentPage];
+      Math.min(this.pageSize, visibleCellIndices.length) - 1;
+    const lastVisibleCellIndex = visibleCellIndices[lastIndexWithinCurrentPage];
     const lastVisibleCellPage =
       Math.floor(lastVisibleCellIndex / this.pageSize) + 1;
-
-    this.setCurrentPage(lastVisibleCellPage);
-  }
-
-  /**
-   * Sets the current page number and emits a `visiblePageChanged`
-   * event if the new page differs from the previous one.
-   */
-  private setCurrentPage(pageNumber: number): void {
-    if (this.currentPage === pageNumber) return;
-    this.currentPage = pageNumber;
-    this.dispatchEvent(
-      new CustomEvent('visiblePageChanged', {
-        detail: { pageNumber },
-      }),
-    );
+    if (this.currentPage !== lastVisibleCellPage) {
+      this.currentPage = lastVisibleCellPage;
+    }
+    const event = new CustomEvent('visiblePageChanged', {
+      detail: {
+        pageNumber: lastVisibleCellPage,
+      },
+    });
+    this.dispatchEvent(event);
   }
 
   // we only want to scroll on the very first query change
@@ -2336,10 +2243,10 @@ export class CollectionBrowser
     this.selectedCreatorFilter = restorationState.selectedCreatorFilter ?? null;
     this.selectedFacets = restorationState.selectedFacets;
     if (!this.suppressURLQuery) this.baseQuery = restorationState.baseQuery;
-    this.setCurrentPage(restorationState.currentPage ?? 1);
+    this.currentPage = restorationState.currentPage ?? 1;
     this.minSelectedDate = restorationState.minSelectedDate;
     this.maxSelectedDate = restorationState.maxSelectedDate;
-    if (this.currentPage && this.currentPage > 1) {
+    if (this.currentPage > 1) {
       this.goToPage(this.currentPage);
     }
   }
@@ -2416,43 +2323,25 @@ export class CollectionBrowser
     });
   }
 
-  private async scrollToPage(pageNumber: number): Promise<void> {
-    const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
-
-    // Wait for the infinite scroller be rendered before proceeding
-    let waitAttempts = 0;
-    while (!this.infiniteScroller && waitAttempts < 20) {
-      await this.updateComplete;
-      waitAttempts++;
-    }
-    if (!this.infiniteScroller) return;
-
-    // The scroller have its default `itemCount=0`, so propagate our estimated
-    // tile count before jumping to the desired page.
-    if (this.infiniteScroller.itemCount < this.estimatedTileCount) {
-      this.infiniteScroller.itemCount = this.estimatedTileCount;
-      await this.updateComplete;
-    }
-
-    // Without this setTimeout(0), Safari just pauses until the `fetchPage`
-    // is complete then scrolls to the cell.
-    await new Promise<void>(resolve => {
-      setTimeout(resolve, 0);
+  private scrollToPage(pageNumber: number): Promise<void> {
+    return new Promise(resolve => {
+      const cellIndexToScrollTo = this.pageSize * (pageNumber - 1);
+      // without this setTimeout, Safari just pauses until the `fetchPage` is complete
+      // then scrolls to the cell
+      setTimeout(() => {
+        this.isScrollingToCell = true;
+        this.infiniteScroller?.scrollToCell(cellIndexToScrollTo, true);
+        // This timeout is to give the scroll animation time to finish
+        // then updating the infinite scroller once we're done scrolling
+        // There's no scroll animation completion callback so we're
+        // giving it 0.5s to finish.
+        setTimeout(() => {
+          this.isScrollingToCell = false;
+          this.infiniteScroller?.refreshAllVisibleCells();
+          resolve();
+        }, 500);
+      }, 0);
     });
-
-    this.isScrollingToCell = true;
-    const scrolled = await this.infiniteScroller.scrollToCell(
-      cellIndexToScrollTo,
-      true,
-    );
-    this.isScrollingToCell = false;
-    this.infiniteScroller.refreshAllVisibleCells();
-
-    // After we finish scrolling, recompute the visible page from the new state
-    // so that it doesn't fall out of sync.
-    if (scrolled) {
-      this.updateVisiblePage(this.infiniteScroller.getVisibleCellIndices());
-    }
   }
 
   /**

package/src/tiles/item-image.ts

@@ -1,11 +1,4 @@
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  nothing,
-  PropertyValues,
-} from 'lit';
+import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 
@@ -19,14 +12,6 @@ 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;
@@ -45,15 +30,6 @@ export class ItemImage extends LitElement {
 
   @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>
@@ -173,9 +149,6 @@ export class ItemImage extends LitElement {
       this.baseImage.naturalWidth / this.baseImage.naturalHeight === 4
     ) {
       this.isWaveform = true;
-      if (this.model?.identifier) {
-        ItemImage.waveformByIdentifier.set(this.model.identifier, true);
-      }
     }
   }
 

package/src/tiles/tile-display-value-provider.ts

@@ -124,9 +124,8 @@ export class TileDisplayValueProvider {
       .toISOString()
       .replace(/[TZ:-]/g, '')
       .replace(/\..*/, '');
-    const captureHref = `https://web.archive.org/web/${captureDateStr}/${encodeURIComponent(
-      url,
-    )}`;
+    // url must not be percent-encoded — Wayback Machine matches on the raw URL
+    const captureHref = `https://web.archive.org/web/${captureDateStr}/${url}`;
     const captureText = formatDate(date, 'long');
 
     return html` <a href=${captureHref}> ${captureText} </a> `;

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

@@ -453,7 +453,7 @@ describe('Item Tile', () => {
     const firstDateLink = captureDatesUl?.children[0]?.querySelector('a[href]');
     expect(firstDateLink, 'first date link').to.exist;
     expect(firstDateLink?.getAttribute('href')).to.equal(
-      'https://web.archive.org/web/20100102123456/https%3A%2F%2Fexample.com%2F',
+      'https://web.archive.org/web/20100102123456/https://example.com/',
     );
     expect(firstDateLink?.textContent?.trim()).to.equal('Jan 02, 2010');
 
@@ -461,7 +461,7 @@ describe('Item Tile', () => {
       captureDatesUl?.children[1]?.querySelector('a[href]');
     expect(secondDateLink, 'second date link').to.exist;
     expect(secondDateLink?.getAttribute('href')).to.equal(
-      'https://web.archive.org/web/20110203124321/https%3A%2F%2Fexample.com%2F',
+      'https://web.archive.org/web/20110203124321/https://example.com/',
     );
     expect(secondDateLink?.textContent?.trim()).to.equal('Feb 03, 2011');
   });

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

@@ -509,7 +509,7 @@ describe('List Tile', () => {
     const firstDateLink = captureDatesUl?.children[0]?.querySelector('a[href]');
     expect(firstDateLink, 'first date link').to.exist;
     expect(firstDateLink?.getAttribute('href')).to.equal(
-      'https://web.archive.org/web/20100102123456/https%3A%2F%2Fexample.com%2F',
+      'https://web.archive.org/web/20100102123456/https://example.com/',
     );
     expect(firstDateLink?.textContent?.trim()).to.equal('Jan 02, 2010');
 
@@ -517,7 +517,7 @@ describe('List Tile', () => {
       captureDatesUl?.children[1]?.querySelector('a[href]');
     expect(secondDateLink, 'second date link').to.exist;
     expect(secondDateLink?.getAttribute('href')).to.equal(
-      'https://web.archive.org/web/20110203124321/https%3A%2F%2Fexample.com%2F',
+      'https://web.archive.org/web/20110203124321/https://example.com/',
     );
     expect(secondDateLink?.textContent?.trim()).to.equal('Feb 03, 2011');
   });

package/tsconfig.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "noEmitOnError": true,
-    "lib": [
-      "ESNext",
-      "dom",
-      "dom.iterable"
-    ],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "useDefineForClassFields": false,
-  },
-  "include": ["src", "test", "index.ts", "types"],
-}
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "noEmitOnError": true,
+    "lib": [
+      "ESNext",
+      "dom",
+      "dom.iterable"
+    ],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "useDefineForClassFields": false,
+  },
+  "include": ["src", "test", "index.ts", "types"],
+}

package/web-dev-server.config.mjs

@@ -1,30 +1,30 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  nodeResolve: true,
-  open: '/',
-  watch: !hmr,
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  /** Confgure bare import resolve plugin */
-  // nodeResolve: {
-  //   exportConditions: ['browser', 'development']
-  // },
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  http2: true,
-  sslCert: './local.archive.org.cert',
-  sslKey: './local.archive.org.key',
-});
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  nodeResolve: true,
+  open: '/',
+  watch: !hmr,
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  /** Confgure bare import resolve plugin */
+  // nodeResolve: {
+  //   exportConditions: ['browser', 'development']
+  // },
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  http2: true,
+  sslCert: './local.archive.org.cert',
+  sslKey: './local.archive.org.key',
+});

package/web-test-runner.config.mjs

@@ -1,52 +1,52 @@
-import rollupImage from '@rollup/plugin-image';
-import { rollupAdapter } from '@web/dev-server-rollup';
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  mimeTypes: {
-    '**/*.scss': 'js',
-    '**/*.css': 'js',
-    '**/*.svg': 'js',
-    '**/*.json': 'js',
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  plugins: [rollupAdapter(rollupImage())],
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});
+import rollupImage from '@rollup/plugin-image';
+import { rollupAdapter } from '@web/dev-server-rollup';
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  mimeTypes: {
+    '**/*.scss': 'js',
+    '**/*.css': 'js',
+    '**/*.svg': 'js',
+    '**/*.json': 'js',
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  plugins: [rollupAdapter(rollupImage())],
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});