Merge pull request #1268 from hydralauncher/fix/migrating-hltb

Fix/migrating hltb

.env.example

@@ -1,4 +1,3 @@
 MAIN_VITE_API_URL=API_URL
 MAIN_VITE_AUTH_URL=AUTH_URL
 MAIN_VITE_STEAMGRIDDB_API_KEY=YOUR_API_KEY
-RENDERER_VITE_INTERCOM_APP_ID=YOUR_APP_ID

.github/workflows/build.yml

@@ -22,16 +22,6 @@ jobs:
         with:
           node-version: 20.18.0
 
-      - name: Configure AWS credentials
-        uses: aws-actions/configure-aws-credentials@v2
-        with:
-          aws-access-key-id: ${{ secrets.R2_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.R2_SECRET_ACCESS_KEY }}
-          aws-region: ${{ env.AWS_REGION }}
-
-      - name: Push build to R2
-        run: aws s3 sync ./docs s3://${{ vars.BUILDS_BUCKET_NAME }}
-
       - name: Install dependencies
         run: yarn
 
@@ -58,6 +48,7 @@ jobs:
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_STAGING_CHECKOUT_URL }}
           MAIN_VITE_ANALYTICS_API_URL: ${{ vars.MAIN_VITE_ANALYTICS_API_URL }}
           RENDERER_VITE_INTERCOM_APP_ID: ${{ vars.RENDERER_VITE_INTERCOM_APP_ID }}
+          RENDERER_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.RENDERER_VITE_EXTERNAL_RESOURCES_URL }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build Windows
@@ -69,6 +60,7 @@ jobs:
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_STAGING_CHECKOUT_URL }}
           MAIN_VITE_ANALYTICS_API_URL: ${{ vars.MAIN_VITE_ANALYTICS_API_URL }}
           RENDERER_VITE_INTERCOM_APP_ID: ${{ vars.RENDERER_VITE_INTERCOM_APP_ID }}
+          RENDERER_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.RENDERER_VITE_EXTERNAL_RESOURCES_URL }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Create artifact

.github/workflows/release.yml

@@ -47,6 +47,7 @@ jobs:
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_CHECKOUT_URL }}
           MAIN_VITE_ANALYTICS_API_URL: ${{ vars.MAIN_VITE_ANALYTICS_API_URL }}
           RENDERER_VITE_INTERCOM_APP_ID: ${{ vars.RENDERER_VITE_INTERCOM_APP_ID }}
+          RENDERER_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.RENDERER_VITE_EXTERNAL_RESOURCES_URL }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Build Windows
         if: matrix.os == 'windows-latest'
@@ -57,6 +58,7 @@ jobs:
           MAIN_VITE_CHECKOUT_URL: ${{ vars.MAIN_VITE_CHECKOUT_URL }}
           MAIN_VITE_ANALYTICS_API_URL: ${{ vars.MAIN_VITE_ANALYTICS_API_URL }}
           RENDERER_VITE_INTERCOM_APP_ID: ${{ vars.RENDERER_VITE_INTERCOM_APP_ID }}
