@applicaster/zapp-react-native-ui-components 12.0.0-rc.34 → 12.0.0-rc.35

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -145,34 +145,36 @@ const renderApplePlayer = ({
 }) => {
   const { title, summary } = item || {};
 
-  if (!isApplePlatform()) {
+  if (!isApplePlatform() || !player) {
+    return null;
+  }
+
+  // TODO: Check if it is not breaking default player logic on tvos
+  // Also if needs to add on tvos brightcove player for QB player
+  if (player.supportsNativeControls()) {
+    return null;
+  }
+
+  if (isAudioContent) {
+    return (
+      <AudioPlayer
+        audio_item={item}
+        plugin_configuration={pluginConfiguration}
+      />
+    );
+  }
+
+  if (!playNextData && player.isPaused() && player.isAd() === false) {
     return null;
   }
 
   return (
-    <>
-      {!playNextData && (
-        <>
-          {!isAudioContent &&
-            !!player?.isPaused() &&
-            !!player?.isAd() === false && (
-              <ProgramInfo
-                title={title}
-                subtitle={summary}
-                plugin_configuration={pluginConfiguration}
-                videoStyle={videoStyle}
-              />
-            )}
-        </>
-      )}
-
-      {isAudioContent && (
-        <AudioPlayer
-          audio_item={item}
-          plugin_configuration={pluginConfiguration}
-        />
-      )}
-    </>
+    <ProgramInfo
+      title={title}
+      subtitle={summary}
+      plugin_configuration={pluginConfiguration}
+      videoStyle={videoStyle}
+    />
   );
 };
 
@@ -339,6 +341,18 @@ const PlayerContainerComponent = (props: Props) => {
     }
   }, [item?.id, item?.extensions?.resumeTime, player]);
 
+  const onVideoFullscreenPlayerWillPresent = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: true,
+    });
+  }, []);
+
+  const onVideoFullscreenPlayerWillDismiss = React.useCallback(() => {
+    playerManager.invokeHandler("toggleFullscreen", {
+      fullscreen: false,
+    });
+  }, []);
+
   // Util methods
   const toggleFullscreen = (event) => {
     const { fullscreen = false } = event || {};
@@ -381,17 +395,27 @@ const PlayerContainerComponent = (props: Props) => {
       id: playerContainerId,
       listener: {
         onVideoEnd,
-        onError: onError,
-        onLoad: onLoad,
+        onError,
+        onLoad,
         onPlayerClose: close,
         onPlayerDetached: close,
+        onVideoFullscreenPlayerWillDismiss,
+        onVideoFullscreenPlayerWillPresent,
       },
     });
 
     return () => {
       player.removeListener(playerContainerId);
     };
-  }, [player, onVideoEnd]);
+  }, [
+    player,
+    onVideoEnd,
+    onError,
+    onLoad,
+    close,
+    onVideoFullscreenPlayerWillDismiss,
+    onVideoFullscreenPlayerWillPresent,
+  ]);
 
   useEffect(() => {
     // TODO: We should not use playerManager here to connect buttons to player container
@@ -621,7 +645,7 @@ const PlayerContainerComponent = (props: Props) => {
                         }}
                         focused={isInlineTV ? true : undefined}
                         autoplay={true}
-                        controls={isAppleTV() && !isInlineTV}
+                        controls={false}
                         disableCastAction={disableCastAction}
                         docked={navigator.isVideoModalDocked()}
                         entry={item}

package/Components/Screen/__tests__/Screen.test.tsx

@@ -69,10 +69,13 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useRoute: jest.fn(() => ({
     pathname: "/river/testId",
+    screenData: { id: "testId" },
   })),
   useNavigation: jest.fn(() => ({
     canGoBack: () => false,
     currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
     data: { screen: { id: "testId" } },
   })),
 }));

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -19,7 +19,11 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
   <View>
     <View
       pathname="/river/testId"
-      screenData={Object {}}
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>
@@ -45,7 +49,11 @@ exports[`<Screen Component /> when the navbar should show renders correctly 1`]
   <View>
     <View
       pathname="/river/testId"
-      screenData={Object {}}
+      screenData={
+        Object {
+          "id": "testId",
+        }
+      }
       testID="routeManager"
     />
   </View>

package/Components/Screen/index.tsx

@@ -23,6 +23,17 @@ import { RouteManager } from "../RouteManager";
 import { useScreenConfiguration } from "../River/useScreenConfiguration";
 import { useScreenOrientationHandler } from "./orientationHandler";
 
+const getScreenId = (
+  screenData: LegacyNavigationScreenData,
+  fallbackRiver: ZappRiver
+) => {
+  return screenData?.targetScreen
+    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    : "screen_id" in screenData
+    ? screenData.screen_id
+    : fallbackRiver.id;
+};
+
 function colorIsNotTransparent(color) {
   const layers = R.compose(
     R.map(R.trim),
@@ -41,17 +52,11 @@ function isValidColor(string) {
 }
 
 type Props = {
-  pathname: string;
-  screenData: Record<string, any>;
   setToggleMenu: () => void;
   setCloseMenu: () => void;
 };
 
-export function Screen({
-  setToggleMenu,
-  setCloseMenu,
-  screenData: _screenData,
-}: Props) {
+export function Screen({ setToggleMenu, setCloseMenu }: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
   const { plugins } = usePickFromState(["plugins"]);
@@ -68,10 +73,7 @@ export function Screen({
   const routeData = useRoute();
 
   const currentRiver = useScreenData(
-    (routeData.screenData as ZappRiver)?.targetScreen
-      ? (routeData.screenData as ZappRiver)?.targetScreen?.id ??
-          navigation.activeRiver.id
-      : (routeData.screenData as ZappRiver)?.screen_id
+    getScreenId(routeData.screenData, navigation.activeRiver)
   );
 
   const { title } = useNavbarState();
@@ -137,7 +139,7 @@ export function Screen({
 
         <OfflineFallbackScreen screenData={screenData}>
           {/* @TODO RouteManager doesn't use props, can they be removed ?  */}
-          <RouteManager pathname={pathname} screenData={_screenData} />
+          <RouteManager pathname={pathname} screenData={screenData} />
         </OfflineFallbackScreen>
       </View>
     </ScreenContextProvider>

package/package.json

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