@applicaster/zapp-react-native-utils 15.0.0-alpha.8621453569 → 15.0.0-alpha.8680244503

package/appUtils/playerManager/playerNative.ts

@@ -15,6 +15,22 @@ const logger = createLogger({
 
 const { log_warning } = logger;
 
+interface PlayerMethods {
+  seeking?: (position: number) => void;
+  forward?: (deltaTime: number) => void;
+  rewind?: (deltaTime: number) => void;
+  startSleepTimer?: (sleepTimestamp: number) => void;
+  selectTrack?: (
+    selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
+  ) => void;
+  setPlaybackRate?: (rate: number) => void;
+  appStateChange?: (appState: string, previousAppState: string) => void;
+  closeNativePlayer?: () => void;
+  togglePlayPause?: () => void;
+}
+
+type PlayerComponent = ReactComponent<PlayerRefProps> & PlayerMethods;
+
 type PlayerPlugnId = "QuickBrickPlayerPlugin" | "KalturaPlayerPlugin";
 
 type Props = {
@@ -62,7 +78,7 @@ export class PlayerNative extends Player {
     return this.playerState.contentPosition;
   };
 
-  currentPlayerComponent = (): ReactComponent<PlayerRefProps> =>
+  currentPlayerComponent = (): PlayerComponent | null =>
     this.playerComponent?.current;
 
   getState = () => this.playerState;
@@ -121,7 +137,7 @@ export class PlayerNative extends Player {
 
       this.playerState.seekPosition = newPosition;
 
-      this.currentPlayerComponent()?.["seeking"](this.playerState.seekPosition);
+      this.currentPlayerComponent()?.seeking?.(this.playerState.seekPosition);
     }
 
     this.logState(PlayerModuleFuncNames.seekTo, { position });
@@ -135,7 +151,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.forward, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.["forward"](deltaTime);
+      this.currentPlayerComponent()?.forward?.(deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -151,7 +167,7 @@ export class PlayerNative extends Player {
     if (!this.invokeNativeFunction(PlayerModuleFuncNames.rewind, deltaTime)) {
       // Kaltura does not have yet this implementation, use legacy code
 
-      this.currentPlayerComponent()?.["rewind"](deltaTime);
+      this.currentPlayerComponent()?.rewind?.(deltaTime);
     }
 
     this.notifyPlayHeadPositionUpdate();
@@ -178,7 +194,7 @@ export class PlayerNative extends Player {
         sleepTimestamp
       )
     ) {
-      this.currentPlayerComponent()?.["startSleepTimer"](sleepTimestamp);
+      this.currentPlayerComponent()?.startSleepTimer?.(sleepTimestamp);
     }
   };
 
@@ -195,11 +211,11 @@ export class PlayerNative extends Player {
   selectTrack = (
     selected: QuickBrickPlayer.TextTrack | QuickBrickPlayer.AudioTrack
   ) => {
-    this.currentPlayerComponent()?.["selectTrack"]?.(selected);
+    this.currentPlayerComponent()?.selectTrack?.(selected);
   };
 
   setPlaybackRate = (rate: number) => {
-    this.currentPlayerComponent()?.["setPlaybackRate"]?.(rate);
+    this.currentPlayerComponent()?.setPlaybackRate?.(rate);
   };
 
   getPluginConfiguration = () => {
@@ -209,19 +225,16 @@ export class PlayerNative extends Player {
   getProps = () => (this.currentPlayerComponent() as any)?.props;
 
   appStateChange = (appState, previousAppState) => {
-    this.currentPlayerComponent()?.["appStateChange"]?.(
-      appState,
-      previousAppState
-    );
+    this.currentPlayerComponent()?.appStateChange?.(appState, previousAppState);
   };
 
   closeNativePlayer = () => {
     // TODO: Delete does not work
-    this.currentPlayerComponent()?.["closeNativePlayer"]?.();
+    this.currentPlayerComponent()?.closeNativePlayer?.();
   };
 
   togglePlayPause = () => {
-    this.currentPlayerComponent()?.["togglePlayPause"]?.();
+    this.currentPlayerComponent()?.togglePlayPause?.();
   };
 
   onVideoLoad = (event) => {
@@ -289,19 +302,19 @@ export class PlayerNative extends Player {
   isFullScreenSupported = (): boolean => {
     const config = this.getConfig();
 
-    const disableFullScreen = config?.["disable_fullscreen"];
+    const disableFullScreen = config?.disable_fullscreen;
 
     if (disableFullScreen) {
       return false;
     }
 
-    const isFullScreenAudioPlayer = config?.["full_screen_audio_player"];
+    const isFullScreenAudioPlayer = config?.full_screen_audio_player;
 
     return !(isFullScreenAudioPlayer && this.isAudioItem());
   };
 
   supportsNativeControls = (): boolean =>
-    toBooleanWithDefaultFalse(this.getConfig()?.["supports_native_controls"]);
+    toBooleanWithDefaultFalse(this.getConfig()?.supports_native_controls);
 
   supportNativeCast = (): boolean =>
     toBooleanWithDefaultFalse(

package/appUtils/playerManager/usePlayerState.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Player } from "./player";
 import { usePlayer } from "./usePlayer";
 
-type PlayerState = {
+export type PlayerState = {
   currentTime: number;
   duration: number;
   seekableDuration: number;
@@ -10,6 +10,8 @@ type PlayerState = {
   isPaused: boolean;
   isBuffering: boolean;
   isReadyToPlay: boolean;
+  trackState?: QuickBrickPlayer.TracksState;
+  isAd: boolean;
 };
 
 export const usePlayerState = (
@@ -24,6 +26,8 @@ export const usePlayerState = (
     isPaused: null,
     isBuffering: false,
     isReadyToPlay: false,
+    trackState: null,
+    isAd: false,
   });
 
   const player: Player = usePlayer(playerId);
@@ -37,6 +41,8 @@ export const usePlayerState = (
       isPaused: player.isPaused(),
       isBuffering: player.isBuffering(),
       isReadyToPlay: player.isReadyToPlay(),
+      trackState: player.getTracksState(),
+      isAd: player.isAd(),
     });
   }, [player]);
 
@@ -54,10 +60,16 @@ export const usePlayerState = (
           onPlayerPause: onPlayerChangeState,
           onPlayerResume: onPlayerChangeState,
           onPlayerSeekComplete: onPlayerChangeState,
+          onTracksChanged: onPlayerChangeState,
+          onAdBreakBegin: onPlayerChangeState,
+          onAdBreakEnd: onPlayerChangeState,
+          onAdBegin: onPlayerChangeState,
+          onAdEnd: onPlayerChangeState,
+          onAdError: onPlayerChangeState,
         },
       });
     }
-  }, [player]);
+  }, [listenerId, onPlayerChangeState, player]);
 
   return state;
 };

