@applicaster/zapp-react-native-ui-components 12.0.0-alpha.4757075613 → 12.0.0-alpha.4837064762

package/Components/BaseFocusable/index.tsx

@@ -73,7 +73,7 @@ export class BaseFocusable<
   getId(props?: { id: string; groupId: string }) {
     const { id, groupId = null } = props || this.props;
 
-    return groupId ? `${groupId}-${id}` : id;
+    return groupId ? `groupId:${groupId}___${id}` : id;
   }
 
   getRect() {

package/Components/Cell/Cell.tsx

@@ -207,7 +207,11 @@ export class CellComponent extends React.Component<Props> {
 
     const { id } = item;
 
-    const focusableId = R.join("-", [component?.id, id, index]);
+    const focusableId = R.join("-", [
+      `componentId:${component?.id}`,
+      `id:${id}`,
+      `index:${index}`,
+    ]);
 
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;

package/Components/Cell/CellWithFocusable.tsx

@@ -6,12 +6,20 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isAppleTV } from "../../Helpers/Platform";
 import { useCellState } from "../MasterCell/utils";
 
-const useCellFocusedState = (groupId: string, id: string) => {
+const useCellFocusedState = (
+  skipFocusManagerRegistration: boolean,
+  groupId: string,
+  id: string
+) => {
   const [currentCellFocused, setCurrentCellFocused] = React.useState(false);
 
   React.useEffect(() => {
-    const isGroupItemFocused = () =>
-      setCurrentCellFocused(focusManager.isGroupItemFocused(groupId, id));
+    const isGroupItemFocused = () => {
+      if (!skipFocusManagerRegistration) {
+        const isFocused = focusManager.isGroupItemFocused(groupId, id);
+        setCurrentCellFocused(isFocused);
+      }
+    };
 
     const handler = () => {
       // tvOS hack for properly checking focus
@@ -29,7 +37,7 @@ const useCellFocusedState = (groupId: string, id: string) => {
     return () => {
       focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
     };
-  }, [groupId]);
+  }, [groupId, skipFocusManagerRegistration]);
 
   return currentCellFocused;
 };
@@ -65,7 +73,11 @@ export function CellWithFocusable(props: Props) {
     selected,
   } = props;
 
-  const isFocused = useCellFocusedState(groupId, id);
+  const isFocused = useCellFocusedState(
+    skipFocusManagerRegistration,
+    groupId,
+    id
+  );
 
   const state = useCellState({
     id: item.id,

package/Components/FocusableGroup/index.tsx

@@ -26,6 +26,7 @@ type Props = {
   nextFocusLeft?: any;
   nextFocusRight?: any;
   onLayout?: any;
+  excludeFromFocusSearching?: boolean;
 };
 
 export class FocusableGroup extends BaseFocusable<Props> {

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -19,6 +19,7 @@ type Props = {
   modalHeight?: number;
   modalWidth?: number;
   mode: VideoModalMode;
+  groupId?: string;
 };
 
 const YOUTUBE_PLUGIN_ID = "youtube-player-qb";
@@ -93,6 +94,7 @@ export function HandlePlayable({
   modalHeight,
   modalWidth,
   mode,
+  groupId,
 }: Props): React.ReactElement | null {
   const state = usePickFromState();
 
@@ -167,6 +169,7 @@ export function HandlePlayable({
         isModal={isModal}
         mode={mode}
         disableCastAction={playerModuleProperties?.disableCastAction}
+        groupId={groupId}
       />
     );
   }

package/Components/Layout/TV/ScreenLayoutContextProvider.tsx

@@ -60,7 +60,7 @@ export function ScreenLayoutContextProvider(props: {
     initialState
   );
 
-  const screeenLayoutValue = React.useMemo(
+  const screenLayoutValue = React.useMemo(
     () => ({
       ...screenLayout,
       setScreenLayout,
@@ -69,7 +69,7 @@ export function ScreenLayoutContextProvider(props: {
   );
 
   return (
-    <ScreenLayoutContext.Provider value={screeenLayoutValue}>
+    <ScreenLayoutContext.Provider value={screenLayoutValue}>
       {props.children}
     </ScreenLayoutContext.Provider>
   );

package/Components/Layout/TV/index.tsx

@@ -1,11 +1,15 @@
 import * as React from "react";
 import * as R from "ramda";
+import { View, StyleSheet } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import {
   getNavigationProps,
+  getPathAttributes,
   resolveNavigationPlugin,
   routeIsPlayerScreen,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
@@ -17,9 +21,25 @@ import { ScreenContainer } from "./ScreenContainer";
 import { TransitionOverlay } from "./TransitionOverlay";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
-import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+
+import { FocusableGroup } from "../../FocusableGroup";
+import { Screen } from "../../Screen/TV/index.web";
+
+export const ScreenDataContext = React.createContext(null);
+
+const styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    width: 1920,
+    height: 1080,
+    backgroundColor: "black",
+    // opacity: 0.5,
+
+    borderWidth: 4,
+    borderColor: "magenta",
+  },
+});
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -27,16 +47,73 @@ type Components = {
 };
 
 type ComponentsExtraProps = {
-  Background?: Record<string, any>;
   NavBar?: Record<string, any>;
+  Background?: Record<string, any>;
 };
 
 type Props = {
   Components: Components;
-  ComponentsExtraProps?: ComponentsExtraProps;
-  children: React.ReactNode;
+  componentsExtraProps?: ComponentsExtraProps;
+};
+
+const StackNavigator = ({ Components }: Props) => {
+  // @ts-ignore
+  const { mainStack, currentRoute } = useNavigation();
+
+  // console.log("debug_2", "DEBUG", { mainStack });
+
+  const renderScreen = ({ route, action, key, state }, index) => {
+    const pathAttributes = getPathAttributes({ pathname: route });
+
+    if (R.isEmpty(pathAttributes)) {
+      return null;
+    }
+
+    // console.log("debug_2", "StackNavigator - renderScreen", {
+    //   index,
+    //   route,
+    //   state,
+    //   key,
+    //   action,
+    // });
+
+    const id = `${route}`;
+
+    return (
+      <FocusableGroup
+        id={id}
+        preferredFocus={route === currentRoute}
+        excludeFromFocusSearching
+        key={id}
+      >
+        <View style={styles.container}>
+          <ScreenDataContext.Provider value={state}>
+            <PathnameContext.Provider value={route}>
+              <Screen route={route} Components={Components} />
+            </PathnameContext.Provider>
+          </ScreenDataContext.Provider>
+        </View>
+      </FocusableGroup>
+    );
+  };
+
+  return mainStack.map(renderScreen);
+};
+
+const TransitionerTV = ({ componentsExtraProps, Components }: Props) => {
+  return (
+    <>
+      <ScreenLayoutContextProvider>
+        <StackNavigator
+          componentsExtraProps={componentsExtraProps}
+          Components={Components}
+        />
+      </ScreenLayoutContextProvider>
+    </>
+  );
 };
 
+// @ts-ignore
 const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   const navigator = useNavigation();
   const theme = useTheme();
@@ -98,32 +175,54 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   }
 
   return (
-    <LayoutContainer>
-      <ScreenLayoutContextProvider>
-        <Components.Background
-          backgroundColor={backgroundColor}
-          backgroundImageUrl={backgroundImageUrl}
-          {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
-        >
-          {!isTVOS ? navBarContainer : null}
-          {navBarReady ? (
-            /**
+    // @ts-ignore
+    <TransitionerTV
+      componentsExtraProps={ComponentsExtraProps}
+      Components={Components}
+    >
+      <LayoutContainer>
+        <ScreenLayoutContextProvider>
+          <Components.Background
+            backgroundColor={backgroundColor}
+            backgroundImageUrl={backgroundImageUrl}
+            {...R.omit(["ref"])(ComponentsExtraProps?.Background)}
+          >
+            {!isTVOS ? navBarContainer : null}
+            {navBarReady ? (
+              /**
              Need to re-mount this component on each navigation event
              It's a hack to work around the fact that we don't support
              correct screen rendering in our navigator (shared currentRoute state)
              **/
-            <PathnameContext.Provider value={navigator.currentRoute}>
-              <ScreenContainer>{children}</ScreenContainer>
-            </PathnameContext.Provider>
-          ) : null}
-          {/** Render NavBarContainer over ScreenContainer to let tvOS native
+              <PathnameContext.Provider value={navigator.currentRoute}>
+                <ScreenContainer>{children}</ScreenContainer>
+              </PathnameContext.Provider>
+            ) : null}
+            {/** Render NavBarContainer over ScreenContainer to let tvOS native
           focus manager works correctly to focus nav bar items first **/}
-          {isTVOS ? navBarContainer : null}
-          <TransitionOverlay />
-        </Components.Background>
-      </ScreenLayoutContextProvider>
-    </LayoutContainer>
+            {isTVOS ? navBarContainer : null}
+            <TransitionOverlay />
+          </Components.Background>
+        </ScreenLayoutContextProvider>
+      </LayoutContainer>
+    </TransitionerTV>
   );
 };
 
 export default Layout;
+
+/// Transitioner:
+/*
+Component: Transitioner
+Responsibilities:
+- Transitione between screens.
+Tehere is no transition on Tv so no need for transitioner.
+
+Component: StackNavigator
+Responsibilities:
+- Render the screens in the stack.
+- Render the NavBar? I guess navbar should be part of the screen
+- Render the screen.
+
+Q
+ */

package/Components/MasterCell/DefaultComponents/Image/Image.ios.tsx

@@ -43,14 +43,16 @@ function Image({
     [source, error]
   );
 
+  const _source = shouldRenderImg
+    ? withDimensions(source)
+    : defaultPlaceHolderImage;
+
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={
-        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
-      }
+      source={_source?.uri ? _source : undefined}
       {...R.omit(["source"], otherProps)}
     />
   );

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -177,10 +177,23 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
 const positionAbsolute: ViewStyle = { position: "absolute" };
 
 const LiveImageComponent = (props: LiveImageProps) => {
-  const { item, style, cellUUID, imageKey, actionIdentifier, state } = props;
+  const {
+    item,
+    style: componentStyle,
+    cellUUID,
+    imageKey,
+    actionIdentifier,
+    state,
+  } = props;
 
   const component = useUIComponentContext();
 
+  // Fix for blinking on state change
+  const style = React.useMemo(
+    () => ({ ...componentStyle, backgroundColor: "transparent" }),
+    [componentStyle]
+  );
+
   const componentType = React.useMemo(
     () => getPropComponentType(component),
     [component?.id]

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
+    expect(testInstance.findByType(Image).props.source).toBeUndefined();
   });
 });

package/Components/MasterCell/utils/index.ts

@@ -125,13 +125,24 @@ export const useFilterChildren = <
 
   const filteredChildren = children.filter((child) => {
     const item = child.props.item;
-    const action = actions.actions[child.props.pluginIdentifier];
+    const actionIdentifier = child.props.pluginIdentifier;
+    const action = actions.actions[actionIdentifier];
+
     // context value of specific plugin
-    const currentValue = action?.module?.context?._currentValue;
+    if (action?.module && action.module.context) {
+      const currentValue = action.module.context._currentValue;
+
+      return currentValue?.isActionAvailable
+        ? currentValue.isActionAvailable(item)
+        : true;
+    }
 
-    return currentValue?.isActionAvailable
-      ? currentValue.isActionAvailable(item)
-      : true;
+    masterCellLogger.error({
+      message: `Action plugin for ${actionIdentifier} could not be found, check the configuration of your action button`,
+      data: { item, action: child.props.pluginIdentifier },
+    });
+
+    return false;
   });
 
   return filteredChildren;

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -54,6 +54,11 @@ import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
 type Props = {
   Player: React.ComponentType<any>;
   PlayerLoadingView?: React.ComponentType<any>; // 👀 we are not receiving this prop
@@ -63,6 +68,7 @@ type Props = {
   mode?: VideoModalMode;
   loadPipesData: (url: string, options: {}) => void;
   disableCastAction?: boolean;
+  groupId?: string;
 };
 
 type ScreenStyles = ZappRiver["styles"] & {
@@ -195,6 +201,7 @@ const PlayerContainerComponent = (props: Props) => {
     style: videoStyle,
     mode = VideoModalMode.MAXIMIZED,
     disableCastAction = false,
+    groupId,
   } = props;
 
   // Hooks
@@ -229,6 +236,9 @@ const PlayerContainerComponent = (props: Props) => {
   const screenData = useTargetScreenData(item);
   const { setVisible: showNavBar } = useSetNavbarState();
 
+  const { isActiveGesture, startComponentsAnimation, setPlayerAnimationState } =
+    useModalAnimationContext();
+
   const playerEvent = (event, ...args) => {
     playerManager.invokeHandler(event, ...args);
   };
@@ -241,7 +251,6 @@ const PlayerContainerComponent = (props: Props) => {
       return;
     }
 
-    navigator.goBack();
     showNavBar(true);
   }, [isModal, navigator.goBack, showNavBar]);
 
@@ -446,7 +455,7 @@ const PlayerContainerComponent = (props: Props) => {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
       } else {
-        navigator.minimiseVideoModal();
+        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -621,6 +630,7 @@ const PlayerContainerComponent = (props: Props) => {
                 style={styles.focusableGroup}
                 preferredFocus
                 shouldUsePreferredFocus
+                groupId={groupId}
               >
                 {/* Video player and components */}
                 <View
@@ -641,7 +651,11 @@ const PlayerContainerComponent = (props: Props) => {
                         autoplay={true}
                         controls={false}
                         disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
+                        docked={
+                          navigator.isVideoModalDocked() &&
+                          !startComponentsAnimation &&
+                          !isActiveGesture
+                        }
                         entry={item}
                         fullscreen={mode === VideoModalMode.FULLSCREEN}
                         inline={inline}

package/Components/PlayerImageBackground/index.tsx

@@ -1,38 +1,64 @@
 import React, { PropsWithChildren } from "react";
-import { ImageBackground } from "react-native";
+import { ImageBackground, View } from "react-native";
 
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: { [K: string]: any };
   imageStyle?: { [K: string]: any };
   imageKey?: string;
+  defaultImageDimensions?: { [K: string]: any };
 }>;
 
+const imageSize = { width: "100%", height: "100%" };
+
 const PlayerImageBackgroundComponent = ({
   entry,
   children,
   style,
   imageStyle,
   imageKey,
+  defaultImageDimensions,
 }: Props) => {
   const source = React.useMemo(
     () => ({ uri: imageSrcFromMediaItem(entry, imageKey) }),
     [imageKey, entry]
   );
 
+  const { playerAnimationState } = useModalAnimationContext();
+
   if (!source) return <>{children}</>;
 
   return (
-    <ImageBackground
-      resizeMode="cover"
-      style={style}
-      imageStyle={imageStyle}
-      source={source}
+    <View
+      style={
+        playerAnimationState === PlayerAnimationStateEnum.maximaze
+          ? defaultImageDimensions
+          : style
+      }
     >
-      {children}
-    </ImageBackground>
+      <AnimationComponent
+        style={style}
+        animationType={ComponentAnimationType.player}
+        additionalData={defaultImageDimensions}
+      >
+        <ImageBackground
+          resizeMode="cover"
+          style={imageSize}
+          imageStyle={imageStyle}
+          source={source}
+        >
+          {children}
+        </ImageBackground>
+      </AnimationComponent>
+    </View>
   );
 };