[FEAT] Add support for Actions when navigating to GamePage (#1086)

* feat: add support for actions when navigating to gamepage

* feat: update download manager action buttons

* types: update all types with actions

* fix: import

* fix: double launching

* fix: pr comments

* fix: type

* Update src/frontend/screens/Game/GamePage/index.tsx

Co-authored-by: Brett <27568879+BrettCleary@users.noreply.github.com>

* fix: installPLatform undefined

* types: export/import from common/types

* reverte before merge: add test url

---------

Co-authored-by: Flavio F Lima <flavioislima@users.noreply.github.com>
Co-authored-by: Brett <27568879+BrettCleary@users.noreply.github.com>

Author: flavioislima

package.json

@@ -171,7 +171,7 @@
     "@hyperplay/check-disk-space": "^3.5.2",
     "@hyperplay/quests-ui": "^0.0.21",
     "@hyperplay/ui": "^1.7.18",
-    "@hyperplay/utils": "^0.0.16",
+    "@hyperplay/utils": "^0.2.4",
     "@mantine/carousel": "^7.12.0",
     "@mantine/core": "^7.12.0",
     "@mantine/dropzone": "^7.12.0",

src/backend/api/library.ts

@@ -5,7 +5,8 @@ import {
   LaunchParams,
   ImportGameArgs,
   GameStatus,
-  GameInfo
+  GameInfo,
+  GamePageActions
 } from 'common/types'
 
 export const openDialog = async (args: Electron.OpenDialogOptions) =>
@@ -58,7 +59,11 @@ export const handleGameStatus = (
 }
 
 export const handleGoToGamePage = (
-  onChange: (e: Electron.IpcRendererEvent, gameId: string) => void
+  onChange: (
+    e: Electron.IpcRendererEvent,
+    gameId: string,
+    action: GamePageActions
+  ) => void
 ) => {
   ipcRenderer.on('goToGamePage', onChange)
   return () => {

src/backend/hyperplay_store_preload.ts

@@ -1,3 +1,4 @@
+import { GamePageActions } from 'common/types'
 import { contextBridge, ipcRenderer } from 'electron'
 
 contextBridge.exposeInMainWorld('api', {
@@ -18,6 +19,7 @@ contextBridge.exposeInMainWorld('api', {
   apiVersion: 1,
   appIsInLibrary: async (gameId: string) =>
     ipcRenderer.invoke('appIsInLibrary', gameId, 'hyperplay'),
-  goToGamePage: (gameId: string) => ipcRenderer.send('goToGamePage', gameId),
+  goToGamePage: (gameId: string, action: GamePageActions) =>
+    ipcRenderer.send('goToGamePage', gameId, action),
   navigate: (route: string) => ipcRenderer.send('navigate', route)
 })

src/backend/main.ts

@@ -904,8 +904,8 @@ ipcMain.handle('appIsInLibrary', async (event, appName, runner) => {
   return HyperPlayGameManager.appIsInLibrary(appName)
 })
 
-ipcMain.on('goToGamePage', async (event, appName) => {
-  return sendFrontendMessage('goToGamePage', appName)
+ipcMain.on('goToGamePage', async (event, gameId, action) => {
+  return sendFrontendMessage('goToGamePage', gameId, action)
 })
 
 ipcMain.on('navigate', async (event, appName) => {

src/backend/storeManagers/hyperplay/utils.ts

@@ -219,15 +219,15 @@ export function refreshGameInfoFromHpRelease(
             : data.project_name
         }
       ],
-      storeUrl: `https://store.hyperplay.xyz/game/${data.project_name}`
+      storeUrl: `https://hyperplay-store-git-feat-gamepageactions-hyperplay.vercel.app/game/${data.project_name}`
     },
     art_square: newArtSquare !== undefined ? newArtSquare : 'fallback',
     art_cover: newArtCover !== undefined ? newArtCover : 'fallback',
     developer: data.account_meta.name || data.account_name,
     version: latestVersion,
     is_windows_native: hasWindowsNativeBuild,
     channels: channelsMap,
-    store_url: `https://store.hyperplay.xyz/game/${data.project_name}`,
+    store_url: `https://hyperplay-store-git-feat-gamepageactions-hyperplay.vercel.app/game/${data.project_name}`,
     wineSupport: data.project_meta.wine_support,
     description: newDescription,
     v: '1',

src/common/typedefs/ipcBridge.d.ts

@@ -95,7 +95,7 @@ interface HyperPlaySyncIPCFunctions {
   killOverlay: () => void
   toggleOverlay: () => void
   authConnected: () => void
-  goToGamePage: (appName: string) => void
+  goToGamePage: (gameId: string, action: GamePageActions) => void
   authDisconnected: () => void
   otp: (otp: string) => void
   navigate: (route: string) => void

src/common/types.ts

@@ -993,3 +993,5 @@ export interface PointsCollection {
   symbol: string
   image: string
 }
+
+export type { GamePageActions } from '@hyperplay/utils'

src/frontend/components/UI/DownloadToastManager/index.tsx

@@ -117,7 +117,6 @@ export default function DownloadToastManager() {
   }, [isExtracting])
 
   if (currentElement === undefined) {
-    console.debug('no downloads active in download toast manager')
     return <></>
   }
 

src/frontend/components/UI/WebviewControls/index.tsx

@@ -86,7 +86,10 @@ export default function WebviewControls({
   )
 
   const _url = url !== '' ? new URL(url) : null
-  const allowList = ['store.hyperplay.xyz', 'docs.hyperplay.xyz']
+  const allowList = [
+    'hyperplay-store-git-feat-gamepageactions-hyperplay.vercel.app',
+    'docs.hyperplay.xyz'
+  ]
 
   if (_url && allowList.includes(_url.host)) return null
 

src/frontend/constants.ts

@@ -1,5 +1,6 @@
 export const EPIC_LOGIN_URL = 'https://legendary.gl/epiclogin'
-export const HYPERPLAY_STORE_URL = 'https://store.hyperplay.xyz?isLauncher=true'
+export const HYPERPLAY_STORE_URL =
+  'https://hyperplay-store-git-feat-gamepageactions-hyperplay.vercel.app?isLauncher=true'
 export const EPIC_STORE_URL = 'https://www.epicgames.com/store'
 export const GOG_STORE_URL = `https://gog.com`
 export const WIKI_URL = 'https://docs.hyperplay.xyz/'

src/frontend/screens/DownloadManager/components/DownloadManagerItem/index.tsx

@@ -6,7 +6,8 @@ import {
   DMQueueElement,
   DownloadManagerState,
   GameInfo,
-  HyperPlayInstallInfo
+  HyperPlayInstallInfo,
+  GamePageActions
 } from 'common/types'
 import { CachedImage, SvgButton } from 'frontend/components/UI'
 import {
@@ -130,20 +131,21 @@ const DownloadManagerItem = observer(({ element, current, state }: Props) => {
   const canceled = status === 'error' || (status === 'abort' && !current)
   const isExtracting = gameProgressStatus === 'extracting'
 
-  const goToGamePage = () => {
+  const goToGamePage = (action?: GamePageActions) => {
     if (is_dlc) {
       return
     }
     return navigate(`/gamepage/${runner}/${appName}`, {
-      state: { fromDM: true, gameInfo: gameInfo }
+      state: { fromDM: true, gameInfo: gameInfo, action }
     })
   }
 
   // using one element for the different states so it doesn't
   // lose focus from the button when using a game controller
-  const handleMainActionClick = () => {
+  const handleMainActionClick = async () => {
+    const action = finished ? 'launch' : 'install'
     if (finished || canceled) {
-      return goToGamePage()
+      return goToGamePage(action)
     }
 
     // gameInfo must be defined in order to get folder name for stop installation modal

src/frontend/screens/Game/GamePage/index.tsx

@@ -1,6 +1,6 @@
 import './index.scss'
 
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 
 import {
   BackArrowOutlinedCircled,
@@ -31,7 +31,8 @@ import {
   HyperPlayInstallInfo,
   InstallProgress,
   Runner,
-  WineInstallation
+  WineInstallation,
+  GamePageActions
 } from 'common/types'
 import { LegendaryInstallInfo } from 'common/types/legendary'
 import { GogInstallInfo } from 'common/types/gog'
@@ -73,6 +74,7 @@ type locationState = {
   fromDM?: boolean
   gameInfo: GameInfo
   fromQuests?: boolean
+  action: GamePageActions
 }
 
 export default observer(function GamePage(): JSX.Element | null {
@@ -83,7 +85,7 @@ export default observer(function GamePage(): JSX.Element | null {
   const { t } = useTranslation('gamepage')
   const { t: t2 } = useTranslation()
 
-  const { gameInfo: locationGameInfo } = location.state
+  const { gameInfo: locationGameInfo, action } = location.state
 
   const [showModal, setShowModal] = useState({ game: '', show: false })
 
@@ -142,6 +144,9 @@ export default observer(function GamePage(): JSX.Element | null {
   const notSupportedGame =
     gameInfo.runner !== 'sideload' && gameInfo.thirdPartyManagedApp === 'Origin'
   const isOffline = connectivity.status !== 'online'
+  const installPlatform = gameInfo.install?.platform
+  const isBrowserGame =
+    installPlatform === 'Browser' || installPlatform === 'web'
 
   const backRoute = getBackRoute(location.state)
 
@@ -153,6 +158,23 @@ export default observer(function GamePage(): JSX.Element | null {
     gameInstallInfo?.manifest?.download_size || 0
   )
 
+  const hasRun = useRef(false)
+  useEffect(() => {
+    if (!action || hasRun.current) return
+    hasRun.current = true
+
+    if (action === 'install') {
+      return setShowModal({ game: appName, show: true })
+    }
+    if (action === 'launch') {
+      if (isBrowserGame || gameInfo.is_installed) {
+        handlePlay()()
+      } else {
+        return setShowModal({ game: appName, show: true })
+      }
+    }
+  }, [action])
+
   // Track the screen view once each time the appName, gameInfo or runner changes
   useEffect(() => {
     window.api.trackScreen('Game Page', {
@@ -330,7 +352,6 @@ export default observer(function GamePage(): JSX.Element | null {
     const isLinux = ['linux', 'linux_amd64', 'linux_arm64']
     const isMacNative = isMac.includes(installPlatform ?? '')
     const isLinuxNative = isLinux.includes(installPlatform ?? '')
-    const isBrowserGame = gameInfo.browserUrl
     const isNative = isWin || isMacNative || isLinuxNative || isBrowserGame
     const isHyperPlayGame = runner === 'hyperplay'
 
@@ -951,6 +972,7 @@ export default observer(function GamePage(): JSX.Element | null {
     })
   }
 })
+
 function getCurrentProgress(
   progress: InstallProgress,
   percent: number | undefined,

src/frontend/screens/WebView/index.tsx

@@ -32,7 +32,10 @@ import { getGameInfo } from 'frontend/helpers'
 
 function urlIsHpUrl(url: string) {
   const urlToTest = new URL(url)
-  return urlToTest.hostname === 'store.hyperplay.xyz'
+  return (
+    urlToTest.hostname ===
+    'hyperplay-store-git-feat-gamepageactions-hyperplay.vercel.app'
+  )
 }
 
 function shouldInjectProvider(url: string) {
@@ -131,10 +134,10 @@ function WebView() {
     }
 
     const removeHandleGoToGamePage = window.api.handleGoToGamePage(
-      async (_, gameId) => {
+      async (_, gameId, action) => {
         const gameInfo = await getGameInfo(gameId, 'hyperplay')
         navigate(`/gamepage/hyperplay/${gameId}`, {
-          state: { gameInfo, fromDM: false }
+          state: { gameInfo, fromDM: false, action }
         })
       }
     )

yarn.lock

@@ -1335,20 +1335,20 @@
   dependencies:
     bignumber.js "^9.1.2"
 
-"@hyperplay/utils@^0.0.16":
-  version "0.0.16"
-  resolved "https://registry.yarnpkg.com/@hyperplay/utils/-/utils-0.0.16.tgz#92520b12b2870260c34d7e76195713a5b0be2acc"
-  integrity sha512-2k0kTePgNfgnW2kDM5ZkQv1Q+K24EQRipyr5ECgNtaWmJrF11It/OZ0Yjsdr+cK/zEiFmCCNWet+kqGqGt80JQ==
-  dependencies:
-    bignumber.js "^9.1.2"
-
 "@hyperplay/utils@^0.0.9":
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/@hyperplay/utils/-/utils-0.0.9.tgz#80836cfde5c4d63e41f5df809ae2e80314600c5a"
   integrity sha512-gMAa6gdFXfLrJUjPAD2is06qNo4MHzpb6Cbzt4xfNd7wI9chOblQ+piwTI1oFWs44GgfacsMq6i5esNly3hELg==
   dependencies:
     bignumber.js "^9.1.2"
 
+"@hyperplay/utils@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@hyperplay/utils/-/utils-0.2.4.tgz#17621d43f0d92a3d22de87dc08d96b0f2db2291c"
+  integrity sha512-aQLyh8xpVDK+R0jvHrU6eHtmcMu18PP+33bFlGvrqfLRhHfN7xmThrCfPzueWSP3u4MDQku6lQT3bYzMrATjvQ==
+  dependencies:
+    bignumber.js "^9.1.2"
+
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"