Prevent attempting to enter fullscreen mode on platforms where it's not supported

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]
 

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>
   );
 };
 

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>