c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-04 02:46:47 +01:00
Code Releases Activity

fix(web): play video muted when blocked by browser (#10383)

Browse source
This commit is contained in:
Michel Heusschen 2024-06-16 17:37:25 +02:00 committed by GitHub
parent 1cd51cc2de
commit 83a851b556
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
web/src/lib/components/asset-viewer/video-native-viewer.svelte
View file

@ -4,7 +4,7 @@
import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils'; import { getAssetPlaybackUrl, getAssetThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { AssetMediaSize } from '@immich/sdk'; import { AssetMediaSize } from '@immich/sdk';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher, tick } from 'svelte';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -15,28 +15,40 @@
let element: HTMLVideoElement | undefined = undefined; let element: HTMLVideoElement | undefined = undefined;
let isVideoLoading = true; let isVideoLoading = true;
let assetFileUrl: string; let assetFileUrl: string;
let forceMuted = false;
$: { $: if (element) {
const next = getAssetPlaybackUrl({ id: assetId, checksum }); assetFileUrl = getAssetPlaybackUrl({ id: assetId, checksum });
if (assetFileUrl !== next) { forceMuted = false;
assetFileUrl = next; element.load();
element && element.load();
}
} }
const dispatch = createEventDispatcher<{ onVideoEnded: void; onVideoStarted: void }>(); const dispatch = createEventDispatcher<{ onVideoEnded: void; onVideoStarted: void }>();
const handleCanPlay = async (event: Event) => { const handleCanPlay = async (video: HTMLVideoElement) => {
try { try {
const video = event.currentTarget as HTMLVideoElement;
await video.play(); await video.play();
dispatch('onVideoStarted'); dispatch('onVideoStarted');
} catch (error) { } catch (error) {
if (error instanceof DOMException && error.name === 'NotAllowedError' && !forceMuted) {
await tryForceMutedPlay(video);
return;
}
handleError(error, $t('errors.unable_to_play_video')); handleError(error, $t('errors.unable_to_play_video'));
} finally { } finally {
isVideoLoading = false; isVideoLoading = false;
} }
}; };
const tryForceMutedPlay = async (video: HTMLVideoElement) => {
try {
forceMuted = true;
await tick();
await handleCanPlay(video);
} catch (error) {
handleError(error, $t('errors.unable_to_play_video'));
}
};
</script> </script>
<div <div
@ -51,9 +63,14 @@
playsinline playsinline
controls controls
class="h-full object-contain" class="h-full object-contain"
on:canplay={handleCanPlay} on:canplay={(e) => handleCanPlay(e.currentTarget)}
on:ended={() => dispatch('onVideoEnded')} on:ended={() => dispatch('onVideoEnded')}
bind:muted={$videoViewerMuted} on:volumechange={(e) => {
if (!forceMuted) {
$videoViewerMuted = e.currentTarget.muted;
}
}}
muted={forceMuted || $videoViewerMuted}
bind:volume={$videoViewerVolume} bind:volume={$videoViewerVolume}
poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, checksum })} poster={getAssetThumbnailUrl({ id: assetId, size: AssetMediaSize.Preview, checksum })}
> >