@applicaster/zapp-react-native-ui-components 12.0.0-alpha.5035843303 → 12.0.0-alpha.5786305091

package/Components/Cell/CellWithFocusable.tsx

@@ -3,8 +3,6 @@ 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";
 
@@ -37,19 +35,18 @@ const useCellFocusedState = (groupId: string, id: string) => {
 };
 
 type Props = {
-  item: ZappEntry;
-  CellRenderer: React.ComponentType<{ item: Object; state: string }>;
-  id: string;
-  groupId: string;
-  onFocus: Function;
-  index: number;
-  scrollTo: Function;
-  preferredFocus?: boolean;
-  skipFocusManagerRegistration?: boolean;
-  isFocusable?: boolean;
-  behavior: Behavior;
-  selected?: boolean;
-  focused?: boolean;
+  item: ZappEntry,
+  CellRenderer: React.ComponentType<{ item: Object, state: string }>,
+  id: string,
+  groupId: string,
+  onFocus: Function,
+  index: number,
+  scrollTo: Function,
+  preferredFocus?: boolean,
+  skipFocusManagerRegistration?: boolean,
+  isFocusable?: boolean,
+  behavior: Behavior,
+  selected?: boolean,
 };
 
 export function CellWithFocusable(props: Props) {
@@ -65,19 +62,11 @@ export function CellWithFocusable(props: Props) {
     skipFocusManagerRegistration,
     isFocusable,
     behavior,
-    selected,
-    focused,
+    selected
   } = props;
 
   const isFocused = useCellFocusedState(groupId, id);
-
-  const state = useCellState({
-    id: item.id,
-    behavior,
-    focused: isFocused || toBooleanWithDefaultFalse(focused),
-    selected,
-  });
-
+  const state = useCellState({ id: item.id, behavior, focused: isFocused, selected });
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
 
   // for horizontal scrolling
@@ -106,7 +95,6 @@ export function CellWithFocusable(props: Props) {
       preferredFocus={preferredFocus}
       skipFocusManagerRegistration={skipFocusManagerRegistration}
       isFocusable={isFocusable}
-      focused={focused}
     />
   );
 }

package/Components/Cell/TvOSCellComponent.tsx

@@ -226,7 +226,13 @@ export class TvOSCellComponent extends React.Component<Props, State> {
 
   hasReceivedFocus() {}
 
-  scrollTo(index) {}
+  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);
+    }
+  }
 
   render() {
     const {
@@ -243,7 +249,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       hasReceivedFocus,
       groupId,
       isFocusable,
-      behavior,
+      behavior
     } = this.props;
 
     const { id } = item;
@@ -273,7 +279,6 @@ export class TvOSCellComponent extends React.Component<Props, State> {
             index={index}
             scrollTo={this.scrollTo}
             preferredFocus={preferredFocus}
-            focused={this.props.focused}
             behavior={behavior}
           />
         </View>
@@ -305,7 +310,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
                   item,
                   focused: this.props.focused || selectedCell || focused,
                   scrollTo: this.scrollTo,
-                  behavior,
+                  behavior
                 }}
               />
             );

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

@@ -4,7 +4,6 @@ import { Focusable } from "@applicaster/zapp-react-native-ui-components/Componen
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
-import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 const { Logger } = getXray();
 
@@ -36,9 +35,7 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const focusableId = getFocusableId(prefixId, suffixId);
 
-  const focused =
-    focusableId === focusedButtonId ||
-    toBooleanWithDefaultFalse(otherProps.focused);
+  const focused = focusableId === focusedButtonId;
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 

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

