fix: use h5p integration url from the backend

.github/workflows/deploy-storybook.yml

@@ -27,7 +27,6 @@ jobs:
       - name: Build storybook
         run: mise run build-storybook
         env:
-          VITE_GRAASP_H5P_INTEGRATION_URL: http://mock.value.com
           VITE_GRAASP_REDIRECTION_HOST: http://go.mock.com
 
       - name: Upload artifact

.github/workflows/deploy.yml

@@ -54,7 +54,6 @@ jobs:
           VITE_UMAMI_WEBSITE_ID: ${{ secrets.VITE_UMAMI_WEBSITE_ID }}
           VITE_UMAMI_HOST: ${{ vars.VITE_UMAMI_HOST }}
           VITE_RECAPTCHA: ${{ secrets.VITE_RECAPTCHA_SITE_KEY }}
-          VITE_GRAASP_H5P_INTEGRATION_URL: ${{ vars.VITE_GRAASP_H5P_INTEGRATION_URL }}
           VITE_GRAASP_REDIRECTION_HOST: ${{ vars.VITE_GRAASP_REDIRECTION_HOST }}
         run: mise run build
         shell: bash

.github/workflows/test.yml

@@ -36,7 +36,6 @@ jobs:
         run: mise build
         env:
           VITE_RECAPTCHA: 123456789
-          VITE_GRAASP_H5P_INTEGRATION_URL: http://integration.url/mock-value.html
           VITE_GRAASP_REDIRECTION_HOST: http://go.mock.com
 
       - name: Unit tests

README.md

@@ -45,7 +45,6 @@ VITE_SENTRY_DSN= # some value
 
 VITE_RECAPTCHA= # some value
 
-VITE_GRAASP_H5P_INTEGRATION_URL= # the origin for the h5p integration
 
 VITE_GRAASP_REDIRECTION_HOST=http://localhost:3114/redirect
 ```
@@ -57,10 +56,9 @@ This mode runs the app from the static build and uses a lot less RAM compared to
 
 1. You need to have a `.env.production` file with the following content:
 
-    ```dotenv
-    VITE_GRAASP_H5P_INTEGRATION_URL=http://localhost:3000/items/h5p-assets/
-    VITE_GRAASP_REDIRECTION_HOST=http://localhost:3114/redirect
-    ```
+   ```dotenv
+   VITE_GRAASP_REDIRECTION_HOST=http://localhost:3114/redirect
+   ```
 
 1. Build the project `pnpm build`
 1. Preview the project `pnpm preview`
@@ -74,7 +72,6 @@ Using the following command, you should be able to build an image that contains
 
 ```sh
 docker build -t client-local \
- --build-arg VITE_GRAASP_H5P_INTEGRATION_URL=http://localhost:3000/items/h5p-integration \
  --build-arg VITE_RECAPTCHA=<recaptcha_site_key> \
  --build-arg VITE_GRAASP_REDIRECTION_HOST=http://localhost:3000/short-links \
  .

mise.toml

@@ -11,7 +11,7 @@ postinstall = 'npx corepack enable'
 experimental = true
 
 [env]
-_.path = ['./node_modules/.bin']
+_.path = ['{{config_root}}/node_modules/.bin']
 
 [tasks.pnpm-install]
 description = 'Installs dependencies with pnpm'

