@osm-editor-kit/street-imagery-react 0.1.0-alpha.12 → 0.1.0-alpha.14

package/dist/panels/MapillaryPanel.d.ts

@@ -1,4 +1,4 @@
-import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
 import 'mapillary-js/dist/mapillary.css';
 import type { StreetImageryPhotoSelection } from '../types';
 import { type MapillaryLookAt, type MapillaryViewerOutline } from './mapillaryLookAt';
@@ -9,6 +9,11 @@ type MapillaryPanelProps = {
     onEaseMapToPoint: (lng: number, lat: number) => void;
     /** Full photo data for each image the viewer shows (incl. native prev/next navigation). */
     onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /**
+     * The view inside the shown photo, after it has stopped moving and when the photo changes. Pass
+     * it to `providerExternalLink` for a link that opens the same view.
+     */
+    onViewerView?: (view: PhotoView) => void;
     /** 360° photos: turn the view to this map bearing when `photo` opens (e.g. a suggested view). */
     lookAtBearing?: number | null;
     /**
@@ -25,5 +30,5 @@ type MapillaryPanelProps = {
      */
     hideAttribution?: boolean;
 };
-export declare const MapillaryPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, lookAtBearing, lookAt, outlines, hideAttribution, }: MapillaryPanelProps) => import("react").JSX.Element;
+export declare const MapillaryPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, lookAtBearing, lookAt, outlines, hideAttribution, }: MapillaryPanelProps) => import("react").JSX.Element;
 export {};

package/dist/panels/PanoramaxPanel.d.ts

@@ -1,4 +1,4 @@
-import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
 import 'mapillary-js/dist/mapillary.css';
 import type { StreetImageryPhotoSelection } from '../types';
 export type PanoramaxPanelProps = {
@@ -8,6 +8,11 @@ export type PanoramaxPanelProps = {
     onEaseMapToPoint: (lng: number, lat: number) => void;
     /** The shown picture with creator, licence, local capture time and camera. */
     onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /**
+     * The view inside the shown photo, after it has stopped moving and when the photo changes. Pass
+     * it to `providerExternalLink` for a link that opens the same view.
+     */
+    onViewerView?: (view: PhotoView) => void;
     /**
      * Hide the line with creator and licence. The host must then show both itself, from
      * `onViewerPhoto`.
@@ -18,4 +23,4 @@ export type PanoramaxPanelProps = {
  * Panoramax pictures in the Mapillary viewer (`mapillary-js` with a `PanoramaxDataProvider`): no
  * second viewer engine to load, and the same handling as Mapillary photos.
  */
-export declare const PanoramaxPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, hideAttribution, }: PanoramaxPanelProps) => import("react").JSX.Element;
+export declare const PanoramaxPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, hideAttribution, }: PanoramaxPanelProps) => import("react").JSX.Element;

package/dist/panels/PanoramaxWebViewerPanel.d.ts

@@ -1,5 +1,5 @@
 import '@panoramax/web-viewer';
-import type { NormalizedPhoto } from '@osm-editor-kit/street-imagery';
+import type { NormalizedPhoto, PhotoView } from '@osm-editor-kit/street-imagery';
 import type { StreetImageryPhotoSelection } from '../types';
 export type PanoramaxWebViewerPanelProps = {
     photo: NormalizedPhoto;
@@ -8,6 +8,11 @@ export type PanoramaxWebViewerPanelProps = {
     onEaseMapToPoint: (lng: number, lat: number) => void;
     /** The shown picture with creator, licence, local capture time and camera. */
     onViewerPhoto?: (photo: NormalizedPhoto) => void;
+    /**
+     * The view inside the shown photo, after it has stopped moving and when the photo changes. Pass
+     * it to `providerExternalLink` for a link that opens the same view.
+     */
+    onViewerView?: (view: PhotoView) => void;
     /**
      * Leave out the viewer's own widgets: the legend (a bottom drawer in narrow containers), the
      * player and the zoom buttons. The host must then show creator and licence itself, from
@@ -17,4 +22,4 @@ export type PanoramaxWebViewerPanelProps = {
     /** Same as `hideLegend`; the name `StreetLevelImageryViewer` passes. */
     hideAttribution?: boolean;
 };
-export declare const PanoramaxWebViewerPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, hideLegend: hideLegendProp, hideAttribution, }: PanoramaxWebViewerPanelProps) => import("react").JSX.Element;
+export declare const PanoramaxWebViewerPanel: ({ photo, onPhotoSelected, onEaseMapToPoint, onViewerPhoto, onViewerView, hideLegend: hideLegendProp, hideAttribution, }: PanoramaxWebViewerPanelProps) => import("react").JSX.Element;

