@applicaster/quick-brick-player 13.0.0-rc.12 → 13.0.0-rc.121

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

@@ -0,0 +1,320 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
+import { useIsTablet } 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";
+
+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;
+  sleepTimerDate: number;
+  cancelSleepTimer: Callback;
+
+  playbackSpeedName: string;
+  playbackSleepName: string;
+
+  onPlaybackButtonPress: Callback;
+  onRewindButtonPress: Callback;
+  onForwardButtonPress: Callback;
+  onPlayerSeek: (targetTime: number) => void;
+  onSkipStart: Callback;
+  onSkipLive: Callback;
+  onSpeedButtonPress: Callback;
+  onSleepButtonPress: Callback;
+
+  maxWidth?: number;
+
+  docked: boolean;
+};
+
+export const Controls = (props: Props) => {
+  const {
+    entry,
+    layoutState,
+    playerState,
+    value,
+    title,
+    summary,
+    sleepTimerDate,
+    cancelSleepTimer,
+
+    playbackSpeedName,
+    playbackSleepName,
+
+    onPlaybackButtonPress,
+    onRewindButtonPress,
+    onForwardButtonPress,
+    onPlayerSeek,
+    onSkipStart,
+    onSkipLive,
+    onSpeedButtonPress,
+    onSleepButtonPress,
+    maxWidth = 320,
+
+    docked,
+  } = props;
+
+  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 [timeLeft, setTimeLeft] = React.useState(
+    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
+  );
+
+  const showCounter = React.useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
+
+  const countDownOptions = React.useMemo(() => {
+    return {
+      showCounter: showCounter && timeLeft >= 0,
+      timeLeft,
+    };
+  }, [showCounter, timeLeft]);
+
+  React.useEffect(() => {
+    if (showCounter && sleepTimerDate !== 0) {
+      setTimeLeft(sleepTimerDate - Date.now());
+
+      const intervalId = setInterval(() => {
+        setTimeLeft(() => {
+          const newTimeLeft = sleepTimerDate - Date.now();
+
+          if (newTimeLeft <= 0) {
+            clearInterval(intervalId);
+
+            cancelSleepTimer();
+
+            return 0;
+          } else {
+            return newTimeLeft;
+          }
+        });
+      }, 1000);
+
+      return () => clearInterval(intervalId);
+    } else {
+      setTimeLeft(0);
+    }
+  }, [sleepTimerDate, showCounter, cancelSleepTimer]);
+
+  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}
+            countDownOptions={countDownOptions}
+            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,

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",
+    }}
+  />
+);