@applicaster/zapp-react-native-ui-components 12.0.0-rc.123 → 12.0.0-rc.124

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

@@ -5,6 +5,7 @@ import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/acti
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 const { Logger } = getXray();
 
@@ -44,6 +45,11 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const actionContext = useActions(pluginIdentifier);
 
+  const accessibilityManager = useAccessibilityManager({});
+
+  const { ttsLabel = "" } =
+    actionContext?.initialEntryState(item)?.getAccessibility?.(item) || {};
+
   const onPress = (event) => {
     event?.preventDefault?.();
 
@@ -88,6 +94,12 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
         mouse: focusable.mouse,
       });
     });
+
+    if (ttsLabel) {
+      accessibilityManager.readText({
+        text: ttsLabel,
+      });
+    }
   };
 
   const handleBlur = (_focusable, _direction) => {

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

@@ -38,21 +38,22 @@ function Image({
 
   const shouldRenderImg = source && !error;
 
+  // Default placeholder image fallback is empty string because it won't rerender
+  // in case of undefined or {uri: undefined} source
+  // https://github.com/facebook/react-native/issues/9195
   const defaultPlaceHolderImage = React.useMemo(
     () => ({ uri: placeholderImage || "" }),
     [source, error]
   );
 
-  const _source = shouldRenderImg
-    ? withDimensions(source)
-    : defaultPlaceHolderImage;
-
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={_source?.uri ? _source : undefined}
+      source={
+        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
+      }
       {...R.omit(["source"], otherProps)}
     />
   );

package/Components/MasterCell/DefaultComponents/__tests__/image.test.js

@@ -39,6 +39,6 @@ describe("image with no source", () => {
     );
 
     const testInstance = testRenderer.root;
-    expect(testInstance.findByType(Image).props.source).toBeUndefined();
+    expect(testInstance.findByType(Image).props.source).toEqual({ uri: "" });
   });
 });

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -363,11 +363,19 @@ const PlayerContainerComponent = (props: Props) => {
     const { fullscreen = false } = event || {};
 
     if (fullscreen) {
-      playerEvent("onFullscreenPlayerWillPresent");
+      // in order to avoid UI glitches with player we have to start re-render ealier and then start real rotation
       navigator.fullscreenVideoModal();
+
+      setTimeout(() => {
+        playerEvent("onFullscreenPlayerWillPresent");
+      });
     } else {
-      playerEvent("onFullscreenPlayerWillDismiss");
+      // in order to avoid UI glitches with player we have to start re-render ealier and then start real rotation
       navigator.maximiseVideoModal();
+
+      setTimeout(() => {
+        playerEvent("onFullscreenPlayerWillDismiss");
+      });
     }
   };
 
