@applicaster/quick-brick-player 13.0.0-rc.120 → 13.0.0-rc.122

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-rc.120",
+  "version": "13.0.0-rc.122",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.120",
     "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.120",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.120",
-    "@applicaster/zapp-react-native-utils": "13.0.0-rc.120",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-rc.122",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-rc.122",
+    "@applicaster/zapp-react-native-utils": "13.0.0-rc.122",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/AudioLayer/Layout/DockedControls/index.tsx

@@ -24,6 +24,10 @@ import {
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
+
+const bottomTabBarHeight = getTabBarHeight();
 
 type Props = {
   entry: ZappEntry;
@@ -88,10 +92,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const backgroundColorStyle = (value: GetValue): ViewStyle => ({
-  backgroundColor: value("docked_player_background_color"),
-});
-
 const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
@@ -208,6 +208,10 @@ export const DockedControls = (props: Props) => {
     []
   );
 
+  const dockedBackgroundColor = value("docked_player_background_color");
+
+  const insets = useSafeAreaInsets();
+
   if (!layoutState.docked && !startComponentsAnimation) return null;
 
   return (
@@ -219,7 +223,9 @@ export const DockedControls = (props: Props) => {
           isActiveGesture || layoutState.docked,
           progressBarHeight
         ),
-        { height: minimisedHeight },
+        {
+          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
+        },
       ]}
     >
       {!playerState.isLive &&
@@ -261,7 +267,12 @@ export const DockedControls = (props: Props) => {
                 )}
               />
             )}
-            <View style={[styles.contentInfo, backgroundColorStyle(value)]}>
+            <View
+              style={[
+                styles.contentInfo,
+                { backgroundColor: dockedBackgroundColor },
+              ]}
+            >
               <ContentInfo
                 content={{ ...entry, title, summary }}
                 value={value}
@@ -275,7 +286,7 @@ export const DockedControls = (props: Props) => {
             isTablet
               ? styles.controlsContainerForTablet
               : styles.controlsContainerForMobile,
-            backgroundColorStyle(value),
+            { backgroundColor: dockedBackgroundColor },
           ]}
         >
           <Controls
@@ -297,6 +308,12 @@ export const DockedControls = (props: Props) => {
           />
         </View>
       </View>
+      <View
+        style={{
+          height: insets.bottom + bottomTabBarHeight,
+          backgroundColor: dockedBackgroundColor,
+        }}
+      />
     </AnimationComponent>
   );
 };

package/src/Player/AudioLayer/Layout/PlayerImage/AnimatedImage.tsx

