@applicaster/zapp-react-native-ui-components 15.0.0-alpha.1812021122 → 15.0.0-alpha.1954787293

package/Components/Focusable/Focusable.tsx

@@ -8,6 +8,8 @@ import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withF
 import { StyleSheet, ViewStyle } from "react-native";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
+import { isSearchInputId } from "@applicaster/search-screen/src/tv/utils";
+
 type Props = {
   initialFocus?: boolean;
   id: string;
@@ -106,7 +108,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -120,7 +122,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,9 +10,13 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
-import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
+import {
+  emitFocused,
+  emitNativeRegistered,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
+
 type Props = {
   id: string;
   groupId: string;
@@ -86,6 +90,9 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
+    const id: string = nativeEvent.itemID;
+    emitFocused(id);
+
     onFocus(nativeEvent);
   }
 

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -2,6 +2,9 @@ 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 { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/LayoutContext";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 const { log_verbose } = createLogger({
@@ -34,7 +37,7 @@ type Props = {
   screenData: { screenId: string; parentScreenId: string };
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroupComponent extends BaseFocusable<Props> {
   public readonly isGroup: boolean = true;
 
   onRegistered = ({ nativeEvent }) => {
@@ -83,3 +86,20 @@ export class FocusableGroup extends BaseFocusable<Props> {
     );
   }
 }
+
+export const withFocusDisabled = (Component) => {
+  return function WithFocusDisabled(props) {
+    // @ts-ignore
+    const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
+
+    const { pathname } = useRoute();
+
+    const isPlayerPresented = isScreenPlayable(pathname);
+
+    const blockScreenFocus = isPlayerPresented === false && screenFocusBlocked;
+
+    return <Component {...props} isFocusDisabled={blockScreenFocus} />;
+  };
+};
+
+export const FocusableGroup = withFocusDisabled(FocusableGroupComponent);

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -274,7 +274,7 @@ const PlayerContainerComponent = (props: Props) => {
     );
   }, [playerManager.isRegistered()]);
 
-  useRestrictMobilePlayback({
+  const { isRestricted } = useRestrictMobilePlayback({
     player,
     entry: item,
     pluginConfiguration,
@@ -670,36 +670,38 @@ const PlayerContainerComponent = (props: Props) => {
                     <PlayerFocusableWrapperView
                       nextFocusDown={context.bottomFocusableId}
                     >
-                      <Player
-                        source={{
-                          uri,
-                          entry: item,
-                        }}
-                        focused={isInlineTV ? true : undefined}
-                        autoplay={true}
-                        controls={false}
-                        disableCastAction={disableCastAction}
-                        docked={navigator.isVideoModalDocked()}
-                        entry={item}
-                        fullscreen={mode === VideoModalMode.FULLSCREEN}
-                        inline={inline}
-                        isModal={isModal}
-                        isTabletPortrait={isTabletPortrait}
-                        muted={false}
-                        playableItem={item}
-                        playerEvent={playerEvent}
-                        playerId={state.playerId}
-                        pluginConfiguration={pluginConfiguration}
-                        ref={playerRef}
-                        toggleFullscreen={toggleFullscreen}
-                        style={videoStyle}
-                        playNextData={playNextData}
-                        setNextVideoPreloadThresholdPercentage={
-                          setNextVideoPreloadThresholdPercentage
-                        }
-                      >
-                        {renderApplePlayer(applePlayerProps)}
-                      </Player>
+                      {isRestricted ? null : (
+                        <Player
+                          source={{
+                            uri,
+                            entry: item,
+                          }}
+                          focused={isInlineTV ? true : undefined}
+                          autoplay={true}
+                          controls={false}
+                          disableCastAction={disableCastAction}
+                          docked={navigator.isVideoModalDocked()}
+                          entry={item}
+                          fullscreen={mode === VideoModalMode.FULLSCREEN}
+                          inline={inline}
+                          isModal={isModal}
+                          isTabletPortrait={isTabletPortrait}
+                          muted={false}
+                          playableItem={item}
+                          playerEvent={playerEvent}
+                          playerId={state.playerId}
+                          pluginConfiguration={pluginConfiguration}
+                          ref={playerRef}
+                          toggleFullscreen={toggleFullscreen}
+                          style={videoStyle}
+                          playNextData={playNextData}
+                          setNextVideoPreloadThresholdPercentage={
+                            setNextVideoPreloadThresholdPercentage
+                          }
+                        >
+                          {renderApplePlayer(applePlayerProps)}
+                        </Player>
+                      )}
                     </PlayerFocusableWrapperView>
 
                     {state.error ? <ErrorDisplay error={state.error} /> : null}

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -1,25 +1,26 @@
 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 { useEffect, useMemo, useRef, useState } 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,
-}: {
+type RestrictMobilePlaybackProps = {
   player?: Player;
   entry?: ZappEntry;
   pluginConfiguration?: Record<string, string>;
   close: () => void;
-}) => {
-  const dialogVisibleRef = useRef(false);
+};
 
+export const useRestrictMobilePlayback = ({
+  player,
+  entry,
+  pluginConfiguration,
+  close,
+}: RestrictMobilePlaybackProps): { isRestricted: boolean } => {
+  const dialogVisibleRef = useRef<boolean>(false);
   const theme = useTheme();
 
   useEffect(() => {
@@ -40,24 +41,9 @@ export const useRestrictMobilePlayback = ({
     return player && entry?.extensions?.connection_restricted;
   }, [player, entry]);
 
-  useEffect(() => {
-    if (!isConnectionRestricted) {
-      return;
-    }
-
-    player.addListener({
-      id: "restrictMobilePlaybackListener",
-      listener: {
-        onPlayerResume: () => {
-          if (dialogVisibleRef.current) {
-            player.pause();
-          }
-
-          dialogVisibleRef.current = false;
-        },
-      },
-    });
-  }, [isConnectionRestricted, player]);
+  const [isRestricted, setIsRestricted] = useState<boolean>(
+    isConnectionRestricted
+  );
 
   useEffect(() => {
     if (!isConnectionRestricted) {
@@ -69,17 +55,17 @@ export const useRestrictMobilePlayback = ({
         "Stopping player due to mobile restriction, connection_restricted: true"
       );
 
-      player.pause();
+      player?.close();
 
       dialogVisibleRef.current = true;
 
       showAlertDialog({
         title:
           pluginConfiguration?.mobile_connection_restricted_alert_title ||
-          "N/A",
+          "Restricted Connection Type",
         message:
           pluginConfiguration?.mobile_connection_restricted_alert_message ||
-          "N/A",
+          "This content can only be viewed over a Wi-Fi or LAN network.",
         okButtonText: theme.ok_button || "OK",
         completion: () => {
           dialogVisibleRef.current = false;
@@ -91,19 +77,25 @@ export const useRestrictMobilePlayback = ({
 
     return NetInfo.addEventListener((state) => {
       if (state.type === "cellular") {
+        setIsRestricted(true);
+
         if (dialogVisibleRef.current) {
           return;
         }
 
         stopPlayer();
+      } else {
+        setIsRestricted(false);
       }
     });
   }, [
     close,
-    entry.extensions.connection_restricted,
+    entry?.extensions?.connection_restricted,
     pluginConfiguration,
     player,
     theme.ok_button,
     isConnectionRestricted,
   ]);
+
+  return { isRestricted };
 };

package/Components/River/TV/River.tsx

@@ -2,7 +2,8 @@
 
 import * as React from "react";
 import { Text } from "react-native";
-import * as R from "ramda";
+
+import { mergeRight } from "@applicaster/zapp-react-native-utils/utils";
 
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
@@ -13,6 +14,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
+import { toStringOrEmpty } from "./utils";
+
 type Props = {
   screenId: string;
   screenData: ZappRiver | ZappEntry;
@@ -24,6 +27,7 @@ type Props = {
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
   river?: ZappRiver | ZappEntry;
+  groupId: string;
 };
 
 export const River = (props: Props) => {
@@ -35,6 +39,7 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
+    groupId,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -51,28 +56,41 @@ export const River = (props: Props) => {
     [screenId]
   );
 
-  const stringOrEmpty = (value: string | number | undefined): string =>
-    R.isNil(value) ? "" : String(value);
+  const screenResolverData = React.useMemo(() => {
+    const extraData = mergeRight(extraProps, screenResolverExtraProps);
+
+    return {
+      extraData,
+      screenData: mergeRight(river, { groupId: extraData?.groupId }),
+      componentsMapExtraProps: mergeRight(componentsMapExtraProps, { groupId }),
+    };
+  }, [
+    extraProps,
+    screenResolverExtraProps,
+    river,
+    componentsMapExtraProps,
+    groupId,
+  ]);
 
   React.useEffect(() => {
     if (!isInsideContainer) {
-      setScreenTitle(stringOrEmpty(screenData?.title));
-      setScreenSummary(stringOrEmpty(screenData?.summary));
+      setScreenTitle(toStringOrEmpty(screenData?.title));
+      setScreenSummary(toStringOrEmpty(screenData?.summary));
     }
   }, [screenData.id]);
 
   React.useEffect(() => {
     if (feedData && !isInsideContainer) {
       if (feedData.title && feedData.title !== screenTitle) {
-        setScreenTitle(stringOrEmpty(feedData.title));
+        setScreenTitle(toStringOrEmpty(feedData.title));
       }
 
       if (feedData.summary && feedData.summary !== screenSummary) {
-        setScreenSummary(stringOrEmpty(feedData.summary));
+        setScreenSummary(toStringOrEmpty(feedData.summary));
       }
     } else {
-      setScreenTitle(stringOrEmpty(screenData?.title));
-      setScreenSummary(stringOrEmpty(screenData?.summary));
+      setScreenTitle(toStringOrEmpty(screenData?.title));
+      setScreenSummary(toStringOrEmpty(screenData?.summary));
     }
   }, [feedData, screenData, screenTitle, screenSummary]);
 
@@ -86,15 +104,13 @@ export const River = (props: Props) => {
   }
 
   if (river.type !== "general_content") {
-    const extraData = { ...R.mergeRight(extraProps, screenResolverExtraProps) };
-
     return (
       <ScreenResolver
         screenType={river.type}
         screenId={screenId}
-        screenData={R.merge(river, { groupId: extraData?.groupId })}
-        componentsMapExtraProps={componentsMapExtraProps}
-        {...extraData}
+        screenData={screenResolverData.screenData}
+        componentsMapExtraProps={screenResolverData.componentsMapExtraProps}
+        {...screenResolverData.extraData}
       />
     );
   }
@@ -106,6 +122,7 @@ export const River = (props: Props) => {
       isScreenWrappedInContainer={isInsideContainer}
       extraAnchorPointYOffset={extraAnchorPointYOffset}
       componentsMapExtraProps={componentsMapExtraProps}
+      groupId={groupId}
     />
   );
 };

package/Components/River/TV/index.tsx

@@ -1,11 +1,12 @@
-import { compose } from "ramda";
+import { compose } from "@applicaster/zapp-react-native-utils/utils";
+
 import { River as RiverComponent } from "./River";
-import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 import { withRiverDataLoader } from "./withRiverDataLoader";
+import { withFocusableGroupForContent } from "./withFocusableGroupForContent";
 
 export const River = compose(
-  withTvEventHandler,
   withComponentsMapOffsetContext,
-  withRiverDataLoader
+  withRiverDataLoader,
+  withFocusableGroupForContent
 )(RiverComponent);

package/Components/River/TV/utils/__tests__/toStringOrEmpty.test.ts

@@ -0,0 +1,30 @@
+import { toStringOrEmpty } from "..";
+
+describe("toStringOrEmpty", () => {
+  test("returns empty string for undefined", () => {
+    expect(toStringOrEmpty(undefined)).toBe("");
+  });
+
+  test("returns empty string for null", () => {
+    expect(toStringOrEmpty(null)).toBe("");
+  });
+
+  test("converts number to string", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+    expect(toStringOrEmpty(123)).toBe("123");
+    expect(toStringOrEmpty(-42)).toBe("-42");
+  });
+
+  test("returns string as is", () => {
+    expect(toStringOrEmpty("hello")).toBe("hello");
+    expect(toStringOrEmpty("")).toBe("");
+  });
+
+  test("works with numeric strings", () => {
+    expect(toStringOrEmpty("123")).toBe("123");
+  });
+
+  test("does not throw on falsy values like 0", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+  });
+});

package/Components/River/TV/utils/index.ts

@@ -0,0 +1,4 @@
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+
+export const toStringOrEmpty = (value: unknown): string =>
+  isNil(value) ? "" : String(value);

package/Components/River/TV/withFocusableGroupForContent.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { riverFocusManager } from "@applicaster/zapp-react-native-utils/appUtils/RiverFocusManager";
+
+import { topMenuLayoutChange$ } from "@applicaster/zapp-react-native-tvos-app/Layout/topMenu";
+
+const styles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+  },
+});
+
+export const withFocusableGroupForContent = (Component) => {
+  return function WithFocusableGroupForContent(props) {
+    const { screenId, isInsideContainer } = props;
+
+    const [topMenuHeight, setTopMenuHeight] = React.useState(0);
+
+    React.useEffect(() => {
+      const subscription = topMenuLayoutChange$.subscribe((layout) => {
+        setTopMenuHeight(layout.height);
+      });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, []);
+
+    const focusableId = React.useMemo(
+      () =>
+        riverFocusManager.screenFocusableGroupId({
+          screenId,
+          isInsideContainer,
+        }),
+      [screenId, isInsideContainer]
+    );
+
+    if (isInsideContainer) {
+      return <Component {...props} />;
+    }
+
+    return (
+      <FocusableGroup
+        key={focusableId}
+        id={focusableId}
+        // The top menu is rendered in its own FocusableGroup, anchored at the top of the screen.
+        // When the "content" FocusableGroup starts at y = 0 as well, the two groups visually overlap.
+        // On TvOS platform this overlap can confuse the focus engine, because the focusable bounds of
+        // the top-menu group and the content group intersect, leading to erratic navigation between
+        // the menu and the content (e.g. unexpected jumps or focus getting "stuck").
+        //
+        // To avoid this, we shift the entire content FocusableGroup down by the dynamic top menu
+        // height (marginTop: topMenuHeight). This separates the focus regions of the two groups in
+        // focus space, so they no longer intersect.
+        //
+        // The inner <View> below then applies the inverse margin (marginTop: -topMenuHeight) so that
+        // the actual visual position of the content on screen does not change; only the focusable
+        // bounds of the outer group are offset.
+        style={[styles.flexOne, { marginTop: topMenuHeight }]}
+        // this group does not have parent
+        groupId={undefined}
+      >
+        <View style={[styles.flexOne, { marginTop: -1 * topMenuHeight }]}>
+          <Component {...props} groupId={focusableId} />
+        </View>
+      </FocusableGroup>
+    );
+  };
+};

package/Decorators/ConfigurationWrapper/__tests__/__snapshots__/withConfigurationProvider.test.tsx.snap

@@ -88,6 +88,7 @@ exports[`withConfigurationProvider correctly passes all the configuration keys c
   tab_cell_padding_right={10}
   tab_cell_padding_top={14}
   tablet_theme={false}
+  tabs_screen_background_color="transparent"
   target={false}
   target_screen_switch={false}
   text_label_active_font_color="rgba(239, 239, 239, 0.5)"

package/Decorators/ConfigurationWrapper/const.ts

@@ -208,4 +208,5 @@ export const keysMap: Record<string, Function> = {
   tab_bar_item_margin_right: castOrDefaultValue(Number, 0),
   tab_bar_item_margin_bottom: castOrDefaultValue(Number, 0),
   tab_bar_item_margin_left: castOrDefaultValue(Number, 0),
+  tabs_screen_background_color: castOrDefaultValue(R.identity, "transparent"),
 };

package/Decorators/ZappPipesDataConnector/__tests__/zappPipesDataConnector.test.js

@@ -3,7 +3,7 @@ import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUt
 
 import * as zappPipesRedux from "@applicaster/zapp-react-native-redux/ZappPipes";
 import configureStore from "redux-mock-store";
-import thunk from "redux-thunk";
+import { thunk } from "redux-thunk";
 
 import { zappPipesDataConnector } from "../index";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-alpha.1812021122",
+  "version": "15.0.0-alpha.1954787293",
   "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.1812021122",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.1812021122",
-    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.1812021122",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.1812021122",
+    "@applicaster/applicaster-types": "15.0.0-alpha.1954787293",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.1954787293",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.1954787293",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.1954787293",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/River/TV/withTVEventHandler.tsx

@@ -1,27 +0,0 @@
-/* eslint max-len: off */
-
-import React from "react";
-import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-export const withTvEventHandler = (Component) => {
-  return function WithTVEventHandler(props) {
-    const navigator = useNavigation();
-
-    const remoteHandler = (event) => {
-      const { eventType } = event;
-
-      const canGoBack = navigator.canGoBack();
-
-      if (eventType === "menu" && canGoBack) {
-        navigator.goBack();
-      }
-    };
-
-    return (
-      <TVEventHandlerComponent tvEventHandler={remoteHandler}>
-        <Component {...props} />
-      </TVEventHandlerComponent>
-    );
-  };
-};