@applicaster/zapp-react-native-ui-components 12.0.14-alpha.6961417800 → 12.0.14-rc.1

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -1,14 +1,14 @@
 import * as React from "react";
 import * as R from "ramda";
+import { ViewStyle } from "react-native";
 import {
   findPluginByType,
   findPluginByIdentifier,
 } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-import {
-  useDimensions,
-  useNavigation,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
@@ -78,6 +78,12 @@ const getPlayer = (
   return getPlayerWithModuleProperties(PlayerModule);
 };
 
+const dimensionsContext: "window" | "screen" = platformSelect({
+  android_tv: "window",
+  amazon: "window",
+  default: "screen",
+});
+
 type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
@@ -85,11 +91,16 @@ type PlayableComponent = {
 export function HandlePlayable({
   item,
   isModal,
+  modalHeight,
+  modalWidth,
   mode,
   groupId,
 }: Props): React.ReactElement | null {
   const state = usePickFromState();
 
+  const { width: screenWidth, height: screenHeight } =
+    useDimensions(dimensionsContext);
+
   const { closeVideoModal } = useNavigation();
 
   const [Player, playerModuleProperties] = getPlayer(item, state);
@@ -107,7 +118,9 @@ export function HandlePlayable({
     if (!isModal) {
       closeVideoModal();
     }
+  }, []);
 
+  React.useEffect(() => {
     const castStateHandler = async () => {
       const castState = await CastPlugin?.getCastState();
       setCasting(castState === "Connected");
@@ -129,23 +142,23 @@ export function HandlePlayable({
   }, []);
 
   React.useEffect(() => {
-    setPlayable({
-      Component: casting ? CastPlugin?.CastHandler : PlayerContainer,
-    });
+    if (casting) {
+      setPlayable({ Component: CastPlugin?.CastHandler });
+    } else {
+      setPlayable({ Component: PlayerContainer });
+    }
   }, [casting]);
 
-  const { width: screenWidth, height: screenHeight } = useDimensions("window");
+  const Component = playable?.Component;
 
   const style = React.useMemo(
     () => ({
-      width: isModal ? "100%" : mode === "PIP" ? "100%" : screenWidth,
-      height: isModal ? "100%" : mode === "PIP" ? "100%" : screenHeight,
+      width: isModal ? modalWidth : mode === "PIP" ? "100%" : screenWidth,
+      height: isModal ? modalHeight : mode === "PIP" ? "100%" : screenHeight,
     }),
-    [screenWidth, screenHeight, isModal, mode]
+    [screenWidth, screenHeight, modalHeight, modalWidth, isModal, mode]
   );
 
-  const Component = playable?.Component;
-
   if (Component) {
     return (
       <Component
@@ -161,5 +174,5 @@ export function HandlePlayable({
     );
   }
 
-  return !isModal ? <BufferAnimation videoStyle={style} /> : null;
+  return !isModal ? <BufferAnimation videoStyle={style as ViewStyle} /> : null;
 }

package/Components/VideoModal/VideoModal.tsx

@@ -137,14 +137,14 @@ const VideoModalComponent = () => {
                 styles.container,
                 {
                   backgroundColor,
-                  width: modalSize.width,
-                  height: modalSize.height,
                 },
               ]}
             >
               <HandlePlayable
                 item={item}
                 isModal={mode !== "PIP"}
+                modalHeight={modalSize.height}
+                modalWidth={modalSize.width}
                 mode={mode}
               />
             </AnimatedPlayerModalWrapper>

package/package.json

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