From dd638ac20747581a854d03772ea92218880dee31 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:34:17 +0200
Subject: [PATCH] fix(web): slideshow on iphone (#11599)

* fix(web): slideshow on iphone

* make requestFullscreen type optional
---
 web/src/app.d.ts                                        | 5 +++++
 web/src/lib/components/asset-viewer/asset-viewer.svelte | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/src/app.d.ts b/web/src/app.d.ts
index d041386df2..4fcb901892 100644
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -22,3 +22,8 @@ declare module '$env/static/public' {
   export const PUBLIC_IMMICH_PAY_HOST: string;
   export const PUBLIC_IMMICH_BUY_HOST: string;
 }
+
+interface Element {
+  // Make optional, because it's unavailable on iPhones.
+  requestFullscreen?(options?: FullscreenOptions): Promise<void>;
+}
diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte
index af4ba84a4a..a5485346ed 100644
--- a/web/src/lib/components/asset-viewer/asset-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte
@@ -334,7 +334,7 @@
 
   const handlePlaySlideshow = async () => {
     try {
-      await assetViewerHtmlElement.requestFullscreen();
+      await assetViewerHtmlElement.requestFullscreen?.();
     } catch (error) {
       handleError(error, $t('errors.unable_to_enter_fullscreen'));
       $slideshowState = SlideshowState.StopSlideshow;
@@ -422,7 +422,7 @@
       <div class="z-[1000] absolute w-full flex">
         <SlideshowBar
           {isFullScreen}
-          onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
+          onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen?.()}
           onPrevious={() => navigateAsset('previous')}
           onNext={() => navigateAsset('next')}
           onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}