Merge branch 'main' of github.com:Heroic-Games-Launcher/HeroicGamesLa…

…uncher into ui/settings_tabs

.github/workflows/build-prs-linux.yml

@@ -22,6 +22,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
       - name: Build artifacts.

.github/workflows/build-prs-mac.yml

@@ -20,6 +20,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
       - name: Build artifacts.

.github/workflows/build.yml

@@ -18,6 +18,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
       - name: Build artifacts.
@@ -39,6 +41,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
       - name: Upload Snap to Edge Channel.
@@ -64,6 +68,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
       - name: Build artifacts.

.github/workflows/codecheck.yml

@@ -14,6 +14,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
       - name: Check Typescript syntax

.github/workflows/lint.yml

@@ -14,6 +14,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
       - name: Lint code.

.github/workflows/test-e2e-dev.yml

@@ -15,6 +15,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
         env:
@@ -32,6 +34,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
         env:

.github/workflows/test-e2e-packaged.yml

@@ -18,6 +18,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
         env:
@@ -35,6 +37,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
         env:

.github/workflows/test.yml

@@ -15,6 +15,8 @@ jobs:
         with:
           node-version: '18'
           cache: 'yarn'
+      - name: Install node-gyp.
+        run: yarn global add node-gyp
       - name: Install modules.
         run: yarn install --frozen-lockfile
       - name: Test

public/locales/en/translation.json

@@ -256,6 +256,7 @@
         "custom_themes_path": "Do not use CSS files from untrusted sources. When in doubt, ask for a review in our Discord channel.",
         "custom_themes_wiki": "Check the Wiki for more details on adding custom themes. Click here.",
         "disable_logs": "Toggle this checkbox ON to disable most of the writes to log files (critical information is always logged). Make sure to turn OFF this setting before reporting any issue.",
+        "disablePlaytimeSync": "Disables playtime synchronization with given store's servers (currently only GOG is supported)",
         "dxvk": "DXVK is a Vulkan-based translational layer for DirectX 9, 10 and 11 games. Enabling may improve compatibility. Might cause issues especially for older DirectX games.",
         "dxvkfpslimit": "Sets a frame rate cap for DXVK games",
         "dxvknvapi": "DXVK-NVAPI is an implementation of NVAPI built on top of DXVK and the linux native NVAPI, it allows for the usage of DLSS on Nvidia GPUs.",
@@ -500,6 +501,7 @@
         "defaultWinePrefix": "Set Folder for new Wine Prefixes",
         "disable_controller": "Disable Heroic navigation using controller",
         "disable_logs": "Disable Logs",
+        "disablePlaytimeSync": "Disable playtime synchronization",
         "discordRPC": "Enable Discord Rich Presence",
         "download-no-https": "Download games without HTTPS (useful for CDNs e.g. LanCache)",
         "dxvkfpslimit": "Limit FPS (DX9, 10 and 11)",
@@ -528,7 +530,7 @@
         "esync": "Enable Esync",
         "exit-to-tray": "Exit to System Tray",
         "experimental_features": {
-            "enableNewShinyFeature": "New shiny feature"
+            "enableNewDesign": "New design"
         },
         "FsrSharpnessStrenght": "FSR Sharpness Strength",
         "fsync": "Enable Fsync",

src/backend/anticheat/utils.ts

@@ -1,4 +1,4 @@
-import { anticheatDataPath, isWindows } from '../constants'
+import { anticheatDataPath, isMac, isWindows } from '../constants'
 import * as axios from 'axios'
 import { logInfo, LogPrefix, logWarning } from '../logger/logger'
 import { readFileSync, writeFileSync } from 'graceful-fs'