+          RENDERER_VITE_EXTERNAL_RESOURCES_URL: ${{ vars.RENDERER_VITE_EXTERNAL_RESOURCES_URL }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Create artifact
         uses: actions/upload-artifact@v4

src/main/events/catalogue/get-how-long-to-beat.ts

@@ -1,23 +1,21 @@
-import type { HowLongToBeatCategory } from "@types";
-import { getHowLongToBeatGame, searchHowLongToBeat } from "@main/services";
+import type { GameShop, HowLongToBeatCategory } from "@types";
 
 import { registerEvent } from "../register-event";
-import { formatName } from "@shared";
+import { HydraApi } from "@main/services";
 
 const getHowLongToBeat = async (
   _event: Electron.IpcMainInvokeEvent,
-  title: string
+  objectId: string,
+  shop: GameShop
 ): Promise<HowLongToBeatCategory[] | null> => {
-  const response = await searchHowLongToBeat(title);
-
-  const game = response.data.find((game) => {
-    return formatName(game.game_name) === formatName(title);
+  const params = new URLSearchParams({
+    objectId,
+    shop,
   });
 
-  if (!game) return null;
-  const howLongToBeat = await getHowLongToBeatGame(String(game.game_id));
-
-  return howLongToBeat;
+  return HydraApi.get(`/games/how-long-to-beat?${params.toString()}`, null, {
+    needsAuth: false,
+  });
 };
 
 registerEvent("getHowLongToBeat", getHowLongToBeat);

src/main/services/index.ts

@@ -4,7 +4,6 @@ export * from "./steam-250";
 export * from "./steam-grid";
 export * from "./window-manager";
 export * from "./download";
-export * from "./how-long-to-beat";
 export * from "./process-watcher";
 export * from "./main-loop";
 export * from "./hydra-api";

src/preload/index.ts

@@ -42,8 +42,8 @@ contextBridge.exposeInMainWorld("electron", {
   getGameShopDetails: (objectId: string, shop: GameShop, language: string) =>
     ipcRenderer.invoke("getGameShopDetails", objectId, shop, language),
   getRandomGame: () => ipcRenderer.invoke("getRandomGame"),
-  getHowLongToBeat: (title: string) =>
-    ipcRenderer.invoke("getHowLongToBeat", title),
+  getHowLongToBeat: (objectId: string, shop: GameShop) =>
+    ipcRenderer.invoke("getHowLongToBeat", objectId, shop),
   getGames: (take?: number, skip?: number) =>
     ipcRenderer.invoke("getGames", take, skip),
   searchGameRepacks: (query: string) =>

src/renderer/index.html

@@ -6,7 +6,7 @@
     <title>Hydra</title>
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src *; style-src 'self' 'unsafe-inline'; img-src 'self' data: local: *; media-src 'self' local: data: *; connect-src *; font-src *;"
+      content="default-src 'self' 'unsafe-inline' *;"
     />
   </head>
   <body>

src/renderer/src/app.tsx

@@ -2,8 +2,6 @@ import { useCallback, useContext, useEffect, useRef } from "react";
 
 import { Sidebar, BottomPanel, Header, Toast } from "@renderer/components";
 
-import Intercom from "@intercom/messenger-js-sdk";
-
 import {
   useAppDispatch,
   useAppSelector,
@@ -36,10 +34,6 @@ export interface AppProps {
   children: React.ReactNode;
 }
 
-Intercom({
-  app_id: import.meta.env.RENDERER_VITE_INTERCOM_APP_ID,
-});
-
 export function App() {
   const contentRef = useRef<HTMLDivElement>(null);
   const { updateLibrary, library } = useLibrary();
@@ -120,12 +114,33 @@ export function App() {
       dispatch(setProfileBackground(profileBackground));
     }
 
-    fetchUserDetails().then((response) => {
-      if (response) {
-        updateUserDetails(response);
-        syncFriendRequests();
-      }
-    });
+    fetchUserDetails()
+      .then((response) => {
+        if (response) {
+          updateUserDetails(response);
+          syncFriendRequests();
+
+          const $existingScript = document.getElementById("user-details");
+
+          const content = `window.userDetails = ${JSON.stringify(response)};`;
+
+          if ($existingScript) {
+            $existingScript.textContent = content;
+          } else {
+            const $script = document.createElement("script");
+            $script.id = "user-details";
+            $script.type = "text/javascript";
+            $script.textContent = content;
+
+            document.head.appendChild($script);
+          }
+        }
+      })
+      .finally(() => {
+        const $script = document.createElement("script");
+        $script.src = `${import.meta.env.RENDERER_VITE_EXTERNAL_RESOURCES_URL}?t=${Date.now()}`;
+        document.head.appendChild($script);
+      });
   }, [fetchUserDetails, syncFriendRequests, updateUserDetails, dispatch]);
 
   const onSignIn = useCallback(() => {
@@ -215,9 +230,7 @@ export function App() {
 
   useEffect(() => {
     new MutationObserver(() => {
-      const modal = document.body.querySelector(
-        "[role=dialog]:not([data-intercom-frame='true'])"
-      );
+      const modal = document.body.querySelector("[data-hydra-dialog]");
 
       dispatch(toggleDraggingDisabled(Boolean(modal)));
     }).observe(document.body, {

src/renderer/src/components/modal/modal.tsx

@@ -107,6 +107,7 @@ export function Modal({
         aria-labelledby={title}
         aria-describedby={description}
         ref={modalContentRef}
+        data-hydra-dialog
       >
         <div className={styles.modalHeader}>
           <div style={{ display: "flex", gap: 4, flexDirection: "column" }}>

src/renderer/src/components/sidebar/sidebar.tsx

@@ -22,8 +22,6 @@ import { SidebarProfile } from "./sidebar-profile";
 import { sortBy } from "lodash-es";
 import { CommentDiscussionIcon } from "@primer/octicons-react";
 
-import { show, update } from "@intercom/messenger-js-sdk";
-
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_INITIAL_WIDTH = 250;
 const SIDEBAR_MAX_WIDTH = 450;
@@ -50,23 +48,7 @@ export function Sidebar() {
     return sortBy(library, (game) => game.title);
   }, [library]);
 
-  const { userDetails, hasActiveSubscription } = useUserDetails();
-
-  useEffect(() => {
-    if (userDetails) {
-      window.electron.isStaging().then((isStaging) => {
-        update({
-          user_id: userDetails.id + (isStaging ? "-staging" : ""),
-          name: userDetails.displayName,
-          Username: userDetails.username,
-          email: userDetails.email ?? undefined,
-          Email: userDetails.email,
-          "Subscription expiration date": userDetails?.subscription?.expiresAt,
-          "Payment status": userDetails?.subscription?.status,
-        });
-      });
-    }
-  }, [userDetails, hasActiveSubscription]);
+  const { hasActiveSubscription } = useUserDetails();
 
   const { lastPacket, progress } = useDownload();
 
@@ -269,7 +251,11 @@ export function Sidebar() {
       </div>
 
       {hasActiveSubscription && (
-        <button type="button" className={styles.helpButton} onClick={show}>
+        <button
+          type="button"
+          className={styles.helpButton}
+          data-open-support-chat
+        >
           <div className={styles.helpButtonIcon}>
             <CommentDiscussionIcon size={14} />
           </div>

src/renderer/src/context/game-details/game-details.context.tsx

@@ -181,6 +181,7 @@ export function GameDetailsContextProvider({
     shop,
     i18n.language,
     userDetails,
+    userPreferences,
   ]);
 
   useEffect(() => {

src/renderer/src/declaration.d.ts

@@ -60,7 +60,8 @@ declare global {
     ) => Promise<ShopDetails | null>;
     getRandomGame: () => Promise<Steam250Game>;
     getHowLongToBeat: (
-      title: string
+      objectId: string,
+      shop: GameShop
     ) => Promise<HowLongToBeatCategory[] | null>;
     getGames: (take?: number, skip?: number) => Promise<CatalogueEntry[]>;
     searchGameRepacks: (query: string) => Promise<GameRepack[]>;

src/renderer/src/pages/game-details/sidebar/sidebar.tsx

@@ -97,8 +97,10 @@ export function Sidebar() {
             });
           } else {
             try {
-              const howLongToBeat =
-                await window.electron.getHowLongToBeat(gameTitle);
+              const howLongToBeat = await window.electron.getHowLongToBeat(
+                objectId,
+                shop
+              );
 
               if (howLongToBeat) {
                 howLongToBeatEntriesTable.add({