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

package/Components/Cell/CellWithFocusable.tsx

@@ -3,6 +3,8 @@ 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";
 
@@ -35,18 +37,19 @@ 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,
+  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;
 };
 
 export function CellWithFocusable(props: Props) {
@@ -62,11 +65,19 @@ export function CellWithFocusable(props: Props) {
     skipFocusManagerRegistration,
     isFocusable,
     behavior,
-    selected
+    selected,
+    focused,
   } = props;
 
   const isFocused = useCellFocusedState(groupId, id);
-  const state = useCellState({ id: item.id, behavior, focused: isFocused, selected });
+
+  const state = useCellState({
+    id: item.id,
+    behavior,
+    focused: isFocused || toBooleanWithDefaultFalse(focused),
+    selected,
+  });
+
   const [focusedButtonId, setFocusedButtonId] = React.useState(undefined);
 
   // for horizontal scrolling
@@ -95,6 +106,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(index) {}
 
   render() {
     const {
@@ -249,7 +243,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
       hasReceivedFocus,
       groupId,
       isFocusable,
-      behavior
+      behavior,
     } = this.props;
 
     const { id } = item;
@@ -279,6 +273,7 @@ export class TvOSCellComponent extends React.Component<Props, State> {
             index={index}
             scrollTo={this.scrollTo}
             preferredFocus={preferredFocus}
+            focused={this.props.focused}
             behavior={behavior}
           />
         </View>
@@ -310,7 +305,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,6 +4,7 @@ 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();
 
@@ -35,7 +36,9 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const focusableId = getFocusableId(prefixId, suffixId);
 
-  const focused = focusableId === focusedButtonId;
+  const focused =
+    focusableId === focusedButtonId ||
+    toBooleanWithDefaultFalse(otherProps.focused);
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 

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

@@ -31,6 +31,10 @@ 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/Toggle.tsx

@@ -9,10 +9,11 @@ type Props = {
     type?: string;
   };
   style: Styles;
+  cellState: CellState;
 };
 
 export const Toggle = (props: Props) => {
-  const { style, item, action } = props;
+  const { style, item, action, cellState } = props;
 
   const {
     trackColor,
@@ -22,6 +23,7 @@ export const Toggle = (props: Props) => {
     iosBackgroundColor,
   } = style;
 
+  const isSelected = React.useMemo(() => (cellState === "selected"), [item?.id, cellState]);
   const actionContext = useActions(action?.identifier);
 
   const [actionState, setActionState] = useState(
@@ -37,10 +39,10 @@ export const Toggle = (props: Props) => {
   return (
     <Switch
       trackColor={{ false: trackColor, true: trackColorActive }}
-      thumbColor={actionState?.state ? thumbColorActive : thumbColor}
+      thumbColor={isSelected ? thumbColorActive : thumbColor}
       ios_backgroundColor={iosBackgroundColor}
       onValueChange={onPress}
-      value={!!actionState?.state}
+      value={isSelected}
     />
   );
 };

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

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

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

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

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

@@ -9,4 +9,13 @@ 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/VideoLive/LiveImageManager.ts

@@ -9,7 +9,12 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
-export type LiveImageManagerEvent = "onEnd" | "onStart" | "onError";
+export type LiveImageManagerEvent =
+  | "onEnd"
+  | "onStart"
+  | "onError"
+  | "onDestroy"
+  | "onPlayerClose";
 
 export type LiveImageManagerListenerData = {
   id: string;
@@ -100,6 +105,15 @@ 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) => {
@@ -376,6 +390,25 @@ 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);
 
@@ -479,6 +512,16 @@ 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(
@@ -497,6 +540,7 @@ 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": "11.1.0",
+  "version": "12.0.0-alpha.5035843303",
   "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": "11.1.0",
-    "@applicaster/zapp-react-native-bridge": "11.1.0",
-    "@applicaster/zapp-react-native-redux": "11.1.0",
-    "@applicaster/zapp-react-native-utils": "11.1.0",
+    "@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",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",