@applicaster/zapp-react-native-ui-components 15.0.0-rc.5 → 15.0.0-rc.52

package/Components/AnimatedInOut/index.tsx

@@ -6,10 +6,6 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 type AnimatedInterpolatedStyle = any;
 
-// type AnimatedInterpolatedStyle =
-//   | Animated.AnimatedInterpolation
-//   | [{ [Key: string]: Animated.AnimatedInterpolation }];
-
 type AnimationConfig = {
   duration: number;
   easing: EasingFunction;
@@ -45,32 +41,57 @@ export function AnimatedInOut({
   children,
 }: Props) {
   const [animatedValue] = React.useState(new Animated.Value(visible ? 1 : 0));
-  const [animating, setAnimating] = React.useState(undefined);
+  const animationRef = React.useRef<Animated.CompositeAnimation | null>(null);
+  const delayTimerRef = React.useRef<NodeJS.Timeout | null>(null);
 
   const previousVisible = usePrevious(toBooleanWithDefaultFalse(visible));
 
-  function startAnimation(toValue, config) {
-    if (animating) {
-      animating.reset();
-    }
-
-    const { duration, easing, delay = 0, onAnimationEnd = noop } = config;
+  const startAnimation = React.useCallback(
+    (toValue: number, config: AnimationConfig) => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+
+      const { duration, easing, delay = 0, onAnimationEnd = noop } = config;
+
+      const runAnimation = () => {
+        animationRef.current = Animated.timing(animatedValue, {
+          duration,
+          toValue,
+          easing,
+          useNativeDriver: true,
+        });
+
+        animationRef.current.start(({ finished }) => {
+          if (finished) {
+            animationRef.current = null;
+            onAnimationEnd();
+          }
+        });
+      };
+
+      if (delay > 0) {
+        delayTimerRef.current = setTimeout(runAnimation, delay);
+      } else {
+        runAnimation();
+      }
+    },
+    [animatedValue]
+  );
 
-    const compositeAnimation = Animated.timing(animatedValue, {
-      duration,
-      toValue,
-      easing,
-      delay,
-      useNativeDriver: true,
-    }).start(() => {
-      setAnimating(undefined);
-      onAnimationEnd();
-    });
+  React.useEffect(() => {
+    if (previousVisible === undefined) {
+      animatedValue.setValue(visible ? 1 : 0);
 
-    setAnimating(compositeAnimation);
-  }
+      return;
+    }
 
-  React.useEffect(() => {
     if (!previousVisible && visible) {
       startAnimation(1.0, getAnimation(animationConfig, "in"));
     }
@@ -78,7 +99,29 @@ export function AnimatedInOut({
     if (previousVisible && !visible) {
       startAnimation(0.0, getAnimation(animationConfig, "out"));
     }
-  }, [visible, previousVisible]);
+  }, [
+    visible,
+    previousVisible,
+    animatedValue,
+    startAnimation,
+    animationConfig,
+  ]);
+
+  React.useEffect(() => {
+    return () => {
+      if (delayTimerRef.current) {
+        clearTimeout(delayTimerRef.current);
+        delayTimerRef.current = null;
+      }
+
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+
+      animatedValue.stopAnimation();
+    };
+  }, [animatedValue]);
 
   const styles = visible
     ? getAnimation(animationConfig, "in").styles
@@ -86,7 +129,7 @@ export function AnimatedInOut({
 
   return (
     <Animated.View
-      renderToHardwareTextureAndroid={animating}
+      renderToHardwareTextureAndroid={!!animationRef.current}
       style={[styles(animatedValue), staticStyles]}
     >
       {children}

package/Components/Cell/Cell.tsx

@@ -208,14 +208,14 @@ export class CellComponent extends React.Component<Props, State> {
       this.accessibilityManager.readText({
         text: " ",
       });
-    } else {
+    } else if (this.state.cellFocused) {
       this.accessibilityManager.readText({
         text: `${positionLabel}`,
       });
     }
   }
 
-  componentDidUpdate(prevProps: Readonly<Props>) {
+  componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>) {
     if (prevProps.item !== this.props.item) {
       this.setState({
         hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
@@ -224,7 +224,12 @@ export class CellComponent extends React.Component<Props, State> {
       });
     }
 
-    this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
+    if (
+      prevState.cellFocused !== this.state.cellFocused ||
+      this.state.hasFocusableInside
+    ) {
+      this.handleAccessibilityFocus(this.props.index, this.props.dataLength);
+    }
   }
 
   render() {

package/Components/Cell/FocusableWrapper.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+
+type Props = {
+  id: string;
+  groupId: string;
+  isParallaxDisabled: boolean;
+  applyWrapper: boolean;
+  children: (focused: boolean) => React.ReactNode;
+  onFocus: (arg1: any, index?: number) => void;
+  onBlur: Callback;
+};
+
+export const FocusableWrapper = ({
+  id,
+  groupId,
+  isParallaxDisabled,
+  children,
+  applyWrapper,
+  onFocus,
+  onBlur,
+}: Props) => {
+  if (applyWrapper) {
+    return (
+      <Focusable
+        id={id}
+        groupId={groupId}
+        isParallaxDisabled={isParallaxDisabled}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        willReceiveFocus={noop}
+        hasReceivedFocus={noop}
+        // @ts-ignore
+        offsetUpdater={noop}
+        isFocusable
+      >
+        {(focused) => children(focused)}
+      </Focusable>
+    );
+  }
+
+  return <>{children(false)}</>;
+};

package/Components/Cell/TvOSCellComponent.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import * as R from "ramda";
 import { View, StyleSheet } from "react-native";
+import { first, filter } from "rxjs/operators";
+
+import { compose } from "@applicaster/zapp-react-native-utils/utils";
 
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable/FocusableTvOS";
 import { FocusableCell } from "@applicaster/zapp-react-native-ui-components/Components/FocusableCell";
@@ -9,7 +12,12 @@ import { SCREEN_TYPES } from "@applicaster/zapp-react-native-utils/navigationUti
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { sendSelectCellEvent } from "@applicaster/zapp-react-native-utils/analyticsUtils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { CellWithFocusable } from "./CellWithFocusable";
+import { FocusableWrapper } from "./FocusableWrapper";
+
+import { focusableButtonsRegistration$ } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 type Props = {
   item: ZappEntry;
@@ -30,6 +38,10 @@ type Props = {
   component: {
     id: number | string;
     component_type: string;
+    styles?: {
+      component_margin_top?: number;
+      component_padding_top?: number;
+    };
   };
   selected: boolean;
   CellRenderer: React.FunctionComponent<any> & {
@@ -66,6 +78,8 @@ type Props = {
   shouldUpdate: boolean;
   behavior: Behavior;
   componentsMapOffset: number;
+  applyFocusableWrapper: boolean;
+  hasFocusableInside: boolean;
 };
 
 type State = {
@@ -82,7 +96,7 @@ const baseCellStyles = {
   flex: 1,
 } as const;
 
-export class TvOSCellComponent extends React.Component<Props, State> {
+class TvOSCell extends React.Component<Props, State> {
   cell: any;
   target: any;
   layout: any;
@@ -192,14 +206,25 @@ export class TvOSCellComponent extends React.Component<Props, State> {
     ) {
       const { headerOffset } = getHeaderOffset();
 
-      const extraAnchorPointYOffset =
-        screenLayout?.extraAnchorPointYOffset || 0;
+      const extraAnchorPointYOffset = toNumberWithDefaultZero(
+        screenLayout?.extraAnchorPointYOffset
+      );
+
+      const componentMarginTop = toNumberWithDefaultZero(
+        component?.styles?.component_margin_top
+      );
+
+      const componentPaddingTop = toNumberWithDefaultZero(
+        component?.styles?.component_padding_top
+      );
 
       const totalOffset =
         headerOffset +
-          (componentAnchorPointY || 0) +
-          extraAnchorPointYOffset -
-          componentsMapOffset || 0;
+        toNumberWithDefaultZero(componentAnchorPointY) +
+        extraAnchorPointYOffset -
+        toNumberWithDefaultZero(componentsMapOffset) +
+        componentMarginTop +
+        componentPaddingTop;
 
       mainOffsetUpdater?.(
         { tag: this.target },
@@ -239,6 +264,8 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       groupId,
       isFocusable,
       behavior,
+      applyFocusableWrapper,
+      hasFocusableInside,
     } = this.props;
 
     const { id } = item;
@@ -254,24 +281,33 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       this.onFocus(arg1, index);
     };
 
-    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
-
     if (hasFocusableInside) {
       return (
         <View onLayout={this.onLayout}>
-          <CellWithFocusable
-            CellRenderer={CellRenderer}
-            item={item}
+          <FocusableWrapper
             id={focusableId}
-            groupId={(groupId || component?.id).toString()}
+            groupId={String(groupId || component?.id)}
+            isParallaxDisabled={this.layout?.width > 1740}
             onFocus={handleFocus}
-            index={index}
-            scrollTo={this.scrollTo}
-            preferredFocus={preferredFocus}
-            focused={this.props.focused}
-            behavior={behavior}
-            isFocusable={isFocusable}
-          />
+            onBlur={onBlur || this.onBlur}
+            applyWrapper={applyFocusableWrapper}
+          >
+            {(focused) => (
+              <CellWithFocusable
+                CellRenderer={CellRenderer}
+                item={item}
+                id={focusableId}
+                groupId={(groupId || component?.id).toString()}
+                onFocus={handleFocus}
+                index={index}
+                scrollTo={this.scrollTo}
+                preferredFocus={preferredFocus}
+                focused={focused || this.props.focused}
+                behavior={behavior}
+                isFocusable={isFocusable}
+              />
+            )}
+          </FocusableWrapper>
         </View>
       );
     }
@@ -309,3 +345,49 @@ export class TvOSCellComponent extends React.Component<Props, State> {
     );
   }
 }
+
+export function withFocusableWrapperHOC(Component) {
+  return function WrappedComponent(props) {
+    const [focusableViewIsRendered, setFocusableViewIsRendered] =
+      React.useState(false);
+
+    const { CellRenderer, item, groupId, component } = props;
+
+    const isFocusable = toBooleanWithDefaultTrue(props?.isFocusable);
+
+    const focusableGroupId = String(groupId || component?.id);
+
+    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
+
+    React.useEffect(() => {
+      // start waiting any first registration of FocusableButton inside this focusableGroup
+      // after it we could get rid of applying focusable-wrapper
+      const subscription = focusableButtonsRegistration$(focusableGroupId)
+        .pipe(
+          filter(() => isFocusable),
+          first()
+        )
+        .subscribe(() => {
+          setFocusableViewIsRendered(true);
+        });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, [isFocusable, focusableGroupId]);
+
+    const applyFocusableWrapper = React.useMemo(() => {
+      return isFocusable && hasFocusableInside && !focusableViewIsRendered;
+    }, [isFocusable, hasFocusableInside, focusableViewIsRendered]);
+
+    return (
+      <Component
+        {...props}
+        applyFocusableWrapper={applyFocusableWrapper}
+        hasFocusableInside={hasFocusableInside}
+      />
+    );
+  };
+}
+
+export const TvOSCellComponent = compose(withFocusableWrapperHOC)(TvOSCell);

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
-import * as R from "ramda";
 import {
-  findPluginByType,
-  findPluginByIdentifier,
-} from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+  useAppData,
+  useContentTypes,
+  usePlugins,
+} from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useDimensions,
   useIsTablet as isTablet,
   useNavigation,
+  useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
@@ -16,6 +16,7 @@ import { PlayerContainer } from "../PlayerContainer";
 import { useModalSize } from "../VideoModal/hooks";
 import { ViewStyle } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { findCastPlugin, getPlayer } from "./utils";
 
 type Props = {
   item: ZappEntry;
@@ -26,62 +27,6 @@ type Props = {
   groupId?: string;
 };
 
-const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
-const CHROMECAST_PLUGIN_ID = "chromecast_qb";
-
-const getPlayerWithModuleProperties = (
-  PlayerModule: ZappPlugin
-): [ZappPlugin, PlayerModuleProperties] => {
-  const getPlayerModuleProperties = R.ifElse(
-    R.is(Object) && R.has("Component"),
-    R.omit(["Component"]),
-    () => ({})
-  );
-
-  return [
-    PlayerModule?.Component || PlayerModule,
-    getPlayerModuleProperties(PlayerModule),
-  ];
-};
-
-const getPlayer = (
-  item: ZappEntry,
-  state
-): [ZappPlugin, PlayerModuleProperties] => {
-  const {
-    plugins,
-    contentTypes,
-    rivers,
-    appData: { layoutVersion },
-  } = state;
-
-  let PlayerModule;
-
-  if (layoutVersion === "v2") {
-    const { screen_id } = contentTypes?.[item?.type?.value] || {};
-    const { type } = rivers?.[screen_id] || {};
-
-    if (type) {
-      PlayerModule = findPluginByIdentifier(type, plugins)?.module;
-
-      return getPlayerWithModuleProperties(PlayerModule);
-    }
-  }
-
-  if (item?.content?.type === "youtube-id") {
-    PlayerModule = findPluginByIdentifier(YOUTUBE_PLUGIN_ID, plugins)?.module;
-
-    return getPlayerWithModuleProperties(PlayerModule);
-  }
-
-  PlayerModule = findPluginByType(
-    "playable",
-    plugins.filter(({ identifier }) => identifier !== YOUTUBE_PLUGIN_ID)
-  );
-
-  return getPlayerWithModuleProperties(PlayerModule);
-};
-
 type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
@@ -99,14 +44,21 @@ export function HandlePlayable({
   mode,
   groupId,
 }: Props): React.ReactElement | null {
-  const state = usePickFromState();
+  const plugins = usePlugins();
+  const contentTypes = useContentTypes();
+  const rivers = useRivers();
+  const appData = useAppData();
 
   const { closeVideoModal } = useNavigation();
 
-  const [Player, playerModuleProperties] = getPlayer(item, state);
+  const [Player, playerModuleProperties] = getPlayer(item, {
+    plugins,
+    contentTypes,
+    rivers,
+    appData,
+  });
 
-  const { module: CastPlugin } =
-    findPluginByIdentifier(CHROMECAST_PLUGIN_ID, state.plugins, true) || {};
+  const { module: CastPlugin } = findCastPlugin(plugins);
 
   const [playable, setPlayable] =
     React.useState<Nullable<PlayableComponent>>(null);

package/Components/HandlePlayable/const.ts

@@ -0,0 +1,3 @@
+export const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
+
+export const CHROMECAST_PLUGIN_ID = "chromecast_qb";

package/Components/HandlePlayable/utils.ts

@@ -0,0 +1,74 @@
+import {
+  findPluginByIdentifier,
+  findPluginByType,
+} from "@applicaster/zapp-react-native-utils/pluginUtils";
+
+import { CHROMECAST_PLUGIN_ID, YOUTUBE_PLUGIN_ID } from "./const";
+import { omit } from "@applicaster/zapp-react-native-utils/utils";
+
+const getPlayerModuleProperties = (PlayerModule: ZappPlugin) => {
+  if (PlayerModule?.Component && typeof PlayerModule.Component === "object") {
+    return omit(["Component"], PlayerModule);
+  }
+
+  return {};
+};
+
+export const getPlayerWithModuleProperties = (
+  PlayerModule: ZappPlugin
+): [ZappPlugin, PlayerModuleProperties] => {
+  return [
+    PlayerModule?.Component || PlayerModule,
+    getPlayerModuleProperties(PlayerModule),
+  ];
+};
+
+export const findCastPlugin = (plugins: ZappPlugin[]) =>
+  findPluginByIdentifier(CHROMECAST_PLUGIN_ID, plugins, true) || {};
+
+export const findYoutubePlugin = (plugins: ZappPlugin[]) =>
+  findPluginByIdentifier(YOUTUBE_PLUGIN_ID, plugins, true) || {};
+
+export const getPlayer = (
+  item: ZappEntry,
+  {
+    plugins,
+    contentTypes,
+    rivers,
+    appData: { layoutVersion },
+  }: {
+    plugins: ZappPlugin[];
+    contentTypes: Record<string, any>;
+    rivers: Record<string, any>;
+    appData: { layoutVersion: string };
+  }
+): [ZappPlugin, PlayerModuleProperties] => {
+  let PlayerModule;
+
+  if (layoutVersion === "v2") {
+    const screen_id = contentTypes?.[item?.type?.value]?.screen_id;
+    const type = rivers?.[screen_id]?.type;
+
+    if (type) {
+      PlayerModule = findPluginByIdentifier(type, plugins)?.module;
+
+      return getPlayerWithModuleProperties(PlayerModule);
+    }
+  }
+
+  if (item?.content?.type === "youtube-id") {
+    PlayerModule = findYoutubePlugin(plugins)?.module;
+
+    return getPlayerWithModuleProperties(PlayerModule);
+  }
+
+  PlayerModule = findPluginByType(
+    "playable",
+    (plugins as any[]).filter(
+      ({ identifier }: { identifier: string }) =>
+        identifier !== YOUTUBE_PLUGIN_ID
+    )
+  );
+
+  return getPlayerWithModuleProperties(PlayerModule);
+};

package/Components/Layout/TV/LayoutBackground.tsx

@@ -1,7 +1,10 @@
 import React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { getBackgroundImageUrl } from "../utils";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import {
+  selectRemoteConfigurations,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
 
 export const LayoutBackground = ({
   Background,
@@ -12,7 +15,7 @@ export const LayoutBackground = ({
 }) => {
   const theme = useTheme();
 
-  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
+  const remoteConfigurations = useAppSelector(selectRemoteConfigurations);
 
   const backgroundColor = theme.app_background_color;
   const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);

package/Components/Layout/TV/ScreenContainer.tsx

@@ -18,7 +18,7 @@ import {
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { NavBarContainer } from "./NavBarContainer";
 
 type ComponentsExtraProps = {
@@ -111,11 +111,7 @@ export const ScreenContainer = React.memo(function ScreenContainer({
   const { activeRiver } = navigator;
   const { title, visible } = useNavbarState();
 
-  const { plugins = [] } = usePickFromState([
-    "appState",
-    "remoteConfigurations",
-    "plugins",
-  ]);
+  const plugins = usePlugins();
 
   const navigationProps = getNavigationProps({
     navigator,

package/Components/Layout/TV/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 
 import { LayoutContainer } from "./LayoutContainer";
@@ -10,6 +10,7 @@ import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
 import { LayoutBackground } from "./LayoutBackground";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -29,9 +30,7 @@ type Props = {
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
 
-  const { appState: { appReady = false } = {} } = usePickFromState([
-    "appState",
-  ]);
+  const appReady = useAppSelector(selectAppReady);
 
   if (!appReady) {
     return null;

package/Components/Layout/TV/index.web.tsx

@@ -1,11 +1,11 @@
 import * as React from "react";
-import { pathOr } from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
 import { LayoutBackground } from "./LayoutBackground";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -17,8 +17,7 @@ type Props = {
 };
 
 const Layout = ({ Components }: Props) => {
-  const { appState } = usePickFromState(["appState"]);
-  const appReady = pathOr(false, ["appReady"], appState);
+  const appReady = useAppSelector(selectAppReady);
 
   if (!appReady) {
     return null;