feat(web): load original panorama image when zoomed in to 75% or above (#12222)

* feat(web): load original panorama image when zoomed in to 75% or above

* add checks that original 360 image is web compatible and better error handling

* fix web compatability check typing

* fix asset type

web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     Viewer,
+    events,
     EquirectangularAdapter,
     type PluginConstructor,
     type AdapterConstructor,
@@ -9,6 +10,7 @@
   import { onDestroy, onMount } from 'svelte';
 
   export let panorama: string | { source: string };
+  export let originalImageUrl: string | null;
   export let adapter: AdapterConstructor | [AdapterConstructor, unknown] = EquirectangularAdapter;
   export let plugins: (PluginConstructor | [PluginConstructor, unknown])[] = [];
   export let navbar = false;
@@ -28,6 +30,20 @@
       maxFov: 180,
       fisheye: true,
     });
+
+    if (originalImageUrl) {
+      const zoomHandler = ({ zoomLevel }: events.ZoomUpdatedEvent) => {
+        // zoomLevel range: [0, 100]
+        if (Math.round(zoomLevel) >= 75) {
+          // Replace the preview with the original
+          viewer.setPanorama(originalImageUrl, { showLoader: false, speed: 150 }).catch(() => {
+            viewer.setPanorama(panorama, { showLoader: false, speed: 0 }).catch(() => {});
+          });
+          viewer.removeEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
+        }
+      };
+      viewer.addEventListener(events.ZoomUpdatedEvent.type, zoomHandler);
+    }
   });
 
   onDestroy(() => {