fix (web): panorama / 360 view - partial panorama: use photo-sphere-viewer (#6992)

* panorama viewer fixes

* prettifier

* fix

web/package-lock.json

@@ -8,9 +8,9 @@
       "name": "immich-web",
       "version": "1.0.0",
       "dependencies": {
-        "@egjs/svelte-view360": "^4.0.0-beta.7",
         "@immich/sdk": "file:../open-api/typescript-sdk",
         "@mdi/js": "^7.3.67",
+        "@photo-sphere-viewer/core": "^5.7.0",
         "@zoom-image/svelte": "^0.2.0",
         "axios": "^1.6.7",
         "buffer": "^6.0.3",
@@ -453,47 +453,6 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
-    "node_modules/@cfcs/core": {
-      "version": "0.0.24",
-      "resolved": "https://registry.npmjs.org/@cfcs/core/-/core-0.0.24.tgz",
-      "integrity": "sha512-feB38qu+eDk0Pggh/yR7gjaNmvUYA2uCxHP3Pz2MLE4LZ/9jPdtu8bzCSI47yTEhWyZCF5Pk698hdz8IN2mTjA==",
-      "dependencies": {
-        "@egjs/component": "^3.0.4"
-      }
-    },
-    "node_modules/@egjs/component": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@egjs/component/-/component-3.0.4.tgz",
-      "integrity": "sha512-sXA7bGbIeLF2OAw/vpka66c6QBBUPcA4UUhR4WGJfnp2XWdiI8QrnJGJMr/UxpE/xnevX9tN3jvNPlW8WkHl3g=="
-    },
-    "node_modules/@egjs/imready": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@egjs/imready/-/imready-1.4.1.tgz",
-      "integrity": "sha512-JIOBs4lB7FYdsKi5uvz2j3SObX8eShtZjtqlOH41tm185aJOQZwiKBK8+V4MxzG4X6DqVhpdN8UcuVwBbElfsg==",
-      "dependencies": {
-        "@cfcs/core": "^0.0.24",
-        "@egjs/component": "^3.0.1"
-      }
-    },
-    "node_modules/@egjs/svelte-view360": {
-      "version": "4.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/@egjs/svelte-view360/-/svelte-view360-4.0.0-beta.7.tgz",
-      "integrity": "sha512-qFNbLNME8H7QU2lg8SCKUTPoBXVdBcM5m8zmlDRE72esCTguDzUq2szXD7L1JWcb2lYPTFl3HVp/sZlcQ/1HpQ==",
-      "dependencies": {
-        "@egjs/view360": "4.0.0-beta.7"
-      }
-    },
-    "node_modules/@egjs/view360": {
-      "version": "4.0.0-beta.7",
-      "resolved": "https://registry.npmjs.org/@egjs/view360/-/view360-4.0.0-beta.7.tgz",
-      "integrity": "sha512-prVTTxuQ1/k59NM7G0tm58k2vPHGoaExoFr5E7MoJaSGF56Otj4okQHAxxosXH87aQLN0feZMtBlsKz0b/7zEw==",
-      "dependencies": {
-        "@egjs/component": "^3.0.2",
-        "@egjs/imready": "^1.3.0",
-        "@types/webxr": "^0.5.1",
-        "gl-matrix": "^3.4.3"
-      }
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.19.11",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz",
@@ -1193,6 +1152,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@photo-sphere-viewer/core": {
+      "version": "5.7.0",
+      "resolved": "https://registry.npmjs.org/@photo-sphere-viewer/core/-/core-5.7.0.tgz",
+      "integrity": "sha512-9IIvs4P8LWr/lTYQLEuhdGvkoK6dGCRLiVD54QybxIG7dt5dudC8Jq/GIQQb8G/QcbjmdW49ezA9LPxHTNYIgg==",
+      "dependencies": {
+        "three": "^0.161.0"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.24",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz",
@@ -1811,11 +1778,6 @@
         "@types/geojson": "*"
       }
     },
-    "node_modules/@types/webxr": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.5.tgz",
-      "integrity": "sha512-HVOsSRTQYx3zpVl0c0FBmmmcY/60BkQLzVnpE9M1aG4f2Z0aKlBWfj4XZ2zr++XNBfkQWYcwhGlmuu44RJPDqg=="
-    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.20.0.tgz",
@@ -7750,6 +7712,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.161.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.161.0.tgz",
+      "integrity": "sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw=="
+    },
     "node_modules/thumbhash": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",

web/package.json

@@ -57,9 +57,9 @@
   },
   "type": "module",
   "dependencies": {
-    "@egjs/svelte-view360": "^4.0.0-beta.7",
     "@immich/sdk": "file:../open-api/typescript-sdk",
     "@mdi/js": "^7.3.67",
+    "@photo-sphere-viewer/core": "^5.7.0",
     "@zoom-image/svelte": "^0.2.0",
     "axios": "^1.6.7",
     "buffer": "^6.0.3",

web/src/lib/components/asset-viewer/panorama-viewer.svelte

@@ -2,8 +2,7 @@
   import { fade } from 'svelte/transition';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import { api, type AssetResponseDto } from '@api';
-  import View360, { EquirectProjection } from '@egjs/svelte-view360';
-  import './panorama-viewer.css';
+  import PhotoSphere from './photo-sphere-viewer-adapter.svelte';
 
   export let asset: AssetResponseDto;
 
@@ -34,7 +33,7 @@
     <LoadingSpinner />
   {:then assetData}
     {#if assetData}
-      <View360 autoResize={true} initialZoom={0.5} projection={new EquirectProjection({ src: assetData })} />
+      <PhotoSphere panorama={assetData} />
     {:else}
       <p>{errorMessage}</p>
     {/if}

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Viewer } from '@photo-sphere-viewer/core';
+  import '@photo-sphere-viewer/core/index.css';
+  import { onDestroy, onMount } from 'svelte';
+
+  export let panorama: string;
+  let container: HTMLDivElement;
+  let viewer: Viewer;
+
+  onMount(() => {
+    viewer = new Viewer({
+      container,
+      panorama,
+      touchmoveTwoFingers: true,
+      mousewheelCtrlKey: false,
+      navbar: false,
+    });
+  });
+
+  onDestroy(() => {
+    if (viewer) {
+      viewer.destroy();
+    }
+  });
+</script>
+
+<div class="h-full w-full mb-0" bind:this={container} />