@applicaster/zapp-react-native-ui-components 13.0.0-alpha.1724095599 → 13.0.0-alpha.1731130113

package/Components/VideoModal/PlayerWrapper.tsx

@@ -74,20 +74,6 @@ const getScreenAspectRatio = () => {
   return longEdge / shortEdge;
 };
 
-const safeAreaStyles = (
-  configuration: Configuration,
-  isTablet: boolean
-): ViewStyle => {
-  const tablet_landscape_player_container_background_color =
-    configuration?.tablet_landscape_player_container_background_color;
-
-  return {
-    backgroundColor: isTablet
-      ? tablet_landscape_player_container_background_color
-      : "transparent",
-  };
-};
-
 const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   if (isTablet) {
     return ["top"];
@@ -100,6 +86,24 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   return ["top"];
 };
 
+const isPercentage = (value: string | number): boolean => {
+  if (typeof value === "string") {
+    return value.includes("%");
+  }
+
+  return false;
+};
+
+const getPercentageOf = (percent: string, value: number) => {
+  const percentageValue = parseFloat(percent.replace("%", ""));
+
+  if (isNaN(percentageValue)) {
+    return value;
+  }
+
+  return (value * percentageValue) / 100;
+};
+
 const getTabletWidth = (
   configuration: Configuration,
   dimensions: DimensionsT
@@ -108,18 +112,23 @@ const getTabletWidth = (
     configuration?.tablet_landscape_sidebar_width;
 
   const { width } = dimensions;
+  let widthValue = Number(width);
+
+  if (isPercentage(width)) {
+    widthValue = getPercentageOf(width.toString(), SCREEN_WIDTH);
+  }
 
   const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
 
   if (tablet_landscape_sidebar_width?.includes("%")) {
-    return Number(width) * (1 - sidebarWidth / 100);
+    return widthValue * (1 - sidebarWidth / 100);
   }
 
   if (Number.isNaN(sidebarWidth)) {
-    return Number(width) * 0.65;
+    return widthValue * 0.65;
   }
 
-  return Number(width) - sidebarWidth;
+  return widthValue - sidebarWidth;
 };
 
 const PlayerWrapperComponent = (props: Props) => {
@@ -133,6 +142,7 @@ const PlayerWrapperComponent = (props: Props) => {
     children,
     isTabletPortrait,
     configuration,
+    fullscreen,
     pip,
   } = props;
 
@@ -188,14 +198,17 @@ const PlayerWrapperComponent = (props: Props) => {
     [containerDimensions, playerDimensionsHack]
   );
 
+  const wrapperViewStyle: ViewStyle = {
+    backgroundColor:
+      isTablet && !fullscreen
+        ? configuration?.tablet_landscape_player_container_background_color
+        : "transparent",
+  };
+
   return (
     <WrapperView
       edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimensionsHack,
-      ]}
+      style={[wrapperViewStyle, style, playerDimensionsHack]}
     >
       <AnimationComponent
         animationType={ComponentAnimationType.moveUpComponent}

package/Components/VideoModal/VideoModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { equals } from "ramda";
-import { StyleSheet, StatusBar } from "react-native";
+import { StyleSheet, StatusBar, View } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
@@ -30,10 +30,13 @@ import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHook
 import { requiresAuthentication } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { Spinner } from "../Spinner";
 import { OpaqueLayer } from "./OpaqueLayer";
 
 import { AnimatedPlayerModalWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
+const LOADER_BACKGROUND_COLOR = "rgba(64,64,64,0.5)";
+
 const styles = StyleSheet.create({
   container: {
     top: 0,
@@ -42,6 +45,16 @@ const styles = StyleSheet.create({
     bottom: 0,
     position: "absolute",
   },
+  loaderContainer: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: LOADER_BACKGROUND_COLOR,
+  },
 });
 
 const VideoModalComponent = () => {
@@ -131,7 +144,7 @@ const VideoModalComponent = () => {
           {/* Hide content underneath when we switch to next video in fullscreen mode */}
           {mode === "FULLSCREEN" && <OpaqueLayer />}
 
-          {itemIdHooksFinished === item?.id && (
+          {itemIdHooksFinished === item?.id ? (
             <AnimatedPlayerModalWrapper
               style={[
                 styles.container,
@@ -143,11 +156,13 @@ const VideoModalComponent = () => {
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
-                modalHeight={modalSize.height}
-                modalWidth={modalSize.width}
                 mode={mode}
               />
             </AnimatedPlayerModalWrapper>
+          ) : (
+            <View style={styles.loaderContainer}>
+              <Spinner />
+            </View>
           )}
         </ScreenContextProvider>
       </PathnameContext.Provider>

package/Components/VideoModal/__tests__/__snapshots__/PlayerDetails.test.tsx.snap

@@ -1,43 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PlayerDetails renders properly 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "flex": 1,
-      "marginTop": -8,
-      "paddingTop": -8,
-      "width": 750,
-    }
-  }
->
-  <View
-    feed="test-source"
-    riverComponents={[]}
-    riverId="test-id"
-  />
-</View>
-`;
+exports[`PlayerDetails renders properly 1`] = `null`;
 
-exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] = `
-<View
-  collapsable={false}
-  style={
-    {
-      "backgroundColor": "transparent",
-      "flex": 1,
-      "marginTop": -20,
-      "paddingTop": 40,
-      "width": 750,
-    }
-  }
->
-  <View
-    feed="test-source"
-    riverComponents={[]}
-    riverId="test-id"
-  />
-</View>
-`;
+exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] = `null`;

package/Components/VideoModal/utils.ts

@@ -1,5 +1,4 @@
-import * as R from "ramda";
-
+import { mergeRight } from "ramda";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
@@ -25,10 +24,10 @@ export const useConfiguration = () => {
 
   const playerPluginConfig = playerManager.getPluginConfiguration();
 
-  const config = R.mergeRight(playerPluginConfig, {
+  const config = mergeRight(playerPluginConfig, {
+    ...pluginConfiguration,
     ...targetScreenConfiguration?.general,
     ...targetScreenConfiguration?.styles,
-    ...pluginConfiguration,
   });
 
   const {

package/Components/ZappUIComponent/index.tsx

@@ -8,7 +8,6 @@ import {
 
 import { Placeholder } from "./Placeholder";
 import { useInitialLoading } from "./hooks";
-import { useIsFocusable } from "@applicaster/zapp-react-native-utils/focusManager";
 
 type ReactComponent = React.ComponentType<any>;
 
@@ -138,12 +137,13 @@ New signature: {Component, ErrorComponent, LoadingComponent, options}`
     );
 
     const componentProps = React.useMemo(
-      () => ({ ...props, parent }),
+      () => ({
+        ...props,
+        parent,
+      }),
       [props, parent]
     );
 
-    useIsFocusable(componentProps);
-
     React.useEffect(() => {
       if (!skipOnLoadFinished && !isLoading) {
         onLoadFinished();

package/Contexts/FocusableGroupContext/withFocusableContext.tsx

@@ -7,17 +7,11 @@ export const withFocusableContext = (Component) => {
     { groupId, ...props }: Record<string, any>,
     ref
   ) => {
-    return (
-      <FocusableGroupContext.Consumer>
-        {(groupIdContext: string) => {
-          // eslint-disable-next-line react/display-name
-          const propsGroupId = groupId || null;
-          const providedGroupId = propsGroupId || groupIdContext;
+    const groupIdContext = React.useContext(FocusableGroupContext);
+    const propsGroupId = groupId || null;
+    const providedGroupId = propsGroupId || groupIdContext;
 
-          return <Component {...props} groupId={providedGroupId} ref={ref} />;
-        }}
-      </FocusableGroupContext.Consumer>
-    );
+    return <Component {...props} groupId={providedGroupId} ref={ref} />;
   };
 
   return React.forwardRef(WithFocusableContext);

package/Contexts/HeaderOffsetContext/index.tsx

@@ -13,7 +13,7 @@ type ProviderProps = {
   };
 };
 
-const initialHeaderOffsetContext = () => ({
+const initialHeaderOffsetContext: HeaderOffsetContextType = () => ({
   headerOffset: 0,
   headersAbove: null,
 });
@@ -24,11 +24,9 @@ export const HeaderOffsetContext = React.createContext<HeaderOffsetContextType>(
 
 export function withConsumer(Component) {
   return function WithConsumer(props) {
-    return (
-      <HeaderOffsetContext.Consumer>
-        {(context) => <Component getHeaderOffset={context} {...props} />}
-      </HeaderOffsetContext.Consumer>
-    );
+    const getHeaderOffset = React.useContext(HeaderOffsetContext);
+
+    return <Component getHeaderOffset={getHeaderOffset} {...props} />;
   };
 }
 

package/Contexts/ScreenContext/index.tsx

@@ -176,15 +176,8 @@ export function ScreenContextProvider({
 
 export function withScreenContext(Component: React.ComponentType<any>) {
   return function WithScreenContextWrapper(props) {
-    return (
-      <ScreenContext.Consumer>
-        {useCallback(
-          (value) => (
-            <Component {...props} screenContext={value} />
-          ),
-          [Component, props]
-        )}
-      </ScreenContext.Consumer>
-    );
+    const screenContext = React.useContext(ScreenContext);
+
+    return <Component {...props} screenContext={screenContext} />;
   };
 }

package/Contexts/ScreenLayoutContext/index.tsx

@@ -8,10 +8,11 @@ type LayoutContext = {
   componentAnchorPointY: number | null;
   componentAvailableWidth: number | null;
   setScreenLayout?: (properties: {}) => void;
+  resetScreenLayout?: () => void;
   extraAnchorPointYOffset: number;
 };
 
-const screenLayoutContext: LayoutContext = {
+const initialScreenLayoutContext: LayoutContext = {
   screenMarginTop: null,
   screenMarginBottom: null,
   screenHeight: null,
@@ -21,8 +22,9 @@ const screenLayoutContext: LayoutContext = {
   extraAnchorPointYOffset: 0,
 };
 
-export const ScreenLayoutContext =
-  React.createContext<LayoutContext>(screenLayoutContext);
+export const ScreenLayoutContext = React.createContext<LayoutContext>(
+  initialScreenLayoutContext
+);
 
 export function ScreenLayoutContextConsumer(Component) {
   return function WithConsumer(props) {

package/Decorators/RiverResolver/index.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePathname } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/usePathname";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = ZappUIComponentProps & {
   rivers: ZappRivers;
@@ -12,27 +12,25 @@ type Props = ZappUIComponentProps & {
 
 export function withRiver(Component: ZappComponent): ZappComponent {
   const RiverWithData = ({ screenId, ...otherProps }: Props) => {
-    const { rivers } = usePickFromState(["rivers"]);
+    const river = useRivers()?.[screenId];
     const pathname = usePathname();
-    const river = rivers[screenId];
 
     if (!river) {
       return null;
     }
 
-    if (!otherProps.screenData) {
-      otherProps.screenData = river;
-    }
-
     return (
       <Component
         screenId={screenId}
         river={river}
         key={isTV() ? pathname : undefined}
         {...otherProps}
+        screenData={otherProps.screenData || river}
       />
     );
   };
 
+  RiverWithData.displayName = `RiverWithData(${Component.displayName || Component.name})`;
+
   return RiverWithData;
 }

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -1,12 +1,10 @@
 /// <reference types="@applicaster/applicaster-types" />
 /// <reference types="@applicaster/zapp-react-native-ui-components" />
 import React, { useEffect, useMemo } from "react";
-import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 
 import * as R from "ramda";
 import { Platform } from "react-native";
 import Url from "url";
-import { ENDPOINT_TAGS } from "@applicaster/zapp-react-native-utils/types";
 import { favoritesListener } from "@applicaster/zapp-react-native-bridge/Favorites";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
@@ -21,12 +19,7 @@ import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-compon
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
 import { isVerticalListOrGrid } from "./utils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import {
-  findEndpointForURL,
-  HTTP_METHODS,
-} from "@applicaster/zapp-pipes-v2-client";
-import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { subscribeForUrlContextKeyChanges } from "@applicaster/zapp-pipes-v2-client";
 
 type Props = {
   component: ZappUIComponent;
@@ -237,7 +230,8 @@ export function zappPipesDataConnector(
     const entryContext =
       (shouldUseNestedContext && screenContextData?.nested?.entry
         ? screenContextData?.nested?.entry
-        : screenContextData?.entry) || {};
+        : (screenContextData?.entry?.payload ?? screenContextData?.entry)) ||
+      {};
 
     const screenContext =
       (shouldUseNestedContext && screenContextData?.nested?.screen
@@ -300,27 +294,7 @@ export function zappPipesDataConnector(
           return addListener(reloadData);
         }
       } else {
-        const pipesEndpoints = appStore.get("pipesEndpoints");
-
-        const endpointURL = findEndpointForURL(
-          dataSourceUrl,
-          pipesEndpoints,
-          HTTP_METHODS.GET
-        );
-
-        const endpoint = pipesEndpoints?.[endpointURL];
-
-        if (endpoint?.tags?.includes(ENDPOINT_TAGS.observe_storage)) {
-          const subscriptions: (() => void)[] = endpoint.context_obj.map(
-            (data: Record<string, any>) => {
-              const { namespace, key } = getNamespaceAndKey(data.key);
-
-              return localStorage.addListener({ key, namespace }, reloadData);
-            }
-          );
-
-          return () => subscriptions.forEach((listener) => listener());
-        }
+        return subscribeForUrlContextKeyChanges(dataSourceUrl, {}, reloadData);
       }
     }, [dataSourceUrl, reloadData]);
 

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-alpha.1724095599",
+  "version": "13.0.0-alpha.1731130113",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo skipping hybrid typescript build for now"
   },
   "publishConfig": {
@@ -29,15 +28,13 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "devDependencies": {
-    "@types/react": "17.0.2",
-    "@types/react-native": "0.69.6",
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-alpha.1724095599",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.1724095599",
-    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.1724095599",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.1724095599",
+    "@applicaster/applicaster-types": "13.0.0-alpha.1731130113",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-alpha.1731130113",
+    "@applicaster/zapp-react-native-redux": "13.0.0-alpha.1731130113",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.1731130113",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",
@@ -46,7 +43,6 @@
   "peerDependencies": {
     "@applicaster/zapp-pipes-v2-client": "*",
     "@react-native-community/netinfo": "*",
-    "@types/node": "*",
     "immer": "*",
     "react": "*",
     "react-native": "*",

package/tsconfig.json

@@ -2,8 +2,7 @@
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./lib",
-    "rootDir": "./src"
+    "rootDir": "./"
   },
-  "exclude": ["src/**/*.test.tsx"],
-  "include": ["src/**/*"]
+  "include": ["**/*"],
 }

package/.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": ["react-native", "flow", "react-native-stage-0/decorator-support"],
-  "env": {
-    "test": {
-      "presets": [["env", { "modules": "commonjs" }], "react-native", "flow"]
-    }
-  }
-}

package/Components/Cell/CellStyles/FallbackCellStyle/index.js

@@ -1,157 +0,0 @@
-import {
-  getColor,
-  ACTIVE_COLOR,
-  BACKGROUND_COLOR,
-  MAIN_TEXT_COLOR,
-  FOCUSED_TEXT_COLOR,
-} from "../colors";
-
-const Image = "Image";
-const View = "View";
-const Text = "Text";
-
-const containerStyles = (styles) => ({
-  flex: 1,
-  flexDirection: "column",
-  width: 384,
-  height: 436,
-  borderRadius: 4,
-  backgroundColor: getColor(BACKGROUND_COLOR, styles),
-  marginRight: 48,
-  marginBottom: 48,
-});
-
-const focusedContainerStyles = (styles) => ({
-  ...containerStyles(styles),
-  backgroundColor: getColor(ACTIVE_COLOR, styles),
-});
-
-const imageStyle = {
-  width: 384,
-  height: 216,
-  borderTopRightRadius: 4,
-  borderTopLeftRadius: 4,
-};
-
-const titleContainerStyles = {
-  width: 336,
-  height: 60,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const titleStyles = (styles) => ({
-  fontSize: 26,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontWeight: "bold",
-  fontStyle: "normal",
-});
-
-const focusedTitleStyles = (styles) => ({
-  ...titleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const subtitleContainerStyles = {
-  width: 336,
-  height: 88,
-  marginHorizontal: 24,
-  marginTop: 24,
-  overflow: "hidden",
-};
-
-const subtitleStyles = (styles) => ({
-  fontSize: 24,
-  fontWeight: "normal",
-  opacity: 0.8,
-  color: getColor(MAIN_TEXT_COLOR, styles),
-  fontStyle: "normal",
-});
-
-const focusedSubtitleStyles = (styles) => ({
-  ...subtitleStyles(styles),
-  color: getColor(FOCUSED_TEXT_COLOR, styles),
-});
-
-const viewTree = (state, styles) => [
-  {
-    type: View,
-    style:
-      state === "focused"
-        ? focusedContainerStyles(styles)
-        : containerStyles(styles),
-    elements: [
-      {
-        type: Image,
-        style: imageStyle,
-        data: [
-          {
-            func: "image_src_from_media_item",
-            args: ["thumbnail-small"],
-            propName: "uri",
-          },
-        ],
-      },
-      {
-        type: View,
-        style: titleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedTitleStyles(styles)
-                : titleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["title"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 2,
-            },
-          },
-        ],
-      },
-      {
-        type: View,
-        style: subtitleContainerStyles,
-        elements: [
-          {
-            type: Text,
-            style:
-              state === "focused"
-                ? focusedSubtitleStyles(styles)
-                : subtitleStyles(styles),
-            data: [
-              {
-                func: "path",
-                args: ["summary"],
-                propName: "label",
-              },
-            ],
-            additionalProps: {
-              numberOfLines: 3,
-            },
-          },
-        ],
-      },
-    ],
-  },
-];
-
-export const fallbackCellStyle = (styles) => ({
-  content_types: {
-    default: {
-      states: {
-        default: viewTree("default", styles),
-        focused: viewTree("focused", styles),
-        selected: viewTree("selected", styles),
-        focused_selected: viewTree("focused_selected", styles),
-      },
-    },
-  },
-});