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

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 { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import {
+  useDimensions,
+  useNavigation,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
@@ -78,12 +78,6 @@ const getPlayer = (
   return getPlayerWithModuleProperties(PlayerModule);
 };
 
-const dimensionsContext: "window" | "screen" = platformSelect({
-  android_tv: "window",
-  amazon: "window",
-  default: "screen",
-});
-
 type PlayableComponent = {
   Component: React.ComponentType<any>;
 };
@@ -91,16 +85,11 @@ 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);
@@ -118,9 +107,7 @@ export function HandlePlayable({
     if (!isModal) {
       closeVideoModal();
     }
-  }, []);
 
-  React.useEffect(() => {
     const castStateHandler = async () => {
       const castState = await CastPlugin?.getCastState();
       setCasting(castState === "Connected");
@@ -142,23 +129,23 @@ export function HandlePlayable({
   }, []);
 
   React.useEffect(() => {
-    if (casting) {
-      setPlayable({ Component: CastPlugin?.CastHandler });
-    } else {
-      setPlayable({ Component: PlayerContainer });
-    }
+    setPlayable({
+      Component: casting ? CastPlugin?.CastHandler : PlayerContainer,
+    });
   }, [casting]);
 
-  const Component = playable?.Component;
+  const { width: screenWidth, height: screenHeight } = useDimensions("window");
 
   const style = React.useMemo(
     () => ({
-      width: isModal ? modalWidth : mode === "PIP" ? "100%" : screenWidth,
-      height: isModal ? modalHeight : mode === "PIP" ? "100%" : screenHeight,
+      width: isModal ? "100%" : mode === "PIP" ? "100%" : screenWidth,
+      height: isModal ? "100%" : mode === "PIP" ? "100%" : screenHeight,
     }),
-    [screenWidth, screenHeight, modalHeight, modalWidth, isModal, mode]
+    [screenWidth, screenHeight, isModal, mode]
   );
 
+  const Component = playable?.Component;
+
   if (Component) {
     return (
       <Component
@@ -174,5 +161,5 @@ export function HandlePlayable({
     );
   }
 
-  return !isModal ? <BufferAnimation videoStyle={style as ViewStyle} /> : null;
+  return !isModal ? <BufferAnimation videoStyle={style} /> : 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.13",
+  "version": "12.0.14-alpha.6961417800",
   "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.13",
-    "@applicaster/zapp-react-native-bridge": "12.0.13",
-    "@applicaster/zapp-react-native-redux": "12.0.13",
-    "@applicaster/zapp-react-native-utils": "12.0.13",
+    "@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",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",