mirror of
https://github.com/immich-app/immich.git
synced 2025-06-20 05:54:33 -04:00
907a95a746
* no-misused-promises * no-floating-promises * format * revert for now * remove load function * require-await * revert a few no-floating-promises changes that would cause no-misused-promises failures * format * fix a few more * fix most remaining errors * executor-queue * executor-queue.spec * remove duplicate comments by grouping rules * upgrade sveltekit and enforce rules * oops. move await * try this * just ignore for now since it's only a test * run in parallel * Update web/src/routes/admin/jobs-status/+page.svelte Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * remove Promise.resolve call * rename function * remove unnecessary warning silencing * make handleError sync * fix new errors from recently merged PR to main * extract method * use handlePromiseError --------- Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
51 lines
1.6 KiB
Svelte
51 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { videoViewerVolume } 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;
|
|
|
|
let isVideoLoading = true;
|
|
const dispatch = createEventDispatcher<{ onVideoEnded: void; onVideoStarted: void }>();
|
|
|
|
const handleCanPlay = async (event: Event) => {
|
|
try {
|
|
const video = event.currentTarget as HTMLVideoElement;
|
|
video.muted = true;
|
|
await video.play();
|
|
video.muted = false;
|
|
dispatch('onVideoStarted');
|
|
} catch (error) {
|
|
handleError(error, 'Unable to play video');
|
|
} finally {
|
|
isVideoLoading = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
|
|
<video
|
|
autoplay
|
|
playsinline
|
|
controls
|
|
class="h-full object-contain"
|
|
on:canplay={handleCanPlay}
|
|
on:ended={() => dispatch('onVideoEnded')}
|
|
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>
|