@applicaster/quick-brick-player 13.0.0-rc.13 → 13.0.0-rc.130

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

@@ -0,0 +1,291 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
+import {
+  useIsTablet,
+  useZStore,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
+import {
+  Controls as MobileTransportControls,
+  ProgressBar,
+} from "@applicaster/quick-brick-mobile-transport-controls";
+import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
+
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+
+import { AudioDescription } from "../../AudioDescription";
+import { isValidDate } from "../../../Utils";
+import { VerticalGutter } from "./VerticalGutter";
+
+import {
+  forwardButton,
+  playbackButton,
+  rewindButton,
+  skipToLiveButton,
+  skipToStartButton,
+  sleepButton,
+  speedButton,
+} from "./utils";
+import { useSleepTimerModal } from "../../useSleepTimerModal";
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  nonFlex: {
+    flex: 0,
+  },
+  progressBar: {
+    flex: 0,
+  },
+  progressBarTrackStyles: {
+    borderRadius: 3,
+    height: 6,
+  },
+  progressBarThumbStyles: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+  },
+  progressBarThumbStyles_pressed: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+  },
+});
+
+const getControlJustifyContent = (countOfButtons: number) =>
+  countOfButtons <= 1 ? "center" : "space-between";
+
+type Props = {
+  entry: ZappEntry;
+  layoutState: QuickBrickPlayer.LayoutState;
+  playerState: QuickBrickPlayer.PlayerState;
+  value: GetValue;
+  title: string | number;
+  summary: string | number;
+
+  playbackSpeedName: string;
+
+  onPlaybackButtonPress: Callback;
+  onRewindButtonPress: Callback;
+  onForwardButtonPress: Callback;
+  onPlayerSeek: (targetTime: number) => void;
+  onSkipStart: Callback;
+  onSkipLive: Callback;
+  onSpeedButtonPress: Callback;
+
+  maxWidth?: number;
+
+  docked: boolean;
+};
+
+export const Controls = (props: Props) => {
+  const {
+    entry,
+    layoutState,
+    playerState,
+    value,
+    title,
+    summary,
+
+    playbackSpeedName,
+
+    onPlaybackButtonPress,
+    onRewindButtonPress,
+    onForwardButtonPress,
+    onPlayerSeek,
+    onSkipStart,
+    onSkipLive,
+    onSpeedButtonPress,
+    maxWidth = 320,
+
+    docked,
+  } = props;
+
+  const configuration = useZStore("playerConfiguration");
+
+  const { sleepTimerState, onSleepButtonPress } = useSleepTimerModal(
+    playerManager.getActivePlayer(),
+    configuration
+  );
+
+  const timerRemaining =
+    sleepTimerState.timerDate !== 0 && +sleepTimerState.timerDate > Date.now()
+      ? sleepTimerState.timerDate
+      : null;
+
+  const playbackSleepName =
+    timerRemaining === null ? "sleep_timer" : "sleep_timer_active";
+
+  const isTablet = useIsTablet();
+  const controller = playerManager.getActivePlayer();
+  let showFullControls = !controller?.isAd();
+  const liveButton = Boolean(value("live_badge_enabled"));
+
+  const isLiveContent = playerState.isLive;
+
+  if (isLiveContent) {
+    const seekEnabled = Boolean(value("liveSeekingEnabled"));
+
+    showFullControls = !!(controller?.hasSeekableDuration?.() && seekEnabled);
+  }
+
+  const startTime = entry.extensions?.live?.start_time;
+  const endTime = entry.extensions?.live?.end_time;
+
+  const hasValidStartTime = isValidDate(startTime);
+  const hasValidEndTime = isValidDate(endTime);
+
+  const isDateBasedLiveContent =
+    isLiveContent && hasValidStartTime && hasValidEndTime;
+
+  const needsToShowProgressBar =
+    (isLiveContent &&
+      (Boolean(value("liveSeekingEnabled")) || isDateBasedLiveContent)) ||
+    !isLiveContent;
+
+  const startTimestamp = hasValidStartTime
+    ? dayjs.utc(startTime!).valueOf()
+    : undefined;
+
+  const endTimestamp = hasValidEndTime
+    ? dayjs.utc(endTime!).valueOf()
+    : undefined;
+
+  const isLiveShowFullControls = showFullControls && isLiveContent;
+
+  const controlButtons = React.useCallback((): Array<ControlsButton> => {
+    const play = playbackButton({
+      playerState,
+      liveButton,
+      isTablet,
+      isLiveShowFullControls,
+      onPress: onPlaybackButtonPress,
+    });
+
+    if (!showFullControls) {
+      return [play];
+    }
+
+    const rewind = rewindButton({
+      isTablet,
+      onPress: controller?.hasSeekableDuration?.() ? onRewindButtonPress : null,
+    });
+
+    const forward = forwardButton({
+      isTablet,
+      onPress: controller?.hasSeekableDuration?.()
+        ? onForwardButtonPress
+        : null,
+    });
+
+    const speed = speedButton({
+      isTablet,
+      onPress: onSpeedButtonPress,
+      name: playbackSpeedName,
+    });
+
+    const sleep = sleepButton({
+      isTablet,
+      onPress: onSleepButtonPress,
+      name: playbackSleepName,
+    });
+
+    if (isLiveContent) {
+      const skipToStart = skipToStartButton({
+        isTablet,
+        onPress: onSkipStart,
+      });
+
+      const skipToLive = skipToLiveButton({
+        isTablet,
+        onPress: onSkipLive,
+      });
+
+      return [skipToStart, rewind, play, forward, skipToLive];
+    }
+
+    return [speed, rewind, play, forward, sleep];
+  }, [
+    playerState,
+    liveButton,
+    isTablet,
+    onPlaybackButtonPress,
+    onRewindButtonPress,
+    onForwardButtonPress,
+    onSpeedButtonPress,
+    showFullControls,
+    onSkipStart,
+    onSkipLive,
+    isLiveContent,
+    playbackSpeedName,
+    playbackSleepName,
+    controller,
+    isLiveShowFullControls,
+  ]);
+
+  if (docked) {
+    return null;
+  }
+
+  return (
+    <AnimationComponent
+      animationType={ComponentAnimationType.componentFade}
+      style={isTablet ? styles.nonFlex : styles.flex}
+    >
+      <VerticalGutter />
+
+      <AudioDescription
+        title={title}
+        summary={summary}
+        value={value}
+        layoutState={layoutState}
+        maxWidth={maxWidth}
+      />
+
+      <VerticalGutter />
+
+      {needsToShowProgressBar ? (
+        <>
+          <ProgressBar
+            name={"audio-default-layout"}
+            content={entry}
+            value={value}
+            visible
+            layoutState={layoutState}
+            onPlayerSeek={onPlayerSeek}
+            playerState={playerState}
+            disableFullscreen
+            sliderStyle={2}
+            startTimestamp={startTimestamp}
+            endTimestamp={endTimestamp}
+            isDateBasedLiveContent={isDateBasedLiveContent}
+            onSkipLive={onSkipLive}
+            progressBarStyles={styles.progressBar}
+            thumbStyles={styles.progressBarThumbStyles}
+            thumbStylesPressed={styles.progressBarThumbStyles_pressed}
+            trackStyles={styles.progressBarTrackStyles}
+          />
+
+          <VerticalGutter />
+        </>
+      ) : null}
+
+      <MobileTransportControls
+        value={value}
+        visible={true}
+        keepAlive={null}
+        buttons={controlButtons}
+        style={{
+          justifyContent: getControlJustifyContent(controlButtons().length),
+        }}
+        playerState={playerState}
+      />
+    </AnimationComponent>
+  );
+};

