Games playable in-app

Extensions/PlayerAuthentication/playerauthenticationtools.ts

@@ -461,8 +461,11 @@ namespace gdjs {
       checkOrigin: boolean;
       onDone?: (status: 'logged' | 'errored' | 'dismissed') => void;
     }) {
-      const allowedOrigins = ['https://liluo.io', 'https://gd.games'];
-      // const allowedOrigins = ['localhost:4000'];
+      const allowedOrigins = [
+        'https://liluo.io',
+        'https://gd.games',
+        'http://localhost:4000',
+      ];
 
       // Check origin of message.
       if (checkOrigin && !allowedOrigins.includes(event.origin)) {

newIDE/app/src/AssetStore/AssetDetails.js

@@ -40,9 +40,9 @@ import {
 } from '../Utils/GDevelopServices/User';
 import ArrowRight from '../UI/CustomSvgIcons/ArrowRight';
 import ArrowLeft from '../UI/CustomSvgIcons/ArrowLeft';
-import PublicProfileDialog from '../Profile/PublicProfileDialog';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { AssetPreviewImage } from './AssetPreviewImage';
+import PublicProfileContext from '../Profile/PublicProfileContext';
 
 const FIXED_HEIGHT = 250;
 const FIXED_WIDTH = 300;
@@ -129,10 +129,7 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
     const [authorPublicProfiles, setAuthorPublicProfiles] = React.useState<
       UserPublicProfile[]
     >([]);
-    const [
-      selectedAuthorPublicProfile,
-      setSelectedAuthorPublicProfile,
-    ] = React.useState<?UserPublicProfile>(null);
+    const { openUserPublicProfile } = React.useContext(PublicProfileContext);
 
     const scrollView = React.useRef<?ScrollViewInterface>(null);
     React.useImperativeHandle(ref, () => ({
@@ -317,7 +314,13 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
                             key={userPublicProfile.id}
                             href="#"
                             onClick={() =>
-                              setSelectedAuthorPublicProfile(userPublicProfile)
+                              openUserPublicProfile({
+                                userId: userPublicProfile.id,
+                                callbacks: {
+                                  onAssetPackOpen: onPrivateAssetPackSelection,
+                                  onGameTemplateOpen: onPrivateGameTemplateSelection,
+                                },
+                              })
                             }
                           >
                             {username}
@@ -540,20 +543,6 @@ export const AssetDetails = React.forwardRef<Props, AssetDetailsInterface>(
               />
             </Line>
           </Column>
-          {selectedAuthorPublicProfile && (
-            <PublicProfileDialog
-              userId={selectedAuthorPublicProfile.id}
-              onClose={() => setSelectedAuthorPublicProfile(null)}
-              onAssetPackOpen={assetPack => {
-                onPrivateAssetPackSelection(assetPack);
-                setSelectedAuthorPublicProfile(null);
-              }}
-              onGameTemplateOpen={gameTemplate => {
-                onPrivateGameTemplateSelection(gameTemplate);
-                setSelectedAuthorPublicProfile(null);
-              }}
-            />
-          )}
         </Column>
       </ScrollView>
     );

newIDE/app/src/AssetStore/AssetsList.js

@@ -42,7 +42,6 @@ import {
   type UserPublicProfile,
 } from '../Utils/GDevelopServices/User';
 import Link from '../UI/Link';
-import PublicProfileDialog from '../Profile/PublicProfileDialog';
 import Window from '../Utils/Window';
 import Breadcrumbs from '../UI/Breadcrumbs';
 import { getFolderTagsFromAssetShortHeaders } from './TagsHelper';
@@ -52,6 +51,7 @@ import FlatButton from '../UI/FlatButton';
 import HelpIcon from '../UI/HelpIcon';
 import { OwnedProductLicense } from './ProductLicense/ProductLicenseOptions';
 import { getUserProductPurchaseUsageType } from './ProductPageHelper';
+import PublicProfileContext from '../Profile/PublicProfileContext';
 
 const ASSETS_DISPLAY_LIMIT = 60;
 
@@ -299,10 +299,7 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
       authorPublicProfile,
       setAuthorPublicProfile,
     ] = React.useState<?UserPublicProfile>(null);
-    const [
-      openAuthorPublicProfileDialog,
-      setOpenAuthorPublicProfileDialog,
-    ] = React.useState<boolean>(false);
+    const { openUserPublicProfile } = React.useContext(PublicProfileContext);
     const [
       isNavigatingInsideFolder,
       setIsNavigatingInsideFolder,
@@ -855,7 +852,19 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
                   <Text displayInlineAsSpan size="sub-title">
                     <Trans>by</Trans>{' '}
                     <Link
-                      onClick={() => setOpenAuthorPublicProfileDialog(true)}
+                      onClick={() =>
+                        openUserPublicProfile({
+                          userId: authorPublicProfile.id,
+                          callbacks: {
+                            onAssetPackOpen: onPrivateAssetPackSelection
+                              ? onPrivateAssetPackSelection
+                              : undefined,
+                            onGameTemplateOpen: onPrivateGameTemplateSelection
+                              ? onPrivateGameTemplateSelection
+                              : undefined,
+                          },
+                        })
+                      }
                       href="#"
                     >
                       {authorPublicProfile.username || ''}
@@ -976,26 +985,6 @@ const AssetsList = React.forwardRef<Props, AssetsListInterface>(
             // It's not an audio pack.
             !isAssetPackAudioOnly(openedAssetPack)) &&
           noResultComponent}
-        {onPrivateAssetPackSelection &&
-          onPrivateGameTemplateSelection &&
-          openAuthorPublicProfileDialog &&
-          authorPublicProfile && (
-            <PublicProfileDialog
-              userId={authorPublicProfile.id}
-              onClose={() => setOpenAuthorPublicProfileDialog(false)}
-              onAssetPackOpen={assetPackListingData => {
-                onPrivateAssetPackSelection(assetPackListingData);
-                setOpenAuthorPublicProfileDialog(false);
-                setAuthorPublicProfile(null);
-              }}
-              onGameTemplateOpen={gameTemplateListingData => {
-                onPrivateGameTemplateSelection(gameTemplateListingData);
-                setOpenAuthorPublicProfileDialog(false);
-                setAuthorPublicProfile(null);
-              }}
-            />
-          )}
-
         {currentPage &&
           assetShortHeaders &&
           assetShortHeaders.length > getPageBreakAssetUpperIndex(0) && (

newIDE/app/src/AssetStore/PrivateAssets/PrivateAssetPackInformationPage.js

@@ -29,7 +29,6 @@ import {
   getUserPublicProfile,
   type UserPublicProfile,
 } from '../../Utils/GDevelopServices/User';
-import PublicProfileDialog from '../../Profile/PublicProfileDialog';
 import Link from '../../UI/Link';
 import ResponsiveMediaGallery from '../../UI/ResponsiveMediaGallery';
 import {
@@ -64,6 +63,7 @@ import PasswordPromptDialog from '../PasswordPromptDialog';
 import Window from '../../Utils/Window';
 import RaisedButton from '../../UI/RaisedButton';
 import PrivateAssetPackPurchaseDialog from './PrivateAssetPackPurchaseDialog';
+import PublicProfileContext from '../../Profile/PublicProfileContext';
 
 const cellSpacing = 8;
 
@@ -206,10 +206,7 @@ const PrivateAssetPackInformationPage = ({
   const [isRedeemingProduct, setIsRedeemingProduct] = React.useState<boolean>(
     false
   );
-  const [
-    openSellerPublicProfileDialog,
-    setOpenSellerPublicProfileDialog,
-  ] = React.useState<boolean>(false);
+  const { openUserPublicProfile } = React.useContext(PublicProfileContext);
   const [
     sellerPublicProfile,
     setSellerPublicProfile,
@@ -612,7 +609,13 @@ const PrivateAssetPackInformationPage = ({
                         <Text displayInlineAsSpan size="sub-title">
                           <Link
                             onClick={() =>
-                              setOpenSellerPublicProfileDialog(true)
+                              openUserPublicProfile({
+                                userId: sellerPublicProfile.id,
+                                callbacks: {
+                                  onAssetPackOpen,
+                                  onGameTemplateOpen,
+                                },
+                              })
                             }
                             href="#"
                           >
@@ -791,20 +794,6 @@ const PrivateAssetPackInformationPage = ({
               </ScrollView>
             </Column>
           ) : null}
-          {openSellerPublicProfileDialog && (
-            <PublicProfileDialog
-              userId={sellerId}
-              onClose={() => setOpenSellerPublicProfileDialog(false)}
-              onAssetPackOpen={assetPackListingData => {
-                onAssetPackOpen(assetPackListingData);
-                setOpenSellerPublicProfileDialog(false);
-              }}
-              onGameTemplateOpen={gameTemplateListingData => {
-                onGameTemplateOpen(gameTemplateListingData);
-                setOpenSellerPublicProfileDialog(false);
-              }}
-            />
-          )}
           {displayPasswordPrompt && (
             <PasswordPromptDialog
               onApply={onRedeemAssetPack}

newIDE/app/src/AssetStore/PrivateGameTemplates/PrivateGameTemplateInformationPage.js

@@ -24,7 +24,6 @@ import {
   getUserPublicProfile,
   type UserPublicProfile,
 } from '../../Utils/GDevelopServices/User';
-import PublicProfileDialog from '../../Profile/PublicProfileDialog';
 import Link from '../../UI/Link';
 import ResponsiveMediaGallery from '../../UI/ResponsiveMediaGallery';
 import {
@@ -59,6 +58,7 @@ import RaisedButton from '../../UI/RaisedButton';
 import Play from '../../UI/CustomSvgIcons/Play';
 import PrivateGameTemplatePurchaseDialog from './PrivateGameTemplatePurchaseDialog';
 import PasswordPromptDialog from '../PasswordPromptDialog';
+import PublicProfileContext from '../../Profile/PublicProfileContext';
 
 const cellSpacing = 8;
 
@@ -158,10 +158,7 @@ const PrivateGameTemplateInformationPage = ({
     setPurchasingPrivateGameTemplateListingData,
   ] = React.useState<?PrivateGameTemplateListingData>(null);
   const [isFetching, setIsFetching] = React.useState<boolean>(false);
-  const [
-    openSellerPublicProfileDialog,
-    setOpenSellerPublicProfileDialog,
-  ] = React.useState<boolean>(false);
+  const { openUserPublicProfile } = React.useContext(PublicProfileContext);
   const [
     sellerPublicProfile,
     setSellerPublicProfile,
@@ -494,7 +491,13 @@ const PrivateGameTemplateInformationPage = ({
                         <Text displayInlineAsSpan size="sub-title">
                           <Link
                             onClick={() =>
-                              setOpenSellerPublicProfileDialog(true)
+                              openUserPublicProfile({
+                                userId: sellerPublicProfile.id,
+                                callbacks: {
+                                  onAssetPackOpen,
+                                  onGameTemplateOpen,
+                                },
+                              })
                             }
                             href="#"
                           >
@@ -633,28 +636,6 @@ const PrivateGameTemplateInformationPage = ({
               </ScrollView>
             </Column>
           ) : null}
-          {openSellerPublicProfileDialog && (
-            <PublicProfileDialog
-              userId={sellerId}
-              onClose={() => setOpenSellerPublicProfileDialog(false)}
-              onGameTemplateOpen={
-                onGameTemplateOpen
-                  ? (gameTemplate: PrivateGameTemplateListingData) => {
-                      setOpenSellerPublicProfileDialog(false);
-                      onGameTemplateOpen(gameTemplate);
-                    }
-                  : undefined
-              }
-              onAssetPackOpen={
-                onAssetPackOpen
-                  ? (assetPack: PrivateAssetPackListingData) => {
-                      setOpenSellerPublicProfileDialog(false);
-                      onAssetPackOpen(assetPack);
-                    }
-                  : undefined
-              }
-            />
-          )}
           {displayPasswordPrompt && (
             <PasswordPromptDialog
               onApply={onWillBuyWithCredits}

newIDE/app/src/GameDashboard/Feedbacks/FeedbackCard.js

@@ -26,14 +26,14 @@ import {
 import { type AuthenticatedUser } from '../../Profile/AuthenticatedUserContext';
 import { useOptimisticState } from '../../Utils/UseOptimisticState';
 import Link from '../../UI/Link';
-import PublicProfileDialog from '../../Profile/PublicProfileDialog';
 import CheckCircleFilled from '../../UI/CustomSvgIcons/CheckCircleFilled';
 import CheckCircle from '../../UI/CustomSvgIcons/CheckCircle';
 import Dislike from '../../UI/CustomSvgIcons/Dislike';
 import Like from '../../UI/CustomSvgIcons/Like';
 import Danger from '../../UI/CustomSvgIcons/Danger';
 import Heart from '../../UI/CustomSvgIcons/Heart';
 import Paper from '../../UI/Paper';
+import PublicProfileContext from '../../Profile/PublicProfileContext';
 
 const styles = {
   textComment: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' },
@@ -94,11 +94,8 @@ const FeedbackCard = ({
   const { getAuthorizationHeader, profile } = authenticatedUser;
   const ratings = getRatings(comment.ratings);
   const theme = React.useContext(GDevelopThemeContext);
-
-  const [
-    openPlayerPublicProfileDialog,
-    setOpenPlayerPublicProfileDialog,
-  ] = React.useState<boolean>(false);
+  const { openUserPublicProfile } = React.useContext(PublicProfileContext);
+  const commenterPlayerId = comment.playerId;
 
   const processComment = async (newProcessed: boolean, i18n: I18nType) => {
     if (!profile) return;
@@ -283,9 +280,11 @@ const FeedbackCard = ({
                       )}
                     </Text>
                   )}
-                  {comment.playerId ? (
+                  {commenterPlayerId ? (
                     <Link
-                      onClick={() => setOpenPlayerPublicProfileDialog(true)}
+                      onClick={() =>
+                        openUserPublicProfile({ userId: commenterPlayerId })
+                      }
                       href="#"
                     >
                       <Text noMargin color="inherit">
@@ -324,12 +323,6 @@ const FeedbackCard = ({
               </Text>
             </Column>
           </Card>
-          {comment.playerId && openPlayerPublicProfileDialog && (
-            <PublicProfileDialog
-              userId={comment.playerId}
-              onClose={() => setOpenPlayerPublicProfileDialog(false)}
-            />
-          )}
         </>
       )}
     </I18n>

newIDE/app/src/MainFrame/EditorContainers/HomePage/HomePageMenu.js

@@ -24,6 +24,8 @@ import AuthenticatedUserContext from '../../../Profile/AuthenticatedUserContext'
 import { isNativeMobileApp } from '../../../Utils/Platform';
 
 export const styles = {
+  // Ensure it's always interactive, even when another iframe disable pointer events.
+  container: { pointerEvents: 'all', display: 'flex' },
   drawerContent: {
     height: '100%',
     width: 250,
@@ -189,7 +191,7 @@ export const HomePageMenu = ({
   ];
 
   return (
-    <>
+    <div style={styles.container}>
       <HomePageMenuBar
         activeTab={activeTab}
         onOpenAbout={onOpenAbout}
@@ -257,6 +259,6 @@ export const HomePageMenu = ({
           </Column>
         </Line>
       </Drawer>
-    </>
+    </div>
   );
 };