@@ -9,10 +9,12 @@ async function downloadAntiCheatData() {
   if (isWindows) return
 
   runOnceWhenOnline(async () => {
+    const url = isMac
+      ? 'https://raw.githubusercontent.com/Heroic-Games-Launcher/MacAnticheatData/main/games.json'
+      : 'https://raw.githubusercontent.com/Starz0r/AreWeAntiCheatYet/HEAD/games.json'
+
     try {
-      const { data } = await axios.default.get(
-        'https://raw.githubusercontent.com/Starz0r/AreWeAntiCheatYet/HEAD/games.json'
-      )
+      const { data } = await axios.default.get(url)
       writeFileSync(anticheatDataPath, JSON.stringify(data, null, 2))
       logInfo(`AreWeAntiCheatYet data downloaded`, LogPrefix.Backend)
     } catch (error) {

src/backend/main.ts

@@ -336,8 +336,13 @@ if (!gotTheLock) {
 
     // Make sure lock is not present when starting up
     playtimeSyncQueue.delete('lock')
-    runOnceWhenOnline(syncQueuedPlaytimeGOG)
-
+    if (!settings.disablePlaytimeSync) {
+      runOnceWhenOnline(syncQueuedPlaytimeGOG)
+    } else {
+      logDebug('Skipping playtime sync queue upload - playtime sync disabled', {
+        prefix: LogPrefix.Backend
+      })
+    }
     await i18next.use(Backend).init({
       backend: {
         addPath: path.join(publicDir, 'locales', '{{lng}}', '{{ns}}'),
@@ -1092,10 +1097,17 @@ ipcMain.handle(
       sessionPlaytime + tsStore.get(`${appName}.totalPlayed`, 0)
     tsStore.set(`${appName}.totalPlayed`, Math.floor(totalPlaytime))
 
+    const { disablePlaytimeSync } = GlobalConfig.get().getSettings()
     if (runner === 'gog') {
-      await updateGOGPlaytime(appName, startPlayingDate, finishedPlayingDate)
+      if (!disablePlaytimeSync) {
+        await updateGOGPlaytime(appName, startPlayingDate, finishedPlayingDate)
+      } else {
+        logWarning(
+          'Posting playtime session to server skipped - playtime sync disabled',
+          { prefix: LogPrefix.Backend }
+        )
+      }
     }
-
     await addRecentGame(game)
 
     if (autoSyncSaves && isOnline()) {
@@ -1670,6 +1682,10 @@ ipcMain.on('processShortcut', async (e, combination: string) => {
 ipcMain.handle(
   'getPlaytimeFromRunner',
   async (e, runner, appName): Promise<number | undefined> => {
+    const { disablePlaytimeSync } = GlobalConfig.get().getSettings()
+    if (disablePlaytimeSync) {
+      return
+    }
     if (runner === 'gog') {
       return getGOGPlaytime(appName)
     }

src/backend/storeManagers/gog/games.ts

@@ -992,7 +992,9 @@ export async function updateGOGPlaytime(
     return
   }
 
-  const response = await postPlaytimeSession({ ...data, appName })
+  const response = await postPlaytimeSession({ ...data, appName }).catch(
+    () => null
+  )
 
   if (!response || response.status !== 201) {
     logError('Failed to post session', { prefix: LogPrefix.Gog })

src/backend/storeManagers/gog/library.ts

@@ -674,6 +674,9 @@ export async function gogToUnifiedInfo(
     art_square: info.game.vertical_cover.url_format
       .replace('{formatter}', '')
       .replace('{ext}', 'jpg'),
+    art_background: info.game.background.url_format
+      .replace('{formatter}', '')
+      .replace('{ext}', 'webp'),
     cloud_save_enabled: false,
     extra: {
       about: { description: info.summary['*'], shortDescription: '' },

src/common/types.ts

@@ -44,7 +44,7 @@ export type Release = {
 }
 
 export type ExperimentalFeatures = {
-  enableNewShinyFeature: boolean // remove this when adding a real experimental feature
+  enableNewDesign: boolean
 }
 
 export interface AppSettings extends GameSettings {
@@ -64,6 +64,7 @@ export interface AppSettings extends GameSettings {
   defaultSteamPath: string
   defaultWinePrefix: string
   disableController: boolean
+  disablePlaytimeSync: boolean
   disableLogs: boolean
   discordRPC: boolean
   downloadNoHttps: boolean
@@ -108,6 +109,7 @@ export interface GameInfo {
   app_name: string
   art_cover: string
   art_logo?: string
+  art_background?: string
   art_square: string
   cloud_save_enabled?: boolean
   developer?: string

src/frontend/App.css

@@ -112,6 +112,15 @@ svg.disabled {
   color: var(--background);
 }
 
+img.loading {
+  opacity: 0;
+}
+
+img.loaded {
+  transition: opacity 500ms;
+  opacity: 1;
+}
+
 .react-contextmenu--visible {
   background-color: var(--input-background);
   padding: var(--space-md) var(--space-lg);

src/frontend/App.tsx

@@ -19,13 +19,15 @@ import ExternalLinkDialog from './components/UI/ExternalLinkDialog'
 import classNames from 'classnames'
 
 function App() {
-  const { isSettingsModalOpen, isRTL } = useContext(ContextProvider)
+  const { isSettingsModalOpen, isRTL, experimentalFeatures } =
+    useContext(ContextProvider)
 
   return (
     <div
       id="app"
       className={classNames('App', {
-        isRTL
+        isRTL,
+        oldDesign: !experimentalFeatures.enableNewDesign
       })}
     >
       <HashRouter>

src/frontend/components/UI/Anticheat/index.scss

@@ -11,7 +11,8 @@
   .statusInfo {
     flex-direction: column;
     display: flex;
-    padding-inline-start: var(--space-md);
+    margin-inline: auto;
+    text-align: start;
   }
 }
 
@@ -23,7 +24,8 @@
   margin: 0 0 var(--space-md);
 }
 
-.anticheatInfo.Denied {
+.anticheatInfo.Denied,
+.anticheatInfo.Unknown {
   border: 2px solid var(--anticheat-denied);
   .statusIcon path {
     fill: var(--anticheat-denied);

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

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react'
+import React, { MouseEvent, useContext } from 'react'
 import { AntiCheatInfo } from 'common/types'
 import { createNewWindow } from 'frontend/helpers'
 
@@ -8,6 +8,7 @@ import { ReactComponent as AllowedIcon } from 'frontend/assets/rounded_checkmark
 
 import './index.scss'
 import { useTranslation } from 'react-i18next'
+import ContextProvider from 'frontend/state/ContextProvider'
 
 type Props = {
   anticheatInfo: AntiCheatInfo | null
@@ -17,12 +18,15 @@ const awacyUrl = 'https://areweanticheatyet.com/'
 
 export default function Anticheat({ anticheatInfo }: Props) {
   const { t } = useTranslation()
+  const { platform } = useContext(ContextProvider)
 
   if (!anticheatInfo) {
     return null
   }
 
-  const mayNotWork = ['Denied', 'Broken'].includes(anticheatInfo.status)
+  const mayNotWork = ['Denied', 'Broken', 'Unknown'].includes(
+    anticheatInfo.status
+  )
 
   const latestUpdate =
     anticheatInfo.reference ||
@@ -81,12 +85,14 @@ export default function Anticheat({ anticheatInfo }: Props) {
           )}
         </span>
 
-        <span>
-          <b>{t('anticheat.source', 'Source')}:</b>&nbsp;
-          <a href="#" onClick={onAWACYClick}>
-            AreWeAntiCheatYet
-          </a>
-        </span>
+        {platform === 'linux' && (
+          <span>
+            <b>{t('anticheat.source', 'Source')}:</b>&nbsp;
+            <a href="#" onClick={onAWACYClick}>
+              AreWeAntiCheatYet
+            </a>
+          </span>
+        )}
       </div>
     </div>
   )

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

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 interface CachedImageProps {
   src: string
   fallback?: string
+  className?: string
 }
 
 type Props = React.ImgHTMLAttributes<HTMLImageElement> & CachedImageProps
@@ -11,6 +12,7 @@ const CachedImage = (props: Props) => {
   const [useCache, setUseCache] = useState(
     props.src?.startsWith('http') || false
   )
+  const [loaded, setLoaded] = useState(false)
   const [useFallback, setUseFallback] = useState(false)
 
   const onError = () => {
@@ -29,7 +31,16 @@ const CachedImage = (props: Props) => {
   let src = useFallback ? props.fallback : props.src
   src = useCache ? `imagecache://${src}` : src
 
-  return <img loading="lazy" {...props} src={src} onError={onError} />
+  return (
+    <img
+      loading="lazy"
+      onLoad={() => setLoaded(true)}
+      {...props}
+      src={src}
+      onError={onError}
+      className={`${props.className} ${loaded ? 'loaded' : 'loading'}`}
+    />
+  )
 }
 
 export default CachedImage