feat(web,mobile) Allow videos to be looped in the detail viewer (#8615)

* First version of video looping for the web

* Use prop for slideshow state

* refactor asset settings and add autoloop video setting

* rename variables and adjust description

* loop videos based on user settings in gallery viewer

* make asset viewer setting a stateless widget

* do not update video playback value if looping is enabled

* add some translations

* adjust description

* add missing id

* WIP

* chore: clean up

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
kleinMaggus 2024-05-14 21:31:47 +02:00 committed by GitHub
parent 0f129cae4a
commit d62e90424e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 160 additions and 49 deletions

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { videoViewerVolume, videoViewerMuted } from '$lib/stores/preferences.store';
import { loopVideo as loopVideoPreference, videoViewerVolume, videoViewerMuted } from '$lib/stores/preferences.store';
import { getAssetFileUrl, getAssetThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { ThumbnailFormat } from '@immich/sdk';
@ -8,6 +8,7 @@
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
export let assetId: string;
export let loopVideo: boolean;
let element: HTMLVideoElement | undefined = undefined;
let isVideoLoading = true;
@ -34,6 +35,7 @@
>
<video
bind:this={element}
loop={$loopVideoPreference && loopVideo}
autoplay
playsinline
controls