Merge branch 'develop' into feat/add-user-id-support-for-manifest

.commitlintrc.js

@@ -5,6 +5,7 @@ module.exports = {
       2,
       'always',
       [
+        'deps',
         'project',
         'home',
         'playlist',

.github/workflows/test-linting.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
       - name: yarn install, lint
         run: |
           yarn install

.github/workflows/test-unit-snapshot.yml

@@ -14,18 +14,10 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
       - name: yarn install and test
         run: |
           yarn
           yarn test
         env:
           CI: true
-          # Dummy environment variables for testing the access-bridge service
-          APP_SITE_ID: test1234
-          APP_API_SECRET: dummy_secret
-          APP_STRIPE_SECRET: dummy_stripe_secret
-          APP_BIND_ADDR: localhost
-          APP_BIND_PORT: 3001
-          APP_ACCESS_CONTROL_API_HOST: https://test-cdn.jwplayer.com
-          APP_SIMS_API_HOST: https://test-sims.jwplayer.com

.github/workflows/web-test-deploy-preview-aws.yml

@@ -39,7 +39,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
       - name: Install packages
         run: yarn install --frozen-lockfile
       - name: Build

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

@@ -26,7 +26,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '22.x'
       - name: Install dependencies
         run: |
           yarn

configs/eslint-config-jwp/package.json

@@ -7,11 +7,11 @@
     "test": "exit 0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "confusing-browser-globals": "^1.0.11",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^4.6.2"
   }
 }

configs/eslint-config-jwp/typescript.js

