mirror of
https://github.com/immich-app/immich.git
synced 2025-06-03 05:34:32 -04:00
d62e90424e
* 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>
59 lines
1.8 KiB
Svelte
59 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
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';
|
|
import { createEventDispatcher } from 'svelte';
|
|
import { fade } from 'svelte/transition';
|
|
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
|
|
|
export let assetId: string;
|
|
export let loopVideo: boolean;
|
|
|
|
let element: HTMLVideoElement | undefined = undefined;
|
|
let isVideoLoading = true;
|
|
|
|
const dispatch = createEventDispatcher<{ onVideoEnded: void; onVideoStarted: void }>();
|
|
|
|
const handleCanPlay = async (event: Event) => {
|
|
try {
|
|
const video = event.currentTarget as HTMLVideoElement;
|
|
await video.play();
|
|
dispatch('onVideoStarted');
|
|
} catch (error) {
|
|
handleError(error, 'Unable to play video');
|
|
} finally {
|
|
isVideoLoading = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<div
|
|
transition:fade={{ duration: 150 }}
|
|
class="flex select-none place-content-center place-items-center"
|
|
style="height: calc(100% - 64px)"
|
|
>
|
|
<video
|
|
bind:this={element}
|
|
loop={$loopVideoPreference && loopVideo}
|
|
autoplay
|
|
playsinline
|
|
controls
|
|
class="h-full object-contain"
|
|
on:canplay={handleCanPlay}
|
|
on:ended={() => dispatch('onVideoEnded')}
|
|
bind:muted={$videoViewerMuted}
|
|
bind:volume={$videoViewerVolume}
|
|
poster={getAssetThumbnailUrl(assetId, ThumbnailFormat.Jpeg)}
|
|
>
|
|
<source src={getAssetFileUrl(assetId, false, true)} type="video/mp4" />
|
|
<track kind="captions" />
|
|
</video>
|
|
|
|
{#if isVideoLoading}
|
|
<div class="absolute flex place-content-center place-items-center">
|
|
<LoadingSpinner />
|
|
</div>
|
|
{/if}
|
|
</div>
|