@applicaster/quick-brick-player 15.0.0-rc.4 → 15.0.0-rc.40

package/src/utils/dimensions.ts

@@ -0,0 +1,29 @@
+import { Dimensions } from "react-native";
+
+export const getWindowDimensions = () => {
+  const { width, height } = Dimensions.get("window");
+
+  return { width, height };
+};
+
+export const getMaxWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.max(width, height);
+};
+
+export const getMinWindowDimension = () => {
+  const { width, height } = getWindowDimensions();
+
+  return Math.min(width, height);
+};
+
+/**
+ * Calculates the screen aspect ratio (long edge / short edge)
+ */
+export const getScreenAspectRatio = () => {
+  const longEdge = getMaxWindowDimension();
+  const shortEdge = getMinWindowDimension();
+
+  return longEdge / shortEdge;
+};

package/src/utils/index.ts

@@ -0,0 +1,12 @@
+export * as const from "./const";
+
+export * from "./dimensions";
+
+export * from "./playerHelpers";
+
+export * from "./playerStyles";
+
+/**
+ * Logger instance for the player
+ */
+export { logger } from "./logger";

package/src/utils/logger.ts

@@ -0,0 +1,6 @@
+import { Categories, createLogger, Subsystem } from "../logger";
+
+export const logger = createLogger({
+  category: Categories.PLAYER,
+  subsystem: Subsystem,
+});

package/src/utils/playerHelpers.ts

@@ -0,0 +1,11 @@
+import { logger } from "./logger";
+
+export const createUnhandledEventHandler = (eventName: string) => {
+  return function dispatchUnhandledEvent({ nativeEvent = null }) {
+    logger.warning({
+      message:
+        "You have invoked an event that is being deprecated or unhandled",
+      data: { eventName, nativeEvent },
+    });
+  };
+};

package/src/utils/playerStyles.ts

@@ -0,0 +1,50 @@
+import { ViewStyle } from "react-native";
+import {
+  isApplePlatform,
+  isTV,
+  isAndroidPlatform,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
+
+export const PLAYER_CONTAINER_STYLES = {
+  playerContainerBlack: { backgroundColor: "#000000" },
+  playerContainerTransparent: { backgroundColor: "transparent" },
+  audio: {
+    overflow: "hidden" as const,
+    position: "absolute" as const,
+    zIndex: 1,
+  },
+} as const;
+
+export const getPlayerContainerStyles = (
+  isAudioItem: boolean,
+  styles: typeof PLAYER_CONTAINER_STYLES
+) => {
+  return isApplePlatform()
+    ? styles.playerContainerBlack
+    : isTV() && isAudioItem
+      ? styles.playerContainerTransparent
+      : styles.playerContainerBlack;
+};
+
+export const getBackgroundImageStyle = (
+  dimensions: any,
+  isAudioItem: boolean,
+  styles: typeof PLAYER_CONTAINER_STYLES
+): ViewStyle => ({
+  ...(isAudioItem ? styles.audio : { position: "absolute" }),
+  ...dimensions,
+});
+
+export const getPlayerViewStyle = (
+  dimensions: ViewStyle,
+  isAudioItem: boolean,
+  styles: typeof PLAYER_CONTAINER_STYLES
+): ViewStyle => {
+  const generalStyles = isAudioItem ? styles.audio : {};
+
+  if (isAndroidPlatform() && isAudioItem) {
+    return generalStyles;
+  }
+
+  return { ...generalStyles, ...dimensions };
+};

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

@@ -1,82 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
-
-import {
-  useModalAnimationContext,
-  PlayerAnimationStateEnum,
-  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 { useBackgroundImage } from "@applicaster/zapp-react-native-utils/audioPlayerUtils";
-
-import { useChangePlayerState } from "./hooks";
-
-const styles = StyleSheet.create({
-  container: {
-    // we have to specify flex:0 and dimensions to make animation work
-    flex: 0,
-    aspectRatio: 1,
-  },
-});
-
-type Props = PropsWithChildren<{
-  entry: ZappEntry;
-  style?: ImageStyle | ImageStyle[];
-  imageWidth: number;
-  docked: boolean;
-}>;
-
-export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
-  const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
-
-  const backgroundImageSource = useBackgroundImage(entry);
-
-  const { minimisedHeight } = useModalAnimationContext();
-
-  const changePlayerState$ = useChangePlayerState({ docked });
-
-  React.useEffect(() => {
-    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();
-        }
-
-        if (nextPlayerState === PlayerAnimationStateEnum.appear_as_docked) {
-          // minimize image immediatly
-          heightAnim.setValue(minimisedHeight);
-        }
-      },
-    });
-
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [changePlayerState$, minimisedHeight, imageWidth]);
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        {
-          width: heightAnim,
-        },
-      ]}
-    >
-      <Image resizeMode="cover" style={style} source={backgroundImageSource} />
-    </Animated.View>
-  );
-};

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

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

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

@@ -1,99 +0,0 @@
-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 emitMaximized = (): 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 {
-    emitMaximized,
-    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.emitMaximized();
-
-      return;
-    }
-
-    if (
-      !docked &&
-      previousPlayerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
-      playerAnimationState === PlayerAnimationStateEnum.maximize
-    ) {
-      changePlayerStateRef.current.emitMaximized();
-
-      return;
-    }
-
-    if (
-      !docked &&
-      previousPlayerAnimationState === PlayerAnimationStateEnum.drag_scroll &&
-      playerAnimationState === PlayerAnimationStateEnum.minimize
-    ) {
-      changePlayerStateRef.current.emitMinimized();
-
-      return;
-    }
-
-    if (
-      docked &&
-      isNil(previousPlayerAnimationState) &&
-      isNil(playerAnimationState)
-    ) {
-      changePlayerStateRef.current.emitAppearInDocked();
-    }
-  }, [previousPlayerAnimationState, playerAnimationState, docked]);
-
-  return changePlayerStateRef.current.changePlayerState$;
-};