From 2ff71b0d27914e941ea8e6f959c7542b1654d916 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Thu, 17 Aug 2023 14:52:50 -0400
Subject: [PATCH] fix(web): play videos on safari (#3748)

* fix(web): play videos on safari

* autoplay

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 web/src/lib/components/asset-viewer/video-viewer.svelte | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/asset-viewer/video-viewer.svelte b/web/src/lib/components/asset-viewer/video-viewer.svelte
index 476c004d44..fbf0221f35 100644
--- a/web/src/lib/components/asset-viewer/video-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/video-viewer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { api } from '@api';
+  import { ThumbnailFormat, api } from '@api';
   import { fade } from 'svelte/transition';
   import { createEventDispatcher } from 'svelte';
   import { videoViewerVolume } from '$lib/stores/preferences.store';
@@ -18,21 +18,24 @@
       video.muted = true;
       await video.play();
       video.muted = false;
-
-      isVideoLoading = false;
     } catch (error) {
       handleError(error, 'Unable to play video');
+    } finally {
+      isVideoLoading = false;
     }
   };
 </script>
 
 <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
   <video
+    autoplay
+    playsinline
     controls
     class="h-full object-contain"
     on:canplay={handleCanPlay}
     on:ended={() => dispatch('onVideoEnded')}
     bind:volume={$videoViewerVolume}
+    poster={api.getAssetThumbnailUrl(assetId, ThumbnailFormat.Jpeg)}
   >
     <source src={api.getAssetFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
     <track kind="captions" />