@applicaster/zapp-react-native-ui-components 13.0.0-rc.65 → 13.0.0-rc.67

package/Components/AudioPlayer/AudioPlayer.tsx

@@ -24,6 +24,7 @@ type Props = {
       audio_player_rtl?: boolean;
       magic_background?: boolean;
       audio_player_background_image_query?: string;
+      audio_player_background_image_default_color?: string;
       start_time?: string;
       end_time?: string;
     };
@@ -35,6 +36,7 @@ type Props = {
     audio_player_rtl?: string;
     magic_background?: string;
     audio_player_background_image_query?: string;
+    audio_player_background_image_default_color?: string;
     audio_player_background_image?: string;
     audio_player_artwork_aspect_ratio?: string;
     lg_tv_audio_player_title_font_family?: string;
@@ -80,6 +82,10 @@ export function AudioPlayer(props: Props) {
       "audio_player_background_image_query"
     );
 
+    const audioPlayerBackgroundImageDefaultColor = getProp(
+      "audio_player_background_image_default_color"
+    );
+
     const isRTL = rtlFlag === "1" || rtlFlag === "true" || rtlFlag === true;
 
     const titleFontFamily = getProp(
@@ -158,6 +164,7 @@ export function AudioPlayer(props: Props) {
       channelIcon,
       magicBackground,
       audioPlayerBackgroundImageQuery,
+      audioPlayerBackgroundImageDefaultColor,
     };
   }, [getProp]);
 

package/Components/AudioPlayer/helpers.tsx

@@ -6,6 +6,7 @@ const defaults = {
   audio_player_rtl: false,
   magic_background: false,
   audio_player_background_image_query: "",
+  audio_player_background_image_default_color: "",
 };
 
 export function getPropertyFromEntryOrConfig({ entry, plugin_configuration }) {

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -24,8 +24,7 @@ type Props = {
   id: string;
   children: (arg1: boolean) => React.ComponentType<any>;
   isFocusDisabled: boolean;
-  initialItemId: string;
-  isPreferredFocusDisabled: boolean;
+  isWithMemory: boolean;
   focusGroupRef: React.Component;
   shouldUsePreferredFocus: boolean;
   groupId: string;
@@ -40,8 +39,7 @@ export class FocusableGroup extends BaseFocusable<Props> {
       children,
       id,
       isFocusDisabled,
-      initialItemId,
-      isPreferredFocusDisabled,
+      isWithMemory,
       style = {},
       groupId,
       ...otherProps
@@ -63,8 +61,7 @@ export class FocusableGroup extends BaseFocusable<Props> {
         itemId={id}
         ref={this.ref}
         isFocusDisabled={isFocusDisabled}
-        initialItemId={initialItemId}
-        isPreferredFocusDisabled={isPreferredFocusDisabled}
+        isWithMemory={isWithMemory}
         onGroupFocus={onGroupFocus}
         onGroupBlur={onGroupBlur}
         style={style}

package/Components/FocusableGroup/index.tsx

@@ -16,7 +16,6 @@ type Props = {
   prioritiseFocusOn?: number;
   groupId?: string;
   hasTVPreferredFocus?: boolean;
-  isPreferredFocusDisabled?: boolean;
   onFocus?: () => void;
   onBlur?: () => void;
   willReceiveFocus?: (event?: any) => void;

package/Components/PlayerImageBackground/index.tsx

@@ -39,7 +39,7 @@ const PlayerImageBackgroundComponent = ({
   return (
     <View
       style={
-        playerAnimationState === PlayerAnimationStateEnum.maximaze
+        playerAnimationState === PlayerAnimationStateEnum.maximize
           ? defaultImageDimensions
           : style
       }

package/Components/Screen/hooks.ts

@@ -7,15 +7,12 @@ import {
   useCurrentScreenData,
   useDimensions,
   useRoute,
+  useIsTablet,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useMemo, useEffect, useState } from "react";
 
 export const useWaitForValidOrientation = () => {
-  const {
-    width: screenWidth,
-    height,
-    deviceInfo,
-  } = useDimensions("screen", {
+  const { width: screenWidth, height } = useDimensions("screen", {
     fullDimensions: true,
     updateForInactiveScreens: false,
   });
@@ -26,7 +23,7 @@ export const useWaitForValidOrientation = () => {
 
   const [readyState, setReadyState] = useState(false);
 
-  const isTablet = deviceInfo?.isTablet;
+  const isTablet = useIsTablet();
 
   const { appData } = usePickFromState(["appData"]);
   const isTabletPortrait = appData?.isTabletPortrait;

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -46,7 +46,7 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
 
   React.useEffect(() => {
     (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-      playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
+      playerAnimationState === PlayerAnimationStateEnum.maximize) &&
       setStartComponentsAnimation(true);
   }, [playerAnimationState]);
 

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -77,7 +77,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+    playerAnimationState !== PlayerAnimationStateEnum.maximize;
 
   const isEnablePanGesture =
     enableGesture &&
@@ -143,7 +143,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             translateYOffset.flattenOffset();
             dragScrollY.setValue(0);
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
           } else {
             setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
           }
@@ -158,7 +158,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
             dragScrollY.setValue(0);
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
           } else {
             resetPlayerAnimationState();
           }
@@ -252,7 +252,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         (previousMode === "MINIMIZED" || previousMode === "MAXIMIZED")) ||
         (previousItemId !== item?.id && mode !== "FULLSCREEN"))
     ) {
-      setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+      setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
     }
   }, [videoModalState]);
 
@@ -296,7 +296,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
         resetPlayerAnimationState();
       });
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
       Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
         maximiseVideoModal();
         setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -50,7 +50,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+    playerAnimationState !== PlayerAnimationStateEnum.maximize;
 
   const isEnablePanGesture =
     !isLanguageOverlayVisible &&
@@ -89,7 +89,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
             setLastSnap(destSnapPoint);
 
             if (destSnapPoint === modalSnapPoints[0]) {
-              setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+              setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
             } else {
               lastScrollY.setValue(0);
               lastScrollYValue.current = 0;
@@ -105,7 +105,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
               modalSnapPoints[1] - preparedTranslationY
             );
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
           } else {
             resetPlayerAnimationState();
           }

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -246,7 +246,7 @@ export const AnimationView = ({
       default:
         return getAnimationValue(
           animationType,
-          PlayerAnimationStateEnum.maximaze
+          PlayerAnimationStateEnum.maximize
         ).toValue;
     }
   }, [defaultValue, videoModalState]);
@@ -344,7 +344,7 @@ export const AnimationView = ({
         animatedValue,
         getAnimationValue(animationType, playerAnimationState)
       ).start();
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
       animatedValue.setValue(defaultValue);
     }
   }, [playerAnimationState, startComponentsAnimation, defaultValue]);

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -14,12 +14,12 @@ import { useConfiguration } from "../utils";
 
 export enum PlayerAnimationStateEnum {
   minimize = "minimize",
-  maximaze = "maximaze",
+  maximize = "maximize",
   drag_player = "drag_player",
   drag_scroll = "drag_scroll",
 }
 
-type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
+export type PlayerAnimationStateT = number | PlayerAnimationStateEnum | null;
 
 export type ModalAnimationContextT = {
   isActiveGesture: boolean;

package/package.json

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