package/dist/panels/panoramaxItem.d.ts

@@ -46,6 +46,8 @@ export type PanoramaxItem = {
     };
 };
 export declare const isPanoramaxItemSpherical: (item: PanoramaxItem) => boolean;
+/** Horizontal field of view in degrees. */
+export declare const panoramaxItemFieldOfView: (item: PanoramaxItem) => number;
 /** Width and height in pixels; a guess when the picture does not state them. */
 export declare const panoramaxItemSize: (item: PanoramaxItem) => [number, number];
 /** Neighbour in the sequence, from the item's `prev` / `next` link. */

package/dist/panels/photoView.d.ts

@@ -0,0 +1,19 @@
+import type { PhotoView } from '@osm-editor-kit/street-imagery';
+import type { Viewer } from 'mapillary-js';
+/**
+ * The Panoramax viewer's zoom level (0–100) for a vertical field of view in mapillary-js, from
+ * that viewer's own limits, so that both show the same height of the picture. In a flat picture
+ * the degrees differ: mapillary-js draws it through a lens, the Panoramax viewer as part of a
+ * sphere, where each degree has the same width.
+ */
+export declare const panoramaxZoomLevel: (verticalFov: number, horizontalFovOfPicture: number) => number;
+/**
+ * Calls `report` once the view has stopped changing, and only when it differs from the last one.
+ * `viewChanged` is cheap enough for every frame of a drag.
+ */
+export declare const createPhotoViewReporter: (read: () => Promise<PhotoView | null>, report: (view: PhotoView) => void, delayMs?: number) => {
+    viewChanged: () => void;
+    stop: () => void;
+};
+/** Runs the reporter on a mapillary-js viewer until the returned function is called. */
+export declare const watchMapillaryJsView: (viewer: Viewer, read: () => Promise<PhotoView | null>, report: (view: PhotoView) => void) => (() => void);

package/dist/panoramax-web-viewer.js