package/cellUtils/index.ts

@@ -9,10 +9,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { cellUtilsLogger } from "@applicaster/zapp-react-native-utils/cellUtils/logger";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import {
-  isNotNil,
-  isNilOrEmpty,
-} from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { toNumberWithDefault, toNumberWithDefaultZero } from "../numberUtils";
 
@@ -509,9 +506,6 @@ export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
   };
 };
 
-export const withoutNilOrEmpty = (arr: string[]): string[] =>
-  arr.filter((item) => !isNilOrEmpty(item));
-
 export const isTextLabel = (key: string): boolean =>
   key.includes("text_label_") && key.endsWith("_switch");
 
@@ -531,7 +525,6 @@ export const hasTextLabelsEnabled = (
 
   const pickedValues = Object.values(picked);
 
-  // Check if any switch value is truthy (true, "true", "1", etc.)
   return pickedValues.some((value) => {
     if (typeof value === "boolean") {
       return value === true;

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -50,7 +50,7 @@ describe("getAllSpecificStyles", () => {
       });
 
       expect(outStyles).toHaveProperty("default");
-      expect(outStyles["default"]).toEqual({});
+      expect(outStyles.default).toEqual({});
     });
 
     it("should handle empty configuration", () => {
@@ -83,7 +83,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
         borderWidth: 2,
       });
@@ -104,7 +104,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
         textSize: 16,
       });
@@ -126,7 +126,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
       });
     });
@@ -148,11 +148,11 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
       });
 
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         backgroundColor: "#00FF00",
       });
     });
@@ -171,7 +171,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["focused"]).toEqual({
+      expect(outStyles.focused).toEqual({
         borderWidth: 3,
       });
     });
@@ -190,7 +190,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["selected"]).toEqual({
+      expect(outStyles.selected).toEqual({
         opacity: 0.5,
       });
     });
@@ -209,7 +209,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["focused_selected"]).toEqual({
+      expect(outStyles.focused_selected).toEqual({
         scale: 1.2,
       });
     });
@@ -232,21 +232,21 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000",
         borderWidth: 1,
         opacity: 1,
       });
 
       // Pressed should have default styles merged with its specific override
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         backgroundColor: "#00FF00", // Override
         borderWidth: 1, // From default
         opacity: 1, // From default
       });
 
       // Focused should have default styles merged with its specific override
-      expect(outStyles["focused"]).toEqual({
+      expect(outStyles.focused).toEqual({
         backgroundColor: "#FF0000", // From default
         borderWidth: 1, // From default
         opacity: 0.8, // Override
@@ -270,7 +270,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         existingKey: "existingValue", // Should be preserved
         backgroundColor: "#FF0000", // From default
         textColor: "#FFFFFF", // New pressed style
@@ -294,7 +294,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FF0000", // Samsung-specific should be included
       });
     });
