@applicaster/quick-brick-player 13.0.0-rc.110 → 13.0.0-rc.112

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

@@ -12,6 +12,7 @@ import { FlexImage } from "./FlexImage";
 import { styles } from "./styles";
 import { calculateBorderRadius } from "../../utils";
 import { PlayNextData } from "../types";
+import { LayoutChangeEvent, View } from "react-native";
 
 type Props = {
   entry: ZappEntry;
@@ -26,8 +27,9 @@ type Props = {
   title: string | number;
   summary: string | number;
   docked: boolean;
-  imageWidth: Option<number>;
+  imageWidth?: Option<number>;
   verticalOffset: number;
+  onLayoutImage: (event: LayoutChangeEvent) => void;
 };
 
 export const PlayerImage = (props: Props) => {
@@ -35,9 +37,10 @@ export const PlayerImage = (props: Props) => {
     entry,
     dimensions,
     docked,
-    imageWidth,
     verticalOffset,
+    imageWidth,
     configuration,
+    onLayoutImage,
   } = props;
 
   const {
@@ -76,25 +79,33 @@ export const PlayerImage = (props: Props) => {
         }}
         style={styles.alignItemsCenter}
       >
-        {!imageWidth ? (
-          // we render image with flex until we get size of this image
-          <FlexImage
-            entry={entry}
-            style={styles.backgroundImageContainer}
-            imageStyle={{ borderRadius }}
-          />
-        ) : null}
-
-        {imageWidth ? (
-          // we have imageSize here and now we could animate resizing of this image
-          <AnimatedImage
-            entry={entry}
-            style={styles.backgroundImageContainer}
-            imageStyle={{ borderRadius }}
-            imageWidth={imageWidth}
-            wrapperViewStyle={shouldShowShadow ? styles.shadow : undefined}
-          />
-        ) : null}
+        <View onLayout={onLayoutImage}>
+          {!imageWidth ? (
+            <View
+              style={[
+                styles.defaultImageWrapperView,
+                shouldShowShadow ? styles.shadow : undefined,
+                {
+                  borderRadius,
+                },
+              ]}
+            >
+              <FlexImage
+                entry={entry}
+                style={styles.backgroundImageContainer}
+              />
+            </View>
+          ) : (
+            // we have imageSize here and now we could animate resizing of this image
+            <AnimatedImage
+              entry={entry}
+              style={styles.backgroundImageContainer}
+              imageStyle={{ borderRadius }}
+              imageWidth={imageWidth}
+              wrapperViewStyle={shouldShowShadow ? styles.shadow : undefined}
+            />
+          )}
+        </View>
       </AnimationComponent>
     </AnimationComponent>
   );

package/src/Player/AudioLayer/Layout/PlayerImage/styles.ts

@@ -16,6 +16,9 @@ export const styles = StyleSheet.create({
   flex: {
     flex: 1,
   },
+  defaultImageWrapperView: {
+    overflow: "hidden",
+  },
   shadow: {
     shadowColor: SHADOW_COLOR,
     shadowOffset: { width: 0, height: 24 },

package/src/Player/AudioLayer/Layout/TabletLandscapeLayout.tsx

@@ -1,28 +1,36 @@
 import * as React from "react";
-import { View, ViewStyle, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import {
-  useSafeAreaInsets,
   useSafeAreaFrame,
+  useSafeAreaInsets,
 } from "react-native-safe-area-context";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import { TABLET_LANDSCAPE } from "./const";
 import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
-import { useTabletLayoutImageSize, useTransportInfoHeight } from "./hooks";
 import { DockedControls } from "./DockedControls";
 import { withDebug } from "./debug";
 
 import { Props } from "./types";
+import { isSmallTabletHeight as getIsSmallTabletHeight } from "./utils";
+import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "./const";
+import { FlexImage } from "./PlayerImage/FlexImage";
 
 const isIOS = isApplePlatform();
 
+const MIN_WIDTH = TABLET_LANDSCAPE.MIN_WIDTH; // Minimum width for the audio player container
+const MAX_SPACING = TABLET_LANDSCAPE.MARGIN_VERTICAL; // Maximum spacing for the audio player container
+const MIN_SPACING = TABLET_LANDSCAPE.MARGIN_VERTICAL_S; // Minimum spacing for the audio player container
+const transportInfoHeight = NAVBAR_HEIGHT;
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    alignItems: "center",
+    height: "100%",
     ...withDebug({
       borderWidth: 2,
       borderColor: "magenta",
@@ -32,30 +40,30 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   audioPlayerContainer: {
-    flex: 1,
-    maxHeight: TABLET_LANDSCAPE.MAX_HEIGHT,
     flexDirection: "column",
     alignItems: "center",
+    minWidth: MIN_WIDTH,
 
     ...withDebug({
       borderWidth: 2,
       borderColor: "blue",
     }),
   },
-});
-
-const tabletStyles = ({
-  screenHeight,
-  topInset,
-  bottomInset,
-  imageSize,
-}): ViewStyle => ({
-  alignItems: "center",
-
-  height: screenHeight - topInset - bottomInset,
-  paddingBottom: TABLET_LANDSCAPE.MARGIN_VERTICAL,
-
-  opacity: imageSize ? 1 : 0, // hide content until imageSize is calculated
+  audioPlayerContainerPaddings: {
+    paddingBottom: MAX_SPACING,
+    paddingTop: MAX_SPACING,
+  },
+  // For small screens, we reduce the padding to fit better
+  audioPlayerContainerPaddingsSmall: {
+    paddingBottom: MIN_SPACING,
+    paddingTop: MIN_SPACING,
+  },
+  controlsContainer: { flexGrow: 0, alignSelf: "stretch" },
+  // eslint-disable-next-line react-native/no-color-literals
+  debugYellow: {
+    borderWidth: 2,
+    borderColor: "yellow",
+  },
 });
 
 const isTabletWithHomeButton = (bottomInset: number): boolean =>
@@ -98,83 +106,73 @@ export function TabletLandscapeLayout({
   title,
   summary,
 }: Props) {
+  const [imageWidth, setImageWidth] = React.useState(0);
   const { docked } = layoutState;
 
-  const { bottom: bottomInset, top: topInset } = useSafeAreaInsets();
+  const { bottom: bottomInset } = useSafeAreaInsets();
   const { height: screenHeight } = useSafeAreaFrame();
+  const isSmallScreen = getIsSmallTabletHeight(screenHeight);
   const { progressBarHeight } = useModalAnimationContext();
 
-  const { imageSize, onLayout } = useTabletLayoutImageSize({
-    isPortraitMode: false,
-  });
-
-  const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
-    useTransportInfoHeight();
+  const onLayoutImage = React.useCallback((e) => {
+    setImageWidth(e.nativeEvent.layout.width);
+  }, []);
 
   return (
-    <View
-      style={[
-        styles.container,
-        tabletStyles({
-          screenHeight,
-          topInset,
-          bottomInset,
-          imageSize,
-        }),
-      ]}
-    >
+    <View style={styles.container}>
       {/* TransportInfo */}
       <TransportInfo
         entry={entry}
         layoutState={layoutState}
         value={value}
         configuration={configuration}
-        onLayout={onTransportInfoLayout}
       />
 
       {/* TransportInfo */}
 
-      <View style={styles.audioPlayerContainer}>
-        {/* PlayerImage */}
-        <View
-          style={[
-            styles.flex,
-            withDebug({
-              borderWidth: 2,
-              borderColor: "yellow",
-            }),
-          ]}
-          onLayout={onLayout}
-        >
-          <PlayerImage
-            entry={entry}
-            layoutState={layoutState}
-            playerState={playerState}
-            value={value}
-            configuration={configuration}
-            onPlayerSeek={onPlayerSeek}
-            onCloseVideoModal={onCloseVideoModal}
-            dimensions={dimensions}
-            playNextData={playNextData}
-            title={title}
-            summary={summary}
-            docked={docked}
-            imageWidth={imageSize}
-            verticalOffset={
-              transportInfoHeight +
-              topInset +
-              withAdditionalOffset({ progressBarHeight, bottomInset })
-            }
-          />
+      <View
+        style={[
+          styles.audioPlayerContainer,
+          {
+            marginTop: isSmallScreen
+              ? -TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+              : -TABLET_LANDSCAPE.MARGIN_VERTICAL,
+            height: screenHeight - transportInfoHeight,
+          },
+          isSmallScreen
+            ? styles.audioPlayerContainerPaddingsSmall
+            : styles.audioPlayerContainerPaddings,
+        ]}
+      >
+        {/* PlayerImage non-docked */}
+        <View style={[styles.flex, withDebug(styles.debugYellow)]}>
+          {!docked ? (
+            <PlayerImage
+              docked={false}
+              entry={entry}
+              layoutState={layoutState}
+              playerState={playerState}
+              value={value}
+              configuration={configuration}
+              onPlayerSeek={onPlayerSeek}
+              onCloseVideoModal={onCloseVideoModal}
+              dimensions={dimensions}
+              playNextData={playNextData}
+              title={title}
+              summary={summary}
+              verticalOffset={withAdditionalOffset({
+                progressBarHeight,
+                bottomInset,
+              })}
+              onLayoutImage={onLayoutImage}
+            />
+          ) : null}
         </View>
         {/* PlayerImage */}
 
-        <View
-          style={{
-            maxWidth: imageSize,
-          }}
-        >
+        <View style={styles.controlsContainer}>
           <Controls
+            maxWidth={imageWidth}
             entry={entry}
             layoutState={layoutState}
             playerState={playerState}
@@ -199,11 +197,11 @@ export function TabletLandscapeLayout({
       </View>
 
       <DockedControls
+        ImageComponent={<FlexImage entry={entry} style={styles.flex} />}
         entry={entry}
         layoutState={layoutState}
         playerState={playerState}
         value={value}
-        configuration={configuration}
         dimensions={dimensions}
         onCloseVideoModal={onCloseVideoModal}
         onPlayerSeek={onPlayerSeek}

package/src/Player/AudioLayer/Layout/TabletPortraitLayout.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { View, ViewStyle, StyleSheet } from "react-native";
+import { StyleSheet, View, ViewStyle } from "react-native";
 import {
-  useSafeAreaInsets,
   useSafeAreaFrame,
+  useSafeAreaInsets,
 } from "react-native-safe-area-context";
 import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
@@ -211,7 +211,6 @@ export function TabletPortraitLayout({
         layoutState={layoutState}
         playerState={playerState}
         value={value}
-        configuration={configuration}
         dimensions={dimensions}
         onCloseVideoModal={onCloseVideoModal}
         onPlayerSeek={onPlayerSeek}

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

@@ -14,6 +14,8 @@ import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
 import { NAVBAR_HEIGHT, TABLET_LANDSCAPE } from "../const";
 import { withDebug } from "../debug";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { isSmallTabletHeight } from "../utils";
 
 const styles = StyleSheet.create({
   container: {
@@ -52,6 +54,7 @@ export const TransportInfo = ({
   onLayout = noop,
 }: Props) => {
   const isTablet = useIsTablet();
+  const safeAreaFrame = useSafeAreaFrame();
   const languageData = useLanguageData("audio-player");
 
   const [marginBottom, setMarginBottom] = React.useState(0);
@@ -62,8 +65,18 @@ export const TransportInfo = ({
         event?.nativeEvent?.layout?.height
       );
 
-      const minHeight = Math.min(height, TABLET_LANDSCAPE.MARGIN_VERTICAL);
-      setMarginBottom(TABLET_LANDSCAPE.MARGIN_VERTICAL - minHeight);
+      const minHeight = Math.min(
+        height,
+        isTablet && isSmallTabletHeight(safeAreaFrame.height)
+          ? TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+          : TABLET_LANDSCAPE.MARGIN_VERTICAL
+      );
+
+      setMarginBottom(
+        (isTablet && isSmallTabletHeight(safeAreaFrame.height)
+          ? TABLET_LANDSCAPE.MARGIN_VERTICAL_S
+          : TABLET_LANDSCAPE.MARGIN_VERTICAL) - minHeight
+      );
 
       // pass layoutChangeEvent to upper level
       onLayout(event);

package/src/Player/AudioLayer/Layout/const.ts

@@ -2,9 +2,13 @@ export const PADDING_HORIZONTAL = 15;
 
 export const TABLET_VERTICAL_SEPARATOR_HEIGHT = 32;
 
+export const TABLET_VERTICAL_SEPARATOR_HEIGHT_S = 16;
+
 export const TABLET_LANDSCAPE = {
   MARGIN_VERTICAL: 80, // gap between safe-area edge and audio-player container
+  MARGIN_VERTICAL_S: 60, // gap between safe-area edge and audio-player container
   MAX_HEIGHT: 750,
+  MIN_WIDTH: 320, // Minimum width for the audio player container
 };
 
 export const TABLET_PORTRAIT = {

package/src/Player/AudioLayer/Layout/hooks/useTransportInfoHeight.ts

@@ -19,7 +19,7 @@ const builder = () => {
 };
 
 export const useTransportInfoHeight = () => {
-  const [height, setHeight] = React.useState(undefined);
+  const [height, setHeight] = React.useState(0);
 
   const layoutRef = useRefWithInitialValue<ReturnType<typeof builder>>(builder);
 

package/src/Player/AudioLayer/Layout/utils.ts

@@ -0,0 +1,7 @@
+/**
+ * Checks whether the screen height is matches with our threshold for small tablets.
+ * @param height screen height
+ * @returns boolean indicating if the height is less than 800 pixels
+ */
+export const isSmallTabletHeight = (height: number): boolean =>
+  !(height >= 800);

package/src/Player/hooks/useIsCasting.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
+import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
+const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
+
+const fakeEntry: any = {
+  title: "Chromecast use is casting fake entry",
+  id: "quick-brick-use-is-casting-fake-entry",
+};
+
+/**
+ * Returns the cast action state connection status, does not update when app is in background on Apple platforms
+ * On other platforms, it continues to check the cast action state even when the app is in background
+ */
+export const useIsCasting = () => {
+  const actionContext = useActions(CHROMECAST_IDENTIFIER);
+  const appState = useAppState();
+  const isAppInForeground = appState === "active";
+  const shouldOnlyUpdateInForeground = isApplePlatform();
+
+  const [castActionState, setCastActionState] = React.useState(
+    !actionContext ? null : actionContext.initialEntryState(fakeEntry)
+  );
+
+  React.useEffect(() => {
+    if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+      if (!(!actionContext && castActionState !== null)) {
+        setCastActionState(actionContext.initialEntryState(fakeEntry));
+      }
+    }
+  }, [
+    actionContext,
+    setCastActionState,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  React.useEffect(() => {
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext?.addListener(String(fakeEntry.id), (state) => {
+        // Only check foreground state on Apple platforms
+        if (!shouldOnlyUpdateInForeground || isAppInForeground) {
+          setCastActionState(state);
+        }
+      });
+    }
+  }, [
+    setCastActionState,
+    actionContext,
+    isAppInForeground,
+    shouldOnlyUpdateInForeground,
+  ]);
+
+  return !!castActionState?.connected;
+};

package/src/Player/index.tsx

@@ -74,6 +74,7 @@ export default class VideoPlayer extends React.Component<
   state: QuickBrickPlayer.NativePlayerState = {
     audioTrackId: null,
     textTrackId: null,
+    isCasting: this.props.isCasting,
 
     // TODO: Can be deleted, on controller logic
     isAd: false,
@@ -698,6 +699,10 @@ export default class VideoPlayer extends React.Component<
     ];
   };
 
+  get supportNativeCast() {
+    return this.props.controller.supportNativeCast();
+  }
+
   render() {
     const {
       docked,
@@ -710,12 +715,9 @@ export default class VideoPlayer extends React.Component<
       muted,
       style,
       castAction,
-      controller,
       startComponentsAnimation,
     } = this.props;
 
-    const supportNativeCast = controller.supportNativeCast();
-
     const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
       this.state;
 
@@ -995,11 +997,14 @@ export default class VideoPlayer extends React.Component<
     const backgroundImageKey =
       this.getPluginConfiguration()?.player_preview_image_key;
 
+    const shouldRenderNativePlayer =
+      !this.props.isCasting || this.supportNativeCast;
+
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
         // Ensure the View remains in the native hierarchy for proper rendering and interaction
         <View collapsable={false} style={containerStyle}>
-          {!castAction?.state?.connected || supportNativeCast ? (
+          {shouldRenderNativePlayer ? (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
@@ -1051,7 +1056,7 @@ export default class VideoPlayer extends React.Component<
                     />
                   ) : null}
 
-                  {!castAction?.state?.connected || supportNativeCast ? (
+                  {shouldRenderNativePlayer ? (
                     <AnimationComponent
                       animationType={ComponentAnimationType.player}
                       additionalData={{

package/src/QuickBrickPlayer.tsx

@@ -5,6 +5,7 @@ import Player from "./Player";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsCasting } from "./Player/hooks/useIsCasting";
 
 const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
 
@@ -24,6 +25,7 @@ const QuickBrickPlayerComponent = (
   }, [props.PlayerComponent]);
 
   const castAction = useActions(CHROMECAST_IDENTIFIER);
+  const isCasting = useIsCasting();
 
   const isModal = Boolean(props?.isModal);
   const isScreenDisabled = !controller?.isFullScreenSupported() || !isModal;
@@ -48,6 +50,7 @@ const QuickBrickPlayerComponent = (
       {...props}
       ref={ref}
       castAction={!props?.disableCastAction && castAction}
+      isCasting={isCasting}
       PlayerComponent={props.PlayerComponent}
       openPiP={openPiP}
       closePiP={closePiP}

package/src/Player/AudioLayer/LinearGradient/LinearGradientProxy.ts

@@ -1,3 +0,0 @@
-import LinearGradient from "react-native-linear-gradient";
-
-export default LinearGradient;

package/src/Player/AudioLayer/LinearGradient/LinearGradientProxy.web.ts

@@ -1,3 +0,0 @@
-const WebLinearGradient = require("react-native-web-linear-gradient").default;
-
-export default WebLinearGradient;

package/src/Player/AudioLayer/LinearGradient/index.ts

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