Infrastructure/immich
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-21 00:52:43 -05:00
Code Issues Activity

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

Browse source 
* panorama viewer fixes

* prettifier

* fix
This commit is contained in:
Dmitry Brazhenko 2024-02-09 17:17:51 +01:00 • committed by GitHub
parent e4561f26e8
commit 2ee9044b6a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 44 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
web/package-lock.json generated
View file

@ -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",

2
web/package.json
View file

@ -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",

5
web/src/lib/components/asset-viewer/panorama-viewer.svelte
View file

@ -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}

27
web/src/lib/components/asset-viewer/photo-sphere-viewer-adapter.svelte Normal file
View file

@ -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} />