From bb98aba71a88ef0e74892216920615f2855a4e29 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Fri, 4 Jul 2025 18:28:42 -0700
Subject: [PATCH] Prevent attempting to enter fullscreen mode on platforms
 where it's not supported

---
 packages/webamp/CHANGELOG.md                  |  1 +
 .../MilkdropWindow/MilkdropContextMenu.tsx    | 20 +++++++++++--------
 .../js/components/MilkdropWindow/index.tsx    |  9 ++++++++-
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/webamp/CHANGELOG.md b/packages/webamp/CHANGELOG.md
index 99dcb9c7..789db770 100644
--- a/packages/webamp/CHANGELOG.md
+++ b/packages/webamp/CHANGELOG.md
@@ -22,6 +22,7 @@
 - Fix bug where resizing the window such that the current layout cannot fit on the page, while also scrolled down the page, would cause the layout to be recentered out of view.
 - Avoid a console log from Redux Dev Tools.
 - Don't show Milkdrop window option in context menu if Milkdrop is not enabled.
+- Fix bug on iPhone where Milkdrop window would resize incorrectly if you attempted to enter fullscreen mode, which is not supported on iPhones.
 
 ## 2.1.2 [CURRENT]
 
diff --git a/packages/webamp/js/components/MilkdropWindow/MilkdropContextMenu.tsx b/packages/webamp/js/components/MilkdropWindow/MilkdropContextMenu.tsx
index d3807f5b..5aa6811e 100644
--- a/packages/webamp/js/components/MilkdropWindow/MilkdropContextMenu.tsx
+++ b/packages/webamp/js/components/MilkdropWindow/MilkdropContextMenu.tsx
@@ -3,8 +3,9 @@ import { Hr, Node } from "../ContextMenu";
 import { WINDOWS } from "../../constants";
 import * as Selectors from "../../selectors";
 import * as Actions from "../../actionCreators";
-import ContextMenuWraper from "../ContextMenuWrapper";
+import ContextMenuWrapper from "../ContextMenuWrapper";
 import { useTypedSelector, useActionCreator } from "../../hooks";
+import fscreen from "fscreen";
 
 interface Props {
   children: ReactNode;
@@ -16,16 +17,19 @@ const MilkdropContextMenu = (props: Props) => {
   const closeWindow = useActionCreator(Actions.closeWindow);
   const toggleDesktop = useActionCreator(Actions.toggleMilkdropDesktop);
   const toggleFullscreen = useActionCreator(Actions.toggleMilkdropFullscreen);
+
   return (
-    <ContextMenuWraper
+    <ContextMenuWrapper
       renderContents={() => {
         return (
           <>
-            <Node
-              onClick={toggleFullscreen}
-              label="Fullscreen"
-              hotkey="Alt+Enter"
-            />
+            {fscreen.fullscreenEnabled && (
+              <Node
+                onClick={toggleFullscreen}
+                label="Fullscreen"
+                hotkey="Alt+Enter"
+              />
+            )}
             <Node
               onClick={toggleDesktop}
               checked={desktop}
@@ -39,7 +43,7 @@ const MilkdropContextMenu = (props: Props) => {
       }}
     >
       {props.children}
-    </ContextMenuWraper>
+    </ContextMenuWrapper>
   );
 };
 
diff --git a/packages/webamp/js/components/MilkdropWindow/index.tsx b/packages/webamp/js/components/MilkdropWindow/index.tsx
index 1db11bed..8a97a7b4 100644
--- a/packages/webamp/js/components/MilkdropWindow/index.tsx
+++ b/packages/webamp/js/components/MilkdropWindow/index.tsx
@@ -18,6 +18,7 @@ import PresetOverlay from "./PresetOverlay";
 import DropTarget from "../DropTarget";
 import MilkdropContextMenu from "./MilkdropContextMenu";
 import Desktop from "./Desktop";
+import fscreen from "fscreen";
 
 const MILLISECONDS_BETWEEN_PRESET_TRANSITIONS = 15000;
 
@@ -111,6 +112,12 @@ function Milkdrop({ analyser }: Props) {
   const screenSize = useScreenSize();
   const windowSize = useWindowSize();
 
+  const toggleFullScreenIfEnabled = useCallback(() => {
+    if (fscreen.fullscreenEnabled) {
+      toggleFullscreen();
+    }
+  }, [toggleFullscreen]);
+
   if (desktop) {
     return (
       <Desktop>
@@ -138,7 +145,7 @@ function Milkdrop({ analyser }: Props) {
               >
                 {overlay && <PresetOverlay {...size} />}
                 <Fullscreen enabled={fullscreen} onChange={setFullscreen}>
-                  <div onDoubleClick={toggleFullscreen}>
+                  <div onDoubleClick={toggleFullScreenIfEnabled}>
                     <Visualizer {...size} analyser={analyser} />
                   </div>
                 </Fullscreen>