@@ -1,8 +1,10 @@
-import { useViewerActions } from './chunk-25UGGXIE.js';
+import { createPhotoViewReporter } from './chunk-XLBFXACK.js';
+import { useViewerActions } from './chunk-GYUS2JVV.js';
+import { c } from 'react/compiler-runtime';
 import '@panoramax/web-viewer';
 import { getStreetImageryConfig } from '@osm-editor-kit/street-imagery';
 import { useRef, useEffectEvent, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/panels/panoramaxLimitPanning.ts
 var toRad = (degrees) => degrees * Math.PI / 180;
@@ -19,7 +21,10 @@ var limitToImage = (psv, position) => {
   }
   const halfH = toRad(psv.state.hFov) / 2;
   const halfV = toRad(psv.state.vFov) / 2;
-  let { yaw, pitch } = position;
+  let {
+    yaw,
+    pitch
+  } = position;
   if (crop.croppedWidth < crop.fullWidth) {
     const left = crop.croppedX / crop.fullWidth * 2 * Math.PI - Math.PI;
     const right = (crop.croppedX + crop.croppedWidth) / crop.fullWidth * 2 * Math.PI - Math.PI;
@@ -31,7 +36,10 @@ var limitToImage = (psv, position) => {
     const bottom = Math.PI / 2 - (crop.croppedY + crop.croppedHeight) / crop.fullHeight * Math.PI;
     pitch = keepInView(pitch, bottom, top, halfV);
   }
-  return { yaw, pitch };
+  return {
+    yaw,
+    pitch
+  };
 };
 var toDeg = (radians) => radians * 180 / Math.PI;
 var widestZoomLevel = (psv) => {
@@ -100,20 +108,48 @@ var panoramaxPhotoFromMetadata = (metadata) => {
   const exifEntries = Object.entries(properties.exif ?? {}).filter(([, value]) => typeof value === "string" || typeof value === "number").map(([key, value]) => [key, String(value)]);
   const exif = exifEntries.length > 0 ? Object.fromEntries(exifEntries) : null;
   const details = {
-    ...creatorContact && creatorContact !== creatorName ? { creatorContact } : {},
-    ...properties.license ? { license: properties.license } : {},
-    ...metadata.origLinks?.find((link) => link.rel === "license")?.href ? { licenseUrl: metadata.origLinks.find((link) => link.rel === "license")?.href } : {},
-    ...properties.datetimetz ? { capturedAtLocal: properties.datetimetz } : {},
-    ...uploadedAt != null ? { uploadedAt } : {},
-    ...cameraName ? { camera: cameraName } : {},
-    ...isFlat && metadata.horizontalFov ? { fieldOfViewDeg: metadata.horizontalFov } : {},
-    ...properties["quality:horizontal_accuracy"] != null ? { positionAccuracyMeters: properties["quality:horizontal_accuracy"] } : {},
-    ...metadata.origInstance?.instance_name ? { instance: metadata.origInstance.instance_name } : {},
-    ...camera?.focal_length != null ? { focalLengthMm: camera.focal_length } : {},
-    ...properties["original_file:name"] ? { originalFileName: properties["original_file:name"] } : {},
-    ...properties["original_file:size"] != null ? { originalFileSizeBytes: properties["original_file:size"] } : {},
-    ...properties["geovisio:rank_in_collection"] != null ? { rankInSequence: properties["geovisio:rank_in_collection"] } : {},
-    ...exif ? { exif } : {}
+    ...creatorContact && creatorContact !== creatorName ? {
+      creatorContact
+    } : {},
+    ...properties.license ? {
+      license: properties.license
+    } : {},
+    ...metadata.origLinks?.find((link) => link.rel === "license")?.href ? {
+      licenseUrl: metadata.origLinks.find((link) => link.rel === "license")?.href
+    } : {},
+    ...properties.datetimetz ? {
+      capturedAtLocal: properties.datetimetz
+    } : {},
+    ...uploadedAt != null ? {
+      uploadedAt
+    } : {},
+    ...cameraName ? {
+      camera: cameraName
+    } : {},
+    ...isFlat && metadata.horizontalFov ? {
+      fieldOfViewDeg: metadata.horizontalFov
+    } : {},
+    ...properties["quality:horizontal_accuracy"] != null ? {
+      positionAccuracyMeters: properties["quality:horizontal_accuracy"]
+    } : {},
+    ...metadata.origInstance?.instance_name ? {
+      instance: metadata.origInstance.instance_name
+    } : {},
+    ...camera?.focal_length != null ? {
+      focalLengthMm: camera.focal_length
+    } : {},
+    ...properties["original_file:name"] ? {
+      originalFileName: properties["original_file:name"]
+    } : {},
+    ...properties["original_file:size"] != null ? {
+      originalFileSizeBytes: properties["original_file:size"]
+    } : {},
+    ...properties["geovisio:rank_in_collection"] != null ? {
+      rankInSequence: properties["geovisio:rank_in_collection"]
+    } : {},
+    ...exif ? {
+      exif
+    } : {}
   };
   return {
     providerId: "panoramax",
@@ -123,21 +159,28 @@ var panoramaxPhotoFromMetadata = (metadata) => {
     isPano: !isFlat,
     heading: properties["view:azimuth"] ?? null,
     lngLat: metadata.gps,
-    ...creatorName ? { creatorName } : {},
+    ...creatorName ? {
+      creatorName
+    } : {},
     details
   };
 };
 var panoramaxApiEndpoint = () => `${getStreetImageryConfig().panoramaxApiBase}/api`;
 var HIDE_LEGEND_CSS = "pnx-photo-viewer pnx-bottom-drawer, pnx-photo-viewer pnx-picture-legend { display: none !important; }";
 var normalizeBearing = (degrees) => (degrees % 360 + 360) % 360;
-var PanoramaxWebViewerPanel = ({
-  photo,
-  onPhotoSelected,
-  onEaseMapToPoint,
-  onViewerPhoto,
-  hideLegend: hideLegendProp = false,
-  hideAttribution = false
-}) => {
+var PanoramaxWebViewerPanel = (t0) => {
+  const $ = c(42);
+  const {
+    photo,
+    onPhotoSelected,
+    onEaseMapToPoint,
+    onViewerPhoto,
+    onViewerView,
+    hideLegend: t1,
+    hideAttribution: t2
+  } = t0;
+  const hideLegendProp = t1 === void 0 ? false : t1;
+  const hideAttribution = t2 === void 0 ? false : t2;
   const hideLegend = hideLegendProp || hideAttribution;
   const containerRef = useRef(null);
   const viewerRef = useRef(null);
@@ -149,25 +192,55 @@ var PanoramaxWebViewerPanel = ({
   const pendingBearingRef = useRef(null);
   const pendingHfovRef = useRef(null);
   const actions = useViewerActions();
-  const emitViewerPhoto = useEffectEvent(
-    (viewerPhoto) => onViewerPhoto?.(viewerPhoto)
-  );
-  useEffect(
-    function syncPhotoRef() {
+  let t3;
+  if ($[0] !== onViewerPhoto) {
+    t3 = (viewerPhoto) => onViewerPhoto?.(viewerPhoto);
+    $[0] = onViewerPhoto;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const emitViewerPhoto = useEffectEvent(t3);
+  let t4;
+  let t5;
+  if ($[2] !== photo) {
+    t4 = function syncPhotoRef() {
       photoRef.current = photo;
-    },
-    [photo]
-  );
-  useEffect(
-    function resetViewerStoreOnProviderChange() {
+    };
+    t5 = [photo];
+    $[2] = photo;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t4 = $[3];
+    t5 = $[4];
+  }
+  useEffect(t4, t5);
+  let t6;
+  if ($[5] !== actions) {
+    t6 = function resetViewerStoreOnProviderChange() {
       return () => {
         actions.reset();
       };
-    },
-    [actions, photo.providerId]
-  );
-  useEffect(
-    function mountPanoramaxViewer() {
+    };
+    $[5] = actions;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  let t7;
+  if ($[7] !== actions || $[8] !== photo.providerId) {
+    t7 = [actions, photo.providerId];
+    $[7] = actions;
+    $[8] = photo.providerId;
+    $[9] = t7;
+  } else {
+    t7 = $[9];
+  }
+  useEffect(t6, t7);
+  let t8;
+  if ($[10] !== actions || $[11] !== emitViewerPhoto || $[12] !== onEaseMapToPoint || $[13] !== onPhotoSelected) {
+    t8 = function mountPanoramaxViewer() {
       const viewer = viewerRef.current;
       const container = containerRef.current;
       if (!viewer || !container) {
@@ -177,16 +250,23 @@ var PanoramaxWebViewerPanel = ({
       const flushBearing = () => {
         bearingRafRef.current = null;
         if (pendingBearingRef.current != null) {
-          actions.setPov({ bearing: pendingBearingRef.current });
+          actions.setPov({
+            bearing: pendingBearingRef.current
+          });
           pendingBearingRef.current = null;
         }
         if (pendingHfovRef.current != null) {
-          actions.setPov({ hfov: pendingHfovRef.current });
+          actions.setPov({
+            hfov: pendingHfovRef.current
+          });
           pendingHfovRef.current = null;
         }
       };
       const onSelect = (event) => {
-        const { seqId, picId } = event.detail;
+        const {
+          seqId,
+          picId
+        } = event.detail;
         if (!picId) {
           return;
         }
@@ -199,8 +279,8 @@ var PanoramaxWebViewerPanel = ({
           photoId: picId
         });
       };
-      const onPictureLoaded = (event) => {
-        const detail = event.detail;
+      const onPictureLoaded = (event_0) => {
+        const detail = event_0.detail;
         const metadata = viewer.psv?.getPictureMetadata();
         if (metadata) {
           emitViewerPhoto(panoramaxPhotoFromMetadata(metadata));
@@ -208,22 +288,28 @@ var PanoramaxWebViewerPanel = ({
         if (detail.lon == null || detail.lat == null) {
           return;
         }
-        actions.setPov({ lngLat: [detail.lon, detail.lat] });
+        actions.setPov({
+          lngLat: [detail.lon, detail.lat]
+        });
         if (detail.x != null) {
-          actions.setPov({ bearing: normalizeBearing(detail.x) });
+          actions.setPov({
+            bearing: normalizeBearing(detail.x)
+          });
         }
         const psv = viewer.psv;
         if (psv && detail.z != null) {
-          actions.setPov({ hfov: psv.dataHelper.zoomLevelToFov(detail.z) });
+          actions.setPov({
+            hfov: psv.dataHelper.zoomLevelToFov(detail.z)
+          });
         }
         onEaseMapToPoint(detail.lon, detail.lat);
       };
-      const onViewRotated = (event) => {
-        const detail = event.detail;
-        pendingBearingRef.current = normalizeBearing(detail.x);
-        const psv = viewer.psv;
-        if (psv && detail.z != null) {
-          pendingHfovRef.current = psv.dataHelper.zoomLevelToFov(detail.z);
+      const onViewRotated = (event_1) => {
+        const detail_0 = event_1.detail;
+        pendingBearingRef.current = normalizeBearing(detail_0.x);
+        const psv_0 = viewer.psv;
+        if (psv_0 && detail_0.z != null) {
+          pendingHfovRef.current = psv_0.dataHelper.zoomLevelToFov(detail_0.z);
         }
         if (bearingRafRef.current == null) {
           bearingRafRef.current = requestAnimationFrame(flushBearing);
@@ -236,7 +322,8 @@ var PanoramaxWebViewerPanel = ({
         viewer.psv?.resize();
       });
       resizeObserver.observe(container);
-      let stopLimit = null;
+      let stopLimit;
+      stopLimit = null;
       const startLimit = () => {
         if (!stopLimit && viewer.psv) {
           stopLimit = limitPanningToImage(viewer.psv);
@@ -265,50 +352,167 @@ var PanoramaxWebViewerPanel = ({
         viewer.removeEventListener("psv:picture-loaded", startLimit);
         stopLimit?.();
       };
-    },
-    [actions, onEaseMapToPoint, onPhotoSelected]
-  );
-  useEffect(
-    function syncExternalPhotoSelection() {
-      const viewer = viewerRef.current;
-      if (!viewer || photo.photoId === lastViewerPhotoIdRef.current) {
+    };
+    $[10] = actions;
+    $[11] = emitViewerPhoto;
+    $[12] = onEaseMapToPoint;
+    $[13] = onPhotoSelected;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== actions || $[16] !== onEaseMapToPoint || $[17] !== onPhotoSelected) {
+    t9 = [actions, onEaseMapToPoint, onPhotoSelected];
+    $[15] = actions;
+    $[16] = onEaseMapToPoint;
+    $[17] = onPhotoSelected;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  useEffect(t8, t9);
+  let t10;
+  if ($[19] !== onViewerView) {
+    t10 = (view) => onViewerView?.(view);
+    $[19] = onViewerView;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  const emitViewerView = useEffectEvent(t10);
+  const reportsView = onViewerView !== void 0;
+  let t11;
+  if ($[21] !== emitViewerView || $[22] !== reportsView) {
+    t11 = function reportViewInPhoto() {
+      const viewer_0 = viewerRef.current;
+      if (!viewer_0 || !reportsView) {
+        return;
+      }
+      const read = async () => {
+        const psv_1 = viewer_0.psv;
+        const photoId = psv_1?.getPictureMetadata()?.id;
+        if (!psv_1 || !photoId) {
+          return null;
+        }
+        const {
+          x,
+          y,
+          z
+        } = psv_1.getXYZ();
+        return {
+          providerId: "panoramax",
+          photoId,
+          heading: x,
+          pitch: y,
+          zoom: z
+        };
+      };
+      const reporter = createPhotoViewReporter(read, (view_0) => emitViewerView(view_0));
+      viewer_0.addEventListener("psv:picture-loaded", reporter.viewChanged);
+      viewer_0.addEventListener("psv:view-rotated", reporter.viewChanged);
+      return () => {
+        reporter.stop();
+        viewer_0.removeEventListener("psv:picture-loaded", reporter.viewChanged);
+        viewer_0.removeEventListener("psv:view-rotated", reporter.viewChanged);
+      };
+    };
+    $[21] = emitViewerView;
+    $[22] = reportsView;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  let t12;
+  if ($[24] !== reportsView) {
+    t12 = [reportsView];
+    $[24] = reportsView;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  useEffect(t11, t12);
+  let t13;
+  let t14;
+  if ($[26] !== actions || $[27] !== photo.photoId || $[28] !== photo.sequenceId) {
+    t13 = function syncExternalPhotoSelection() {
+      const viewer_1 = viewerRef.current;
+      if (!viewer_1 || photo.photoId === lastViewerPhotoIdRef.current) {
         return;
       }
       actions.reset();
       lastViewerPhotoIdRef.current = photo.photoId;
       if (!readyRef.current) {
-        pendingSelectRef.current = { sequenceId: photo.sequenceId, photoId: photo.photoId };
+        pendingSelectRef.current = {
+          sequenceId: photo.sequenceId,
+          photoId: photo.photoId
+        };
         return;
       }
-      if (typeof viewer.select === "function") {
-        viewer.select(photo.sequenceId ?? null, photo.photoId);
+      if (typeof viewer_1.select === "function") {
+        viewer_1.select(photo.sequenceId ?? null, photo.photoId);
       }
-    },
-    [actions, photo.photoId, photo.sequenceId]
-  );
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900",
-      style: { aspectRatio: "4 / 3" },
-      children: [
-        hideLegend ? /* @__PURE__ */ jsx("style", { children: HIDE_LEGEND_CSS }) : null,
-        /* @__PURE__ */ jsx(
-          "pnx-photo-viewer",
-          {
-            ref: viewerRef,
-            className: "block h-full w-full",
-            endpoint: panoramaxApiEndpoint(),
-            "url-parameters": "false",
-            widgets: hideLegend ? "false" : void 0,
-            picture: photo.photoId,
-            sequence: photo.sequenceId ?? void 0
-          }
-        )
-      ]
-    }
-  );
+    };
+    t14 = [actions, photo.photoId, photo.sequenceId];
+    $[26] = actions;
+    $[27] = photo.photoId;
+    $[28] = photo.sequenceId;
+    $[29] = t13;
+    $[30] = t14;
+  } else {
+    t13 = $[29];
+    t14 = $[30];
+  }
+  useEffect(t13, t14);
+  let t15;
+  if ($[31] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t15 = {
+      aspectRatio: "4 / 3"
+    };
+    $[31] = t15;
+  } else {
+    t15 = $[31];
+  }
+  let t16;
+  if ($[32] !== hideLegend) {
+    t16 = hideLegend ? /* @__PURE__ */ jsx("style", { children: HIDE_LEGEND_CSS }) : null;
+    $[32] = hideLegend;
+    $[33] = t16;
+  } else {
+    t16 = $[33];
+  }
+  let t17;
+  if ($[34] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t17 = panoramaxApiEndpoint();
+    $[34] = t17;
+  } else {
+    t17 = $[34];
+  }
+  const t18 = hideLegend ? "false" : void 0;
+  const t19 = photo.sequenceId ?? void 0;
+  let t20;
+  if ($[35] !== photo.photoId || $[36] !== t18 || $[37] !== t19) {
+    t20 = /* @__PURE__ */ jsx("pnx-photo-viewer", { ref: viewerRef, className: "block h-full w-full", endpoint: t17, "url-parameters": "false", widgets: t18, picture: photo.photoId, sequence: t19 });
+    $[35] = photo.photoId;
+    $[36] = t18;
+    $[37] = t19;
+    $[38] = t20;
+  } else {
+    t20 = $[38];
+  }
+  let t21;
+  if ($[39] !== t16 || $[40] !== t20) {
+    t21 = /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "min-h-48 overflow-hidden rounded-lg border border-slate-200 bg-slate-900", style: t15, children: [
+      t16,
+      t20
+    ] });
+    $[39] = t16;
+    $[40] = t20;
+    $[41] = t21;
+  } else {
+    t21 = $[41];
+  }
+  return t21;
 };
 
 export { PanoramaxWebViewerPanel };