openapi-ts.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from '@hey-api/openapi-ts';
 import { API_HOST } from './src/config/env';
 
 export default defineConfig({
-  input: `${API_HOST}/api/docs/json`,
+  input: `${API_HOST}/docs/json`,
   output: {
     format: 'prettier',
     lint: 'eslint',

package.json

@@ -12,15 +12,15 @@
   "engines": {
     "node": ">=22"
   },
-  "packageManager": "pnpm@10.22.0",
+  "packageManager": "pnpm@10.32.0",
   "type": "module",
   "dependencies": {
     "@air/react-drag-to-select": "5.0.11",
     "@emotion/cache": "11.14.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@fontsource-variable/nunito": "5.2.7",
-    "@graasp/sdk": "github:graasp/graasp-sdk#factories",
+    "@graasp/sdk": "5.18.1",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@lexical/link": "0.33.1",
     "@lexical/react": "0.33.1",

src/config/env.ts

@@ -23,9 +23,6 @@ export const RECAPTCHA_SITE_KEY = import.meta.env.VITE_RECAPTCHA;
  * It's value is required in production since it is not recommended to use the fallback backend endpoint.
  * The backend endpoint is considered in-secure when the app and the backend are hosted on a domain where cookies are shared.
  */
-export const H5P_INTEGRATION_URL =
-  import.meta.env.VITE_GRAASP_H5P_INTEGRATION_URL ??
-  `${API_HOST}/items/h5p-assets/integration.html`;
 
 // Question: should we host the pdf player assets inside the public directory here instead of at another bucket ?
 // Are there any security implications if it is hosted on the same domain as the app code ?

src/locales/en/common.json

@@ -41,6 +41,7 @@
   },
   "ERRORS": {
     "UNEXPECTED": "An unexpected Error occurred",
+    "NO_INTEGRATION_URL": "No integration URL found for this H5P item",
     "NETWORK": {
       "TITLE": "Network Error",
       "TEXT": "There seems to be a problem joining the server. Please try again later"

src/modules/builder/components/item/ItemContent.tsx

@@ -15,7 +15,7 @@ import { type AuthenticatedUser, useAuth } from '@/AuthContext';
 import { Editor } from '@/components/page/Editor';
 import { PageReader } from '@/components/page/PageReader';
 import { DEFAULT_LANG, NS } from '@/config/constants';
-import { API_HOST, GRAASP_ASSETS_URL, H5P_INTEGRATION_URL } from '@/config/env';
+import { API_HOST, GRAASP_ASSETS_URL } from '@/config/env';
 import { hooks } from '@/config/queryClient';
 import {
   DOCUMENT_ITEM_TEXT_EDITOR_ID,
@@ -163,18 +163,27 @@ const AppContent = ({
  * Helper component to render typed H5P items
  */
 const H5PContent = ({ item }: { item: H5PItemType }): JSX.Element => {
+  const { t } = useTranslation(NS.Common);
   const extra = getH5PExtra(item?.extra);
 
   if (!extra?.contentId) {
     return <ErrorAlert id={ITEM_SCREEN_ERROR_ALERT_ID} />;
   }
 
+  if (!extra?.integrationUrl) {
+    return (
+      <Alert id="integrationUrl_error" severity="error">
+        {t('ERRORS.NO_INTEGRATION_URL')}
+      </Alert>
+    );
+  }
+
   return (
     <H5PItem
       itemId={item.id}
       itemName={item.name}
       contentId={extra.contentId}
-      integrationUrl={H5P_INTEGRATION_URL}
+      integrationUrl={extra.integrationUrl}
     />
   );
 };

src/modules/player/item/Item.tsx

@@ -25,7 +25,7 @@ import { useAuth } from '@/AuthContext';
 import { PageReader } from '@/components/page/PageReader';
 import { Button } from '@/components/ui/Button';
 import { NS } from '@/config/constants';
-import { API_HOST, GRAASP_ASSETS_URL, H5P_INTEGRATION_URL } from '@/config/env';
+import { API_HOST, GRAASP_ASSETS_URL } from '@/config/env';
 import { hooks } from '@/config/queryClient';
 import {
   buildAppId,
@@ -259,16 +259,20 @@ const H5PContent = ({ item }: { item: H5PItemType }): JSX.Element => {
   const { onCollapse } = useCollapseAction(item.id);
 
   const contentId = item?.extra?.h5p?.contentId;
+  const integrationUrl = item?.extra?.h5p?.integrationUrl;
   if (!contentId) {
     return <Alert severity="error">{t('ERRORS.UNEXPECTED')}</Alert>;
   }
+  if (!integrationUrl) {
+    return <Alert severity="error">{t('ERRORS.NO_INTEGRATION_URL')}</Alert>;
+  }
 
   return (
     <H5PItem
       itemId={item.id}
       itemName={item.name}
       contentId={contentId}
-      integrationUrl={H5P_INTEGRATION_URL}
+      integrationUrl={integrationUrl}
       showCollapse={item.settings?.isCollapsible}
       onCollapse={onCollapse}
     />

src/openapi/client/client.gen.ts

@@ -15,5 +15,5 @@ import { createClientConfig } from '../clientConfig.ts';
 export type CreateClientConfig<T extends ClientOptions = ClientOptions2> = (override?: Config<ClientOptions & T>) => Config<Required<ClientOptions> & T>;
 
 export const client = createClient(createClientConfig(createConfig<ClientOptions2>({
-    baseUrl: 'http://localhost:3001'
+    baseUrl: 'http://localhost:3000'
 })));