@@ -519,7 +527,7 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     return () => {
-      playerEvent("player_did_close");
+      playerEvent("player_did_close", { item });
 
       if (!isModal) {
         showNavBar(true);

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { update, compose, tail, append, take, identity } from "ramda";
+import { update, compose, tail, append, take, identity, isNil } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -50,6 +50,10 @@ function scenesForBackTransition(props: SceneProps, { scenes }) {
     : [prepareScene(props.children), scenes[0]];
 }
 
+const isModalClosed = (navigator) => {
+  return !!isNil(navigator?.modalData);
+};
+
 type Props = {
   transitionConfig: any;
   children: React.ReactNode;
@@ -313,7 +317,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
       <Scene
         key={scenes[from.index].key}
         pathname={scenes[from.index].key}
-        isActive={scenes[from.index].key === this.props.navigator.currentRoute}
+        isActive={
+          scenes[from.index].key === this.props.navigator.currentRoute &&
+          isModalClosed(this.props.navigator)
+        }
         style={from.style}
         pointerEvents="none"
         overlayStyle={from.overlayStyle}
@@ -329,7 +336,10 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
     const toScene = scenes[to.index] && (
       <Scene
         pathname={scenes[to.index].key}
-        isActive={scenes[to.index].key === this.props.navigator.currentRoute}
+        isActive={
+          scenes[to.index].key === this.props.navigator.currentRoute &&
+          isModalClosed(this.props.navigator)
+        }
         key={scenes[to.index].key}
         style={to.style}
         overlayStyle={to.overlayStyle}

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -31,6 +31,11 @@ exports[`PlayerLiveImageComponent should render correctly with default props 1`]
         playerId="player1"
         resizeMode="cover"
         screenConfig={Object {}}
+        source={
+          Object {
+            "uri": "",
+          }
+        }
         style={Object {}}
       />
     </View>

package/Components/VideoModal/PlayerDetails.tsx

@@ -1,9 +1,17 @@
 import React, { useEffect, useRef } from "react";
-import { StyleProp, ViewStyle, Animated, Easing } from "react-native";
+import {
+  StyleProp,
+  ViewStyle,
+  Animated,
+  Easing,
+  Dimensions,
+} from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
+const { width: SCREEN_WIDTH } = Dimensions.get("screen");
+
 type Configuration = {
   [key: string]: any;
   modal_background_color?: string;
@@ -15,6 +23,7 @@ type Props = {
   configuration: Configuration;
   isTabletLandscape: boolean;
   isAudioPlayer?: boolean;
+  isTablet: boolean;
 };
 
 const containerStyle = ({
@@ -31,6 +40,7 @@ export const PlayerDetails = ({
   configuration,
   isTabletLandscape,
   isAudioPlayer,
+  isTablet,
 }: Props) => {
   const screenData = useTargetScreenData(entry);
   const insets = useSafeAreaInsets();
@@ -77,7 +87,11 @@ export const PlayerDetails = ({
           transform: [{ translateY }],
           opacity,
         },
-        // isAudioPlayer && audioMarginStyle,
+        {
+          // workaround for avoid wrong text-height after going back to portrait rotation
+          // we don't see this view in landscape mode, so we are able to use fixed width from portrait mode
+          width: isTablet ? undefined : SCREEN_WIDTH,
+        },
       ]}
     >
       {screenData && (

package/Components/VideoModal/PlayerWrapper.tsx

@@ -7,7 +7,6 @@ import {
   ViewStyle,
 } from "react-native";
 import { Edge, SafeAreaView } from "react-native-safe-area-context";
-
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PlayerDetails } from "./PlayerDetails";
@@ -23,6 +22,8 @@ import {
   ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
 type DimensionsT = {
   width: number | string;
   height: number | string | undefined;
@@ -69,10 +70,8 @@ const directionStyles = (isTabletLandscape: boolean): ViewStyle => {
 };
 
 const getScreenAspectRatio = () => {
-  const { width, height } = Dimensions.get("screen");
-
-  const longEdge = Math.max(width, height);
-  const shortEdge = Math.min(width, height);
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
 
   return longEdge / shortEdge;
 };
@@ -125,10 +124,37 @@ const getTabletWidth = (
   return Number(width) - sidebarWidth;
 };
 
-export const PlayerWrapper = (props: Props) => {
+const getStyles = (baseStyle, isMobile, isPortrait) => {
+  if (isMobile && isPortrait) {
+    return { width: SCREEN_WIDTH, height: SCREEN_HEIGHT };
+  }
+
+  if (isMobile && !isPortrait) {
+    return { width: SCREEN_HEIGHT, height: SCREEN_WIDTH };
+  }
+
+  return baseStyle;
+};
+
+const showDetails = (isMobile: boolean, docked: boolean): boolean => {
+  // for mobile we always show details. Mounting of it very heavy operation.
+  if (isMobile) {
+    return true;
+  }
+
+  // workaround for tablets we need to mount/unmount in order to avoid PlayerDetails content dissappearing
+  // FIXME - find out the reason of dissapearing of content
+  if (docked) {
+    return false;
+  }
+
+  return true;
+};
+
+const PlayerWrapperComponent = (props: Props) => {
   const {
     entry,
-    style,
+    style: baseStyle,
     containerStyle,
     inline,
     docked,
@@ -143,6 +169,8 @@ export const PlayerWrapper = (props: Props) => {
 
   const isInlineModal = inline && isModal;
 
+  const style = getStyles(baseStyle, !isTablet, isInlineModal);
+
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
   const tabletWidth = getTabletWidth(configuration, style);
@@ -224,8 +252,9 @@ export const PlayerWrapper = (props: Props) => {
                     </AnimatedVideoPlayerComponent>
                   </AnimationComponent>
                 </View>
+
                 <AnimatedScrollModal>
-                  {isInlineModal && !docked ? (
+                  {showDetails(!isTablet, docked) && (
                     <AnimationComponent
                       animationType={ComponentAnimationType.componentFade}
                       style={defaultStyles.flex}
@@ -235,10 +264,9 @@ export const PlayerWrapper = (props: Props) => {
                         style={defaultStyles.playerDetails}
                         entry={entry}
                         isTabletLandscape={isTabletLandscape}
+                        isTablet={isTablet}
                       />
                     </AnimationComponent>
-                  ) : (
-                    <View style={defaultStyles.playerDetails} />
                   )}
                 </AnimatedScrollModal>
               </ScreenContextProvider>
@@ -249,3 +277,5 @@ export const PlayerWrapper = (props: Props) => {
     </PathnameContext.Provider>
   );
 };
+
+export const PlayerWrapper = PlayerWrapperComponent;

package/Components/VideoModal/VideoModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as R from "ramda";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View, StatusBar } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
@@ -129,32 +129,38 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <PathnameContext.Provider value={pathname}>
-      <ScreenContextProvider pathname={pathname}>
-        {itemIdHooksFinished === item?.id ? (
-          <AnimatedPlayerModalWrapper
-            style={[
-              styles.container,
-              {
-                backgroundColor,
-              },
-            ]}
-          >
-            <HandlePlayable
-              item={item}
-              isModal={mode !== "PIP"}
-              modalHeight={modalSize.height}
-              modalWidth={modalSize.width}
-              mode={mode}
-            />
-          </AnimatedPlayerModalWrapper>
-        ) : (
-          <View style={styles.loaderContainer}>
-            <Spinner />
-          </View>
-        )}
-      </ScreenContextProvider>
-    </PathnameContext.Provider>
+    <>
+      {/* TODO: Workaround to avoid unnecessary UI effect when switching from portrait to fullscreen */}
+      <StatusBar hidden={false} />
+      {/* TODO: Workaround to avoid unnecessary UI effect when switching from portrait to fullscreen */}
+
+      <PathnameContext.Provider value={pathname}>
+        <ScreenContextProvider pathname={pathname}>
+          {itemIdHooksFinished === item?.id ? (
+            <AnimatedPlayerModalWrapper
+              style={[
+                styles.container,
+                {
+                  backgroundColor,
+                },
+              ]}
+            >
+              <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__/PlayerDetails.test.tsx

@@ -8,6 +8,13 @@ const props = {
   configuration: { modal_background_color: "transparent" },
 };
 
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
+  useDimensions: jest.fn(() => ({
+    width: 20,
+    height: 30,
+  })),
+}));
+
 jest.mock("react-native-safe-area-context", () => ({
   useSafeAreaInsets: jest.fn(() => ({
     top: 20,

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

@@ -9,6 +9,7 @@ exports[`PlayerDetails renders properly 1`] = `
       "flex": 1,
       "marginTop": -8,
       "paddingTop": -8,
+      "width": 750,
     }
   }
 >
@@ -29,6 +30,7 @@ exports[`PlayerDetails renders properly on tablet in landscape orientation 1`] =
       "flex": 1,
       "marginTop": -20,
       "paddingTop": 40,
+      "width": 750,
     }
   }
 >

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

@@ -27,8 +27,8 @@ exports[`PlayerWrapper renders inline 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "height": 1334,
+          "width": 750,
         },
         Object {},
       ]
@@ -91,6 +91,7 @@ exports[`PlayerWrapper renders inline 1`] = `
               "id": "test",
             }
           }
+          isTablet={false}
           isTabletLandscape={false}
           style={
             Object {
@@ -132,8 +133,8 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": undefined,
-          "width": 300,
+          "height": 1334,
+          "width": 750,
         },
         Object {},
       ]
@@ -177,13 +178,35 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
-            "paddingTop": 20,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -296,6 +319,7 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
               "id": "test",
             }
           }
+          isTablet={true}
           isTabletLandscape={true}
           style={
             Object {
@@ -337,8 +361,8 @@ exports[`PlayerWrapper renders properly 1`] = `
           "backgroundColor": "transparent",
         },
         Object {
-          "height": 800,
-          "width": 300,
+          "height": 750,
+          "width": 1334,
         },
         Object {},
       ]
@@ -382,13 +406,35 @@ exports[`PlayerWrapper renders properly 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
-            "paddingTop": 20,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTablet={false}
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>

package/Contexts/ConfirmDialogState/index.ts

@@ -2,7 +2,7 @@ import { createStore } from "zustand/vanilla";
 import { useStore } from "zustand";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-interface ConfirmationDialogState {
+export interface ConfirmationDialogState {
   isDialogVisible: boolean;
   messages: string;
   confirmAction: () => void;

package/package.json

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