From 2ee9044b6a1316f6277df99f091bc28c4fdcf56c Mon Sep 17 00:00:00 2001 From: Dmitry Brazhenko <61410067+dmitry-brazhenko@users.noreply.github.com> Date: Fri, 9 Feb 2024 17:17:51 +0100 Subject: [PATCH] fix (web): panorama / 360 view - partial panorama: use photo-sphere-viewer (#6992) * panorama viewer fixes * prettifier * fix --- web/package-lock.json | 61 +++++-------------- web/package.json | 2 +- .../asset-viewer/panorama-viewer.svelte | 5 +- .../photo-sphere-viewer-adapter.svelte | 27 ++++++++ 4 files changed, 44 insertions(+), 51 deletions(-) create mode 100644 web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte diff --git a/web/package-lock.json b/web/package-lock.json index 3347b2cacb..6bf39e1f29 100644 --- a/web/package-lock.json +++ b/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", diff --git a/web/package.json b/web/package.json index 90be3a1235..bd324b7d81 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/lib/components/asset-viewer/panorama-viewer.svelte b/web/src/lib/components/asset-viewer/panorama-viewer.svelte index be398ee07b..b5220e884b 100644 --- a/web/src/lib/components/asset-viewer/panorama-viewer.svelte +++ b/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 @@ {:then assetData} {#if assetData} - + {:else}

{errorMessage}

{/if} diff --git a/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte b/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte new file mode 100644 index 0000000000..540c783648 --- /dev/null +++ b/web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte @@ -0,0 +1,27 @@ + + +