@applicaster/zapp-react-native-ui-components 15.0.0-alpha.5918085834 → 15.0.0-alpha.5949018320

package/Components/BaseFocusable/index.ios.ts

@@ -22,6 +22,7 @@ type Props = {
   onFocus?: FocusManager.FocusEventCB;
   onBlur?: FocusManager.FocusEventCB;
   selected?: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class BaseFocusable<
@@ -61,10 +62,14 @@ export class BaseFocusable<
   }
 
   componentDidMount() {
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
     const component = this;
     this.node = this.ref.current;
 
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.register({
       id,
       component: component,
@@ -118,7 +123,12 @@ export class BaseFocusable<
 
   componentWillUnmount() {
     this._isMounted = false;
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
+
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.unregister(id, { group: this.isGroup || false });
   }
 

package/Components/Cell/FocusableWrapper.tsx

@@ -10,6 +10,7 @@ type Props = {
   children: (focused: boolean) => React.ReactNode;
   onFocus: (arg1: any, index?: number) => void;
   onBlur: Callback;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export const FocusableWrapper = ({
@@ -20,6 +21,7 @@ export const FocusableWrapper = ({
   applyWrapper,
   onFocus,
   onBlur,
+  skipFocusManagerRegistration,
 }: Props) => {
   if (applyWrapper) {
     return (
@@ -34,6 +36,7 @@ export const FocusableWrapper = ({
         // @ts-ignore
         offsetUpdater={noop}
         isFocusable
+        skipFocusManagerRegistration={skipFocusManagerRegistration}
       >
         {(focused) => children(focused)}
       </Focusable>

package/Components/Cell/TvOSCellComponent.tsx

@@ -80,6 +80,7 @@ type Props = {
   componentsMapOffset: number;
   applyFocusableWrapper: boolean;
   hasFocusableInside: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 type State = {
@@ -266,6 +267,7 @@ class TvOSCell extends React.Component<Props, State> {
       behavior,
       applyFocusableWrapper,
       hasFocusableInside,
+      skipFocusManagerRegistration,
     } = this.props;
 
     const { id } = item;
@@ -291,6 +293,7 @@ class TvOSCell extends React.Component<Props, State> {
             onFocus={handleFocus}
             onBlur={onBlur || this.onBlur}
             applyWrapper={applyFocusableWrapper}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
           >
             {(focused) => (
               <CellWithFocusable
@@ -305,6 +308,7 @@ class TvOSCell extends React.Component<Props, State> {
                 focused={focused || this.props.focused}
                 behavior={behavior}
                 isFocusable={isFocusable}
+                skipFocusManagerRegistration={skipFocusManagerRegistration}
               />
             )}
           </FocusableWrapper>
@@ -327,6 +331,7 @@ class TvOSCell extends React.Component<Props, State> {
           offsetUpdater={offsetUpdater}
           style={baseCellStyles}
           isFocusable={isFocusable}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused) => (
             <FocusableCell

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,8 +10,8 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
-
-function noop() {}
+import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type Props = {
   id: string;
@@ -39,6 +39,7 @@ type Props = {
   hasReceivedFocus: () => void;
   offsetUpdater: (arg1: string, arg2: number) => number;
   style: ViewStyle;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class Focusable extends BaseFocusable<Props> {
@@ -53,6 +54,7 @@ export class Focusable extends BaseFocusable<Props> {
     this.nextFocusableReactTags = {};
     this.preferredFocus = this.preferredFocus.bind(this);
     this.measureView = this.measureView.bind(this);
+    this.onRegistered = this.onRegistered.bind(this);
   }
 
   /**
@@ -169,6 +171,13 @@ export class Focusable extends BaseFocusable<Props> {
     });
   }
 
+  onRegistered({ nativeEvent }) {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: false });
+  }
+
   render() {
     const {
       children,
@@ -203,6 +212,7 @@ export class Focusable extends BaseFocusable<Props> {
         focusable={isFocusable}
         {...this.nextFocusableReactTags}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>

package/Components/Focusable/__tests__/__snapshots__/FocusableTvOS.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`FocusableTvOS should render correctly 1`] = `
   groupId={null}
   itemId={null}
   onLayout={[Function]}
+  onRegistered={[Function]}
   onViewBlur={[Function]}
   onViewFocus={[Function]}
   onViewPress={[Function]}

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-components/Components/NativeFocusables";
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
 import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 const { log_verbose } = createLogger({
   subsystem: "General",
@@ -34,6 +35,15 @@ type Props = {
 };
 
 export class FocusableGroup extends BaseFocusable<Props> {
+  public readonly isGroup: boolean = true;
+
+  onRegistered = ({ nativeEvent }) => {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: true });
+  };
+
   render() {
     const {
       children,
@@ -66,6 +76,7 @@ export class FocusableGroup extends BaseFocusable<Props> {
         onGroupBlur={onGroupBlur}
         style={style}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {children}
       </FocusableGroupNative>

package/Components/GeneralContentScreen/utils/useCurationAPI.ts

@@ -1,4 +1,4 @@
-import { all, equals, path, prop, isEmpty, pluck, values } from "ramda";
+import { all, equals, isEmpty, path, pluck, prop, values } from "ramda";
 
 import { useEffect, useMemo } from "react";
 
@@ -24,6 +24,7 @@ import {
 
 import { produce } from "immer";
 import { useLoadPipesDataDispatch } from "@applicaster/zapp-react-native-utils/reactHooks";
+
 // types reference
 
 declare interface CurationEntry {
@@ -35,6 +36,7 @@ type Feeds = Record<string, ZappPipesData>;
 
 type LayoutPresets = PresetsMapping["presets_mappings"];
 
+const TABS_SCREEN_TYPE = "tabs_screen";
 const SMART_COMPONENT_TYPE = "quick-brick-smart-component";
 const SOURCE_PATH = ["data", "source"];
 const MAPPING_PATH = ["data", "mapping"];
@@ -53,7 +55,10 @@ export const getTransformedPreset = (
   const presetComponent = layoutPresets?.[preset?.preset_name];
 
   if (!presetComponent) {
-    logger.log_error("Preset missing or wrong data format", { entry: preset });
+    logger.log_error(
+      `Preset "${preset?.preset_name}" missing or wrong data format`,
+      { entry: preset }
+    );
 
     return;
   }
@@ -131,10 +136,16 @@ export const useCurationAPI = (
   );
 
   const { pathname } = useRoute();
-  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
+  const isNestedScreen = screenContext?.type === TABS_SCREEN_TYPE;
+
+  const [entryContext] = ZappPipesEntryContext.useZappPipesContext(
+    pathname,
+    isNestedScreen
+  );
+
   const urlsMap = useMemo<{ [key: string]: string }>(() => {
     const map = {};
 

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -61,6 +61,7 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
+import { useRestrictMobilePlayback } from "./useRestrictMobilePlayback";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -264,7 +265,21 @@ const PlayerContainerComponent = (props: Props) => {
 
     showNavBar(true);
     navigator.goBack();
-  }, [isModal, navigator.goBack, state.playerId, showNavBar]);
+  }, [isModal, state.playerId, showNavBar, navigator]);
+
+  const pluginConfiguration = React.useMemo(() => {
+    return (
+      playerManager.getPluginConfiguration() ||
+      R.prop("__plugin_configuration", Player)
+    );
+  }, [playerManager.isRegistered()]);
+
+  useRestrictMobilePlayback({
+    player,
+    entry: item,
+    pluginConfiguration,
+    close,
+  });
 
   const playEntry = (entry) => navigator.replaceTop(entry, { mode });
 
@@ -456,13 +471,6 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, []);
 
-  const pluginConfiguration = React.useMemo(() => {
-    return (
-      playerManager.getPluginConfiguration() ||
-      R.prop("__plugin_configuration", Player)
-    );
-  }, [playerManager.isRegistered()]);
-
   const disableMiniPlayer = React.useMemo(() => {
     return pluginConfiguration?.disable_mini_player_when_inline;
   }, [pluginConfiguration]);

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -0,0 +1,112 @@
+import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
+import NetInfo from "@react-native-community/netinfo";
+
+import { useEffect, useMemo, useRef } from "react";
+import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { log_info } from "./logger";
+
+export const useRestrictMobilePlayback = ({
+  player,
+  entry,
+  pluginConfiguration,
+  close,
+}: {
+  player?: Player;
+  entry?: ZappEntry;
+  pluginConfiguration?: Record<string, string>;
+  close: () => void;
+}) => {
+  const dialogVisibleRef = useRef(false);
+
+  const theme = useTheme();
+
+  useEffect(() => {
+    return () => {
+      if (isTV()) {
+        return;
+      }
+
+      dialogVisibleRef.current = false;
+    };
+  }, []);
+
+  const isConnectionRestricted = useMemo(() => {
+    if (isTV()) {
+      return false;
+    }
+
+    return player && entry?.extensions?.connection_restricted;
+  }, [player, entry]);
+
+  useEffect(() => {
+    if (!isConnectionRestricted) {
+      return;
+    }
+
+    return player.addListener({
+      id: "restrictMobilePlaybackListener",
+      listener: {
+        onVideoProgress: () => {
+          if (dialogVisibleRef.current) {
+            player.pause();
+          }
+        },
+        onPlayerResume: () => {
+          if (dialogVisibleRef.current) {
+            player.pause();
+          }
+        },
+      },
+    });
+  }, [isConnectionRestricted, player]);
+
+  useEffect(() => {
+    if (!isConnectionRestricted) {
+      return;
+    }
+
+    const stopPlayer = () => {
+      log_info(
+        "Stopping player due to mobile restriction, connection_restricted: true"
+      );
+
+      player.pause();
+
+      dialogVisibleRef.current = true;
+
+      showAlertDialog({
+        title:
+          pluginConfiguration?.mobile_connection_restricted_alert_title ||
+          "N/A",
+        message:
+          pluginConfiguration?.mobile_connection_restricted_alert_message ||
+          "N/A",
+        okButtonText: theme.ok_button || "OK",
+        completion: () => {
+          dialogVisibleRef.current = false;
+
+          close();
+        },
+      });
+    };
+
+    return NetInfo.addEventListener((state) => {
+      if (state.type === "cellular") {
+        if (dialogVisibleRef.current) {
+          return;
+        }
+
+        stopPlayer();
+      }
+    });
+  }, [
+    close,
+    entry.extensions.connection_restricted,
+    pluginConfiguration,
+    player,
+    theme.ok_button,
+    isConnectionRestricted,
+  ]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.5918085834",
+  "version": "15.0.0-alpha.5949018320",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-alpha.5918085834",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.5918085834",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.5918085834",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.5918085834",
+    "@applicaster/applicaster-types": "15.0.0-alpha.5949018320",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.5949018320",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.5949018320",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.5949018320",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",