@applicaster/zapp-react-native-ui-components 12.0.0-rc.61 → 12.0.0-rc.63

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -25,6 +25,7 @@ type Props = {
   testID?: string;
   accessibilityLabel?: string;
   cellUUID?: string;
+  extraProps?: Record<string, any>;
 };
 
 function isStringAsset(asset) {
@@ -108,6 +109,7 @@ export function ActionButton(props: Props) {
           flavour={flavour}
           asset={getAssetValue(asset, flavour)}
           cellUUID={cellUUID}
+          {...(props?.extraProps ?? {})}
         />
       )}
     </TouchableOpacity>

package/Components/MasterCell/DefaultComponents/DynamicBadge.tsx

@@ -4,6 +4,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 
 type DynamicBadgeProps = {
   cellUUID?: string;
+  uri?: string;
 };
 
 const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
@@ -12,11 +13,12 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
   // TODO: Initial value should depends on player state (playing or not)
   const [showImage, setShowImage] = React.useState(true);
   const player = usePlayer(playerId);
+  const uri = props?.uri;
 
   React.useEffect(() => {
     if (playerId && player) {
       return player.addListener({
-        id: "dynamic-badges",
+        id: `dynamic-badges-${uri}`,
         listener: {
           onPlayerClose: () => {
             setShowImage(true);
@@ -35,7 +37,7 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
     } else {
       setShowImage(true);
     }
-  }, [player]);
+  }, [player, uri]);
 
   if (!showImage) {
     return null;

package/Components/MasterCell/DefaultComponents/__tests__/text.test.tsx

@@ -1,11 +1,23 @@
 import React from "react";
-import { Text } from "react-native";
+import RN from "react-native";
 import { Provider } from "react-redux";
 import TestRenderer from "react-test-renderer";
-import configureStore from "redux-mock-store";
-import CustomText from "../Text";
+import configureStoreFn from "redux-mock-store";
 
-const mockStore = configureStore();
+const mockUseIsRTL = jest.fn(() => true);
+const mockGetIsRTL = jest.fn(() => true);
+const mockUseLocalizedStrings = jest.fn(() => ({}));
+const mockGetUILanguage = jest.fn(() => "he-HE");
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+  getIsRTL: mockGetIsRTL,
+  useLocalizedStrings: mockUseLocalizedStrings,
+  getUILanguage: mockGetUILanguage,
+}));
+
+const CustomText = require("../Text").default;
+const mockStore = configureStoreFn();
 
 const defaultProps = {
   entry: {},
@@ -22,7 +34,7 @@ const getRenderedText = (label: string, store: any) => {
     </Provider>
   );
 
-  return testRenderer.root.findByType(Text).props.children;
+  return testRenderer.root.findByType(RN.Text).props.children;
 };
 
 describe("RTL app: Hebrew text contains english word", () => {
@@ -34,7 +46,7 @@ describe("RTL app: Hebrew text contains english word", () => {
     remoteConfigurations: { localizations: { he: {} } },
     appData: {
       languageCode: "he",
-      countryCode: "HE",
+      countryCode: "IL",
     },
   });
 
@@ -47,18 +59,22 @@ describe("RTL app: Hebrew text contains english word", () => {
 
   it("Hebrew text contains not first english word", () => {
     const renderedText = getRenderedText(textWithNotFirstEnglishWord, store);
-
     expect(renderedText).toEqual(textWithNotFirstEnglishWord);
   });
 
   it("Hebrew text doesn't contain english word", () => {
     const renderedText = getRenderedText(textWithoutEnglishWord, store);
-
     expect(renderedText).toEqual(textWithoutEnglishWord);
   });
 });
 
 describe("LTR app: English text", () => {
+  beforeAll(() => {
+    mockUseIsRTL.mockReturnValue(false);
+    mockGetIsRTL.mockReturnValue(false);
+    mockGetUILanguage.mockReturnValue("en-US");
+  });
+
   const englishText = "Test sentence";
 
   const store = mockStore({
@@ -71,7 +87,6 @@ describe("LTR app: English text", () => {
 
   it("English text", () => {
     const renderedText = getRenderedText(englishText, store);
-
     expect(renderedText).toEqual(englishText);
   });
 });

package/Components/VideoModal/PlayerWrapper.tsx

@@ -96,7 +96,7 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   }
 
   if (!isInlineModal && Platform.OS === "android") {
-    return [];
+    return ["top", "left", "right", "bottom"];
   }
 
   return ["top"];
@@ -161,7 +161,7 @@ export const PlayerWrapper = (props: Props) => {
       width: isInlineModal && docked ? undefined : baseDimensions.width,
       aspectRatio: !isInlineModal && !pip ? getScreenAspectRatio() : 16 / 9,
     }),
-    [baseDimensions, isInlineModal, pip]
+    [baseDimensions, isInlineModal, pip, docked]
   );
 
   const containerDimensions: DimensionsT = React.useMemo(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-rc.61",
+  "version": "12.0.0-rc.63",
   "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.61",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.61",
-    "@applicaster/zapp-react-native-redux": "12.0.0-rc.61",
-    "@applicaster/zapp-react-native-utils": "12.0.0-rc.61",
+    "@applicaster/applicaster-types": "12.0.0-rc.63",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-rc.63",
+    "@applicaster/zapp-react-native-redux": "12.0.0-rc.63",
+    "@applicaster/zapp-react-native-utils": "12.0.0-rc.63",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",