@applicaster/quick-brick-player 12.0.0-rc.1 → 12.0.0-rc.100

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

@@ -1,26 +1,40 @@
 import * as React from "react";
 import * as R from "ramda";
 import { View } from "react-native";
+import { dayjs } from "@applicaster/zapp-react-native-utils/dateUtils";
 
 import {
   ProgressBar,
   Controls,
   TransportInfo,
+  CountDown,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 
-import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks/device/useIsTablet";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   forwardButton,
   playbackButton,
   rewindButton,
   skipToStartButton,
   skipToLiveButton,
+  PADDING_HORIZONTAL,
+  speedButton,
+  sleepButton,
 } from "./defaultLayoutsConts";
 import { AudioDescription } from "../AudioDescription";
 import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
 import { useLanguageData } from "@applicaster/zapp-react-native-utils/reactHooks/player";
+import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { useEffect, useMemo, useState } from "react";
+import {
+  useModalAnimationContext,
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import DockedLayout from "./DockedLayout";
+import { isValidDate } from "../../Utils";
 
 type Dimensions = {
   width: number;
@@ -42,54 +56,76 @@ type LayoutProps = {
     isPaused: boolean;
     isBuffering: boolean;
   };
+  sleepTimerDate: number;
   value: GetValue;
+  playbackSpeedName: string;
+  playbackSleepName: string;
   configuration: { [key: string]: any };
   onPlaybackButtonPress: () => void;
   onRewindButtonPress: () => void;
   onForwardButtonPress: () => void;
+  onSpeedButtonPress: () => void;
+  onSleepButtonPress: () => void;
+  cancelSleepTimer: () => void;
   onPlayerSeek: (targetTime: number) => void;
   onSkipLive: () => void;
   onSkipStart: () => void;
+  onCloseVideoModal: () => void;
+  maximiseVideoModal: () => void;
   dimensions: Dimensions;
+  playNextData: PlayNextData;
+  title: string | number;
+  summary: string | number;
+  defaultDimensions: Dimensions;
 };
 
 const Styles = {
   container: { flex: 1 },
-  tabletContainer: (isPortraitMode) => ({
+  tabletContainer: (isPortraitMode: boolean) => ({
     flex: 1,
     alignItems: "center",
     justifyContent: isPortraitMode ? "center" : "flex-start",
   }),
-  tabletLayout: {
-    width: 463,
+  playerImageWrapper: {
+    width: "100%",
     maxHeight: 750,
     marginTop: 80,
+  },
+  tabletLayout: {
+    width: 463,
     marginBottom: 80,
   },
   controls: (isTablet: boolean, isLiveShowFullControls: boolean) => ({
     height: isTablet ? 64 : 50,
-    marginHorizontal: isLiveShowFullControls ? 10 : 24,
-    justifyContent: isLiveShowFullControls ? "space-between" : "center",
+    marginHorizontal: 10,
+    justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
   }),
   backgroundImageContainer: (dimensions: Dimensions, isTablet: boolean) => {
+    const mobileValue = dimensions.width
+      ? dimensions.width - PADDING_HORIZONTAL * 2
+      : 330;
+
     return {
-      width: isTablet ? 463 : dimensions.width,
-      height: isTablet ? 463 : dimensions.width,
+      width: isTablet ? 463 : mobileValue,
+      height: isTablet ? 463 : mobileValue,
     };
   },
-  backgroundImageContainerImageStyle: (isTablet) => ({
-    borderRadius: isTablet ? 24 : 10,
+  backgroundImageContainerImageStyle: (
+    isTablet: boolean,
+    docked: boolean,
+    startComponentsAnimation: boolean,
+    isActiveGesture: boolean
+  ) => ({
+    borderRadius:
+      (startComponentsAnimation && isActiveGesture) || docked
+        ? 0
+        : isTablet
+        ? 24
+        : 10,
   }),
-  playerContainer: (docked: boolean, style) => {
-    const combinedStyle = {
-      flex: 1,
-    };
-
-    if (docked) {
-      combinedStyle["height"] = style.height;
-    }
 
-    return combinedStyle;
+  paddingHorizontal: {
+    paddingHorizontal: PADDING_HORIZONTAL,
   },
 
   controlsMobile: {
@@ -103,6 +139,12 @@ const Styles = {
   separator: {
     height: 20,
   },
+  flexDirectionRow: {
+    flexDirection: "row",
+  },
+  alignItemsCenter: {
+    alignItems: "center",
+  },
 };
 
 export default function DefaultLayout(props: LayoutProps) {
@@ -117,25 +159,64 @@ export default function DefaultLayout(props: LayoutProps) {
     onPlayerSeek,
     onSkipStart,
     onSkipLive,
+    onSpeedButtonPress,
+    onSleepButtonPress,
+    playbackSpeedName,
+    playbackSleepName,
     configuration,
     dimensions,
+    cancelSleepTimer,
+    sleepTimerDate,
+    title,
+    summary,
+    defaultDimensions,
   } = props;
 
   const isTablet = useIsTablet();
   const { width, height } = dimensions;
   const isPortraitMode = width < height;
   const isLiveContent = playerState.isLive;
+  const docked = layoutState.docked;
 
   const languageData = useLanguageData("audio-player");
 
+  const showCounter = useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
+
   const controller = playerManager.getActivePlayer();
   const liveButton = Boolean(value("live_badge_enabled"));
+  const sleepTitle = value("playback_sleep_countdown_label");
 
-  let showFullControls =
-    controller?.hasContentDuration?.() && !controller?.isAd();
+  const [timeLeft, setTimeLeft] = useState(
+    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
+  );
+
+  let showFullControls = !controller?.isAd();
+
+  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;
 
   if (isLiveContent) {
     const seekEnabled = Boolean(value("liveSeekingEnabled"));
+
     showFullControls = !!(controller?.hasSeekableDuration?.() && seekEnabled);
   }
 
@@ -163,8 +244,29 @@ export default function DefaultLayout(props: LayoutProps) {
       return [play];
     }
 
-    const rewind = rewindButton({ isTablet, onPress: onRewindButtonPress });
-    const forward = forwardButton({ isTablet, onPress: onForwardButtonPress });
+    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({
@@ -180,7 +282,7 @@ export default function DefaultLayout(props: LayoutProps) {
       return [skipToStart, rewind, play, forward, skipToLive];
     }
 
-    return [rewind, play, forward];
+    return [speed, rewind, play, forward, sleep];
   }, [
     playerState,
     liveButton,
@@ -188,18 +290,53 @@ export default function DefaultLayout(props: LayoutProps) {
     onPlaybackButtonPress,
     onRewindButtonPress,
     onForwardButtonPress,
+    onSpeedButtonPress,
     showFullControls,
     onSkipStart,
     onSkipLive,
     isLiveContent,
+    playbackSpeedName,
+    playbackSleepName,
+    controller,
   ]);
 
+  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 Separator = () => <View style={Styles.separator} />;
 
-  const liveSeekingEnabled = value("liveSeekingEnabled");
+  const defaultImageDimensions = React.useMemo(
+    () =>
+      defaultDimensions &&
+      Styles.backgroundImageContainer(defaultDimensions, isTablet),
+    [defaultDimensions, isTablet]
+  );
 
-  const needsToShowProgressBar =
-    (isLiveContent && liveSeekingEnabled) || !isLiveContent;
+  const { isActiveGesture, startComponentsAnimation } =
+    useModalAnimationContext();
 
   return (
     <View
@@ -207,56 +344,108 @@ export default function DefaultLayout(props: LayoutProps) {
         isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
       }
     >
-      <TransportInfo
-        content={entry}
-        value={value}
-        visible={true}
-        languageData={languageData}
-        layoutState={layoutState}
-        actionButtons={actionButtons}
-      />
-      <View
-        style={
-          isTablet ? Styles.tabletContainer(isPortraitMode) : Styles.container
-        }
+      <AnimationComponent animationType={ComponentAnimationType.componentFade}>
+        <TransportInfo
+          content={entry}
+          value={value}
+          visible={true}
+          languageData={languageData}
+          layoutState={layoutState}
+          actionButtons={actionButtons}
+        />
+      </AnimationComponent>
+      <AnimationComponent
+        animationType={ComponentAnimationType.moveUpComponent}
+        style={isTablet ? Styles.playerImageWrapper : undefined}
       >
-        <View style={isTablet ? Styles.tabletLayout : null}>
+        <AnimationComponent
+          animationType={ComponentAnimationType.moveComponentHorizontal}
+          additionalData={{
+            disableAnimatedComponent: !isTablet,
+            moveValue: (dimensions.width - 463) / 2,
+            extraAnimation: !isTablet
+              ? {
+                  [ComponentAnimationType.audioPlayerPaddingHorizontal]: {
+                    style: Styles.paddingHorizontal,
+                  },
+                }
+              : null,
+          }}
+          style={isTablet ? Styles.alignItemsCenter : undefined}
+        >
           <PlayerImageBackground
-            configuration={configuration}
             entry={entry}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
-            imageStyle={Styles.backgroundImageContainerImageStyle(isTablet)}
-          />
-          <AudioDescription
-            content={entry}
-            value={value}
-            layoutState={layoutState}
+            imageStyle={Styles.backgroundImageContainerImageStyle(
+              isTablet,
+              docked,
+              startComponentsAnimation,
+              isActiveGesture
+            )}
+            defaultImageDimensions={defaultImageDimensions}
           />
-          <Separator />
-          {needsToShowProgressBar && (
-            <View>
-              <ProgressBar
-                content={entry}
-                value={value}
-                visible={true}
-                layoutState={layoutState}
-                onPlayerSeek={onPlayerSeek}
-                playerState={playerState}
-                disableFullscreen={true}
-                sliderStyle={2}
-              />
-              <Separator />
-            </View>
-          )}
-          <Controls
-            value={value}
-            visible={true}
-            keepAlive={null}
-            buttons={controlButtons}
-            style={Styles.controls(isTablet, isLiveContent && showFullControls)}
-            playerState={playerState}
-          />
-        </View>
+        </AnimationComponent>
+
+        <DockedLayout {...props} />
+      </AnimationComponent>
+      <View
+        style={[
+          Styles.paddingHorizontal,
+          isTablet ? Styles.tabletLayout : undefined,
+        ]}
+      >
+        {!docked && (
+          <AnimationComponent
+            animationType={ComponentAnimationType.componentFade}
+          >
+            <AudioDescription
+              title={title}
+              summary={summary}
+              value={value}
+              layoutState={layoutState}
+            />
+            <Separator />
+            {needsToShowProgressBar && (
+              <View>
+                <ProgressBar
+                  content={entry}
+                  value={value}
+                  visible={true}
+                  layoutState={layoutState}
+                  onPlayerSeek={onPlayerSeek}
+                  playerState={playerState}
+                  disableFullscreen={true}
+                  sliderStyle={2}
+                  startTimestamp={startTimestamp}
+                  endTimestamp={endTimestamp}
+                  isDateBasedLiveContent={isDateBasedLiveContent}
+                  onSkipLive={onSkipLive}
+                />
+
+                {showCounter && timeLeft >= 0 && (
+                  <CountDown
+                    timeLeft={timeLeft}
+                    value={value}
+                    title={sleepTitle}
+                  />
+                )}
+
+                <Separator />
+              </View>
+            )}
+            <Controls
+              value={value}
+              visible={true}
+              keepAlive={null}
+              buttons={controlButtons}
+              style={Styles.controls(
+                isTablet,
+                isLiveContent && showFullControls
+              )}
+              playerState={playerState}
+            />
+          </AnimationComponent>
+        )}
       </View>
     </View>
   );

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

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import {
   StyleSheet,
   TouchableWithoutFeedback,
@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from "react-native";
 import * as R from "ramda";
-import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import {
   ContentInfo,
@@ -15,8 +15,13 @@ import {
   Button,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 
-import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import {
+  useModalAnimationContext,
+  AnimationComponent,
+  ComponentAnimationType,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Dimensions = {
   width: number;
@@ -48,6 +53,8 @@ type LayoutProps = {
   maximiseVideoModal: () => void;
   dimensions: Dimensions;
   playNextData: PlayNextData;
+  title: string | number;
+  summary: string | number;
 };
 
 const styles = StyleSheet.create({
@@ -102,14 +109,25 @@ const backgroundColorStyle = (value: GetValue): ViewStyle => ({
   backgroundColor: value("docked_player_background_color"),
 });
 
-const playerDimensionsStyle = ({
-  height,
-}: PlayerDimensionsProp): ViewStyle => ({
-  paddingLeft: height || 100,
+const playerDimensionsStyle = (
+  minimisedHeight: number,
+  addPadding: boolean
+): ViewStyle => ({
+  paddingLeft: addPadding ? minimisedHeight || 100 : 0,
+});
+
+const animatedContainerStyle = (docked: boolean): ViewStyle => ({
+  position: "absolute",
+  width: "100%",
+  zIndex: docked ? 1 : -1,
 });
 
-const backgroundImageStyle = (dimensions: Dimensions): ViewStyle => ({
-  height: dimensions.height,
+const backgroundImageStyle = (
+  dimensions: Dimensions,
+  minimisedHeight: number,
+  isActiveGesture: boolean
+): ViewStyle => ({
+  height: isActiveGesture ? minimisedHeight : dimensions.height,
   aspectRatio: 1,
   position: "absolute",
 });
@@ -191,42 +209,72 @@ export default function DockedLayout(props: LayoutProps) {
     dimensions,
     entry,
     onCloseVideoModal,
-    maximiseVideoModal,
     onPlayerSeek,
     playerState,
     configuration,
     playNextData,
+    title,
+    summary,
   } = props;
 
-  const {
-    deviceInfo: { isTablet },
-  } = useDimensions("screen", { deviceInfo: true });
+  const isTablet = useIsTablet();
 
   const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));
 
+  const {
+    isActiveGesture,
+    setPlayerAnimationState,
+    startComponentsAnimation,
+    minimisedHeight,
+  } = useModalAnimationContext();
+
+  const maximazeVideoModal = React.useCallback(
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    []
+  );
+
+  if (!layoutState.docked && !startComponentsAnimation) return null;
+
   return (
-    <View style={styles.container}>
-      {!playerState.isLive && (
-        <ProgressBar
-          content={entry}
-          value={value}
-          visible={visible}
-          layoutState={layoutState}
-          onPlayerSeek={onPlayerSeek}
-          playerState={playerState}
-        />
-      )}
+    <AnimationComponent
+      animationType={ComponentAnimationType.componentAppears}
+      style={[
+        styles.container,
+        animatedContainerStyle(isActiveGesture || layoutState.docked),
+      ]}
+    >
+      {!playerState.isLive &&
+        (layoutState.docked || startComponentsAnimation) && (
+          <ProgressBar
+            content={entry}
+            value={value}
+            visible={visible}
+            layoutState={layoutState}
+            onPlayerSeek={onPlayerSeek}
+            playerState={playerState}
+            startComponentsAnimation={startComponentsAnimation}
+            docked
+          />
+        )}
 
       <View style={styles.content}>
-        <PlayerImageBackground
-          configuration={configuration}
-          entry={entry}
-          style={backgroundImageStyle(dimensions)}
+        <View
+          style={backgroundImageStyle(
+            dimensions,
+            minimisedHeight,
+            isActiveGesture
+          )}
         />
-        <TouchableWithoutFeedback onPress={maximiseVideoModal}>
+        <TouchableWithoutFeedback onPress={maximazeVideoModal}>
           <View
-            style={[styles.touchableArea, playerDimensionsStyle(dimensions)]}
+            style={[
+              styles.touchableArea,
+              playerDimensionsStyle(
+                minimisedHeight,
+                isActiveGesture || layoutState.docked
+              ),
+            ]}
           >
             <View
               style={[
@@ -234,7 +282,11 @@ export default function DockedLayout(props: LayoutProps) {
                 !configuration.magic_background && backgroundColorStyle(value),
               ]}
             >
-              <ContentInfo content={entry} value={value} docked />
+              <ContentInfo
+                content={{ ...entry, title, summary }}
+                value={value}
+                docked
+              />
             </View>
           </View>
         </TouchableWithoutFeedback>
@@ -266,6 +318,6 @@ export default function DockedLayout(props: LayoutProps) {
           />
         </View>
       </View>
-    </View>
+    </AnimationComponent>
   );
 }