@applicaster/zapp-react-native-ui-components 12.0.0-rc.104 → 12.0.0-rc.106

package/Components/MasterCell/index.tsx

@@ -76,8 +76,8 @@ export function masterCellBuilder({
     const selectedState = screen?.selectedEntry;
 
     const entryIsSelected = React.useMemo(
-      () => selectedState?.id === item?.id,
-      [selectedState?.id]
+      () => !!(selectedState?.id && selectedState?.id === item?.id),
+      [selectedState?.id, item?.id]
     );
 
     const elements = React.useMemo(

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -349,7 +349,12 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 };
 
 export const AnimatedScrollModal = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedScrollModalComponent : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component =
+    !isTV() && visible ? AnimatedScrollModalComponent : React.Fragment;
 
   return <Component>{children}</Component>;
 };

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -155,7 +155,11 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 };
 
 export const AnimatedVideoPlayerComponent = ({ children }: Props) => {
-  const Component = !isTV() ? AnimatedVideoPlayer : React.Fragment;
+  const {
+    videoModalState: { visible },
+  } = useNavigation();
+
+  const Component = !isTV() && visible ? AnimatedVideoPlayer : React.Fragment;
 
   return <Component>{children}</Component>;
 };

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

@@ -72,12 +72,34 @@ exports[`PlayerWrapper renders inline 1`] = `
         testID="test-player-container"
       />
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={false}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -158,6 +180,7 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />
@@ -254,12 +277,34 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
         />
       </View>
       <View
+        animationType="componentFade"
         style={
           Object {
             "flex": 1,
           }
         }
-      />
+      >
+        <View
+          configuration={
+            Object {
+              "tablet_landscape_player_container_background_color": "red",
+              "tablet_landscape_sidebar_width": "35%",
+            }
+          }
+          entry={
+            Object {
+              "id": "test",
+            }
+          }
+          isTabletLandscape={true}
+          style={
+            Object {
+              "flex": 1,
+              "paddingTop": 20,
+            }
+          }
+        />
+      </View>
     </View>
   </RNCSafeAreaView>
 </RNCSafeAreaProvider>
@@ -340,6 +385,7 @@ exports[`PlayerWrapper renders properly 1`] = `
         style={
           Object {
             "flex": 1,
+            "paddingTop": 20,
           }
         }
       />

package/Components/default-cell-renderer/__tests__/__snapshots__/defaultCellRenderer.test.tsx.snap

@@ -16,9 +16,9 @@ exports[`DefaultCellRenderer returns a react component and it renders correctly
     store={null}
     style={
       Object {
-        "backgroundColor": "#CCC",
+        "backgroundColor": "transparent",
         "margin": 12,
-        "opacity": 0.6,
+        "opacity": 1,
         "width": 169,
       }
     }
@@ -105,7 +105,7 @@ exports[`DefaultCellRenderer returns a react component for LG TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",
@@ -238,7 +238,7 @@ exports[`DefaultCellRenderer returns a react component for Samsung TVs 1`] = `
       store={null}
       style={
         Object {
-          "backgroundColor": "rgba(252,70,27,1.0)",
+          "backgroundColor": "rgba(47,47,47,1.0)",
           "borderRadius": 4,
           "flex": 1,
           "overflow": "hidden",

package/package.json

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