refactor: clean class (#26885)

web/src/lib/components/assets/broken-asset.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cleanClass } from '$lib';
   import { Icon } from '@immich/ui';
   import { mdiImageBrokenVariant } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -11,15 +12,15 @@
     height?: string | undefined;
   }
 
-  let { class: className = '', hideMessage = false, width = undefined, height = undefined }: Props = $props();
+  let { class: className, hideMessage = false, width = undefined, height = undefined }: Props = $props();
 </script>
 
 <div
   data-broken-asset
-  class={[
+  class={cleanClass(
     '@container flex flex-col overflow-hidden max-h-full max-w-full justify-center items-center bg-gray-100/40 dark:bg-gray-700/40 dark:text-gray-100 p-4',
     className,
-  ]}
+  )}
   style:width
   style:height
 >

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cleanClass } from '$lib';
   import { Icon, LoadingSpinner } from '@immich/ui';
   import { mdiAlertCircleOutline, mdiPauseCircleOutline, mdiPlayCircleOutline } from '@mdi/js';
   import { Duration } from 'luxon';
@@ -25,7 +26,7 @@
     curve = false,
     playIcon = mdiPlayCircleOutline,
     pauseIcon = mdiPauseCircleOutline,
-    class: className = undefined,
+    class: className,
   }: Props = $props();
 
   let remainingSeconds = $state(durationInSeconds);
@@ -60,7 +61,7 @@
 {#if enablePlayback}
   <video
     bind:this={player}
-    class={['h-full w-full object-cover', className]}
+    class={cleanClass('h-full w-full object-cover', className)}
     class:rounded-xl={curve}
     muted
     autoplay