From dd8d7732deb48a0c4c8bdf73c512622e078077af Mon Sep 17 00:00:00 2001
From: Tushar Harsora <tusharharsora95@gmail.com>
Date: Sat, 11 May 2024 01:58:21 +0530
Subject: [PATCH] fix(web): Fixed video unmutes when scrubbing (#9382)

Fixed video unmutes when scrubbing

Co-authored-by: Tushar Harsora <tushar.harsora.harsora@oracle.com>
---
 .../lib/components/asset-viewer/video-native-viewer.svelte   | 5 ++---
 web/src/lib/stores/preferences.store.ts                      | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/video-native-viewer.svelte b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
index 21d3ccec2f..a0c3aa19af 100644
--- a/web/src/lib/components/asset-viewer/video-native-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-native-viewer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { videoViewerVolume } from '$lib/stores/preferences.store';
+  import { 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';
@@ -17,9 +17,7 @@
   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');
@@ -42,6 +40,7 @@
     class="h-full object-contain"
     on:canplay={handleCanPlay}
     on:ended={() => dispatch('onVideoEnded')}
+    bind:muted={$videoViewerMuted}
     bind:volume={$videoViewerVolume}
     poster={getAssetThumbnailUrl(assetId, ThumbnailFormat.Jpeg)}
   >
diff --git a/web/src/lib/stores/preferences.store.ts b/web/src/lib/stores/preferences.store.ts
index 885689e46c..591802f488 100644
--- a/web/src/lib/stores/preferences.store.ts
+++ b/web/src/lib/stores/preferences.store.ts
@@ -63,6 +63,7 @@ export const mapSettings = persisted<MapSettings>('map-settings', {
 });
 
 export const videoViewerVolume = persisted<number>('video-viewer-volume', 1, {});
+export const videoViewerMuted = persisted<boolean>('video-viewer-muted', false, {});
 
 export const isShowDetail = persisted<boolean>('info-opened', false, {});