feat(player): add support for custom chromecast receiver

Author: ChristiaanScheermeijer

packages/common/src/env.ts

@@ -20,6 +20,8 @@ export type Env = {
   APP_GTM_TAG_SERVER?: string;
   APP_GTM_SCRIPT?: string;
   APP_GTM_LOAD_ON_ACCEPT: boolean;
+
+  APP_CHROMECAST_APPLICATION_ID?: string;
 };
 
 const env: Env = {
@@ -34,6 +36,7 @@ const env: Env = {
 };
 
 export const configureEnv = (options: Partial<Env>) => {
+  // @TODO should we loop over each option instead?
   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_API_ACCESS_BRIDGE_URL = options.APP_API_ACCESS_BRIDGE_URL || env.APP_API_ACCESS_BRIDGE_URL;
@@ -54,6 +57,8 @@ export const configureEnv = (options: Partial<Env>) => {
   env.APP_GTM_TAG_SERVER ||= options.APP_GTM_TAG_SERVER;
   env.APP_GTM_SCRIPT ||= options.APP_GTM_SCRIPT;
   env.APP_GTM_LOAD_ON_ACCEPT = options.APP_GTM_LOAD_ON_ACCEPT || env.APP_GTM_LOAD_ON_ACCEPT;
+
+  env.APP_CHROMECAST_APPLICATION_ID = options.APP_CHROMECAST_APPLICATION_ID || env.APP_CHROMECAST_APPLICATION_ID;
 };
 
 export default env;

packages/ui-react/src/components/Player/Player.tsx

@@ -225,7 +225,7 @@ const Player: React.FC<Props> = ({
         pipIcon: 'disabled',
         playlist: [deepCopy({ ...item, starttime: startTimeRef.current, feedid: feedId, sources })],
         repeat: false,
-        cast: {},
+        cast: env.APP_CHROMECAST_APPLICATION_ID ? { appid: env.APP_CHROMECAST_APPLICATION_ID } : {},
         stretching: 'uniform',
         width: '100%',
       };

platforms/web/.env

@@ -22,6 +22,9 @@ APP_FOOTER_TEXT="\u00a9 JW Player | [jwplayer.com](https://www.jwplayer.com/) |
 #APP_BODY_FONT_FAMILY
 #APP_BODY_ALT_FONT_FAMILY
 
+# set a custom Chromecast application ID (required when DRM is enabled and you want to support casting)
+#APP_CHROMECAST_APPLICATION_ID=
+
 # public URL must be set for standalone applications
 #APP_PUBLIC_URL
 

platforms/web/src/index.tsx

@@ -33,6 +33,8 @@ configureEnv({
   APP_GTM_TAG_SERVER: import.meta.env.APP_GTM_TAG_SERVER,
   APP_GTM_LOAD_ON_ACCEPT: import.meta.env.APP_GTM_LOAD_ON_ACCEPT,
   APP_GTM_SCRIPT: import.meta.env.APP_GTM_SCRIPT,
+
+  APP_CHROMECAST_APPLICATION_ID: import.meta.env.APP_CHROMECAST_APPLICATION_ID,
 });
 
 attachAccessibilityListener();