feat(project): customizable footer through env-var

Co-authored-by: Mike van Veenhuijzen <mike@videodock.com>

docs/configuration.md

@@ -160,8 +160,7 @@ Use the `styling` object to define extra styles for your application.
   "styling": {
     "backgroundColor": null,
     "highlightColor": null,
-    "headerBackground": null,
-    "footerText": "Blender Foundation"
+    "headerBackground": null
 }
 ```
 
@@ -187,12 +186,6 @@ Use this parameter to change the background color of the header. By default, the
 
 ---
 
-**styling.footerText** (optional)
-
-Text that will be placed in the footer of the site. Markdown links are supported.
-
----
-
 **features**
 
 Use the `features` object to define extra properties for your app.

packages/common/src/env.ts

@@ -2,7 +2,7 @@ export type Env = {
   APP_VERSION: string;
   APP_API_BASE_URL: string;
   APP_PLAYER_ID: string;
-
+  APP_FOOTER_TEXT: string;
   APP_DEFAULT_CONFIG_SOURCE?: string;
   APP_PLAYER_LICENSE_KEY?: string;
 };
@@ -11,12 +11,14 @@ const env: Env = {
   APP_VERSION: '',
   APP_API_BASE_URL: 'https://cdn.jwplayer.com',
   APP_PLAYER_ID: 'M4qoGvUk',
+  APP_FOOTER_TEXT: '',
 };
 
 export const configureEnv = (options: Partial<Env>) => {
   env.APP_VERSION = options.APP_VERSION || env.APP_VERSION;
   env.APP_API_BASE_URL = options.APP_API_BASE_URL || env.APP_API_BASE_URL;
   env.APP_PLAYER_ID = options.APP_PLAYER_ID || env.APP_PLAYER_ID;
+  env.APP_FOOTER_TEXT = options.APP_FOOTER_TEXT || env.APP_FOOTER_TEXT;
 
   env.APP_DEFAULT_CONFIG_SOURCE ||= options.APP_DEFAULT_CONFIG_SOURCE;
   env.APP_PLAYER_LICENSE_KEY ||= options.APP_PLAYER_LICENSE_KEY;

packages/common/src/services/ConfigService.ts

@@ -28,9 +28,7 @@ export default class ConfigService {
     content: [],
     menu: [],
     integrations: {},
-    styling: {
-      footerText: '',
-    },
+    styling: {},
     features: {},
   };
 

packages/common/src/stores/ConfigStore.ts

@@ -34,9 +34,7 @@ export const useConfigStore = createStore<ConfigState>('ConfigStore', () => ({
         useSandbox: true,
       },
     },
-    styling: {
-      footerText: '',
-    },
+    styling: {},
   },
   settings: {
     additionalAllowedConfigSources: [],

packages/common/src/utils/common.ts

@@ -6,6 +6,12 @@ export function debounce<T extends (...args: any[]) => void>(callback: T, wait =
   };
 }
 
+export const unicodeToChar = (text: string) => {
+  return text.replace(/\\u[\dA-F]{4}/gi, (match) => {
+    return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
+  });
+};
+
 /**
  * Parse hex color and return the RGB colors
  * @param color

packages/common/src/utils/configSchema.ts

@@ -41,7 +41,6 @@ const stylingSchema: SchemaOf<Styling> = object({
   backgroundColor: string().nullable(),
   highlightColor: string().nullable(),
   headerBackground: string().nullable(),
-  footerText: string().nullable(),
 });
 
 export const configSchema: SchemaOf<Config> = object({

packages/common/types/config.ts

@@ -59,7 +59,6 @@ export type Styling = {
   backgroundColor?: string | null;
   highlightColor?: string | null;
   headerBackground?: string | null;
-  footerText?: string | null;
 };
 
 export type Cleeng = {

packages/testing/fixtures/config.json

@@ -55,8 +55,7 @@
   "styling": {
     "backgroundColor": null,
     "highlightColor": null,
-    "headerBackground": null,
-    "footerText": "\u00a9 Blender Foundation | [cloud.blender.org](https://cloud.blender.org)"
+    "headerBackground": null
   },
   "description": "Blender demo site",
   "analyticsToken": "lDd_MCg4EeuMunbqcIJccw",

packages/ui-react/src/containers/Layout/Layout.tsx

@@ -11,12 +11,13 @@ import { useConfigStore } from '@jwp/ott-common/src/stores/ConfigStore';
 import { useProfileStore } from '@jwp/ott-common/src/stores/ProfileStore';
 import ProfileController from '@jwp/ott-common/src/stores/ProfileController';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
-import { IS_DEVELOPMENT_BUILD } from '@jwp/ott-common/src/utils/common';
+import { IS_DEVELOPMENT_BUILD, unicodeToChar } from '@jwp/ott-common/src/utils/common';
 import { ACCESS_MODEL } from '@jwp/ott-common/src/constants';
 import useSearchQueryUpdater from '@jwp/ott-ui-react/src/hooks/useSearchQueryUpdater';
 import { useProfiles, useSelectProfile } from '@jwp/ott-hooks-react/src/useProfiles';
 import { PATH_HOME, PATH_USER_PROFILES } from '@jwp/ott-common/src/paths';
 import { playlistURL } from '@jwp/ott-common/src/utils/urlFormatting';
+import env from '@jwp/ott-common/src/env';
 
 import MarkdownComponent from '../../components/MarkdownComponent/MarkdownComponent';
 import Header from '../../components/Header/Header';
@@ -27,6 +28,8 @@ import Button from '../../components/Button/Button';
 
 import styles from './Layout.module.scss';
 
+const footerText = unicodeToChar(env.APP_FOOTER_TEXT);
+
 const Layout = () => {
   const location = useLocation();
   const navigate = useNavigate();
@@ -38,13 +41,12 @@ const Layout = () => {
   );
   const isLoggedIn = !!useAccountStore(({ user }) => user);
   const favoritesEnabled = !!config.features?.favoritesList;
-  const { menu, assets, siteName, description, styling, features } = config;
+  const { menu, assets, siteName, description, features } = config;
   const metaDescription = description || t('default_description');
 
   const profileController = getModule(ProfileController, false);
 
   const { searchPlaylist } = features || {};
-  const { footerText } = styling || {};
   const currentLanguage = useMemo(() => supportedLanguages.find(({ code }) => code === i18n.language), [i18n.language, supportedLanguages]);
 
   const {

platforms/web/src/index.tsx

@@ -17,6 +17,8 @@ configureEnv({
 
   APP_DEFAULT_CONFIG_SOURCE: import.meta.env.APP_DEFAULT_CONFIG_SOURCE,
   APP_PLAYER_LICENSE_KEY: import.meta.env.APP_PLAYER_LICENSE_KEY,
+
+  APP_FOOTER_TEXT: import.meta.env.APP_FOOTER_TEXT,
 });
 
 const rootElement = document.getElementById('root');