Inconsistent Behavior of Play-Sketch Button Between PC and Mobile Modes

[perminder-17]

p5.js version

v2.9.3

What is your operating system?

Windows

Web browser and version

Chrome

Actual Behavior

The "Play-Sketch" button exhibits inconsistent behavior when transitioning between PC and mobile modes. When the button is activated in PC mode and then the mode is switched to mobile, the button appears to be in the "on" state, but the sketch does not run. Similarly, when activating the "Play-Sketch" button in mobile mode and switching back to PC mode, the button visually indicates that it's on, but the sketch does not execute.

20231127204521.mp4

Expected Behavior

The "Play-Sketch" button should seamlessly adapt to changes in screen size and consistently execute the sketch when activated. Regardless of whether the application is viewed in PC mode or mobile mode, the button should accurately reflect its functional state, and the sketch should run as expected. The user experience should remain smooth and responsive.

Steps to reproduce

Steps:

1. Open the application in PC mode.
2. Click the "Play-Sketch" button.
3. Switch to mobile mode.
4. Observe the behavior of the "Play-Sketch" button.

[perminder-17]

Let me know @lindapaiste and @raclim what's your view on this. Can i work on it?

[lindapaiste]

Interesting! We send a ping to the iframe via postMessage that tells the sketch to start. When switching between mobile and desktop we're removing one iframe from the document and inserting another, so that causes a reset.

One solution might be to rework the IDEView so that it maintains the same PreviewFrame instance (by assigning it to a variable?).

Another solution might be to manually send a start sketch event in a useEffect hook. Maybe we have a useEffect in the PreviewFrame that runs on mount and re-dispatches the startSketch redux action if the redux state indicates that it is playing (state.ide.isPlaying). Or extract parts of the startSketch logic into a separate action to handle this "frameMounted" event.

[KrishavRajSingh]

I would like to work on this, if no one is working.
@perminder-17 let me know if you are working.

[perminder-17]

I would like to work on this, if no one is working. @perminder-17 let me know if you are working.

Yes Please feel free to work on this. I am busy with other projects. Thanks for taking this.

[KrishavRajSingh]

Hey @lindapaiste,
I was working on this error and I have tried to implement both ways but I was unable to resolve this error.

One way you said was to store the Preview Frame in a variable, I have tried that but the Preview Frame re-renders, thus the saved data is lost.

Another way was to manually start the sketch in useEffect, I have tried to use the dispatch(startSketch()) but it wasn't able to start the sketch.

[Mubashirshariq]

@lindapaiste, I was attempting to address it differently with a useEffect to start startSketch when isPlaying is true. However, in the browser, I'm not observing the expected results. Any suggestions on why this might be happening