Merge pull request #3795 from Jatin24062005/Fixing-Inconsistent-Behavior-of-Play-Sketch-Button

updating ideView to avoiding the inconsistency

Author: raclim

client/modules/IDE/pages/IDEView.jsx

@@ -28,6 +28,7 @@ import IDEOverlays from '../components/IDEOverlays';
 import useIsMobile from '../hooks/useIsMobile';
 import Banner from '../components/Banner';
 import { P5VersionProvider } from '../hooks/useP5Version';
+import { stopSketch } from '../actions/ide';
 
 const BANNER_DISMISS_KEY = 'bannerLastDismissedAt';
 const BANNER_COOLDOWN_MINUTES = 30;
@@ -158,6 +159,17 @@ const IDEView = () => {
       }
     };
   }, [shouldAutosave, dispatch]);
+  const prevIsMobile = useRef(isMobile);
+
+  useEffect(() => {
+    if (prevIsMobile.current !== isMobile) {
+      prevIsMobile.current = isMobile;
+
+      if (ide.isPlaying) {
+        dispatch(stopSketch());
+      }
+    }
+  }, [isMobile, ide.isPlaying, dispatch]);
 
   useEffect(() => {
     const updateInnerWidth = (e) => {

package-lock.json

@@ -150,7 +150,7 @@
     "@types/react-helmet": "^6.1.11",
     "@types/react-responsive": "^8.0.8",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-tabs": "^2.3.1",
+    "@types/react-tabs": "^2.3.4",
     "@types/react-transition-group": "^4.4.12",
     "@types/sinon": "^17.0.4",
     "@types/styled-components": "^5.1.34",