package/src/Player/AudioLayer/Layout/{defaultLayoutsConts.ts → Controls/utils.ts}

@@ -1,25 +1,7 @@
-type PlayerState = {
-  currentTime: number;
-  duration: number;
-  seekableDuration: number;
-  isLive: boolean;
-  isPaused: boolean;
-  isBuffering: boolean;
-};
-
-const rewindButtonSize = (isTablet: boolean): keyof ButtonSizeStyles =>
-  isTablet ? "big" : "smallMargins";
-
-const playbackButtonSize = (isTablet: boolean): keyof ButtonSizeStyles =>
-  isTablet ? "bigExtended" : "mediumExtended";
-
 const playbackButtonMargins = (
   isTablet: boolean,
   isLiveShowFullControls: boolean
-): number =>
-  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? 95 : 40;
-
-export const PADDING_HORIZONTAL = 15;
+): number => (isLiveShowFullControls ? (isTablet ? 65 : 10) : undefined);
 
 export const playbackButton = ({
   playerState,
@@ -28,7 +10,7 @@ export const playbackButton = ({
   isLiveShowFullControls,
   onPress,
 }: {
-  playerState: PlayerState;
+  playerState: QuickBrickPlayer.PlayerState;
   liveButton: boolean;
   isTablet: boolean;
   isLiveShowFullControls: boolean;
@@ -37,11 +19,11 @@ export const playbackButton = ({
   const icon = playerState.isPaused
     ? "play"
     : playerState.isLive && liveButton
-    ? "stop"
-    : "pause";
+      ? "stop"
+      : "pause";
 
   return {
-    size: playbackButtonSize(isTablet),
+    size: "bigExtended",
     icon: playerState.isBuffering ? "buffering" : icon,
     preferredFocus: true,
     onPress,
@@ -57,15 +39,15 @@ type ButtonsProps = {
   style?: any;
   name?: string;
 };
+
 type ButtonsByNameProps = ButtonsProps & { name?: string };
 
 const rewindButtonByName = ({
   name,
   onPress,
-  isTablet,
   style,
 }: ButtonsByNameProps): ControlsButton => ({
-  size: rewindButtonSize(isTablet),
+  size: "big",
   icon: name,
   onPress,
   style,
@@ -117,7 +99,7 @@ export const skipToLiveButton = (props: ButtonsProps): ControlsButton =>
   skipButtonByName({ ...props, name: "skip_live" });
 
 export const speedButton = (props: ButtonsProps): ControlsButton =>
-  speedButtonByName({ ...props });
+  speedButtonByName(props);
 
 export const sleepButton = (props: ButtonsProps): ControlsButton =>
-  sleepButtonByName({ ...props });
+  sleepButtonByName(props);

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

@@ -0,0 +1,55 @@
+/* eslint react-native/no-color-literals: off */
+/* eslint react-native/no-inline-styles: off */
+
+import * as React from "react";
+import { View } from "react-native";
+
+import { MOBILE } from "../const";
+
+export const LeftDebugSquare = () => (
+  <View
+    style={{
+      position: "absolute",
+      top: 200,
+      left: 0,
+      width: MOBILE.MARGIN_HORIZONTAL,
+      height: MOBILE.MARGIN_HORIZONTAL,
+      backgroundColor: "blue",
+
+      borderWidth: 1,
+      borderColor: "yellow",
+    }}
+  />
+);
+
+export const RightDebugSquare = () => (
+  <View
+    style={{
+      position: "absolute",
+      top: 200,
+      right: 0,
+      width: MOBILE.MARGIN_HORIZONTAL,
+      height: MOBILE.MARGIN_HORIZONTAL,
+      backgroundColor: "blue",
+
+      borderWidth: 1,
+      borderColor: "yellow",
+    }}
+  />
+);
+
+export const BottomDebugSquare = () => (
+  <View
+    style={{
+      position: "absolute",
+      left: 170,
+      bottom: 0,
+      width: MOBILE.MARGIN_BOTTOM,
+      height: MOBILE.MARGIN_BOTTOM,
+      backgroundColor: "blue",
+
+      borderWidth: 1,
+      borderColor: "yellow",
+    }}
+  />
+);

package/src/Player/AudioLayer/Layout/{DockedLayout.tsx → DockedControls/index.tsx}

@@ -9,52 +9,38 @@ import * as R from "ramda";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
+  Button,
   ContentInfo,
-  ProgressBar,
   Controls,
-  Button,
+  ProgressBar,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+
 import {
-  useModalAnimationContext,
   AnimationComponent,
   ComponentAnimationType,
   PlayerAnimationStateEnum,
+  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";
 
-type Dimensions = {
-  width: number;
-  height: number;
-};
+const bottomTabBarHeight = getTabBarHeight();
 
-type LayoutProps = {
+type Props = {
   entry: ZappEntry;
-  layoutState: {
-    inline: boolean;
-    docked: boolean;
-    isModal: boolean;
-  };
-  playerState: {
-    currentTime: number;
-    duration: number;
-    seekableDuration: number;
-    isLive: boolean;
-    isPaused: boolean;
-    isBuffering: boolean;
-  };
+  layoutState: QuickBrickPlayer.LayoutState;
+  playerState: QuickBrickPlayer.PlayerState;
   value: GetValue;
-  configuration: { [key: string]: any };
-  onPlaybackButtonPress: () => void;
-  onRewindButtonPress: () => void;
-  onForwardButtonPress: () => void;
-  onPlayerSeek: (targetTime: number) => void;
+  dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"];
   onCloseVideoModal: () => void;
-  maximiseVideoModal: () => void;
-  dimensions: Dimensions;
+  onPlayerSeek: (targetTime: number) => void;
   playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
+  ImageComponent?: React.ReactNode;
 };
 
 const styles = StyleSheet.create({
@@ -71,6 +57,7 @@ const styles = StyleSheet.create({
   touchableArea: {
     flexShrink: 1,
     flex: 1,
+    flexDirection: "row",
     alignSelf: "stretch",
   },
   contentInfo: {
@@ -105,25 +92,25 @@ const styles = StyleSheet.create({
   },
 });
 
-const backgroundColorStyle = (value: GetValue): ViewStyle => ({
-  backgroundColor: value("docked_player_background_color"),
-});
-
 const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
 ): ViewStyle => ({
-  paddingLeft: addPadding ? minimisedHeight || 100 : 0,
+  width: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
 });
 
-const animatedContainerStyle = (docked: boolean): ViewStyle => ({
+const animatedContainerStyle = (
+  docked: boolean,
+  progressBarHeight: number
+): ViewStyle => ({
+  top: progressBarHeight,
   position: "absolute",
   width: "100%",
   zIndex: docked ? 1 : -1,
 });
 
 const backgroundImageStyle = (
-  dimensions: Dimensions,
+  dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"],
   minimisedHeight: number,
   isActiveGesture: boolean
 ): ViewStyle => ({
@@ -133,24 +120,11 @@ const backgroundImageStyle = (
 });
 
 const controlButtons = (
-  isPlayNextEnabled: boolean,
   live: boolean,
   paused: boolean,
   buffering: boolean,
   playerId: string
 ): Array<ControlsButton> => {
-  if (isPlayNextEnabled) {
-    return [
-      {
-        size: "medium",
-        name: "play_next",
-        icon: "play_next",
-        preferredFocus: true,
-        style: styles.buttons,
-      },
-    ];
-  }
-
   if (buffering) {
     return [
       {
@@ -202,24 +176,23 @@ const controlButtons = (
   ];
 };
 
-export default function DockedLayout(props: LayoutProps) {
+export const DockedControls = (props: Props) => {
   const {
+    entry,
     layoutState,
+    playerState,
     value,
     dimensions,
-    entry,
     onCloseVideoModal,
     onPlayerSeek,
-    playerState,
-    configuration,
     playNextData,
     title,
     summary,
+    ImageComponent,
   } = props;
 
   const isTablet = useIsTablet();
 
-  const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));
 
   const {
@@ -227,13 +200,18 @@ export default function DockedLayout(props: LayoutProps) {
     setPlayerAnimationState,
     startComponentsAnimation,
     minimisedHeight,
+    progressBarHeight,
   } = useModalAnimationContext();
 
   const maximazeVideoModal = React.useCallback(
-    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximize),
     []
   );
 
+  const dockedBackgroundColor = value("docked_player_background_color");
+
+  const insets = useSafeAreaInsets();
+
   if (!layoutState.docked && !startComponentsAnimation) return null;
 
   return (
@@ -241,22 +219,29 @@ export default function DockedLayout(props: LayoutProps) {
       animationType={ComponentAnimationType.componentAppears}
       style={[
         styles.container,
-        animatedContainerStyle(isActiveGesture || layoutState.docked),
+        animatedContainerStyle(
+          isActiveGesture || layoutState.docked,
+          progressBarHeight
+        ),
+        {
+          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
+        },
       ]}
     >
       {!playerState.isLive &&
-        (layoutState.docked || startComponentsAnimation) && (
-          <ProgressBar
-            content={entry}
-            value={value}
-            visible={visible}
-            layoutState={layoutState}
-            onPlayerSeek={onPlayerSeek}
-            playerState={playerState}
-            startComponentsAnimation={startComponentsAnimation}
-            docked
-          />
-        )}
+      (layoutState.docked || startComponentsAnimation) ? (
+        <ProgressBar
+          name={"audio-docked-layout"}
+          content={entry}
+          value={value}
+          visible
+          layoutState={layoutState}
+          onPlayerSeek={onPlayerSeek}
+          playerState={playerState}
+          startComponentsAnimation={startComponentsAnimation}
+          docked
+        />
+      ) : null}
 
       <View style={styles.content}>
         <View
@@ -267,19 +252,25 @@ export default function DockedLayout(props: LayoutProps) {
           )}
         />
         <TouchableWithoutFeedback onPress={maximazeVideoModal}>
-          <View
-            style={[
-              styles.touchableArea,
-              playerDimensionsStyle(
-                minimisedHeight,
-                isActiveGesture || layoutState.docked
-              ),
-            ]}
-          >
+          <View style={styles.touchableArea}>
+            {isActiveGesture || layoutState.docked ? (
+              <View
+                style={{ width: toNumberWithDefault(100, minimisedHeight) }}
+              >
+                {ImageComponent || null}
+              </View>
+            ) : (
+              <View
+                style={playerDimensionsStyle(
+                  minimisedHeight,
+                  isActiveGesture || layoutState.docked
+                )}
+              />
+            )}
             <View
               style={[
                 styles.contentInfo,
-                !configuration.magic_background && backgroundColorStyle(value),
+                { backgroundColor: dockedBackgroundColor },
               ]}
             >
               <ContentInfo
@@ -295,14 +286,13 @@ export default function DockedLayout(props: LayoutProps) {
             isTablet
               ? styles.controlsContainerForTablet
               : styles.controlsContainerForMobile,
-            !configuration.magic_background && backgroundColorStyle(value),
+            { backgroundColor: dockedBackgroundColor },
           ]}
         >
           <Controls
             value={value}
-            visible={visible}
+            visible
             buttons={R.partial(controlButtons, [
-              playNextData,
               playerState.isLive && liveButton,
             ])}
             style={styles.playPauseButton}
@@ -318,6 +308,12 @@ export default function DockedLayout(props: LayoutProps) {
           />
         </View>
       </View>
+      <View
+        style={{
+          height: insets.bottom + bottomTabBarHeight,
+          backgroundColor: dockedBackgroundColor,
+        }}
+      />
     </AnimationComponent>
   );
-}
+};