Videodock · royschut · Jan 9, 2024 · Dec 18, 2023 · Dec 19, 2023 · Jan 8, 2024
diff --git a/.depcheckrc.yaml b/.depcheckrc.yaml
@@ -2,6 +2,9 @@ ignores: [
     # This is used by commitlint in .commitlintrc.js
     '@commitlint/config-conventional',
 
+    # @todo: remove dep from main package, once i18next is moved to specific packages
+    'ts-node',
+
     # Workspace packages
     'eslint-config-jwp',
     '@typescript-eslint/parser', # Required by eslint-config-jwp

diff --git a/packages/common/src/env.ts b/packages/common/src/env.ts
@@ -0,0 +1,25 @@
+export type Env = {
+  APP_VERSION: string;
+  APP_API_BASE_URL: string;
+  APP_PLAYER_ID: string;
+
+  APP_DEFAULT_CONFIG_SOURCE?: string;
+  APP_PLAYER_LICENSE_KEY?: string;
+};
+
+const env: Env = {
+  APP_VERSION: '',
+  APP_API_BASE_URL: 'https://cdn.jwplayer.com',
+  APP_PLAYER_ID: 'M4qoGvUk',
+};
+
+export const configureEnv = (options: Partial<Env>) => {
+  env.APP_VERSION ||= options.APP_VERSION;
+  env.APP_API_BASE_URL ||= options.APP_API_BASE_URL;
+  env.APP_PLAYER_ID ||= options.APP_PLAYER_ID;
+
+  env.APP_DEFAULT_CONFIG_SOURCE ||= options.APP_DEFAULT_CONFIG_SOURCE;
+  env.APP_PLAYER_LICENSE_KEY ||= options.APP_PLAYER_LICENSE_KEY;
+};
+
+export default env;
diff --git a/packages/common/src/services/ApiService.ts b/packages/common/src/services/ApiService.ts
@@ -9,6 +9,7 @@ import { useConfigStore as ConfigStore } from '../stores/ConfigStore';
 import type { GetPlaylistParams, Playlist, PlaylistItem } from '../../types/playlist';
 import type { AdSchedule } from '../../types/ad-schedule';
 import type { EpisodeInSeries, EpisodesRes, EpisodesWithPagination, GetSeriesParams, Series } from '../../types/series';
+import env from '../env';
 
 // change the values below to change the property used to look up the alternate image
 enum ImageProperty {
@@ -27,7 +28,7 @@ export default class ApiService {
    */
   private generateAlternateImageURL = ({ item, label, playlistLabel }: { item: PlaylistItem; label: string; playlistLabel?: string }) => {
     const pathname = `/v2/media/${item.mediaid}/images/${playlistLabel || label}.webp`;
-    const url = addQueryParams(`${import.meta.env.APP_API_BASE_URL}${pathname}`, { poster_fallback: 1, fallback: playlistLabel ? label : null });
+    const url = addQueryParams(`${env.APP_API_BASE_URL}${pathname}`, { poster_fallback: 1, fallback: playlistLabel ? label : null });
 
     return url;
   };
@@ -111,7 +112,7 @@ export default class ApiService {
     }
 
     const pathname = `/v2/playlists/${id}`;
-    const url = addQueryParams(`${import.meta.env.APP_API_BASE_URL}${pathname}`, params);
+    const url = addQueryParams(`${env.APP_API_BASE_URL}${pathname}`, params);
     const response = await fetch(url);
     const data = await getDataOrThrow(response);
 
@@ -129,7 +130,7 @@ export default class ApiService {
     }
 
     const pathname = `/apps/watchlists/${playlistId}`;
-    const url = addQueryParams(`${import.meta.env.APP_API_BASE_URL}${pathname}`, { token, media_ids: mediaIds });
+    const url = addQueryParams(`${env.APP_API_BASE_URL}${pathname}`, { token, media_ids: mediaIds });
     const response = await fetch(url);
     const data = (await getDataOrThrow(response)) as Playlist;
 
@@ -146,7 +147,7 @@ export default class ApiService {
    */
   getMediaById = async (id: string, token?: string, drmPolicyId?: string): Promise<PlaylistItem | undefined> => {
     const pathname = drmPolicyId ? `/v2/media/${id}/drm/${drmPolicyId}` : `/v2/media/${id}`;
-    const url = addQueryParams(`${import.meta.env.APP_API_BASE_URL}${pathname}`, { token });
+    const url = addQueryParams(`${env.APP_API_BASE_URL}${pathname}`, { token });
     const response = await fetch(url);
     const data = (await getDataOrThrow(response)) as Playlist;
     const mediaItem = data.playlist[0];
@@ -166,7 +167,7 @@ export default class ApiService {
     }
 
     const pathname = `/apps/series/${id}`;
-    const url = addQueryParams(`${import.meta.env.APP_API_BASE_URL}${pathname}`, params);
+    const url = addQueryParams(`${env.APP_API_BASE_URL}${pathname}`, params);
     const response = await fetch(url);
     const data = await getDataOrThrow(response);
 
@@ -179,7 +180,7 @@ export default class ApiService {
    */
   getSeriesByMediaIds = async (mediaIds: string[]): Promise<{ [mediaId: string]: EpisodeInSeries[] | undefined } | undefined> => {
     const pathname = `/apps/series`;
-    const url = `${import.meta.env.APP_API_BASE_URL}${pathname}?media_ids=${mediaIds.join(',')}`;
+    const url = `${env.APP_API_BASE_URL}${pathname}?media_ids=${mediaIds.join(',')}`;
     const response = await fetch(url);
     return await getDataOrThrow(response);
   };
@@ -204,7 +205,7 @@ export default class ApiService {
     }
 
     const pathname = `/apps/series/${seriesId}/episodes`;
-    const url = addQueryParams(`${import.meta.env.APP_API_BASE_URL}${pathname}`, {
+    const url = addQueryParams(`${env.APP_API_BASE_URL}${pathname}`, {
       page_offset: pageOffset,
       page_limit: pageLimit,
       after_id: afterId,
@@ -236,7 +237,7 @@ export default class ApiService {
     }
 
     const pathname = `/apps/series/${seriesId}/seasons/${seasonNumber}/episodes`;
-    const url = addQueryParams(`${import.meta.env.APP_API_BASE_URL}${pathname}`, { page_offset: pageOffset, page_limit: pageLimit });
+    const url = addQueryParams(`${env.APP_API_BASE_URL}${pathname}`, { page_offset: pageOffset, page_limit: pageLimit });
 
     const response = await fetch(url);
     const episodesRes: EpisodesRes = await getDataOrThrow(response);
@@ -249,7 +250,7 @@ export default class ApiService {
       throw new Error('Ad Schedule ID is required');
     }
 
-    const url = import.meta.env.APP_API_BASE_URL + `/v2/advertising/schedules/${id}.json`;
+    const url = env.APP_API_BASE_URL + `/v2/advertising/schedules/${id}.json`;
     const response = await fetch(url, { credentials: 'omit' });
     const data = await getDataOrThrow(response);
 

diff --git a/packages/common/src/services/ConfigService.ts b/packages/common/src/services/ConfigService.ts
@@ -8,6 +8,7 @@ import { calculateContrastColor } from '../utils/common';
 import { addScript } from '../utils/dom';
 import { AppError } from '../utils/error';
 import type { AccessModel, Config, Styling } from '../../types/config';
+import env from '../env';
 
 import ApiService from './ApiService';
 
@@ -17,7 +18,7 @@ import ApiService from './ApiService';
 
 @injectable()
 export default class ConfigService {
-  private CONFIG_HOST = import.meta.env.APP_API_BASE_URL;
+  private CONFIG_HOST = env.APP_API_BASE_URL;
   // Explicitly set default config here as a local variable,
   // otherwise if it's a module level const, the merge below causes changes to nested properties
   private DEFAULT_CONFIG: Config = {

diff --git a/packages/common/src/services/SettingsService.ts b/packages/common/src/services/SettingsService.ts
@@ -6,6 +6,7 @@ import { CONFIG_FILE_STORAGE_KEY, CONFIG_QUERY_KEY, OTT_GLOBAL_PLAYER_ID } from
 import { logDev } from '../utils/common';
 import { AppError } from '../utils/error';
 import type { Settings } from '../../types/settings';
+import env from '../env';
 
 // Use local storage so the override persists until cleared
 const storage = window.localStorage;
@@ -95,9 +96,9 @@ export default class SettingsService {
     }
 
     // The ini file values will be used if provided, even if compile-time values are set
-    settings.defaultConfigSource ||= import.meta.env.APP_DEFAULT_CONFIG_SOURCE;
-    settings.playerId ||= import.meta.env.APP_PLAYER_ID || OTT_GLOBAL_PLAYER_ID;
-    settings.playerLicenseKey ||= import.meta.env.APP_PLAYER_LICENSE_KEY;
+    settings.defaultConfigSource ||= env.APP_DEFAULT_CONFIG_SOURCE;
+    settings.playerId ||= env.APP_PLAYER_ID || OTT_GLOBAL_PLAYER_ID;
+    settings.playerLicenseKey ||= env.APP_PLAYER_LICENSE_KEY;
 
     // The player key should be set if using the global ott player
     if (settings.playerId === OTT_GLOBAL_PLAYER_ID && !settings.playerLicenseKey) {

diff --git a/packages/common/src/utils/common.ts b/packages/common/src/utils/common.ts
@@ -53,15 +53,16 @@ export function calculateContrastColor(color: string) {
 
 // Build is either Development or Production
 // Mode can be dev, jwdev, demo, test, prod, etc.
-export const IS_DEVELOPMENT_BUILD = import.meta.env.DEV;
+export const IS_DEVELOPMENT_BUILD = __dev__;
 // Demo mode is used to run our firebase demo instance
-export const IS_DEMO_MODE = import.meta.env.MODE === 'demo';
+export const IS_DEMO_MODE = __mode__ === 'demo';
 // Test mode is used for e2e and unit tests
-export const IS_TEST_MODE = import.meta.env.MODE === 'test';
+export const IS_TEST_MODE = __mode__ === 'test';
+
 // Preview mode is used for previewing Pull Requests on GitHub
-export const IS_PREVIEW_MODE = import.meta.env.MODE === 'preview';
+export const IS_PREVIEW_MODE = __mode__ === 'preview';
 // Production mode
-export const IS_PROD_MODE = import.meta.env.MODE === 'prod';
+export const IS_PROD_MODE = __mode__ === 'prod';
 
 export function logDev(message: unknown, ...optionalParams: unknown[]) {
   if ((IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && !IS_TEST_MODE) {

diff --git a/packages/common/types/env.d.ts b/packages/common/types/env.d.ts
diff --git a/packages/common/types/static.d.ts b/packages/common/types/static.d.ts
@@ -1,59 +1,8 @@
-/* Use this file to declare any custom file extensions for importing */
-/* Use this folder to also add/extend a package d.ts file, if needed. */
-
-/* CSS MODULES */
-declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-declare module '*.module.scss' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-declare module '*.module.sass' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-declare module '*.module.less' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-declare module '*.module.styl' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
-/* CSS */
-declare module '*.css';
-declare module '*.scss';
-declare module '*.sass';
-declare module '*.less';
-declare module '*.styl';
-
-/* IMAGES */
-declare module '*.svg' {
-  const ref: string;
-  export default ref;
-}
-declare module '*.bmp' {
-  const ref: string;
-  export default ref;
-}
-declare module '*.gif' {
-  const ref: string;
-  export default ref;
-}
-declare module '*.jpg' {
-  const ref: string;
-  export default ref;
-}
-declare module '*.jpeg' {
-  const ref: string;
-  export default ref;
-}
+// @todo: should not be necessary in the common package
 declare module '*.png' {
   const ref: string;
   export default ref;
 }
 
-/* CUSTOM: ADD YOUR OWN HERE */
+declare const __mode__: string;
+declare const __dev__: boolean;
diff --git a/packages/common/vitest.config.ts b/packages/common/vitest.config.ts
@@ -7,4 +7,8 @@ export default defineConfig({
     setupFiles: ['vitest.setup.ts'],
     css: true,
   },
+  define: {
+    __mode__: '"test"',
+    __dev__: true,
+  },
 });
diff --git a/packages/hooks-react/src/useOpaqueId.ts b/packages/hooks-react/src/useOpaqueId.ts
@@ -1,9 +1,10 @@
+import { IS_TEST_MODE } from '@jwp/ott-common/src/utils/common';
 import { useEffect, useState } from 'react';
 
 const generateId = (prefix?: string, suffix?: string) => {
   // This test code ensures that ID's in snapshots are always the same.
   // Ideally it would be mocked in the test setup but there seems to be a bug with vitest if you mock Math.random
-  const randomId = import.meta.env.MODE === 'test' ? 1235 : Math.random() * 10000;
+  const randomId = IS_TEST_MODE ? 1235 : Math.random() * 10000;
 
   return [prefix, Math.round(randomId), suffix].filter(Boolean).join('_');
 };

diff --git a/packages/hooks-react/src/useOttAnalytics.ts b/packages/hooks-react/src/useOttAnalytics.ts
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import type { PlaylistItem } from '@jwp/ott-common/types/playlist';
 import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
+import env from '@jwp/ott-common/src/env';
 
 const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => {
   const analyticsToken = useConfigStore((s) => s.config.analyticsToken);
@@ -13,7 +14,7 @@ const useOttAnalytics = (item?: PlaylistItem, feedId: string = '') => {
   // app config id (oiid)
   const oiid = config?.id;
   // app version number (av)
-  const av = import.meta.env.APP_VERSION;
+  const av = env.APP_VERSION;
 
   const [player, setPlayer] = useState<jwplayer.JWPlayer | null>(null);
 

diff --git a/packages/hooks-react/vitest.config.ts b/packages/hooks-react/vitest.config.ts
@@ -7,4 +7,8 @@ export default defineConfig({
     setupFiles: ['vitest.setup.ts'],
     css: true,
   },
+  define: {
+    __mode__: '"test"',
+    __dev__: true,
+  },
 });
diff --git a/packages/ui-react/.depcheckrc.yaml b/packages/ui-react/.depcheckrc.yaml
@@ -2,4 +2,5 @@ ignores: [
   '@jwp/ott-ui-react',
   'eslint-plugin-react',
   'eslint-plugin-react-hooks',
+  'typescript-plugin-css-modules',
 ]
diff --git a/packages/ui-react/package.json b/packages/ui-react/package.json
@@ -22,12 +22,12 @@
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-i18next": "^12.3.1",
     "react-infinite-scroller": "^1.2.6",
+    "react-query": "^3.39.0",
     "react-router": "6.14.2",
     "react-router-dom": "6.14.2",
-    "react-query": "^3.39.0",
-    "react-helmet": "^6.1.0",
     "reflect-metadata": "^0.1.13",
     "yup": "^0.32.9"
   },
@@ -40,6 +40,7 @@
     "@types/react-infinite-scroller": "^1.2.3",
     "@vitejs/plugin-react": "^4.0.4",
     "sass": "^1.49.10",
+    "typescript-plugin-css-modules": "^5.0.2",
     "vi-fetch": "^0.8.0",
     "vitest": "^0.34.6"
   },

diff --git a/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx b/packages/ui-react/src/components/DevConfigSelector/DevConfigSelector.tsx
@@ -11,7 +11,7 @@ interface Props {
   selectedConfig: string | undefined;
 }
 
-const configs = import.meta.env.MODE === 'jwdev' ? jwDevEnvConfigs : testConfigs;
+const configs = __mode__ === 'jwdev' ? jwDevEnvConfigs : testConfigs;
 const configOptions: { value: string; label: string }[] = [
   { label: 'Select an App Config', value: '' },
   ...Object.values(configs).map(({ id, label }) => ({ value: id, label: `${id.length > 8 ? 'ext-json' : id} - ${label}` })),

diff --git a/packages/ui-react/src/components/Player/Player.tsx b/packages/ui-react/src/components/Player/Player.tsx
@@ -8,6 +8,7 @@ import { deepCopy } from '@jwp/ott-common/src/utils/collection';
 import { logDev, testId } from '@jwp/ott-common/src/utils/common';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
 import useOttAnalytics from '@jwp/ott-hooks-react/src/useOttAnalytics';
+import env from '@jwp/ott-common/src/env';
 
 import styles from './Player.module.scss';
 
@@ -118,7 +119,7 @@ const Player: React.FC<Props> = ({
     if (!window.jwplayer && !loadingRef.current) {
       loadingRef.current = true;
 
-      const scriptUrl = `${import.meta.env.APP_API_BASE_URL}/libraries/${playerId}.js`;
+      const scriptUrl = `${env.APP_API_BASE_URL}/libraries/${playerId}.js`;
 
       addScript(scriptUrl).then(() => {
         setLibLoaded(true);

diff --git a/packages/ui-react/tsconfig.json b/packages/ui-react/tsconfig.json
@@ -19,7 +19,7 @@
         "name": "typescript-plugin-css-modules",
         "options": {
           "rendererOptions": {
-            "includePaths": ["./styles"]
+            "includePaths": ["./styles", "./node_modules", "../../node_modules"]
           },
           "postcssOptions": {
             "useConfig": true

diff --git a/packages/ui-react/types/env.d.ts b/packages/ui-react/types/env.d.ts