@applicaster/zapp-react-native-ui-components 13.0.0-rc.40 → 13.0.0-rc.42

package/Components/ErrorScreen/index.tsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from "react";
 import * as R from "ramda";
 import {
-  View,
+  ImageStyle,
   StyleSheet,
   Text,
-  ViewStyle,
-  TextStyle,
-  ImageStyle,
   TextProps,
+  TextStyle,
+  View,
+  ViewStyle,
 } from "react-native";
 import { defaultAsset } from "./defaultAsset";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -150,13 +150,13 @@ export function ErrorScreen(props: Props) {
   return (
     <View style={[baseStyles.container, styles.screen]}>
       <View style={[baseStyles.container, styles.component]}>
-        {assetEnabled && (
+        {assetEnabled ? (
           <Image
             fadeDuration={0}
             source={{ uri: asset }}
             style={styles.asset}
           />
-        )}
+        ) : null}
         <Text style={styles.title} {...titleProps}>
           {title}
         </Text>

package/Components/Focusable/Focusable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unknown-property */
 import * as React from "react";
 
 import { BaseFocusable } from "../BaseFocusable";

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -244,7 +244,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
   return (
     <>
       <Image {...props} applyMaxSize />
-      {isShouldRender && (
+      {isShouldRender ? (
         <View style={[style, positionAbsolute]}>
           <PlayerLiveImage
             uri={props.uri}
@@ -257,7 +257,7 @@ const LiveImageComponent = (props: LiveImageProps) => {
             audioMutedByDefault={audio_muted_by_default}
           />
         </View>
-      )}
+      ) : null}
     </>
   );
 };

package/Components/ModalComponent/Button/index.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { Item, ItemProps } from "./Item";
 import { ItemIcon, ItemIconProps } from "./ItemIcon";
 import { ItemLabel, ItemLabelProps } from "./ItemLabel";
-import { defaultSelectedAsset } from "./assets";
 import * as assets from "./assets";
+import { defaultSelectedAsset } from "./assets";
 
 type ButtonProps = {
   configuration: any;
@@ -92,18 +92,18 @@ export function Button({
       >
         <Item {...itemProps} focused={focused} selected={selected}>
           <View style={styles.label_icon_container}>
-            {itemIconProps.asset && itemIconProps.asset.length > 0 && (
+            {itemIconProps.asset && itemIconProps.asset.length > 0 ? (
               <ItemIcon {...itemIconProps} />
-            )}
-            {itemLabelProps.label && (
+            ) : null}
+            {itemLabelProps.label ? (
               <ItemLabel
                 {...itemLabelProps}
                 focused={focused}
                 selected={selected}
               />
-            )}
+            ) : null}
           </View>
-          {selected && <ItemIcon {...selectedItemIconProps} />}
+          {selected ? <ItemIcon {...selectedItemIconProps} /> : null}
         </Item>
       </TouchableOpacity>
     </View>

package/Components/OfflineHandler/NotificationView/NotificationView.lg.tsx

@@ -90,7 +90,7 @@ export const NotificationView = (props: Props) => {
   return (
     <div onClick={onClose}>
       {children}
-      {open && (
+      {open ? (
         <div style={styles.body}>
           <div style={styles.title}>
             <h2>{MSG}</h2>
@@ -98,7 +98,7 @@ export const NotificationView = (props: Props) => {
 
           <h4 style={styles.subtitle}>{EXTRA_MSG}</h4>
         </div>
-      )}
+      ) : null}
     </div>
   );
 };

package/Components/OfflineHandler/NotificationView/NotificationView.samsung.tsx

@@ -85,7 +85,7 @@ export const NotificationView = (props: Props) => {
   return (
     <div onClick={onClose}>
       {children}
-      {shown && (
+      {shown ? (
         <div style={styles.body}>
           <div style={styles.title}>
             <h2>{title}</h2>
@@ -93,7 +93,7 @@ export const NotificationView = (props: Props) => {
 
           <h4 style={styles.subtitle}>{subtitle}</h4>
         </div>
-      )}
+      ) : null}
     </div>
   );
 };

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -1,17 +1,17 @@
 import * as React from "react";
+import { useEffect, useReducer } from "react";
 // @ts-ignore
-import { View, ViewStyle, TVMenuControl } from "react-native";
+import { TVMenuControl, View, ViewStyle } from "react-native";
 import * as R from "ramda";
 import uuid from "uuid/v4";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager";
 import {
   isApplePlatform,
-  platformSelect,
   isTV,
+  platformSelect,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
-import { useEffect, useReducer } from "react";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
@@ -29,10 +29,10 @@ import {
 import { ProgramInfo } from "./ProgramInfo";
 import { AudioPlayer } from "../AudioPlayer";
 import {
-  playerContainerLogger,
   log_debug,
   log_info,
   log_warning,
+  playerContainerLogger,
 } from "./logger";
 import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayer";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
@@ -53,8 +53,8 @@ import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtil
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = {
@@ -683,10 +683,10 @@ const PlayerContainerComponent = (props: Props) => {
 
                     {renderRestPlayers(restPlayerProps)}
 
-                    {state.error && <ErrorDisplay error={state.error} />}
+                    {state.error ? <ErrorDisplay error={state.error} /> : null}
                   </View>
                   {/* Components container */}
-                  {isInlineTV && context.showComponentsContainer && (
+                  {isInlineTV && context.showComponentsContainer ? (
                     <View
                       style={styles.inlineRiver}
                       testID={"inline-river-component-wrapper"}
@@ -717,7 +717,7 @@ const PlayerContainerComponent = (props: Props) => {
                         )}
                       </ComponentFocusableWrapperView>
                     </View>
-                  )}
+                  ) : null}
                 </View>
               </FocusableGroup>
             </TVEventHandlerComponent>

package/Components/PlayerContainer/ProgramInfo/index.tsx

@@ -114,12 +114,12 @@ function ProgramInfoComponent({
   return (
     <View style={container}>
       <View style={programStyles.programInfo.container}>
-        {logo && (
+        {logo ? (
           <Image
             source={{ uri: logo }}
             style={programStyles.programInfo.logo}
           />
-        )}
+        ) : null}
         {!isAudioContent && transportInfo}
       </View>
     </View>

package/Components/Screen/index.tsx

@@ -6,16 +6,16 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
-  shouldNavBarDisplayMenu,
   getNavBarProps,
   getScreenId,
+  shouldNavBarDisplayMenu,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
-  useRoute,
   useCurrentScreenData,
   useNavbarState,
-  useScreenData,
   useNavigation,
+  useRoute,
+  useScreenData,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { getNavigationPluginModule } from "@applicaster/zapp-react-native-app/App/Layout/layoutHelpers";
 
@@ -98,7 +98,7 @@ export function Screen(_props: Props) {
     <View style={style}>
       {isReady ? (
         <>
-          {navBarProps && <NavBar {...navBarProps} hasMenu={hasMenu} />}
+          {navBarProps ? <NavBar {...navBarProps} hasMenu={hasMenu} /> : null}
 
           <OfflineFallbackScreen>
             {/* @TODO RouteManager doesn't use props, can they be removed ?  */}

package/Components/Tabs/Tab.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react-native/no-unused-styles */
 import React from "react";
 import * as R from "ramda";
-import { View, Text, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { StyleSheet, Text, TouchableWithoutFeedback, View } from "react-native";
 import { useConfiguration } from "@applicaster/zapp-react-native-utils/reactHooks/configuration";
 import {
-  getStyleForPlatform,
   applyStringTransformation,
+  getStyleForPlatform,
 } from "@applicaster/zapp-react-native-utils/configurationUtils";
 
 type Props = {
@@ -148,7 +148,9 @@ const Tab = ({ title, selected, handleOnPress }: Props, ref: any) => {
           <Text numberOfLines={1} style={styles.label}>
             {tabTitle}
           </Text>
-          {selected && <View testID="underline" style={styles.underline} />}
+          {selected ? (
+            <View testID="underline" style={styles.underline} />
+          ) : null}
         </View>
       </View>
     </TouchableWithoutFeedback>

package/Components/TextInputTv/index.tsx

@@ -174,7 +174,8 @@ function TextInputTV(props: Props, ref) {
 
   return isWebPlatform ? (
     <>
-      {additional && additional()}
+      {additional ? additional() : null}
+      {/* eslint-disable-next-line react/no-unknown-property */}
       <input testID="TextInput-tv" ref={ref} {...inputProps} />
     </>
   ) : (

package/Components/Transitioner/Scene.tsx

@@ -105,7 +105,7 @@ function SceneComponent({
       style={[style, contentStyle, dimensions]}
     >
       {children}
-      {isAnimating && <Animated.View style={overlayStyle} />}
+      {isAnimating ? <Animated.View style={overlayStyle} /> : null}
     </Animated.View>
   );
 }

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { update, compose, tail, append, take, identity, isNil } from "ramda";
+import { append, compose, identity, isNil, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -289,7 +289,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
     return (
       <View style={styles.container}>
-        {scenes[to.index] && (
+        {scenes[to.index] ? (
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
@@ -301,7 +301,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           >
             {scenes[to.index].children}
           </Scene>
-        )}
+        ) : null}
       </View>
     );
   }

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -1,6 +1,7 @@
 // /// <reference types="@applicaster/applicaster-types" />
 //
 import * as React from "react";
+import { useEffect } from "react";
 
 import { AppState, AppStateStatus, View } from "react-native";
 import { TrackedView } from "../TrackedView";
@@ -25,7 +26,6 @@ import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/player
 import { getAutoplaySettings } from "./utils";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
-import { useEffect } from "react";
 
 const { log_error, log_debug } = loggerLiveImageComponent;
 
@@ -330,7 +330,7 @@ const PlayerLiveImageComponent = (props: Props) => {
       onPositionUpdated={onPositionUpdated}
     >
       <View ref={trackViewRef}>
-        {isVideoMode && (
+        {isVideoMode ? (
           <Player
             autoplay={false}
             ref={_assignRoot}
@@ -342,7 +342,7 @@ const PlayerLiveImageComponent = (props: Props) => {
             resizeMode={"cover"}
             {...platformSpecificProps}
           />
-        )}
+        ) : null}
         {
           <AnimatedInOut
             visible={isBackgroundImageVisible}

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -1,26 +1,26 @@
 import React from "react";
-import { Animated, StyleSheet, View, Platform } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
+  GestureHandlerRootView,
   NativeViewGestureHandler,
   PanGestureHandler,
   State,
   TapGestureHandler,
-  GestureHandlerRootView,
 } from "react-native-gesture-handler";
 
 import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 
 import {
-  setScrollModalAnimatedValue,
   resetScrollAnimatedValues,
+  setScrollModalAnimatedValue,
 } from "./utils";
 
 const getAnimatedConfig = (toValue) => {
@@ -71,8 +71,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     useNavigation();
 
   const { mode: videoModalMode, item: videoModalItem } = videoModalState;
-  const isMaximazedModal = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal = videoModalMode === "MINIMIZED";
+  const isMaximizedModal: boolean = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal: boolean = videoModalMode === "MINIMIZED";
   const previousItemId = usePrevious(videoModalItem?.id);
 
   const isNotMinimizeMaximazeAnimation =
@@ -84,7 +84,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
     !isSeekBarTouch &&
-    (isMaximazedModal || isMinimizedModal);
+    (isMaximizedModal || isMinimizedModal);
 
   const isAudioItem = React.useMemo(
     () =>
@@ -346,6 +346,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     []
   );
 
+  const scrollEnabled = isMaximizedModal && isNotMinimizeMaximazeAnimation;
+
   return (
     <Wrapper style={generalStyles.container}>
       <TapGestureHandler
@@ -359,7 +361,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
-            shouldCancelWhenOutside={isMaximazedModal}
+            shouldCancelWhenOutside={isMaximizedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
             activeOffsetY={[-5, 5]}
@@ -371,9 +373,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                 simultaneousHandlers={panHandlerRef}
               >
                 <Animated.ScrollView
-                  scrollEnabled={
-                    isMaximazedModal && isNotMinimizeMaximazeAnimation
-                  }
+                  scrollEnabled={scrollEnabled}
                   bounces={false}
                   onScrollBeginDrag={onRegisterLastScroll}
                   onScroll={onScroll}

package/Components/VideoModal/ModalAnimation/AnimationComponent.tsx

@@ -4,26 +4,26 @@ import { Animated, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 import {
+  useDimensions,
   useGetBottomTabBarHeight,
   useNavigation,
-  useDimensions,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
 
 import {
-  gestureListenerHelper,
-  getAnimationStyle,
+  AUDIO_PLAYER_HORIZONTAL_PADDING,
+  ComponentAnimationType,
   defaultAspectRatioWidth,
+  gestureListenerHelper,
   getAnimationDefaultValue,
-  ComponentAnimationType,
-  AUDIO_PLAYER_HORIZONTAL_PADDING,
+  getAnimationStyle,
 } from "./utils";
 
 type Props = {
@@ -405,7 +405,7 @@ export const AnimationView = ({
 
   return (
     <Animated.View
-      onLayout={additionalData.useLayoutMeasure && measureView}
+      onLayout={additionalData.useLayoutMeasure ? measureView : undefined}
       ref={animationComponentRef}
       style={[
         ...preparedStyles,

package/Components/VideoModal/PlayerDetails.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useRef } from "react";
 import {
-  StyleProp,
-  ViewStyle,
   Animated,
-  Easing,
   Dimensions,
+  Easing,
+  StyleProp,
+  ViewStyle,
 } from "react-native";
 import { useTargetScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
 import { ComponentsMap } from "@applicaster/zapp-react-native-ui-components/Components/River/ComponentsMap";
@@ -94,13 +94,13 @@ export const PlayerDetails = ({
         },
       ]}
     >
-      {screenData && (
+      {screenData ? (
         <ComponentsMap
           riverId={screenData.id}
           feed={screenData?.data?.source}
           riverComponents={screenData.ui_components}
         />
-      )}
+      ) : null}
     </Animated.View>
   );
 };

package/Components/VideoModal/PlayerWrapper.tsx

@@ -227,7 +227,7 @@ const PlayerWrapperComponent = (props: Props) => {
         </View>
 
         <AnimatedScrollModal>
-          {isShowPlayerDetails && (
+          {isShowPlayerDetails ? (
             <AnimationComponent
               animationType={ComponentAnimationType.componentFade}
               style={defaultStyles.flex}
@@ -240,7 +240,7 @@ const PlayerWrapperComponent = (props: Props) => {
                 isTablet={isTablet}
               />
             </AnimationComponent>
-          )}
+          ) : null}
         </AnimatedScrollModal>
       </AnimationComponent>
     </WrapperView>

package/package.json

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