@@ -317,7 +317,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FFFFFF", // Only non-platform specific
       });
     });
@@ -336,7 +336,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         color: "#FF0000",
       });
     });
@@ -356,7 +356,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         backgroundColor: "#FF0000", // Only samsung style
       });
     });
@@ -377,7 +377,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#00FF00", // Samsung-specific should win
       });
     });
@@ -412,14 +412,14 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         backgroundColor: "#FFFFFF",
         textColor: "#000000",
         borderWidth: 1,
         padding: 10,
       });
 
-      expect(outStyles["pressed"]).toEqual({
+      expect(outStyles.pressed).toEqual({
         backgroundColor: "#EEEEEE",
         textColor: "#000000",
         borderWidth: 1,
@@ -427,7 +427,7 @@ describe("getAllSpecificStyles", () => {
         opacity: 0.8,
       });
 
-      expect(outStyles["focused"]).toEqual({
+      expect(outStyles.focused).toEqual({
         backgroundColor: "#FFFFFF",
         textColor: "#000000",
         borderWidth: 1,
@@ -453,7 +453,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         validKey: "included",
       });
     });
@@ -474,11 +474,11 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["focused_selected"]).toEqual({
+      expect(outStyles.focused_selected).toEqual({
         test: "focused_selected_value",
       });
 
-      expect(outStyles["focused"]).toEqual({
+      expect(outStyles.focused).toEqual({
         another: "focused_value",
       });
     });
@@ -517,7 +517,7 @@ describe("getAllSpecificStyles", () => {
         outStyles,
       });
 
-      expect(outStyles["pressed"]["backgroundColor"]).toBe("#222222");
+      expect(outStyles.pressed.backgroundColor).toBe("#222222");
     });
 
     it("should handle frozen outStyles properties", () => {
@@ -537,7 +537,7 @@ describe("getAllSpecificStyles", () => {
       });
 
       // Should create new object instead of mutating frozen one
-      expect(outStyles["default"]).toEqual({
+      expect(outStyles.default).toEqual({
         existingProp: "value",
         backgroundColor: "#FF0000",
       });

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -335,6 +335,20 @@ function getPlayerConfiguration({ platform, version }) {
   };
 
   if (isTV(platform)) {
+    localizations.fields.push({
+      key: "back_to_live_label",
+      label: "Back to live label",
+      initial_value: "Back To Live",
+      type: "text_input",
+    });
+
+    localizations.fields.push({
+      key: "start_over_label",
+      label: "Start over label",
+      initial_value: "Start Over",
+      type: "text_input",
+    });
+
     styles.fields.push(
       fieldsGroup("Always Show Scrub Bar & Timestamp", "", [
         {
@@ -447,7 +461,7 @@ function getPlayerConfiguration({ platform, version }) {
       ),
       fieldsGroup(
         "Skip Button",
-        "This section allows you to configure the skip button styles for tv",
+        "This section allows you to configure the skip button behaviour",
         [
           {
             type: "switch",
@@ -464,6 +478,12 @@ function getPlayerConfiguration({ platform, version }) {
             label: "Persistent Button Toggle",
             initial_value: true,
           },
+        ]
+      ),
+      fieldsGroup(
+        "Labeled Button Style",
+        "This section allows you to configure the labeled button styles",
+        [
           {
             type: "color_picker_rgba",
             label_tooltip: "",
@@ -619,6 +639,44 @@ function getPlayerConfiguration({ platform, version }) {
     );
   }
 
+  if (isTV(platform)) {
+    general.fields.push(
+      {
+        key: "liveSeekingEnabled",
+        label: "Live Seeking Enabled",
+        initial_value: false,
+        type: "switch",
+        label_tooltip: "Enable Live Seek",
+      },
+      {
+        key: "minimumAllowedSeekableDurationInSeconds",
+        label: "Minimum allowed seekable duration in seconds",
+        initial_value: 300,
+        type: "number_input",
+        label_tooltip:
+          "If duration less than this value, player will disable 'liveSeekingEnabled' value",
+      },
+      {
+        key: "live_image",
+        label: "Live badge",
+        type: "uploader",
+        label_tooltip: "Override default live badge / icon",
+      },
+      {
+        key: "live_width",
+        label: "Live badge width",
+        type: "number_input",
+        initial_value: 85,
+      },
+      {
+        key: "live_height",
+        label: "Live badge height",
+        type: "number_input",
+        initial_value: 50,
+      }
+    );
+  }
+
   if (isMobile(platform)) {
     general.fields.push(
       {
@@ -3429,6 +3487,22 @@ function getPlayerConfiguration({ platform, version }) {
             label_tooltip:
               "This field allows you to override the player configuration / initialization options. i.e. html5: { vhs: { limitRenditionByPlayerDimensions: false } } Please ensure your configuration matches the player you are targeting, and that it is a valid json. See config options here: https://videojs.com/guides/options/",
           },
+          {
+            key: "advanced_player_styles",
+            label: "Advanced Player Styles",
+            type: "text_input",
+            multiline: true,
+            initial_value: `.vjs-text-track-cue { 
+            inset: unset !important;
+            top: 94% !important;
+            bottom: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            width: 100% !important;
+          }`,
+            label_tooltip:
+              "This field allows you to inject custom CSS styles to override default player styles. The styles will be injected into the document head and can be used to customize the appearance of the player. Leave empty to use only default styles.",
+          },
           {
             key: "use_dashjs_player",
             label: "Use Enhanced Player for DASH streams",

package/manifestUtils/keys.js

@@ -959,6 +959,27 @@ const TV_CELL_LABEL_FIELDS = [
     rules: "conditional",
     conditions: [{ key: "switch", section: "styles", value: true }],
   },
+  {
+    type: ZAPPIFEST_FIELDS.font_selector.roku,
+    suffix: "roku font family",
+    tooltip: "",
+    rules: "conditional",
+    conditions: [{ key: "switch", section: "styles", value: true }],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "roku font size",
+    tooltip: "",
+    rules: "conditional",
+    conditions: [{ key: "switch", section: "styles", value: true }],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "roku line height",
+    tooltip: "",
+    rules: "conditional",
+    conditions: [{ key: "switch", section: "styles", value: true }],
+  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "text alignment",

package/manifestUtils/sharedConfiguration/screenPicker/utils.js

@@ -3,6 +3,7 @@ const defaultPlatforms = {
   android_tv: "Android TV",
   lg_tv: "LG TV",
   samsung_tv: "Samsung TV",
+  roku: "Roku TV",
 };
 
 const global_defaults = {

package/manifestUtils/tvAction/container/index.js

@@ -38,7 +38,7 @@ function tvActionButtonsContainer({ label, description, defaults }) {
     generateFieldsFromDefaultsWithoutPrefixedLabel(
       label,
       defaults,
-      tvActionButtonContainerFields(defaults["position"])
+      tvActionButtonContainerFields(defaults.position)
     )
   );
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.0.0-alpha.8621453569",
+  "version": "15.0.0-alpha.8680244503",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.8621453569",
+    "@applicaster/applicaster-types": "15.0.0-alpha.8680244503",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/usePlayerTTS.ts

@@ -1,14 +1,19 @@
 import * as React from "react";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
+import {
+  useAccessibilityManager,
+  useAccessibilityState,
+} from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 import { PlayerTTS } from "@applicaster/zapp-react-native-utils/playerUtils/PlayerTTS";
 
 export const usePlayerTTS = () => {
   const player = usePlayer();
   const accessibilityManager = useAccessibilityManager({});
+  const accessibilityState = useAccessibilityState();
+  const isScreenReaderEnabled = accessibilityState.screenReaderEnabled;
 
   React.useEffect(() => {
-    if (player && accessibilityManager) {
+    if (player && accessibilityManager && isScreenReaderEnabled) {
       const playerTTS = new PlayerTTS(player, accessibilityManager);
       const unsubscribe = playerTTS.init();
 
@@ -17,5 +22,5 @@ export const usePlayerTTS = () => {
         playerTTS.destroy();
       };
     }
-  }, [player, accessibilityManager]);
+  }, [player, accessibilityManager, isScreenReaderEnabled]);
 };

package/pluginUtils/index.ts

@@ -6,6 +6,7 @@ import { deprecationMessage } from "../appUtils";
 
 import { pluginUtilsLogger } from "./logger";
 import { platformSelect } from "../reactUtils";
+import { get } from "../utils";
 
 type PluginModule = any;
 type Plugin = {
@@ -254,3 +255,6 @@ const getPluginType = R.pathOr("unknown_plugin_type", [
 
 export const isPlayerPlugin = (routeState): boolean =>
   getPluginType(routeState) === "player";
+
+export const getPluginModuleUrlScheme = (plugin) =>
+  get(plugin, ["module", "urlScheme"]);

package/reactHooks/advertising/index.ts

@@ -3,7 +3,7 @@ import { View } from "react-native";
 import * as R from "ramda";
 
 import { useNavigation } from "../navigation";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { dismissModal, openModal } from "../../modalState";
 
@@ -16,7 +16,7 @@ const ModalContainer = platformSelect({
 
 export function useAdvertisingInterstitial() {
   const { screenData, currentRoute } = useNavigation();
-  const { plugins } = usePickFromState();
+  const plugins = usePlugins();
 
   return useEffect(() => {
     // TODD: typing problem: fix any type