feat(web): add preference for thumbnail playback on hover (#7831)

* feat(web): add preference for thumbnail playback on hover

* pr feedback, add user settings behavior setting

* user settings consistency

* rename appearance to app settings

* collapse single trash setting into app settings

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -6,6 +6,7 @@
   import { getAltText } from '$lib/utils/thumbnail-util';
   import { timeToSeconds } from '$lib/utils/date-time';
   import { AssetTypeEnum, ThumbnailFormat, type AssetResponseDto } from '@immich/sdk';
+  import { playVideoThumbnailOnHover } from '$lib/stores/preferences.store';
   import {
     mdiArchiveArrowDownOutline,
     mdiCameraBurst,
@@ -194,9 +195,10 @@
           <div class="absolute top-0 h-full w-full">
             <VideoThumbnail
               url={getAssetFileUrl(asset.id, false, true)}
-              enablePlayback={mouseOver}
+              enablePlayback={mouseOver && $playVideoThumbnailOnHover}
               curve={selected}
               durationInSeconds={timeToSeconds(asset.duration)}
+              playbackOnIconHover
             />
           </div>
         {/if}

web/src/lib/components/user-settings-page/app-settings.svelte

@@ -4,7 +4,7 @@
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { fallbackLocale, locales } from '$lib/constants';
   import { sidebarSettings } from '$lib/stores/preferences.store';
-  import { alwaysLoadOriginalFile } from '$lib/stores/preferences.store';
+  import { alwaysLoadOriginalFile, playVideoThumbnailOnHover, showDeleteModal } from '$lib/stores/preferences.store';
   import { colorTheme, locale } from '$lib/stores/preferences.store';
   import { findLocale } from '$lib/utils';
   import { onMount } from 'svelte';
@@ -104,6 +104,22 @@
           on:toggle={() => ($alwaysLoadOriginalFile = !$alwaysLoadOriginalFile)}
         />
       </div>
+      <div class="ml-4">
+        <SettingSwitch
+          title="Play video thumbnail on hover"
+          subtitle="Play video thumbnail when mouse is hovering over item. Even when disabled, playback can be started by hovering over the play icon."
+          bind:checked={$playVideoThumbnailOnHover}
+          on:toggle={() => ($playVideoThumbnailOnHover = !$playVideoThumbnailOnHover)}
+        />
+      </div>
+
+      <div class="ml-4">
+        <SettingSwitch
+          title="Permanent deletion warning"
+          subtitle="Show a warning when permanently deleting assets"
+          bind:checked={$showDeleteModal}
+        />
+      </div>
 
       <div class="ml-4">
         <SettingSwitch

web/src/lib/components/user-settings-page/trash-settings.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { showDeleteModal } from '$lib/stores/preferences.store';
-  import { fade } from 'svelte/transition';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-</script>
-
-<section class="my-4">
-  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" on:submit|preventDefault>
-      <div class="ml-4 mt-4 flex flex-col gap-4">
-        <div class="ml-4">
-          <SettingSwitch
-            title="Permanent deletion warning"
-            subtitle="Show a warning when permanently deleting assets"
-            bind:checked={$showDeleteModal}
-          />
-        </div>
-      </div>
-    </form>
-  </div>
-</section>
-
-<div class="ml-4 mb-4"></div>

web/src/lib/components/user-settings-page/user-settings-list.svelte

@@ -6,13 +6,12 @@
   import { oauth } from '$lib/utils';
   import { type ApiKeyResponseDto, type AuthDeviceResponseDto } from '@immich/sdk';
   import SettingAccordion from '../shared-components/settings/setting-accordion.svelte';
-  import AppearanceSettings from './appearance-settings.svelte';
+  import AppSettings from './app-settings.svelte';
   import ChangePasswordSettings from './change-password-settings.svelte';
   import DeviceList from './device-list.svelte';
   import MemoriesSettings from './memories-settings.svelte';
   import OAuthSettings from './oauth-settings.svelte';
   import PartnerSettings from './partner-settings.svelte';
-  import TrashSettings from './trash-settings.svelte';
   import UserAPIKeyList from './user-api-key-list.svelte';
   import UserProfileSettings from './user-profile-settings.svelte';
   import SettingAccordionState from '../shared-components/settings/setting-accordion-state.svelte';
@@ -26,8 +25,8 @@
 </script>
 
 <SettingAccordionState queryParam={QueryParameter.IS_OPEN}>
-  <SettingAccordion key="appearance" title="Appearance" subtitle="Manage the app appearance">
-    <AppearanceSettings />
+  <SettingAccordion key="app-settings" title="App Settings" subtitle="Manage the app settings">
+    <AppSettings />
   </SettingAccordion>
 
   <SettingAccordion key="account" title="Account" subtitle="Manage your account">
@@ -42,7 +41,7 @@
     <DeviceList bind:devices />
   </SettingAccordion>
 
-  <SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories.">
+  <SettingAccordion key="memories" title="Memories" subtitle="Manage what you see in your memories">
     <MemoriesSettings user={$user} />
   </SettingAccordion>
 
@@ -59,8 +58,4 @@
   <SettingAccordion key="sharing" title="Sharing" subtitle="Manage sharing with partners">
     <PartnerSettings user={$user} />
   </SettingAccordion>
-
-  <SettingAccordion key="trash" title="Trash" subtitle="Manage trash settings">
-    <TrashSettings />
-  </SettingAccordion>
 </SettingAccordionState>

web/src/lib/stores/preferences.store.ts

@@ -96,3 +96,5 @@ export const albumViewSettings = persisted<AlbumViewSettings>('album-view-settin
 export const showDeleteModal = persisted<boolean>('delete-confirm-dialog', true, {});
 
 export const alwaysLoadOriginalFile = persisted<boolean>('always-load-original-file', false, {});
+
+export const playVideoThumbnailOnHover = persisted<boolean>('play-video-thumbnail-on-hover', true, {});