@@ -31,10 +31,6 @@ function Image({
 
   const source = useImageSource({ uri, entry, otherProps });
 
-  // const source = {
-  //   uri: `https://placehold.co/392x221/blue/FFFFFF.png?text=${otherProps?.item?.index}`,
-  // };
-
   React.useEffect(() => {
     // reset error state on URI change as the error is referencing previous uri
     setErrorState(null);

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.android.tsx

@@ -61,10 +61,7 @@ export function ButtonContainerView({
     <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator
-            key={`separator_${index}`}
-            width={horizontalGutter}
-          />
+          <HorizontalSeparator key={index} width={horizontalGutter} />
         ),
         cloneElementsWithIds(buttonIds, filteredChildren)
       )}

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.tsx

@@ -7,10 +7,6 @@ import type {
   ContainerProps,
   ContainerChildren,
 } from "./types";
-import {
-  useIsRTL,
-  applyRTLStylesIfNeeded,
-} from "@applicaster/zapp-react-native-utils/localizationUtils";
 
 const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
   <View style={{ width }} />
@@ -21,7 +17,6 @@ export function ButtonContainerView({
   children,
   ...otherProps
 }: ContainerProps) {
-  const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
 
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
@@ -31,13 +26,10 @@ export function ButtonContainerView({
   }
 
   return (
-    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
+    <View style={style}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator
-            key={`separator_${index}`}
-            width={horizontalGutter}
-          />
+          <HorizontalSeparator key={index} width={horizontalGutter} />
         ),
         filteredChildren
       )}

package/Components/MasterCell/utils/__tests__/insertBetween.test.js

@@ -9,13 +9,4 @@ describe("insertBetween", () => {
 
     expect(result).toEqual([1, "|", 2, "|", 3]);
   });
-
-  it("insertBetween", () => {
-    const separator = (index) => `separator:${index}`;
-    const items = [1, 2, 3];
-
-    const result = insertBetween(separator, items);
-
-    expect(result).toEqual([1, "separator:0", 2, "separator:1", 3]);
-  });
 });

package/Components/MeasurmentsPortal/MeasurementsPortal.tsx

@@ -1,17 +1,43 @@
-/* eslint react/prop-types: off */
+import React, { useEffect, useCallback, ReactNode, useReducer } from "react";
+import { View, StyleSheet, LayoutChangeEvent } from "react-native";
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-import React from "react";
-import { View, StyleSheet } from "react-native";
-import * as R from "ramda";
-import { v4 } from "uuid";
+const { log_debug } = createLogger({
+  subsystem: "MeasurementsPortal",
+  category: "UIComponents",
+});
+
+type LayoutDimensions = {
+  width: number;
+  height: number;
+};
 
-type Props = {
+type MeasurementResult = {
+  width: number;
+  height: number;
+  index?: number;
+};
+
+type MeasurementsPortalProps = {
   Component: React.ElementType;
-  onLayout: (LayoutChangeEvent) => void;
-  componentProps?: Record<any, any>;
+  onLayout: (event: LayoutChangeEvent) => void;
+  componentProps?: Record<string, any>;
+  onLoadFinished?: () => void;
 };
 
-const isError = (possibleError): boolean => possibleError instanceof Error;
+type MeasurementPortalContextValue = {
+  measureComponent: (
+    comp: React.ElementType,
+    props: Record<string, any>
+  ) => Promise<MeasurementResult>;
+  measuringInProgress: boolean;
+};
+
+type MeasurementsPortalContextProviderProps = {
+  children: ReactNode;
+};
+
+const isError = (possibleError: any): boolean => possibleError instanceof Error;
 
 const styles = StyleSheet.create({
   container: {
@@ -25,100 +51,245 @@ const styles = StyleSheet.create({
   wrapper: {},
 });
 
-const MeasurementsPortal = ({ Component, onLayout, componentProps }: Props) => {
+type State = {
+  component: React.ElementType;
+  componentProps: Record<string, any> | null;
+  measureComponentCallback: ((result: MeasurementResult) => void) | null;
+  onLoadFinishedIsCalled: boolean;
+  measuringInProgress: boolean;
+  layout: LayoutDimensions;
+};
+
+type Action =
+  | { type: "SET_COMPONENT"; payload: React.ElementType }
+  | { type: "SET_COMPONENT_PROPS"; payload: Record<string, any> | null }
+  | {
+      type: "SET_MEASURE_CALLBACK";
+      payload: ((result: MeasurementResult) => void) | null;
+    }
+  | { type: "SET_ON_LOAD_FINISHED"; payload: boolean }
+  | { type: "SET_MEASURING_PROGRESS"; payload: boolean }
+  | { type: "SET_LAYOUT"; payload: LayoutDimensions };
+
+const MEASUREMENT_ACTIONS = {
+  setComponent: "SET_COMPONENT",
+  setComponentProps: "SET_COMPONENT_PROPS",
+  setMeasureCallback: "SET_MEASURE_CALLBACK",
+  setOnLoadFinished: "SET_ON_LOAD_FINISHED",
+  setMeasuringProgress: "SET_MEASURING_PROGRESS",
+  setLayout: "SET_LAYOUT",
+} as const;
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case MEASUREMENT_ACTIONS.setComponent:
+      return { ...state, component: action.payload };
+    case MEASUREMENT_ACTIONS.setComponentProps:
+      return { ...state, componentProps: action.payload };
+    case MEASUREMENT_ACTIONS.setMeasureCallback:
+      return { ...state, measureComponentCallback: action.payload };
+    case MEASUREMENT_ACTIONS.setOnLoadFinished:
+      return { ...state, onLoadFinishedIsCalled: action.payload };
+    case MEASUREMENT_ACTIONS.setMeasuringProgress:
+      return { ...state, measuringInProgress: action.payload };
+    case MEASUREMENT_ACTIONS.setLayout:
+      return { ...state, layout: action.payload };
+    default:
+      return state;
+  }
+};
+
+const initialState: State = {
+  component: null,
+  componentProps: null,
+  measureComponentCallback: null,
+  onLoadFinishedIsCalled: false,
+  measuringInProgress: false,
+  layout: { width: 0, height: 0 },
+};
+
+/**
+ * Handles layout changes for the MeasurementsPortal component
+ */
+const onLayout =
+  (dispatch) =>
+  ({ nativeEvent: { layout: newLayout } }: LayoutChangeEvent) => {
+    log_debug("Rendered measurement layout", { newLayout });
+    dispatch({ type: MEASUREMENT_ACTIONS.setLayout, payload: newLayout });
+  };
+
+/**
+ * MeasurementsPortal is a component that is used to measure the size of a component
+ * It is not rendered to the main tree, but it actually uses a component and its props to measure the size of the component.
+ * The <Component> comes from the measureComponent method of the MeasurementPortalContext.
+ */
+const MeasurementsPortal = ({
+  Component,
+  onLayout,
+  componentProps,
+}: MeasurementsPortalProps) => {
+  if (!Component) {
+    return null;
+  }
+
   return (
     <View style={styles.container} testID="MeasurementsPortal">
-      <View style={styles.wrapper} onLayout={onLayout} key={v4()}>
+      <View style={styles.wrapper} onLayout={onLayout}>
         <Component {...componentProps} />
       </View>
     </View>
   );
 };
 
-const MeasurementPortalContext = React.createContext(null);
+const MeasurementPortalContext =
+  React.createContext<MeasurementPortalContextValue | null>(null);
 
-const MeasurementsPortalContextProvider = ({ children }) => {
-  const Component = React.useRef(View);
-  const [measuringInProgress, setMeasuringInProgress] = React.useState(false);
+/**
+ * The MeasurementsPortalContextProvider provides a measureComponent method, and a measuringInProgress flag
+ * With these we can pre-render a component and measure its size before rendering it to the main tree to avoid layout shifts
+ */
+const MeasurementsPortalContextProvider = ({
+  children,
+}: MeasurementsPortalContextProviderProps) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
 
-  const measureComponentCallback = React.useRef(null);
-  const componentProps = React.useRef(null);
-  const onLoadFinishedIsCalled = React.useRef(null);
+  const onLoadFinishedRef =
+    React.useRef<MeasurementsPortalProps["onLoadFinished"]>(null);
 
-  const setComponent = (comp) => {
-    Component.current = comp;
-  };
+  /**
+   * Finalize resolves the promise created by measureComponent and finalizes the measurement process
+   * It resolves with the measurement result (width/height/index) to the measureComponentCallback
+   */
+  const finalize = useCallback(() => {
+    if (state.measureComponentCallback) {
+      log_debug("Finalize measurement process", {
+        layout: state.layout,
+        componentProps: state.componentProps,
+      });
 
-  const setMeasureComponentCallback = (cb) => {
-    measureComponentCallback.current = cb;
-  };
+      state.measureComponentCallback({
+        width: state.layout.width,
+        height: state.layout.height,
+        index: state.componentProps?.index,
+      });
+    }
 
-  const finalize = ({ width, height }) => {
-    measureComponentCallback?.current?.({
-      width,
-      height,
-      index: componentProps.current.index,
+    dispatch({ type: MEASUREMENT_ACTIONS.setMeasureCallback, payload: null });
+
+    dispatch({
+      type: MEASUREMENT_ACTIONS.setMeasuringProgress,
+      payload: false,
     });
 
-    setMeasureComponentCallback(null);
-    setMeasuringInProgress(false);
-    onLoadFinishedIsCalled.current = false;
-  };
+    dispatch({ type: MEASUREMENT_ACTIONS.setOnLoadFinished, payload: false });
+  }, [state.layout, state.componentProps, state.measureComponentCallback]);
 
-  const setComponentProps = (props) => {
-    const handleOnLoadFinish = (...args) => {
-      const error = R.path([0, "error"], args);
-
-      if (isError(error)) {
-        finalize({ width: 0, height: 0 });
-      } else {
-        onLoadFinishedIsCalled.current = true;
-        props.onLoadFinished(...args);
-      }
-    };
-
-    componentProps.current = {
-      ...props,
-      onLoadFinished: handleOnLoadFinish,
-    };
-  };
+  useEffect(() => {
+    log_debug("Measurement portal updated", {
+      measureComponentCallback: state.measureComponentCallback,
+      onLoadFinishedIsCalled: state.onLoadFinishedIsCalled,
+      layout: state.layout,
+    });
 
-  const measureComponent = React.useCallback(async (comp, props) => {
-    return new Promise((resolve) => {
-      setMeasureComponentCallback(resolve);
-      setMeasuringInProgress(true);
+    if (
+      state.measureComponentCallback &&
+      state.layout.width > 0 &&
+      state.layout.height > 0 &&
+      onLoadFinishedRef.current
+    ) {
+      finalize();
+    }
+  }, [state.measureComponentCallback, state.layout, finalize]);
 
-      setComponentProps(props);
-      setComponent(comp);
-    });
-  }, []);
+  /**
+   * Utility function that takes, a component and its props, measures the rendered size of the component
+   * and creates a promise that does not get resolved with the measurement result (width/height/index)
+   * until the onLoadFinished callback is called
+   */
+  const measureComponent = useCallback(
+    (
+      comp: React.ElementType,
+      props: { onLoadFinished: () => void; [key: string]: any }
+    ): Promise<MeasurementResult> => {
+      return new Promise((resolve) => {
+        log_debug("Measuring process started", { comp, props });
 
-  const onLayout = ({
-    nativeEvent: {
-      layout: { width, height },
-    },
-  }) => {
-    if (measureComponentCallback.current && onLoadFinishedIsCalled.current) {
-      finalize({
-        width,
-        height,
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setMeasureCallback,
+          payload: resolve,
+        });
+
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setMeasuringProgress,
+          payload: true,
+        });
+
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setOnLoadFinished,
+          payload: false,
+        });
+
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setLayout,
+          payload: { width: 0, height: 0 },
+        });
+
+        onLoadFinishedRef.current =
+          // eslint-disable-next-line react/prop-types
+          props.onLoadFinished as MeasurementsPortalProps["onLoadFinished"];
+
+        const handleOnLoadFinish = (...args: any[]) => {
+          if (args?.[0]?.error && isError(args[0].error)) {
+            log_debug(
+              "Component called onLoadFinish with an error, completing measurement process",
+              { args }
+            );
+
+            finalize();
+
+            return;
+          }
+
+          log_debug(
+            "Component called onLoadFinish, completing measurement process",
+            { args }
+          );
+
+          dispatch({
+            type: MEASUREMENT_ACTIONS.setOnLoadFinished,
+            payload: true,
+          });
+
+          onLoadFinishedRef.current?.apply(null, args);
+        };
+
+        dispatch({
+          type: MEASUREMENT_ACTIONS.setComponentProps,
+          payload: { ...props, onLoadFinished: handleOnLoadFinish },
+        });
+
+        dispatch({ type: MEASUREMENT_ACTIONS.setComponent, payload: comp });
       });
-    }
-  };
+    },
+    []
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      measureComponent,
+      measuringInProgress: state.measuringInProgress,
+    }),
+    [measureComponent, state.measuringInProgress]
+  );
 
   return (
     <>
       <MeasurementsPortal
-        Component={Component.current}
-        componentProps={componentProps.current}
-        onLayout={onLayout}
+        Component={state.component}
+        componentProps={state.componentProps}
+        onLayout={onLayout(dispatch)}
       />
-      <MeasurementPortalContext.Provider
-        value={{
-          measureComponent,
-          measuringInProgress,
-        }}
-      >
+      <MeasurementPortalContext.Provider value={contextValue}>
         {children}
       </MeasurementPortalContext.Provider>
     </>

package/Components/VideoLive/LiveImageManager.ts

@@ -9,12 +9,7 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
-export type LiveImageManagerEvent =
-  | "onEnd"
-  | "onStart"
-  | "onError"
-  | "onDestroy"
-  | "onPlayerClose";
+export type LiveImageManagerEvent = "onEnd" | "onStart" | "onError";
 
 export type LiveImageManagerListenerData = {
   id: string;
@@ -105,15 +100,6 @@ export class LiveImageManager implements PlayerLifecycleListener {
     }
 
     this.items = this.items.filter((i) => i !== item);
-
-    this.invokeListenersUpdate({
-      callbackName: "onDestroy",
-      event: {
-        item,
-        playerId: this.currentlyPlaying?.playerId,
-        primaryPlayerId: this.primaryPlayer?.playerId,
-      },
-    });
   };
 
   public onViewportEnter = (item: LiveImage) => {
@@ -390,25 +376,6 @@ export class LiveImageManager implements PlayerLifecycleListener {
       });
   };
 
