Task 4639 panoramax support

components/review/FeatureImage.vue

@@ -40,7 +40,7 @@
           rel="noopener noreferrer"
           class="feature-image__link"
         >
-          KartaView
+          Street Image
           <app-icon variant="open_in_new" />
         </a>
       </div>

pages/workspace/[id]/review.vue

@@ -129,7 +129,7 @@ status API and refreshes the list (assert() the request body and that the item l
 import { toast } from 'vue3-toastify';
 
 import { rapid3Manager, reviewManager, tdeiClient, workspacesClient } from '~/services/index';
-import { kartaViewImageUrl, convertKartaViewUrl } from '~/util/kartaview';
+import { streetImageUrl, resolveStreetImageUrl } from '~/util/street-images';
 import { parsePositiveIntegerQuery } from '~/util/route-query';
 import type ReviewMap from '~/components/review/Map.vue';
 import type AppImageViewer from '~/components/AppImageViewer.vue';
@@ -173,9 +173,9 @@ const changesetNotFound = computed(() => {
   );
 });
 const currentImageUrl = computed(() => {
-  const raw = kartaViewImageUrl(currentDiff.value?.new?.tags)
-    ?? kartaViewImageUrl(currentDiff.value?.old?.tags);
-  return raw ? convertKartaViewUrl(raw) : undefined;
+  const raw = streetImageUrl(currentDiff.value?.new?.tags)
+    ?? streetImageUrl(currentDiff.value?.old?.tags);
+  return raw ? resolveStreetImageUrl(raw) : undefined;
 });
 
 await refresh();

test/unit/util/street-images.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import { resolveStreetImageUrl, streetImageUrl } from '~/util/street-images';
+
+describe('streetImageUrl', () => {
+  it('extracts trimmed ext:street_images tag value', () => {
+    expect(streetImageUrl({ 'ext:street_images': '  https://panoramax.example.com/api/pictures/1/hd.jpg  ' }))
+      .toBe('https://panoramax.example.com/api/pictures/1/hd.jpg');
+  });
+
+  it('extracts trimmed ext:kartaview_url tag value', () => {
+    expect(streetImageUrl({ 'ext:kartaview_url': '  https://example.com/img.jpg  ' }))
+      .toBe('https://example.com/img.jpg');
+  });
+
+  it('returns undefined when tag is missing or empty', () => {
+    expect(streetImageUrl(undefined)).toBeUndefined();
+    expect(streetImageUrl({})).toBeUndefined();
+    expect(streetImageUrl({ 'ext:street_images': '   ' })).toBeUndefined();
+    expect(streetImageUrl({ 'ext:kartaview_url': '   ' })).toBeUndefined();
+  });
+});
+
+describe('resolveStreetImageUrl', () => {
+  it('returns self-hosted Panoramax URLs unchanged', () => {
+    const panoramaxUrl = 'https://panoramax-dev-faaadghgcfgwcchk.westus2-01.azurewebsites.net/api/pictures/018ce3ad-d8ed-4c50-846b-a255f6af64ae/hd.jpg';
+    expect(resolveStreetImageUrl(panoramaxUrl)).toBe(panoramaxUrl);
+  });
+
+  it('returns existing KartaView CDN URLs unchanged', () => {
+    const cdnUrl = 'https://cdn.kartaview.org/pr:sharp/aHR0cHM6Ly9zdG9yYWdlMTMub3BlbnN0cmVldGNhbS5vcmcvZmlsZXMvcGhvdG8vMS5qcGc';
+    expect(resolveStreetImageUrl(cdnUrl)).toBe(cdnUrl);
+  });
+
+  it('converts legacy OpenStreetCam and KartaView storage URLs to CDN-proxied base64 URLs', () => {
+    const legacyOscUrl = 'https://storage13.openstreetcam.org/files/photo/1.jpg';
+    expect(resolveStreetImageUrl(legacyOscUrl)).toBe(
+      'https://cdn.kartaview.org/pr:sharp/aHR0cHM6Ly9zdG9yYWdlMTMub3BlbnN0cmVldGNhbS5vcmcvZmlsZXMvcGhvdG8vMS5qcGc'
+    );
+
+    const legacyKvUrl = 'https://storage.kartaview.org/files/photo/2.jpg';
+    expect(resolveStreetImageUrl(legacyKvUrl)).toBe(
+      'https://cdn.kartaview.org/pr:sharp/aHR0cHM6Ly9zdG9yYWdlLmthcnRhdmlldy5vcmcvZmlsZXMvcGhvdG8vMi5qcGc'
+    );
+  });
+});

util/street-images.ts

@@ -0,0 +1,44 @@
+import type { OsmTags } from '~/types/osm';
+
+export const STREET_IMAGES_TAG = 'ext:street_images';
+export const KARTAVIEW_URL_TAG = 'ext:kartaview_url';
+
+const KARTAVIEW_CDN_PREFIX = 'https://cdn.kartaview.org/pr:sharp/';
+const LEGACY_KARTAVIEW_HOSTS = ['kartaview.org', 'openstreetcam.org'];
+
+function isLegacyKartaViewUrl(url: string): boolean {
+  try {
+    const { hostname } = new URL(url);
+    return LEGACY_KARTAVIEW_HOSTS.some(
+      domain => hostname === domain || hostname.endsWith(`.${domain}`)
+    );
+  }
+  catch {
+    return false;
+  }
+}
+
+/**
+ * Extracts a street-level image URL from an element's tags (`ext:street_images`
+ * or `ext:kartaview_url`) if present.
+ */
+export function streetImageUrl(tags: OsmTags | undefined): string | undefined {
+  const value = tags?.[STREET_IMAGES_TAG]?.trim() || tags?.[KARTAVIEW_URL_TAG]?.trim();
+  return value || undefined;
+}
+
+/**
+ * Resolves a street-level image URL for display. Returns standard image URLs
+ * (such as self-hosted Panoramax URLs or KartaView CDN URLs) unchanged, and
+ * converts legacy KartaView/OpenStreetCam storage URLs to the CDN-proxied form.
+ */
+export function resolveStreetImageUrl(url: string): string {
+  const cleanUrl = url.trim();
+  if (cleanUrl.startsWith(KARTAVIEW_CDN_PREFIX) || !isLegacyKartaViewUrl(cleanUrl)) {
+    return cleanUrl;
+  }
+  const bytes = new TextEncoder().encode(cleanUrl);
+  const binaryStr = Array.from(bytes, b => String.fromCharCode(b)).join('');
+  const base64 = btoa(binaryStr).replace(/=+$/, '');
+  return `${KARTAVIEW_CDN_PREFIX}${base64}`;
+}