@internetarchive/collection-browser 4.3.2-rc-webdev-8334.3 → 4.3.2-rc-webdev-8334.4

package/src/tiles/item-image.ts

@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, nothing } from 'lit';
+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';
 
@@ -12,6 +19,14 @@ 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;
@@ -30,6 +45,15 @@ 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>
@@ -149,6 +173,9 @@ 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-dispatcher.ts

@@ -176,7 +176,26 @@ export class TileDispatcher
     // Use the server-specified href if available.
     // Otherwise, construct a details page URL from the item identifier.
     if (this.model.href) {
-      return `${this.baseNavigationUrl}${this.model.href}`;
+      // Backstop for legacy Wayback Machine URLs where the target URL was
+      // erroneously percent-encoded by encodeURIComponent (the root cause in
+      // tile-display-value-provider is fixed, but old stored data may still
+      // carry encoded URLs). Decode only the target-URL segment after the
+      // /web/{timestamp}/ prefix — decoding the full href risks corrupting the
+      // Wayback prefix or intentional encoding elsewhere in the path.
+      // %3A%2F%2F (encoded "://") is an unambiguous indicator the entire URL
+      // was over-encoded; legitimate paths with %3A never appear next to %2F%2F.
+      const href = this.model.href.replace(
+        /(\/web\/\d+\/)(.+)/,
+        (_, prefix, target) => {
+          if (!/%3A%2F%2F/i.test(target)) return `${prefix}${target}`;
+          try {
+            return `${prefix}${decodeURIComponent(target)}`;
+          } catch {
+            return `${prefix}${target}`;
+          }
+        },
+      );
+      return `${this.baseNavigationUrl}${href}`;
     }
 
     return this.displayValueProvider.itemPageUrl(

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/test/tiles/tile-dispatcher.test.ts

@@ -110,6 +110,65 @@ describe('Tile Dispatcher', () => {
     window.open = oldWindowOpen;
   });
 
+  it('should use model href as-is when not percent-encoded', async () => {
+    const el = await fixture<TileDispatcher>(html`
+      <tile-dispatcher
+        .model=${{
+          identifier: 'foo',
+          href: 'https://web.archive.org/web/20180613065659/http://www.sankei.com/',
+        }}
+        .baseNavigationUrl=${''}
+      ></tile-dispatcher>
+    `);
+
+    const tileLink = el.shadowRoot?.querySelector(
+      'a[href]',
+    ) as HTMLAnchorElement;
+    expect(tileLink).to.exist;
+    expect(tileLink.getAttribute('href')).to.equal(
+      'https://web.archive.org/web/20180613065659/http://www.sankei.com/',
+    );
+  });
+
+  it('should decode percent-encoded model href before use', async () => {
+    const el = await fixture<TileDispatcher>(html`
+      <tile-dispatcher
+        .model=${{
+          identifier: 'foo',
+          href: 'https://web.archive.org/web/20180613065659/http%3A%2F%2Fwww.sankei.com%2F',
+        }}
+        .baseNavigationUrl=${''}
+      ></tile-dispatcher>
+    `);
+
+    const tileLink = el.shadowRoot?.querySelector(
+      'a[href]',
+    ) as HTMLAnchorElement;
+    expect(tileLink).to.exist;
+    expect(tileLink.getAttribute('href')).to.equal(
+      'https://web.archive.org/web/20180613065659/http://www.sankei.com/',
+    );
+  });
+
+  it('should not decode %3A in Wayback URL path when not an encoded scheme', async () => {
+    // %3A in the path (e.g. /path/%3Asomething) is not a sign of over-encoding;
+    // only %3A%2F%2F (encoded "://") is.
+    const href =
+      'https://web.archive.org/web/20180613065659/https://example.com/path/%3Asomething';
+    const el = await fixture<TileDispatcher>(html`
+      <tile-dispatcher
+        .model=${{ identifier: 'foo', href }}
+        .baseNavigationUrl=${''}
+      ></tile-dispatcher>
+    `);
+
+    const tileLink = el.shadowRoot?.querySelector(
+      'a[href]',
+    ) as HTMLAnchorElement;
+    expect(tileLink).to.exist;
+    expect(tileLink.getAttribute('href')).to.equal(href);
+  });
+
   it('should toggle model checked state when manage check clicked', async () => {
     const el = await fixture<TileDispatcher>(html`
       <tile-dispatcher