-  onLiveImagePlayerClose = (item: LiveImage) => {
-    log_debug(
-      `onLiveImagePlayerClose: live-image ${playerInfo(
-        item.player
-      )}, currentPlayingId: ${
-        this.currentlyPlaying?.playerId
-      }, primaryPlayerId: ${this.primaryPlayer?.playerId}`
-    );
-
-    this.invokeListenersUpdate({
-      callbackName: "onPlayerClose",
-      event: {
-        item,
-        playerId: this.currentlyPlaying?.playerId,
-        primaryPlayerId: this.primaryPlayer?.playerId,
-      },
-    });
-  };
-
   onLiveImageError = (item: LiveImage, error: Error) => {
     item.setMode(LiveImageType.Image);
 
@@ -512,16 +479,6 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     LiveImageManager.instance.onLiveImageError(this, error);
   };
 
-  onVideoError = (error: Error) => {
-    log_error(
-      `onVideoError: live-image, fail to play, switching back to image. error: ${
-        error?.message
-      }, ${playerInfo(this.player)}`
-    );
-
-    LiveImageManager.instance.onLiveImageError(this, error);
-  };
-
   onVideoEnd = (_event) => {
     log_info(
       `onVideoEnd: live-image, video completed, switching back to image, ${playerInfo(
@@ -540,7 +497,6 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     );
 
     // TODO: we maybe want to add onPlayerClose to separate completion behavior
-    LiveImageManager.instance.onLiveImagePlayerClose(this);
     LiveImageManager.instance.onLiveImageEnded(this);
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.5035843303",
+  "version": "12.0.0-alpha.5786305091",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -35,10 +35,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.5035843303",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5035843303",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5035843303",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5035843303",
+    "@applicaster/applicaster-types": "12.0.0-alpha.5786305091",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.5786305091",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.5786305091",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.5786305091",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",