@applicaster/zapp-react-native-ui-components 13.0.0-rc.87 → 13.0.0-rc.89

package/Components/HandlePlayable/HandlePlayable.tsx

@@ -12,6 +12,7 @@ import {
 
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
 import { PlayerContainer } from "../PlayerContainer";
+import { useModalSize } from "../VideoModal/hooks";
 
 type Props = {
   item: ZappEntry;
@@ -136,12 +137,18 @@ export function HandlePlayable({
 
   const { width: screenWidth, height: screenHeight } = useDimensions("window");
 
+  const modalSize = useModalSize();
+
   const style = React.useMemo(
     () => ({
-      width: isModal ? "100%" : mode === "PIP" ? "100%" : screenWidth,
-      height: isModal ? "100%" : mode === "PIP" ? "100%" : screenHeight,
+      width: isModal ? modalSize.width : mode === "PIP" ? "100%" : screenWidth,
+      height: isModal
+        ? modalSize.height
+        : mode === "PIP"
+          ? "100%"
+          : screenHeight,
     }),
-    [screenWidth, screenHeight, isModal, mode]
+    [screenWidth, screenHeight, modalSize, isModal, mode]
   );
 
   const Component = playable?.Component;

package/Components/VideoModal/PlayerWrapper.tsx

@@ -100,6 +100,24 @@ const getEdges = (isTablet: boolean, isInlineModal: boolean) => {
   return ["top"];
 };
 
+const isPercentage = (value: string | number): boolean => {
+  if (typeof value === "string") {
+    return value.includes("%");
+  }
+
+  return false;
+};
+
+const getPercentageOf = (percent: string, value: number) => {
+  const percentageValue = parseFloat(percent.replace("%", ""));
+
+  if (isNaN(percentageValue)) {
+    return value;
+  }
+
+  return (value * percentageValue) / 100;
+};
+
 const getTabletWidth = (
   configuration: Configuration,
   dimensions: DimensionsT
@@ -108,18 +126,23 @@ const getTabletWidth = (
     configuration?.tablet_landscape_sidebar_width;
 
   const { width } = dimensions;
+  let widthValue = Number(width);
+
+  if (isPercentage(width)) {
+    widthValue = getPercentageOf(width.toString(), SCREEN_WIDTH);
+  }
 
   const sidebarWidth = Number(tablet_landscape_sidebar_width?.replace("%", ""));
 
   if (tablet_landscape_sidebar_width?.includes("%")) {
-    return Number(width) * (1 - sidebarWidth / 100);
+    return widthValue * (1 - sidebarWidth / 100);
   }
 
   if (Number.isNaN(sidebarWidth)) {
-    return Number(width) * 0.65;
+    return widthValue * 0.65;
   }
 
-  return Number(width) - sidebarWidth;
+  return widthValue - sidebarWidth;
 };
 
 const PlayerWrapperComponent = (props: Props) => {

package/Components/VideoModal/VideoModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { equals } from "ramda";
-import { StyleSheet, StatusBar } from "react-native";
+import { StyleSheet, StatusBar, View } from "react-native";
 
 import { HandlePlayable } from "@applicaster/zapp-react-native-ui-components/Components/HandlePlayable";
 import {
@@ -30,10 +30,13 @@ import { useSubscriberFor } from "@applicaster/zapp-react-native-utils/reactHook
 import { requiresAuthentication } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { Spinner } from "../Spinner";
 import { OpaqueLayer } from "./OpaqueLayer";
 
 import { AnimatedPlayerModalWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
+const LOADER_BACKGROUND_COLOR = "rgba(64,64,64,0.5)";
+
 const styles = StyleSheet.create({
   container: {
     top: 0,
@@ -42,6 +45,16 @@ const styles = StyleSheet.create({
     bottom: 0,
     position: "absolute",
   },
+  loaderContainer: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    position: "absolute",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: LOADER_BACKGROUND_COLOR,
+  },
 });
 
 const VideoModalComponent = () => {
@@ -131,14 +144,12 @@ const VideoModalComponent = () => {
           {/* Hide content underneath when we switch to next video in fullscreen mode */}
           {mode === "FULLSCREEN" && <OpaqueLayer />}
 
-          {itemIdHooksFinished === item?.id && (
+          {itemIdHooksFinished === item?.id ? (
             <AnimatedPlayerModalWrapper
               style={[
                 styles.container,
                 {
                   backgroundColor,
-                  width: modalSize.width,
-                  height: modalSize.height,
                 },
               ]}
             >
@@ -148,6 +159,10 @@ const VideoModalComponent = () => {
                 mode={mode}
               />
             </AnimatedPlayerModalWrapper>
+          ) : (
+            <View style={styles.loaderContainer}>
+              <Spinner />
+            </View>
           )}
         </ScreenContextProvider>
       </PathnameContext.Provider>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "13.0.0-rc.87",
+  "version": "13.0.0-rc.89",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -31,10 +31,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.0-rc.87",
-    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.87",
-    "@applicaster/zapp-react-native-redux": "13.0.0-rc.87",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.87",
+    "@applicaster/applicaster-types": "13.0.0-rc.89",
+    "@applicaster/zapp-react-native-bridge": "13.0.0-rc.89",
+    "@applicaster/zapp-react-native-redux": "13.0.0-rc.89",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.89",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",