@@ -71,17 +71,14 @@ module.exports = {
       },
       rules: {
         // `require` is still allowed/recommended in JS
-        '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/no-require-imports': 'off',
       },
     },
     {
       files: ['*.ts', '*.tsx'],
       rules: {
         // These are handled by TS
         '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
-        '@typescript-eslint/explicit-module-boundary-types': 'off',
-        '@typescript-eslint/no-inferrable-types': 'off',
-        '@typescript-eslint/ban-ts-comment': 'off',
         '@typescript-eslint/no-unused-vars': 'off',
         'import/no-unresolved': 'off',
       },

configs/postcss-config-jwp/package.json

@@ -8,7 +8,7 @@
     "test": "exit 0"
   },
   "devDependencies": {
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.49",
     "postcss-import": "^14.1.0",
     "postcss-scss": "^4.0.9",
     "stylelint": "^15.11.0"

configs/stylelint-config-jwp/index.js

@@ -242,15 +242,15 @@ module.exports = (function () {
         'custom-properties',
         'dollar-variables',
 
-        // Any mixins
+        // Style declarations
+        'declarations',
+
+        // Includes
         {
           type: 'at-rule',
           name: 'include',
         },
 
-        // Style declarations
-        'declarations',
-
         // Pseudo elements
         {
           type: 'rule',

configs/stylelint-config-jwp/package.json

@@ -10,7 +10,7 @@
   "devDependencies": {
     "stylelint": "^15.11.0",
     "stylelint-config-recommended-scss": "^13.1.0",
-    "stylelint-declaration-strict-value": "^1.10.4",
+    "stylelint-declaration-strict-value": "^1.10.6",
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^5.3.2"
   }

knip.config.ts

@@ -11,7 +11,6 @@ const config: KnipConfig = {
       ignoreBinaries: [
         // false positives from yarn scripts in github actions
         'build',
-        'global',
         'start:test',
         'codecept:*',
       ],
@@ -22,7 +21,8 @@ const config: KnipConfig = {
     'packages/ui-react': {
       entry: ['src/**/*'],
       ignoreDependencies: [
-        'sass', // Used in css
+        'sass-embedded', // Used in Vite
+        'postcss-config-jwp', // Used in postcss.config
       ],
     },
     'platforms/web': {
@@ -31,17 +31,15 @@ const config: KnipConfig = {
         '@codeceptjs/configure', // Used in e2e tests
         '@babel/plugin-proposal-decorators', // Used to build with decorators for ioc resolution
         '@babel/core', // Required peer dependency for babel plugins
+        '@jwp/ott-testing', // Used in e2e testing
         '@types/luxon', // Used in tests
         'babel-plugin-transform-typescript-metadata', // Used to build with decorators for ioc resolution
         'core-js', // Conditionally imported at build time
         'eslint-plugin-codeceptjs', // Used by apps/web/test-e2e/.eslintrc.cjs
         'i18next-parser',
         'luxon', // Used in tests
         'playwright', // Used in test configs
-        'sharp', // Requirement for @vite-pwa/assets-generator
         'tsconfig-paths', // Used for e2e test setup
-        'virtual:pwa-register', // Service Worker code is injected at build time
-        'virtual:polyfills', // Polyfills are conditionally injected
       ],
     },
     'configs/eslint-config-jwp': {

package.json

@@ -37,28 +37,31 @@
     "access-bridge": "yarn --cwd platforms/access-bridge"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
-    "@types/node": "^18.19.37",
-    "csv-parse": "^5.5.6",
-    "eslint": "^8.57.0",
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@types/node": "^22.10.1",
+    "csv-parse": "^5.6.0",
+    "eslint": "^8.57.1",
+    "eslint-config-jwp": "*",
     "husky": "^6.0.0",
     "i18next-parser-workspaces": "^0.2.0",
-    "knip": "^5.30.1",
+    "knip": "^5.39.1",
     "lint-staged": "^15.2.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "read": "^2.1.0",
     "ts-node": "^10.9.2",
-    "typescript": "5.3.3",
-    "vitest": "^1.6.0"
-  },
-  "peerDependencies": {
-    "eslint-config-jwp": "*"
+    "typescript": "5.7.2",
+    "vitest": "^2.1.8"
   },
   "resolutions": {
+    "axios": "^0.29.0",
     "codeceptjs/**/fast-xml-parser": "^4.5.0",
+    "eslint/**/cross-spawn": "^7.0.6",
+    "lint-staged/**/cross-spawn": "^7.0.6",
+    "npm-run-all/**/cross-spawn": "^6.0.6",
     "micromatch": ">=4.0.8",
+    "vitest/**/vite": "^5.4.11",
     "ws": ">=5.2.4"
   }
 }

packages/common/package.json

@@ -10,29 +10,26 @@
   },
   "dependencies": {
     "@inplayer-org/inplayer.js": "^3.13.28",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "fast-xml-parser": "^4.5.0",
-    "i18next": "^22.5.1",
+    "i18next": "^24.0.5",
     "ini": "^3.0.1",
-    "inversify": "^6.0.2",
+    "inversify": "^6.1.5",
     "jwt-decode": "^4.0.0",
     "lodash.merge": "^4.6.2",
-    "react-i18next": "^12.3.1",
+    "react-i18next": "^15.1.3",
     "reflect-metadata": "^0.2.2",
-    "yup": "^0.32.11",
+    "yup": "^1.4.0",
     "zustand": "^4.5.5"
   },
   "devDependencies": {
+    "@jwp/ott-testing": "*",
     "@types/ini": "^1.3.34",
     "@types/lodash.merge": "^4.6.9",
+    "eslint-config-jwp": "*",
     "jsdom": "^22.1.0",
     "timezone-mock": "^1.3.6",
     "vi-fetch": "^0.8.0",
-    "vitest": "^1.6.0"
-  },
-  "peerDependencies": {
-    "@jwp/ott-testing": "*",
-    "@jwp/ott-theme": "*",
-    "eslint-config-jwp": "*"
+    "vitest": "^2.1.8"
   }
 }

packages/common/src/controllers/AccessController.ts

@@ -19,7 +19,7 @@ const ACCESS_TOKENS = 'access_tokens';
 export default class AccessController {
   private readonly apiService: ApiService;
   private readonly accessService: AccessService;
-  private readonly accountService: AccountService;
+  private readonly accountService?: AccountService;
   private readonly storageService: StorageService;
 
   private siteId: string = '';
@@ -33,7 +33,7 @@ export default class AccessController {
     this.apiService = apiService;
     this.accessService = accessService;
     this.storageService = storageService;
-    this.accountService = getNamedModule(AccountService, integrationType);
+    this.accountService = getNamedModule(AccountService, integrationType, false);
   }
 
   initialize = async () => {
@@ -55,7 +55,7 @@ export default class AccessController {
    * If no access tokens exist, it attempts to generate them, if the passport token is expired, it attempts to refresh them.
    * If an access token retrieval fails or the user is not entitled to the content, an error is thrown.
    */
-  getMediaById = async (mediaId: string) => {
+  getMediaById = async (mediaId: string, language?: string) => {
     const { entitledPlan } = useAccountStore.getState();
 
     if (!this.siteId || !entitledPlan) {
@@ -67,13 +67,25 @@ export default class AccessController {
       if (!accessTokens?.passport) {
         throw new Error('Failed to get / generate access tokens and retrieve media.');
       }
-      return await this.apiService.getMediaByIdWithPassport({ id: mediaId, siteId: this.siteId, planId: entitledPlan.id, passport: accessTokens.passport });
+      return await this.apiService.getMediaByIdWithPassport({
+        id: mediaId,
+        siteId: this.siteId,
+        planId: entitledPlan.id,
+        passport: accessTokens.passport,
+        language,
+      });
     } catch (error: unknown) {
       if (error instanceof ApiError && error.code === 403) {
         // If the passport is invalid or expired, refresh the access tokens and try to get the media again.
         const accessTokens = await this.refreshAccessTokens();
         if (accessTokens?.passport) {
-          return await this.apiService.getMediaByIdWithPassport({ id: mediaId, siteId: this.siteId, planId: entitledPlan.id, passport: accessTokens.passport });
+          return await this.apiService.getMediaByIdWithPassport({
+            id: mediaId,
+            siteId: this.siteId,
+            planId: entitledPlan.id,
+            passport: accessTokens.passport,
+            language,
+          });
         }
 
         throw new Error('Failed to refresh access tokens and retrieve media.');
@@ -112,7 +124,7 @@ export default class AccessController {
       return null;
     }
 
-    const auth = await this.accountService.getAuthData();
+    const auth = await this.accountService?.getAuthData();
 
     const accessTokens = await this.accessService.generateAccessTokens(this.siteId, auth?.jwt);
     if (accessTokens) {
@@ -160,7 +172,11 @@ export default class AccessController {
    * Retrieves the access tokens from local storage (if any) along with their expiration timestamp.
    */
   getAccessTokens = async (): Promise<(AccessTokens & { expires: number }) | null> => {
-    const accessTokens = await this.storageService.getItem<AccessTokens & { expires: number }>(ACCESS_TOKENS, true, true);
+    const accessTokens = await this.storageService.getItem<
+      AccessTokens & {
+        expires: number;
+      }
+    >(ACCESS_TOKENS, true, true);
     if (accessTokens) {
       useAccessStore.setState({ passport: accessTokens.passport });
     }