@@ -8,6 +8,9 @@ import {
   DURATION_TO_MINIMIZE,
   DURATION_TO_MAXIMIZE,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
+
+import { useChangePlayerState } from "./hooks";
 
 const styles = StyleSheet.create({
   container: {
@@ -21,9 +24,10 @@ type Props = PropsWithChildren<{
   entry: ZappEntry;
   style?: ImageStyle | ImageStyle[];
   imageWidth: number;
+  docked: boolean;
 }>;
 
-export const AnimatedImage = ({ entry, style, imageWidth }: Props) => {
+export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
   const source = React.useMemo(
@@ -31,27 +35,40 @@ export const AnimatedImage = ({ entry, style, imageWidth }: Props) => {
     [entry]
   );
 
-  const { playerAnimationState, minimisedHeight } = useModalAnimationContext();
+  const { minimisedHeight } = useModalAnimationContext();
+
+  const changePlayerState$ = useChangePlayerState({ docked });
 
   React.useEffect(() => {
-    if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
-      Animated.timing(heightAnim, {
-        toValue: minimisedHeight,
-        duration: DURATION_TO_MINIMIZE,
-        useNativeDriver: false, // width/height can't use native driver
-      }).start();
+    const subscription = changePlayerState$.subscribe({
+      next: (nextPlayerState: PlayerAnimationStateT) => {
+        if (nextPlayerState === PlayerAnimationStateEnum.minimize) {
+          Animated.timing(heightAnim, {
+            toValue: minimisedHeight,
+            duration: DURATION_TO_MINIMIZE,
+            useNativeDriver: false, // width/height can't use native driver
+          }).start();
+        }
+
+        if (nextPlayerState === PlayerAnimationStateEnum.maximize) {
+          Animated.timing(heightAnim, {
+            toValue: imageWidth,
+            duration: DURATION_TO_MAXIMIZE,
+            useNativeDriver: false, // width/height can't use native driver
+          }).start();
+        }
 
-      return;
-    }
+        if (nextPlayerState === PlayerAnimationStateEnum.appear_as_docked) {
+          // minimize image immediatly
+          heightAnim.setValue(minimisedHeight);
+        }
+      },
+    });
 
-    if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
-      Animated.timing(heightAnim, {
-        toValue: imageWidth,
-        duration: DURATION_TO_MAXIMIZE,
-        useNativeDriver: false, // width/height can't use native driver
-      }).start();
-    }
-  }, [playerAnimationState, imageWidth]);
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [changePlayerState$, minimisedHeight, imageWidth]);
 
   if (!source) return null;
 

package/src/Player/AudioLayer/Layout/PlayerImage/hooks/index.ts

@@ -0,0 +1 @@
+export { useChangePlayerState } from "./useChangePlayerState";

package/src/Player/AudioLayer/Layout/PlayerImage/hooks/useChangePlayerState.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Subject, Observable } from "rxjs";
+
+import { distinctUntilChanged } from "rxjs/operators";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { PlayerAnimationStateT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/ModalAnimationContext";
+
+const builder = () => {
+  const changePlayerState$ = new Subject<PlayerAnimationStateT>();
+
+  const emitMaximazed = (): void => {
+    changePlayerState$.next(PlayerAnimationStateEnum.maximize);
+  };
+
+  const emitMinimized = (): void => {
+    changePlayerState$.next(PlayerAnimationStateEnum.minimize);
+  };
+
+  const emitAppearInDocked = (): void => {
+    // if audio_player was presented in docked mode
+    changePlayerState$.next(PlayerAnimationStateEnum.appear_as_docked);
+  };
+
+  return {
+    emitMaximazed,
+    emitMinimized,
+    emitAppearInDocked,
+    changePlayerState$: changePlayerState$.pipe(distinctUntilChanged()),
+  };
+};
+
+export const useChangePlayerState = ({
+  docked,
+}): Observable<PlayerAnimationStateT> => {
+  const changePlayerStateRef =
+    useRefWithInitialValue<ReturnType<typeof builder>>(builder);
+
+  const { playerAnimationState } = useModalAnimationContext();
+
+  const previousPlayerAnimationState = usePrevious(playerAnimationState);
+
+  React.useEffect(() => {
+    if (
+      !docked &&
+      isNil(previousPlayerAnimationState) &&
+      playerAnimationState === PlayerAnimationStateEnum.minimize
+    ) {
+      changePlayerStateRef.current.emitMinimized();
+
+      return;
+    }
+
+    if (
+      !docked &&
+      isNil(previousPlayerAnimationState) &&
+      playerAnimationState === PlayerAnimationStateEnum.maximize
+    ) {
+      changePlayerStateRef.current.emitMaximazed();
+
+      return;
+    }
+
+    if (
+      docked &&
+      isNil(previousPlayerAnimationState) &&
+      isNil(playerAnimationState)
+    ) {
+      changePlayerStateRef.current.emitAppearInDocked();
+    }
+  }, [previousPlayerAnimationState, playerAnimationState, docked]);
+
+  return changePlayerStateRef.current.changePlayerState$;
+};

package/src/Player/AudioLayer/Layout/PlayerImage/index.tsx

@@ -5,6 +5,7 @@ import {
   ComponentAnimationType,
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { AnimatedImage } from "./AnimatedImage";
 import { FlexImage } from "./FlexImage";
@@ -29,7 +30,7 @@ type Props = {
   docked: boolean;
   imageWidth?: Option<number>;
   verticalOffset: number;
-  onLayoutImage: (event: LayoutChangeEvent) => void;
+  onLayoutImage?: (event: LayoutChangeEvent) => void;
 };
 
 export const PlayerImage = (props: Props) => {
@@ -40,7 +41,7 @@ export const PlayerImage = (props: Props) => {
     verticalOffset,
     imageWidth,
     configuration,
-    onLayoutImage,
+    onLayoutImage = noop,
   } = props;
 
   const {
@@ -99,6 +100,7 @@ export const PlayerImage = (props: Props) => {
               entry={entry}
               style={[styles.backgroundImageContainer, { borderRadius }]}
               imageWidth={imageWidth}
+              docked={docked}
             />
           )}
         </View>