feat(web): load original videos (#20041)

* added user preference for always loading original video

added ability to toggle between transcoded/original in the video viewer

add fix to static check error

* address PR comments

* Update asset-viewer-nav-bar.svelte

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

---------

Co-authored-by: Mert <101130780+mertalev@users.noreply.github.com>
Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -56,6 +56,7 @@
     mdiMagnifyPlusOutline,
     mdiPresentationPlay,
     mdiUpload,
+    mdiVideoOutline,
   } from '@mdi/js';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -78,6 +79,8 @@
     // export let showEditorHandler: () => void;
     onClose: () => void;
     motionPhoto?: Snippet;
+    playOriginalVideo: boolean;
+    setPlayOriginalVideo: (value: boolean) => void;
   }
 
   let {
@@ -97,6 +100,8 @@
     onShowDetail,
     onClose,
     motionPhoto,
+    playOriginalVideo = false,
+    setPlayOriginalVideo,
   }: Props = $props();
 
   const sharedLink = getSharedLink();
@@ -245,6 +250,15 @@
           {#if !asset.isTrashed}
             <SetVisibilityAction asset={toTimelineAsset(asset)} {onAction} {preAction} />
           {/if}
+
+          {#if asset.type === AssetTypeEnum.Video}
+            <MenuOption
+              icon={mdiVideoOutline}
+              onClick={() => setPlayOriginalVideo(!playOriginalVideo)}
+              text={playOriginalVideo ? $t('play_transcoded_video') : $t('play_original_video')}
+            />
+          {/if}
+
           <hr />
           <MenuOption
             icon={mdiHeadSyncOutline}