Repository: 4ian/GDevelop
File: newIDE/app/src/MainFrame/EditorContainers/HomePage/PlaySection/GamesPlatformFrame.js (JavaScript)

Code before:
    gameId.current
      ? `/app-embedded/${gamesPlatformEmbeddedVersion}/games/${gameId.current}`
      : isMobile
      ? // On mobile, go directly to a random game if none is specified.
        `/app-embedded/${gamesPlatformEmbeddedVersion}/games/random`
      : // On desktop, access the homepage.
        `/app-embedded/${gamesPlatformEmbeddedVersion}/${paletteType}`,
    gdGamesHost
  );
  if (gameId.current || isMobile) url.searchParams.set('theme', paletteType);

  const src = loaded ? url.toString() : '';

  React.useEffect(
    () => {
      if (!loaded && initialGameId) {
        // Every time the frame is unloaded on a gameId, we reset it for the next load.
        gameId.current = initialGameId;
      }
    },
    [loaded, initialGameId]
  );

  React.useEffect(
    () => {
      if (!iframeRef.current) return;
      iframeRef.current.contentWindow.postMessage(
        {
          type: 'keyboardOffset',
          value: softKeyboardBottomOffset - homepageMobileMenuHeight,
        },
        '*'
      );
    },
    [softKeyboardBottomOffset]
  );

  const titleBarAndToolbarHeight = isMobile ? 0 : 37 + 40;
  const containerTop = isMobile
    ? 0 // Always top of the screen on small screens.
    : `calc(${titleBarAndToolbarHeight}px + var(--safe-area-inset-top))`;
  const containerBottom = isMobile ? homepageMobileMenuHeight : 0;
  const containerLeft = isMobile
    ? 0
    : isMediumScreen
    ? homepageMediumMenuBarWidth
    : homepageDesktopMenuBarWidth;
  const containerWidth = `calc(100% - ${containerLeft}px`;
  const containerHeight = `calc(100% - ${titleBarAndToolbarHeight +
    containerBottom}px - ${isMobile ? '0px' : 'var(--safe-area-inset-top)'})`;


Review comment (suggestion):
I would probably add a check on `!loaded` too.
The iframe may be here without gd.games being loaded yet, or not loaded at all .
This component and the iframe is always in the DOM, but the `src` changes when a user arrives on the Play section, and the `loaded` becomes true when gd.games tells the editor it's ready.

Code after:
      ? // On mobile, go directly to a random game if none is specified.
        `/app-embedded/${gamesPlatformEmbeddedVersion}/games/random`
      : // On desktop, access the homepage.
        `/app-embedded/${gamesPlatformEmbeddedVersion}/${paletteType}`,
    gdGamesHost
  );
  if (gameId.current || isMobile) url.searchParams.set('theme', paletteType);

  const src = loaded ? url.toString() : '';

  React.useEffect(
    () => {
      if (!loaded && initialGameId) {
        // Every time the frame is unloaded on a gameId, we reset it for the next load.
        gameId.current = initialGameId;
      }
    },
    [loaded, initialGameId]
  );

  const titleBarAndToolbarHeight = isMobile ? 0 : 37 + 40;
  const containerTop = isMobile
    ? 0 // Always top of the screen on small screens.
    : `calc(${titleBarAndToolbarHeight}px + var(--safe-area-inset-top))`;
  const containerBottom = isMobile ? homepageMobileMenuHeight : 0;
  const containerLeft = isMobile
    ? 0
    : isMediumScreen
    ? homepageMediumMenuBarWidth
    : homepageDesktopMenuBarWidth;
  const containerWidth = `calc(100% - ${containerLeft}px`;
  const containerHeight = `calc(100% - ${titleBarAndToolbarHeight +
    containerBottom}px - ${isMobile ? '0px' : 'var(--safe-area-inset-top)'})`;

  // We wrap the iframe in a paper, as its content has a transparent background,
  // and we don't want what's behind the iframe to be visible.
  return (
    <Paper
      square
      background="dark"
      style={{
        ...styles.paper,
        width: containerWidth,
        height: containerHeight,
        left: containerLeft,
        top: containerTop,
        display: visible ? 'block' : 'none',
      }}
    >
      <iframe
        id={GAMES_PLATFORM_IFRAME_ID}