fix(hlx6): load hlx6 media images via authenticated source API

blocks/media/media.js

@@ -2,7 +2,8 @@ import getPathDetails from '../shared/pathDetails.js';
 import { getNx, getNx2Api } from '../../scripts/utils.js';
 
 import '../edit/da-title/da-title.js';
-import { contentLogin } from '../shared/utils.js';
+import { contentLogin, livePreviewLogin } from '../shared/utils.js';
+import { getLivePreviewUrl } from '../shared/constants.js';
 
 const PDF_VIEWER_SRC = 'https://acrobatservices.adobe.com/view-sdk/viewer.js';
 const PDF_CLIENT_ID = 'cd73455ea6c04d0aac86270f9f5f830c';
@@ -65,17 +66,27 @@ async function loadPdfMedia(path, fileName) {
 
 export default async function init(el) {
   const details = getPathDetails();
-  const { name, fullpath, owner, repo } = details;
+  const { name, fullpath, owner, repo, path } = details;
   const ext = name.split('.').pop();
 
-  await contentLogin(owner, repo);
+  const { isHlx6 } = await getNx2Api();
+  const hlx6 = await isHlx6(owner, repo);
+
+  let mediaDetails = details;
+  if (hlx6 && ext !== 'pdf') {
+    const contentUrl = `${getLivePreviewUrl(owner, repo)}${path}`;
+    mediaDetails = { ...details, contentUrl };
+    await livePreviewLogin(owner, repo);
+  } else {
+    await contentLogin(owner, repo);
+  }
 
   const daTitle = document.createElement('da-title');
 
   const daMedia = ext === 'pdf' ? await getPdfMedia() : await getDefaultMedia();
 
   daTitle.details = details;
-  daMedia.details = details;
+  daMedia.details = mediaDetails;
   el.append(daTitle, daMedia);
 
   if (ext === 'pdf') loadPdfMedia(fullpath, name);

test/unit/blocks/media/media.test.js

@@ -0,0 +1,79 @@
+import { expect } from '@esm-bundle/chai';
+
+const { setNx } = await import('../../../../scripts/utils.js');
+setNx('/test/fixtures/nx', { hostname: 'example.com' });
+
+const { default: init } = await import('../../../../blocks/media/media.js');
+
+const HLX_ADMIN = 'https://admin.hlx.page';
+const CON_ORIGIN = 'https://content.da.live';
+const PREVIEW_DOMAIN = 'preview.da.live';
+
+function makeFetchMock({ hlx6Paths = [] } = {}) {
+  return (url) => {
+    if (url.startsWith(`${HLX_ADMIN}/ping/`)) {
+      const path = url.slice(`${HLX_ADMIN}/ping`.length);
+      const headers = new Headers();
+      if (hlx6Paths.some((p) => path.startsWith(p))) {
+        headers.set('x-api-upgrade-available', 'true');
+      }
+      return Promise.resolve(new Response('', { status: 200, headers }));
+    }
+    if (url.includes('.gimme_cookie')) {
+      return Promise.resolve(new Response('', { status: 200 }));
+    }
+    return Promise.resolve(new Response('', { status: 404 }));
+  };
+}
+
+describe('media init', () => {
+  let el;
+  let savedFetch;
+
+  beforeEach(() => {
+    savedFetch = window.fetch;
+    el = document.createElement('div');
+    document.body.appendChild(el);
+  });
+
+  afterEach(() => {
+    window.fetch = savedFetch;
+    el.remove();
+  });
+
+  it('rewrites contentUrl to preview.da.live for hlx6 image repos', async () => {
+    window.fetch = makeFetchMock({ hlx6Paths: ['/rofe/media-hlx6a'] });
+    history.pushState(null, '', '/media#/rofe/media-hlx6a/photo.png');
+
+    await init(el);
+
+    const daMedia = el.querySelector('da-media');
+    expect(daMedia).to.exist;
+    expect(daMedia.details.contentUrl).to.equal(`https://main--media-hlx6a--rofe.${PREVIEW_DOMAIN}/photo.png`);
+  });
+
+  it('keeps content.da.live contentUrl for non-hlx6 repos', async () => {
+    window.fetch = makeFetchMock({ hlx6Paths: [] });
+    history.pushState(null, '', '/media#/rofe/media-legacy1/photo.png');
+
+    await init(el);
+
+    const daMedia = el.querySelector('da-media');
+    expect(daMedia).to.exist;
+    expect(daMedia.details.contentUrl).to.include(CON_ORIGIN);
+    expect(daMedia.details.contentUrl).to.not.include(PREVIEW_DOMAIN);
+  });
+
+  it('uses different contentUrl object for hlx6 to avoid mutating pathDetails cache', async () => {
+    window.fetch = makeFetchMock({ hlx6Paths: ['/rofe/media-hlx6b'] });
+    history.pushState(null, '', '/media#/rofe/media-hlx6b/img.jpg');
+
+    await init(el);
+
+    const daMedia = el.querySelector('da-media');
+    const daTitle = el.querySelector('da-title');
+    expect(daMedia.details).to.not.equal(daTitle.details);
+    expect(daMedia.details.contentUrl).to.include(PREVIEW_DOMAIN);
+    expect(daTitle.details.contentUrl).to.include(CON_ORIGIN);
+  });
+});