@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5227180498 → 12.0.0-alpha.5230293331

package/Components/BaseFocusable/index.tsx

@@ -66,14 +66,14 @@ export class BaseFocusable<
     const { initialFocus } = this.props;
 
     if (initialFocus) {
-      focusManager.setupInitialFocus(this.getId());
+      focusManager.setFocus(this.getId());
     }
   }
 
   getId(props?: { id: string; groupId: string }) {
-    const { id, groupId = null } = props || this.props;
+    const { id } = props || this.props;
 
-    return groupId ? `${groupId}-${id}` : id;
+    return id;
   }
 
   getRect() {

package/Components/Cell/Cell.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as R from "ramda";
+import { join, merge, path } from "ramda";
 import { View } from "react-native";
 
 import { Focusable } from "@applicaster/zapp-react-native-ui-components/Components/Focusable";
@@ -11,6 +11,7 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { CellWithFocusable } from "./CellWithFocusable";
 import { BaseFocusable } from "../BaseFocusable";
+import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
 type Props = {
   item: {
@@ -66,6 +67,10 @@ type Props = {
   behavior: Behavior;
 };
 
+type State = {
+  hasFocusableInside: boolean;
+};
+
 const baseCellStyles = {
   height: "100%",
   display: "flex",
@@ -77,7 +82,7 @@ const touchableStyles = {
   height: "100%",
 } as const;
 
-export class CellComponent extends React.Component<Props> {
+export class CellComponent extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this.onPress = this.onPress.bind(this);
@@ -87,6 +92,10 @@ export class CellComponent extends React.Component<Props> {
     this.hasReceivedFocus = this.hasReceivedFocus.bind(this);
     this.scrollVertically = this.scrollVertically.bind(this);
     this.scrollToIndex = this.scrollToIndex.bind(this);
+
+    this.state = {
+      hasFocusableInside: props.CellRenderer.hasFocusableInside?.(props.item),
+    };
   }
 
   setScreenLayout(componentAnchorPointY, screenLayout) {
@@ -105,8 +114,8 @@ export class CellComponent extends React.Component<Props> {
       onPress(item, index);
     } else {
       const { item, navigator, component, appData } = this.props;
-      const itemTargetScreen = R.path(["screen_type"], item);
-      const componentTargetScreen = R.path(["data", "target"], component);
+      const itemTargetScreen = path(["screen_type"], item);
+      const componentTargetScreen = path(["data", "target"], component);
       const itemType = getItemType(item, appData?.layoutVersion);
 
       sendSelectCellEvent(item, component, item.title, index);
@@ -116,7 +125,7 @@ export class CellComponent extends React.Component<Props> {
         componentTargetScreen &&
         !itemTargetScreen
       ) {
-        navigator.push(R.merge(item, { screen_type: componentTargetScreen }));
+        navigator.push(merge(item, { screen_type: componentTargetScreen }));
 
         return;
       }
@@ -139,6 +148,10 @@ export class CellComponent extends React.Component<Props> {
         shouldScrollVertically?.(mouse, focusable, id, title)
       ) {
         this.scrollVertically(focusable);
+
+        const accessibilityManager = AccessibilityManager.getInstance();
+        // Text from DSP should be localized already
+        accessibilityManager.readText({ text: title });
       }
     }
   }
@@ -187,6 +200,16 @@ export class CellComponent extends React.Component<Props> {
     return !isFocusable ? false : focused || focusableFocused;
   }
 
+  componentDidUpdate(prevProps: Readonly<Props>) {
+    if (prevProps.item !== this.props.item) {
+      this.setState({
+        hasFocusableInside: this.props.CellRenderer.hasFocusableInside?.(
+          this.props.item
+        ),
+      });
+    }
+  }
+
   render() {
     const {
       item,
@@ -207,7 +230,7 @@ export class CellComponent extends React.Component<Props> {
 
     const { id } = item;
 
-    const focusableId = R.join("-", [component?.id, id, index]);
+    const focusableId = join("-", [component?.id, id, index]);
 
     const handleFocus = (focusable, mouse) => {
       const focusFn = onFocus || noop;
@@ -215,9 +238,7 @@ export class CellComponent extends React.Component<Props> {
       this.onFocus(focusable, mouse);
     };
 
-    const hasFocusableInside = CellRenderer.hasFocusableInside?.(item);
-
-    if (hasFocusableInside) {
+    if (this.state.hasFocusableInside) {
       return (
         <CellWithFocusable
           CellRenderer={CellRenderer}

package/Components/Cell/CellWithFocusable.tsx

@@ -3,15 +3,25 @@ import * as React from "react";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import * as FOCUS_EVENTS from "@applicaster/zapp-react-native-utils/appUtils/focusManager/events";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
 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 +39,7 @@ const useCellFocusedState = (groupId: string, id: string) => {
     return () => {
       focusManager.removeHandler(FOCUS_EVENTS.FOCUS, handler);
     };
-  }, [groupId]);
+  }, [groupId, skipFocusManagerRegistration]);
 
   return currentCellFocused;
 };
@@ -46,7 +56,7 @@ type Props = {
   skipFocusManagerRegistration?: boolean;
   isFocusable?: boolean;
   behavior: Behavior;
-  selected?: boolean;
+  focused?: boolean;
 };
 
 export function CellWithFocusable(props: Props) {
@@ -62,16 +72,19 @@ export function CellWithFocusable(props: Props) {
     skipFocusManagerRegistration,
     isFocusable,
     behavior,
-    selected,
+    focused,
   } = props;
 
-  const isFocused = useCellFocusedState(groupId, id);
+  const isFocused = useCellFocusedState(
+    skipFocusManagerRegistration,
+    groupId,
+    id
+  );
 
   const state = useCellState({
     id: item.id,
     behavior,
-    focused: isFocused,
-    selected,
+    focused: isFocused || toBooleanWithDefaultFalse(focused),
   });
 
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
@@ -102,6 +115,7 @@ export function CellWithFocusable(props: Props) {
       preferredFocus={preferredFocus}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
       isFocusable={isFocusable}
+      focused={focused}
     />
   );
 }

package/Components/Cell/TvOSCellComponent.tsx

@@ -226,13 +226,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
   hasReceivedFocus() {}
 
-  scrollTo(index) {
-    // Workaround for HL autoscroll/autoloop feature, we scroll manually on tvOS.
-    // Should be removed after refactoring autoscroll/autoloop feature
-    if (this.props.component?.component_type !== "horizontal_list_qb") {
-      this.props?.scrollToIndex?.(index);
-    }
-  }
+  scrollTo() {}
 
   render() {
     const {
@@ -279,7 +273,9 @@ export class TvOSCellComponent extends React.Component<Props, State> {
             index={index}
             scrollTo={this.scrollTo}
             preferredFocus={preferredFocus}
+            focused={this.props.focused}
             behavior={behavior}
+            isFocusable={isFocusable}
           />
         </View>
       );

package/Components/Focusable/Focusable.tsx

@@ -4,6 +4,7 @@ import * as R from "ramda";
 import { BaseFocusable } from "../BaseFocusable";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
+import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 
 type Props = {
   initialFocus?: boolean;
@@ -23,7 +24,7 @@ type Props = {
   style?: React.CSSProperties;
 };
 
-export class Focusable extends BaseFocusable<Props> {
+class Focusable extends BaseFocusable<Props> {
   isGroup: boolean;
   mouse: boolean;
   longPressTimeout = null;
@@ -198,3 +199,7 @@ export class Focusable extends BaseFocusable<Props> {
     );
   }
 }
+
+const FocusableWithFocusableContext = withFocusableContext(Focusable);
+
+export { FocusableWithFocusableContext as Focusable };

package/Components/FocusableGroup/index.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 
 import { BaseFocusable } from "../BaseFocusable";
+import { FocusableGroupContextProvider } from "../../Contexts/FocusableGroupContext";
+import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withFocusableContext";
 
 type Props = {
   testID?: string;
@@ -26,9 +28,10 @@ type Props = {
   nextFocusLeft?: any;
   nextFocusRight?: any;
   onLayout?: any;
+  excludeFromFocusSearching?: boolean;
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroup extends BaseFocusable<Props> {
   constructor(props) {
     super(props);
     this.isGroup = true;
@@ -81,8 +84,14 @@ export class FocusableGroup extends BaseFocusable<Props> {
         style={style}
         ref={this.ref}
       >
-        {children}
+        <FocusableGroupContextProvider id={id}>
+          {children}
+        </FocusableGroupContextProvider>
       </div>
     );
   }
 }
+
+const FocusableGroupWithFocusableContext = withFocusableContext(FocusableGroup);
+
+export { FocusableGroupWithFocusableContext as FocusableGroup };

package/Components/FreezeWithCallback/Freeze.tsx

@@ -0,0 +1,31 @@
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import React, { Suspense, useEffect } from "react";
+import { Suspender } from "./Suspender";
+
+interface Props {
+  freeze: boolean;
+  children: React.ReactNode;
+  placeholder?: React.ReactNode;
+  onRelease?: () => void;
+}
+
+export function Freeze({
+  freeze,
+  children,
+  placeholder = null,
+  onRelease,
+}: Props) {
+  const prevFreeze = usePrevious(freeze);
+
+  useEffect(() => {
+    if (prevFreeze && !freeze && onRelease) {
+      onRelease();
+    }
+  }, [freeze, onRelease, prevFreeze]);
+
+  return (
+    <Suspense fallback={placeholder}>
+      <Suspender freeze={freeze}>{children}</Suspender>
+    </Suspense>
+  );
+}

package/Components/FreezeWithCallback/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Software Mansion
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Components/FreezeWithCallback/Suspender.tsx

@@ -0,0 +1,17 @@
+import React, { Fragment } from "react";
+
+const infiniteThenable = { then() {} };
+
+export const Suspender = ({
+  freeze,
+  children,
+}: {
+  freeze: boolean;
+  children: React.ReactNode;
+}) => {
+  if (freeze) {
+    throw infiniteThenable;
+  }
+
+  return <Fragment>{children}</Fragment>;
+};

package/Components/FreezeWithCallback/__tests__/index.test.tsx

@@ -0,0 +1,170 @@
+import React, { Dispatch, useEffect, useState } from "react";
+import {
+  act,
+  create,
+  ReactTestRenderer,
+  ReactTestRendererJSON,
+} from "react-test-renderer";
+import { FreezeWithCallback } from "../index";
+
+const SimpleContent = () => <div />;
+
+interface InnerProps {
+  value: number;
+}
+// eslint-disable-next-line unused-imports/no-unused-vars
+const Inner = ({ value }: InnerProps) => <div />;
+
+interface TestSubscriber {
+  renderCount: number;
+  subscription: Dispatch<number>;
+}
+
+function createSubscriberComponent(): [React.FC, TestSubscriber] {
+  const testState: TestSubscriber = {
+    renderCount: 0,
+    subscription: () => {},
+  };
+
+  const Subscriber: React.FC = () => {
+    const [value, setValue] = useState(0);
+
+    useEffect(() => {
+      testState.subscription = setValue;
+    }, []);
+
+    testState.renderCount += 1;
+
+    return <Inner value={value} />;
+  };
+
+  return [Subscriber, testState];
+}
+
+interface ContainerProps {
+  freeze: boolean;
+  children: React.ReactNode;
+}
+
+const Container = ({ freeze, children }: ContainerProps) => (
+  <FreezeWithCallback freeze={freeze}>{children}</FreezeWithCallback>
+);
+
+function setupTest(initialFreeze: boolean = false) {
+  let testRenderer: ReactTestRenderer | undefined;
+  const [Subscriber, subscriberState] = createSubscriberComponent();
+
+  act(() => {
+    testRenderer = create(
+      <Container freeze={initialFreeze}>
+        <Subscriber />
+      </Container>
+    );
+  });
+
+  return {
+    testRenderer,
+    testInstance: testRenderer?.root,
+    subscriberState,
+    updateFreeze: (freeze: boolean) => {
+      act(() =>
+        testRenderer?.update(
+          <Container freeze={freeze}>
+            <Subscriber />
+          </Container>
+        )
+      );
+    },
+  };
+}
+
+describe("FreezeWithCallback", () => {
+  test("Renders stuff not frozen", () => {
+    const testRenderer = create(
+      <Container freeze={false}>
+        <SimpleContent />
+      </Container>
+    );
+
+    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+  });
+
+  test("Does not render stuff when frozen", () => {
+    const testRenderer = create(
+      <Container freeze>
+        <SimpleContent />
+      </Container>
+    );
+
+    expect(testRenderer.root.findAllByType(SimpleContent)).toHaveLength(0);
+  });
+
+  test("Stuff is gone after freeze", () => {
+    const testRenderer = create(
+      <Container freeze={false}>
+        <SimpleContent />
+      </Container>
+    );
+
+    expect(testRenderer.root.findByType(SimpleContent)).toBeTruthy();
+
+    act(() =>
+      testRenderer.update(
+        <Container freeze>
+          <SimpleContent />
+        </Container>
+      )
+    );
+
+    expect(testRenderer.toJSON()).toBe(null);
+  });
+
+  test("Updates work when not frozen", () => {
+    const { testInstance, subscriberState } = setupTest();
+
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    act(() => subscriberState.subscription(1));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+    expect(subscriberState.renderCount).toBe(2);
+  });
+
+  test("Updates does not propagate when frozen", () => {
+    const { testInstance, subscriberState, updateFreeze } = setupTest();
+
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    updateFreeze(true);
+    act(() => subscriberState.subscription(1));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    expect(subscriberState.renderCount).toBe(1);
+  });
+
+  test("State persists after defrost", () => {
+    const { testInstance, subscriberState, updateFreeze, testRenderer } =
+      setupTest();
+
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+    act(() => subscriberState.subscription(1));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+
+    updateFreeze(true);
+    expect(testRenderer?.toJSON()).toBe(null);
+
+    updateFreeze(false);
+    expect((testRenderer?.toJSON() as ReactTestRendererJSON).type).toBe("div");
+    expect(testInstance?.findByType(Inner).props.value).toEqual(1);
+  });
+
+  test("Update propagate after defrost", () => {
+    const { testInstance, subscriberState, updateFreeze } = setupTest();
+
+    updateFreeze(true);
+    act(() => subscriberState.subscription(1));
+    act(() => subscriberState.subscription(2));
+    act(() => subscriberState.subscription(3));
+    expect(testInstance?.findByType(Inner).props.value).toEqual(0);
+
+    updateFreeze(false);
+    expect(testInstance?.findByType(Inner).props.value).toEqual(3);
+    expect(subscriberState.renderCount).toBe(2);
+  });
+});

package/Components/FreezeWithCallback/index.tsx

@@ -0,0 +1,3 @@
+import { Freeze } from "./Freeze";
+
+export const FreezeWithCallback = Freeze;

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/ScreenContainer.tsx

@@ -5,13 +5,30 @@ import * as R from "ramda";
 import { ScreenLayoutContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenLayoutContext";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { ifEmptyUseFallback } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import {
+  useCurrentScreenData,
+  useNavbarState,
+} from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 import { useScreenConfiguration } from "../../River/useScreenConfiguration";
-import { routeIsPlayerScreen } from "@applicaster/zapp-react-native-utils/navigationUtils";
+import {
+  findMenuPlugin,
+  getNavigationProps,
+  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 { NavBarContainer } from "./NavBarContainer";
+
+type ComponentsExtraProps = {
+  Background?: Record<string, any>;
+  NavBar?: Record<string, any>;
+};
 
 type Props = {
+  ComponentsExtraProps?: ComponentsExtraProps;
+  NavBar: React.ComponentType<any>;
   children: React.ReactNode;
 };
 
@@ -30,9 +47,13 @@ const styles = StyleSheet.create({
   container: { flex: 1, height: "100%", width: "100%" },
 });
 
+const isTVOS = isApplePlatform();
+
 // eslint-disable-next-line react/display-name
 export const ScreenContainer = React.memo(function ScreenContainer({
   children,
+  ComponentsExtraProps,
+  NavBar,
 }: Props) {
   const { screenMarginBottom } = React.useContext(ScreenLayoutContext);
   const { currentRoute, screenData } = useNavigation();
@@ -80,9 +101,62 @@ export const ScreenContainer = React.memo(function ScreenContainer({
     [themeStyles]
   );
 
+  const navigator = useNavigation();
+  const { activeRiver } = navigator;
+  const { title, visible } = useNavbarState();
+
+  const { plugins = [] } = usePickFromState([
+    "appState",
+    "remoteConfigurations",
+    "plugins",
+  ]);
+
+  const navigationProps = getNavigationProps({
+    navigator,
+    title,
+    category: "menu",
+  });
+
+  const menuPlugin = React.useMemo(
+    () => findMenuPlugin(activeRiver?.navigations, plugins),
+    [activeRiver?.navigations]
+  );
+
+  const NavBarComponent = React.useMemo(
+    () => NavBar || (menuPlugin.module as React.ComponentType<any>),
+    []
+  );
+
+  const [navBarReady, setNavBarReady] = React.useState(false);
+
+  const navBarContainer = (
+    <NavBarContainer isVisible={visible} onReady={setNavBarReady}>
+      <NavBarComponent
+        ref={ComponentsExtraProps?.NavBar?.ref}
+        isVisible={visible}
+        menuPlugin={menuPlugin}
+        navigationProps={navigationProps}
+        {...R.omit(["ref"])(ComponentsExtraProps?.NavBar)}
+      />
+    </NavBarContainer>
+  );
+
   return (
-    <View testID="screen-container" style={viewStyles}>
-      {children}
-    </View>
+    <>
+      {!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)
+        **/
+        <View testID="screen-container" style={viewStyles}>
+          {children}
+        </View>
+      ) : null}
+      {/** Render NavBarContainer over ScreenContainer to let tvOS native
+              focus manager works correctly to focus nav bar items first **/}
+      {isTVOS ? navBarContainer : null}
+    </>
   );
 });