feat: resolution selection and default preview playback for 360° panorama videos

[pastleo]

Hello team, thanks for building this amazing app! I am surprised that it already includes photo-sphere-viewer and is even able to play 360° panorama videos.

However I discover that immich is playing original file 360° panorama videos. My 360° panorama videos are 5.6K and suitable formats (HEVC, AV1) are not fully supported. For example linux firefox can't play HEVC: Mozilla will not support HEVC while it is encumbered by patents.

Hope we can play transcoded video files in 360° panorama video mode by default and provide option for user to upgrade to full resolution, this is the PR that address this issue:

1. Resolution Selection for Panorama Viewer:

   • Integrated @photo-sphere-viewer/resolution-plugin and added the ability to switch to the original, full-resolution video for users who want the highest fidelity.

2. Default Preview Playback:

   • Panorama videos now load the transcoded preview file (getAssetPlaybackUrl) by default to reduce network usage and better compatibility.
   • The original file (getAssetOriginalUrl) is loaded only when the user selects the "Original" resolution or zooms in past a threshold (≥75% zoom).

3. Navbar and Settings Enhancements:

   • Enhanced the viewer with the SettingsPlugin for a more intuitive interface, allowing users to easily access the resolution options.

Changes Made

• Dependencies:
  • Added @photo-sphere-viewer/resolution-plugin and @photo-sphere-viewer/settings-plugin to both package.json and package-lock.json.
• Code Modifications:
  • Updated photo-sphere-viewer-adapter.svelte:
    • Integrated the ResolutionPlugin with preview (labeled as default) and original resolutions.
    • Update logic to handle resolution switching on zoom.
  • Updated image-panorama-viewer.svelte and video-panorama-viewer.svelte to use originalPanorama for original resolution.
  • Ensured backward compatibility by defaulting to existing behavior if original files are unavailable.
• Styling:
  • Included required CSS files for the new plugins.

Screenshots

[pastleo]

I fixed errors reported by eslint, please take a look, thank you!

[w00tlarr]

This is such a game changer for me! Thanks @pastleo!
Playback (2GB MP4 360 files from Insta360 X2) is smooth streaming now and I can share these videos with my fam!