@applicaster/zapp-react-native-utils 14.0.0-alpha.5533663133 → 14.0.0-alpha.6242515303

package/appUtils/playerManager/OverlayObserver/OverlaysObserver.ts

@@ -18,13 +18,6 @@ export const { log_verbose, log_debug, log_info, log_error } = createLogger({
   parent: utilsLogger,
 });
 
-type ActionChapter = {
-  type: string;
-  options?: {
-    title: string;
-  };
-};
-
 type ChapterMarkerOriginal = {
   id: string;
   title: string;
@@ -33,14 +26,6 @@ type ChapterMarkerOriginal = {
   actions: ActionChapter[];
 };
 
-export type ChapterMarkerEvent = {
-  id: string;
-  title: string;
-  start_time: number;
-  end_time: number;
-  actions: ActionChapter[];
-};
-
 export type TitleSummaryEvent = {
   title: string | number;
   summary: string | number;

package/appUtils/playerManager/useChapterMarker.tsx

@@ -1,4 +1,3 @@
-import { ChapterMarkerEvent } from "./OverlayObserver/OverlaysObserver";
 import { usePlayer } from "./usePlayer";
 import * as React from "react";
 

package/appUtils/playerManager/usePlayerControllerSetup.tsx

@@ -5,6 +5,9 @@ import { playerManager } from "./index";
 import { useValidatePlayerConfig } from "../../playerUtils/useValidatePlayerConfig";
 import { PlayerRole } from "./conts";
 import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
+import { TVSeekController } from "../../reactHooks/player/TVSeekControlller/TVSeekController";
+import { KeyInputHandler } from "../keyInputHandler/KeyInputHandler";
+import { isTV } from "../../reactUtils";
 
 // TODO: Rename to ControllerType
 export const usePlayerControllerSetup = ({
@@ -76,5 +79,18 @@ export const usePlayerControllerSetup = ({
     };
   }, [playerId, playerController]);
 
+  useEffect(() => {
+    if (!isTV()) {
+      return;
+    }
+
+    if (playerController) {
+      const seekController = new TVSeekController(playerController);
+      playerController.seekController = seekController;
+
+      return KeyInputHandler.getInstance().addListener(seekController);
+    }
+  }, [playerController]);
+
   return playerController;
 };

package/focusManager/FocusManager.ts

@@ -176,18 +176,30 @@ class FocusManager {
     }
   }
 
-  registerFocusable(
-    component: FocusManager.TouchableReactRef,
-    parentFocusable: FocusManager.TouchableReactRef,
-    isFocusableCell: boolean
-  ) {
-    const focusableId = getFocusableId(component);
+  registerFocusable({
+    touchableRef,
+    parentFocusableRef,
+    isFocusableCell,
+    parentFocusableId,
+  }: {
+    touchableRef: FocusManager.TouchableReactRef;
+    parentFocusableRef: FocusManager.TouchableReactRef;
+    isFocusableCell: boolean;
+    parentFocusableId: string;
+  }) {
+    const focusableId = getFocusableId(touchableRef);
+
     const focusableComponent = FocusManager.findFocusable(focusableId);
 
-    if (!focusableComponent && component) {
-      this.focusableComponents.push(component);
+    if (!focusableComponent && touchableRef) {
+      this.focusableComponents.push(touchableRef);
 
-      this.tree.add(component, parentFocusable, isFocusableCell);
+      this.tree.add(
+        touchableRef,
+        parentFocusableRef,
+        isFocusableCell,
+        parentFocusableId
+      );
     } else {
       logger.warning("Focusable component already registered", {
         id: focusableId,
@@ -267,7 +279,7 @@ class FocusManager {
 
       if (nextFocus) {
         // HACK: hack to fix the hack below
-        // HACK: putting call to the end of the event loop so the next component has a chane to be registered
+        // HACK: putting call to the end of the event loop so the next component has a chance to be registered
         setTimeout(() => {
           FocusManager.instance.setFocus(nextFocus, {
             direction: "down",

package/focusManager/Tree.ts

@@ -8,37 +8,41 @@ export class Tree {
     this.tree = focusManagerTree;
   }
 
-  add(component, parentFocusable, isFocusableCell) {
-    const focusableId = getFocusableId(component);
-    const parentId = getFocusableId(parentFocusable);
+  add(
+    touchableRef: FocusManager.TouchableReactRef,
+    parentFocusableRef: FocusManager.TouchableReactRef,
+    isFocusableCell: boolean,
+    parentFocusableId: string
+  ) {
+    const focusableId = getFocusableId(touchableRef);
+    const parentId = getFocusableId(parentFocusableRef) || parentFocusableId;
     const focusableComponentInTree = this.find(focusableId);
 
     // update node if it already exists
     if (focusableComponentInTree) {
-      focusableComponentInTree.updateNode(component);
+      focusableComponentInTree.updateNode(touchableRef);
     }
 
-    if (parentFocusable?.current) {
-      if (!this.find(parentId)) {
-        this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
-      }
+    if (!this.find(parentId)) {
+      // create temporary node to the root of the tree
+      this.tree.push(new TreeNode(null, parentId, null, isFocusableCell));
+    }
 
-      const parentNode = this.find(parentId);
+    const parentNode = this.find(parentId);
 
-      if (parentNode) {
-        if (focusableComponentInTree) {
-          focusableComponentInTree.isFocusableCell = isFocusableCell;
-          focusableComponentInTree.parentId = parentNode.id;
+    if (parentNode) {
+      if (focusableComponentInTree) {
+        focusableComponentInTree.isFocusableCell = isFocusableCell;
+        focusableComponentInTree.parentId = parentNode.id;
 
-          parentNode.addChild(focusableComponentInTree);
+        parentNode.addChild(focusableComponentInTree);
 
-          // remove root object from the list
-          this.tree = this.tree.filter(
-            (node) => node !== focusableComponentInTree
-          );
-        } else {
-          parentNode.addChild(component, focusableId, isFocusableCell);
-        }
+        // remove root object from the list
+        this.tree = this.tree.filter(
+          (node) => node !== focusableComponentInTree
+        );
+      } else {
+        parentNode.addChild(touchableRef, focusableId, isFocusableCell);
       }
     }
   }

package/focusManager/__tests__/FocusManager.test.ts

@@ -1,5 +1,8 @@
 import { focusManager } from "../FocusManager";
 
+const isFocusableCell = true;
+const parentFocusableId = "parentFocusableId";
+
 const group = {
   current: {
     props: {
@@ -62,13 +65,47 @@ jest.useFakeTimers();
 
 describe("FocusManager", () => {
   beforeAll(() => {
-    focusManager.registerFocusable(group, { current: null });
-    focusManager.registerFocusable(child1, group);
-    focusManager.registerFocusable(child2, group);
-    focusManager.registerFocusable(child3, child2);
-
-    focusManager.registerFocusable(child4, child2);
-    focusManager.registerFocusable(child5, child2);
+    focusManager.registerFocusable({
+      touchableRef: group,
+      parentFocusableRef: { current: null },
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child1,
+      parentFocusableRef: group,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child2,
+      parentFocusableRef: group,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child3,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child4,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
+
+    focusManager.registerFocusable({
+      touchableRef: child5,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
   });
 
   it("focusManager should be defined", () => {
@@ -199,7 +236,12 @@ describe("FocusManager", () => {
   });
 
   it("focusManager registerFocusable should register", () => {
-    focusManager.registerFocusable(child5, child2);
+    focusManager.registerFocusable({
+      touchableRef: child5,
+      parentFocusableRef: child2,
+      isFocusableCell,
+      parentFocusableId,
+    });
 
     expect(
       focusManager.isFocusableChildOf(child5.current.props.id, child2)

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -351,6 +351,86 @@ function getPlayerConfiguration({ platform, version }) {
           ],
         },
       ]),
+      fieldsGroup(
+        "Partial Player (Roku only)",
+        "This section allows you to configure width and height of video player in Partial Player",
+        [
+          {
+            key: "video_theater_width",
+            label: "Width of player",
+            type: "number_input",
+            initial_value: "1420",
+            placeHolder: "1420",
+          },
+          {
+            key: "video_theater_height",
+            label: "Height of player",
+            type: "number_input",
+            initial_value: "900",
+            placeHolder: "900",
+          },
+          {
+            key: "full_screen_button_offset_x",
+            label: "Fullscreen button X",
+            type: "number_input",
+            initial_value: 160,
+            placeHolder: "160",
+          },
+          {
+            key: "full_screen_button_offset_y",
+            label: "Fullscreen button Y",
+            type: "number_input",
+            initial_value: 160,
+            placeHolder: "160",
+          },
+          {
+            key: "full_screen_button_w",
+            label: "Fullscreen button width",
+            type: "number_input",
+            initial_value: 120,
+            placeHolder: "120",
+          },
+          {
+            key: "full_screen_button_h",
+            label: "Fullscreen button height",
+            type: "number_input",
+            initial_value: 120,
+            placeHolder: "120",
+          },
+          {
+            key: "full_screen_button_background_color",
+            type: "color_picker",
+            label: "Fullscreen Button background color",
+            initial_value: "#00000000",
+            placeHolder: "color",
+            label_tooltip: "Pick Color",
+          },
+          {
+            key: "full_screen_button_background_url",
+            type: "text_input",
+            label: "Fullscreen Button background Url",
+            initial_value: "pkg:/images/tv_fullscreen.png",
+            placeHolder: "",
+            label_tooltip: "",
+          },
+          {
+            key: "full_screen_button_highlighted_background_color",
+            type: "color_picker",
+            label: "Fullscreen Button highlighted background color",
+            initial_value: "#00000000",
+            placeHolder: "color",
+            label_tooltip: "Pick Color",
+          },
+          {
+            key: "full_screen_button_highlighted_background_url",
+            type: "text_input",
+            label: "Fullscreen Button highlighted Url",
+            initial_value: "pkg:/images/tv_fullscreen.png",
+            placeHolder: "",
+            label_tooltip: "",
+          },
+        ]
+      ),
       fieldsGroup(
         "Skip Button",
         "This section allows you to configure the skip button styles for tv",
@@ -482,6 +562,20 @@ function getPlayerConfiguration({ platform, version }) {
             key: "skip_button_style_text_android_font_size",
             initial_value: 24,
           },
+          {
+            type: "roku_font_selector",
+            label_tooltip: "",
+            label: "Android Font Family",
+            key: "skip_button_style_text_roku_font_family",
+            initial_value: "Ubuntu-Bold",
+          },
+          {
+            type: "number_input",
+            label_tooltip: "",
+            label: "Roku Font Size",
+            key: "skip_button_style_text_roku_font_size",
+            initial_value: 24,
+          },
           {
             type: "select",
             options: [
@@ -3330,6 +3424,60 @@ function getPlayerConfiguration({ platform, version }) {
           },
         ]
       ),
+      fieldsGroup(
+        "Roku only",
+        "This section allows you to configure RAF - Roku Ad Framework settings",
+        [
+          {
+            key: "raf_enabled",
+            type: "switch",
+            initial_value: false,
+          },
+          {
+            key: "raf_url",
+            type: "text_input",
+            label: "Ad Url",
+            label_tooltip:
+              "Publisher's ad URL. The default is he roku ad server with single preroll placeholder, with revenue spilt ad sharing by default. TO GET PAID A URL MUST BE PASSED IN HERE. Note: If you are putting ads in child targetted content then your ad url will have to use the ROKU_ADS_KIDS_CONTENT macro value, as per the docs here: developer.roku.com/docs/developer-program/advertising/integrating-roku-advertising-framework.md#url-parameter-macros",
+          },
+          {
+            key: "genre",
+            type: "text_input",
+            label: "Roku Genre",
+            initial_value: "Entertainment",
+            label_tooltip:
+              "Choose value from Roku genre tags, from developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md",
+          },
+          {
+            key: "nielsen_enabled",
+            type: "checkbox",
+            initial_value: false,
+            label_tooltip:
+              "Required only for apps launched in the US market, See developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md for details on configuration",
+          },
+          {
+            key: "nielsen_app_id",
+            type: "text_input",
+            initial_value: "",
+            label_tooltip:
+              "id of your app for nielsen leave blank if you don't have a specific id (that is almost always the case)",
+          },
+          {
+            key: "nielsen_genre",
+            type: "text_input",
+            initial_value: "General",
+            label_tooltip:
+              "genre from developer.roku.com/en-gb/docs/developer-program/advertising/integrating-roku-advertising-framework.md#nielsen-dar-genre-tags",
+          },
+          {
+            key: "is_kids_content",
+            type: "checkbox",
+            initial_value: false,
+            label_tooltip:
+              "If your content is directed at kids, this must be checked. See developer.roku.com/docs/developer-program/advertising/raf-api.md#setcontentgenregenres-as-string-kidscontent-as-boolean for more info. Also note your ad urls will have to use the ROKU_ADS_KIDS_CONTENT macro value, as per the docs here: developer.roku.com/docs/developer-program/advertising/integrating-roku-advertising-framework.md#url-parameter-macros",
+          },
+        ]
+      ),
       fieldsGroup(
         "Audio Tracks",
         "This section allows you to configure default audio track behavior for videos with multiple audio tracks",

package/manifestUtils/keys.js

@@ -485,6 +485,18 @@ const TV_MENU_LABEL_FIELDS = [
     type: ZAPPIFEST_FIELDS.number_input,
     suffix: "LG letter spacing",
   },
+  {
+    type: ZAPPIFEST_FIELDS.font_selector.roku,
+    suffix: "Roku font family",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "Roku font size",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "Roku line height",
+  },
   {
     type: ZAPPIFEST_FIELDS.select,
     suffix: "text transform",

package/manifestUtils/sharedConfiguration/screenPicker/stylesFields.js

@@ -424,6 +424,12 @@ const titleFields = [
     key: "vizio_font_family",
     initial_value: fontFamily,
   },
+  {
+    type: "roku_font_selector",
+    label: "Roku TV Font Family",
+    key: "roku_font_family",
+    initial_value: fontFamily,
+  },
   ...generateFontConfiguration(),
   // text transform
   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "14.0.0-alpha.5533663133",
+  "version": "14.0.0-alpha.6242515303",
   "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": "14.0.0-alpha.5533663133",
+    "@applicaster/applicaster-types": "14.0.0-alpha.6242515303",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/layout/isTablet/index.ts

@@ -6,7 +6,10 @@ import { NativeModules, Platform } from "react-native";
  * @param {String} orientation - Orientation enum passed to the function
  * @returns {Boolean} isTablet - returns whether the given device is a tablet
  */
-export const isTablet = (dimensions, orientation) => {
+export const isTablet = (
+  dimensions?: { width: number; height: number },
+  orientation?: string
+) => {
   if (Platform?.OS === "ios") {
     return Platform?.isPad;
   } else if (Platform?.OS === "android") {
@@ -15,7 +18,7 @@ export const isTablet = (dimensions, orientation) => {
     return initialProps?.is_tablet;
   }
 
-  const { width } = dimensions;
+  const { width } = dimensions || {};
 
   if (width < 600) return false;
   if (width >= 600 && width < 840) return orientation === "portrait";