@applicaster/quick-brick-player 13.0.0-rc.98 → 13.0.0

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

@@ -2,10 +2,12 @@ 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 {
+  useIsTablet,
+  useZStore,
+} from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
   Controls as MobileTransportControls,
-  CountDown,
   ProgressBar,
 } from "@applicaster/quick-brick-mobile-transport-controls";
 import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
@@ -28,6 +30,7 @@ import {
   sleepButton,
   speedButton,
 } from "./utils";
+import { useSleepTimerModal } from "../../useSleepTimerModal";
 
 const styles = StyleSheet.create({
   flex: {
@@ -39,19 +42,24 @@ const styles = StyleSheet.create({
   progressBar: {
     flex: 0,
   },
+  progressBarTrackStyles: {
+    borderRadius: 3,
+    height: 6,
+  },
+  progressBarThumbStyles: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+  },
+  progressBarThumbStyles_pressed: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+  },
 });
 
-const controlsStyles = ({
-  isTablet,
-  isLiveShowFullControls,
-}: {
-  isTablet: boolean;
-  isLiveShowFullControls: boolean;
-}) => ({
-  height: isTablet ? undefined : 50,
-  marginHorizontal: isTablet ? undefined : 10,
-  justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
-});
+const getControlJustifyContent = (countOfButtons: number) =>
+  countOfButtons <= 1 ? "center" : "space-between";
 
 type Props = {
   entry: ZappEntry;
@@ -60,11 +68,8 @@ type Props = {
   value: GetValue;
   title: string | number;
   summary: string | number;
-  sleepTimerDate: number;
-  cancelSleepTimer: Callback;
 
   playbackSpeedName: string;
-  playbackSleepName: string;
 
   onPlaybackButtonPress: Callback;
   onRewindButtonPress: Callback;
@@ -73,7 +78,8 @@ type Props = {
   onSkipStart: Callback;
   onSkipLive: Callback;
   onSpeedButtonPress: Callback;
-  onSleepButtonPress: Callback;
+
+  maxWidth?: number;
 
   docked: boolean;
 };
@@ -86,11 +92,8 @@ export const Controls = (props: Props) => {
     value,
     title,
     summary,
-    sleepTimerDate,
-    cancelSleepTimer,
 
     playbackSpeedName,
-    playbackSleepName,
 
     onPlaybackButtonPress,
     onRewindButtonPress,
@@ -99,11 +102,26 @@ export const Controls = (props: Props) => {
     onSkipStart,
     onSkipLive,
     onSpeedButtonPress,
-    onSleepButtonPress,
+    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();
@@ -117,40 +135,6 @@ export const Controls = (props: Props) => {
     showFullControls = !!(controller?.hasSeekableDuration?.() && seekEnabled);
   }
 
-  const sleepTitle = value("playback_sleep_countdown_label");
-
-  const [timeLeft, setTimeLeft] = React.useState(
-    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
-  );
-
-  const showCounter = React.useMemo(() => sleepTimerDate > 0, [sleepTimerDate]);
-
-  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;
 
@@ -261,6 +245,7 @@ export const Controls = (props: Props) => {
         summary={summary}
         value={value}
         layoutState={layoutState}
+        maxWidth={maxWidth}
       />
 
       <VerticalGutter />
@@ -282,12 +267,11 @@ export const Controls = (props: Props) => {
             isDateBasedLiveContent={isDateBasedLiveContent}
             onSkipLive={onSkipLive}
             progressBarStyles={styles.progressBar}
+            thumbStyles={styles.progressBarThumbStyles}
+            thumbStylesPressed={styles.progressBarThumbStyles_pressed}
+            trackStyles={styles.progressBarTrackStyles}
           />
 
-          {showCounter && timeLeft >= 0 ? (
-            <CountDown timeLeft={timeLeft} value={value} title={sleepTitle} />
-          ) : null}
-
           <VerticalGutter />
         </>
       ) : null}
@@ -297,7 +281,9 @@ export const Controls = (props: Props) => {
         visible={true}
         keepAlive={null}
         buttons={controlButtons}
-        style={controlsStyles({ isTablet, isLiveShowFullControls })}
+        style={{
+          justifyContent: getControlJustifyContent(controlButtons().length),
+        }}
         playerState={playerState}
       />
     </AnimationComponent>

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

@@ -1,14 +1,7 @@
-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 ? undefined : 40;
+): number => (isLiveShowFullControls ? (isTablet ? 65 : 10) : undefined);
 
 export const playbackButton = ({
   playerState,
@@ -30,7 +23,7 @@ export const playbackButton = ({
       : "pause";
 
   return {
-    size: playbackButtonSize(isTablet),
+    size: "bigExtended",
     icon: playerState.isBuffering ? "buffering" : icon,
     preferredFocus: true,
     onPress,
@@ -52,10 +45,9 @@ type ButtonsByNameProps = ButtonsProps & { name?: string };
 const rewindButtonByName = ({
   name,
   onPress,
-  isTablet,
   style,
 }: ButtonsByNameProps): ControlsButton => ({
-  size: rewindButtonSize(isTablet),
+  size: "big",
   icon: name,
   onPress,
   style,
@@ -107,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/DockedControls/index.tsx

@@ -24,19 +24,23 @@ import {
   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";
+
+const bottomTabBarHeight = getTabBarHeight();
 
 type Props = {
   entry: ZappEntry;
   layoutState: QuickBrickPlayer.LayoutState;
   playerState: QuickBrickPlayer.PlayerState;
   value: GetValue;
-  configuration: QuickBrickPlayer.AudioPlayerProps["configuration"];
   dimensions: QuickBrickPlayer.AudioPlayerProps["dimensions"];
   onCloseVideoModal: () => void;
   onPlayerSeek: (targetTime: number) => void;
   playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
+  ImageComponent?: React.ReactNode;
 };
 
 const styles = StyleSheet.create({
@@ -53,6 +57,7 @@ const styles = StyleSheet.create({
   touchableArea: {
     flexShrink: 1,
     flex: 1,
+    flexDirection: "row",
     alignSelf: "stretch",
   },
   contentInfo: {
@@ -87,15 +92,11 @@ const styles = StyleSheet.create({
   },
 });
 
-const backgroundColorStyle = (value: GetValue): ViewStyle => ({
-  backgroundColor: value("docked_player_background_color"),
-});
-
 const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
 ): ViewStyle => ({
-  paddingLeft: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
+  width: addPadding ? toNumberWithDefault(100, minimisedHeight) : 0,
 });
 
 const animatedContainerStyle = (
@@ -181,13 +182,13 @@ export const DockedControls = (props: Props) => {
     layoutState,
     playerState,
     value,
-    configuration,
     dimensions,
     onCloseVideoModal,
     onPlayerSeek,
     playNextData,
     title,
     summary,
+    ImageComponent,
   } = props;
 
   const isTablet = useIsTablet();
@@ -207,6 +208,10 @@ export const DockedControls = (props: Props) => {
     []
   );
 
+  const dockedBackgroundColor = value("docked_player_background_color");
+
+  const insets = useSafeAreaInsets();
+
   if (!layoutState.docked && !startComponentsAnimation) return null;
 
   return (
@@ -218,7 +223,9 @@ export const DockedControls = (props: Props) => {
           isActiveGesture || layoutState.docked,
           progressBarHeight
         ),
-        { height: minimisedHeight },
+        {
+          height: minimisedHeight + bottomTabBarHeight + insets.bottom,
+        },
       ]}
     >
       {!playerState.isLive &&
@@ -245,19 +252,25 @@ export const DockedControls = (props: Props) => {
           )}
         />
         <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
@@ -273,7 +286,7 @@ export const DockedControls = (props: Props) => {
             isTablet
               ? styles.controlsContainerForTablet
               : styles.controlsContainerForMobile,
-            !configuration.magic_background && backgroundColorStyle(value),
+            { backgroundColor: dockedBackgroundColor },
           ]}
         >
           <Controls
@@ -295,6 +308,12 @@ export const DockedControls = (props: Props) => {
           />
         </View>
       </View>
+      <View
+        style={{
+          height: insets.bottom + bottomTabBarHeight,
+          backgroundColor: dockedBackgroundColor,
+        }}
+      />
     </AnimationComponent>
   );
 };

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

@@ -1,19 +1,24 @@
 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 { MOBILE } from "./const";
+import { MOBILE, NAVBAR_HEIGHT } from "./const";
 import { TransportInfo } from "./TransportInfo";
 import { PlayerImage } from "./PlayerImage";
 import { Controls } from "./Controls";
 
-import { useImageSize, useTransportInfoHeight } from "./hooks";
+import { useMobileLayoutImageSize, useTransportInfoHeight } from "./hooks";
 import { DockedControls } from "./DockedControls";
-import { withDebug } from "./debug";
+import { DEBUG, withDebug } from "./debug";
+import {
+  BottomDebugSquare,
+  LeftDebugSquare,
+  RightDebugSquare,
+} from "./Debug/index";
 
 import { Props } from "./types";
 
@@ -72,15 +77,11 @@ export function MobileLayout({
   onSkipStart,
   onSkipLive,
   onSpeedButtonPress,
-  onSleepButtonPress,
   onCloseVideoModal,
   playbackSpeedName,
-  playbackSleepName,
   configuration,
   dimensions,
   playNextData,
-  cancelSleepTimer,
-  sleepTimerDate,
   title,
   summary,
 }: Props) {
@@ -90,11 +91,27 @@ export function MobileLayout({
   const { height: screenHeight } = useSafeAreaFrame();
   const { progressBarHeight } = useModalAnimationContext();
 
-  const { imageSize, onLayout } = useImageSize({ isPortraitMode: true });
+  const { imageSize } = useMobileLayoutImageSize();
 
   const { height: transportInfoHeight, onLayout: onTransportInfoLayout } =
     useTransportInfoHeight();
 
+  const controlsContainerHeight = React.useMemo(() => {
+    return (
+      screenHeight -
+      topInset -
+      imageSize -
+      NAVBAR_HEIGHT -
+      MOBILE.MARGIN_BOTTOM -
+      MOBILE.MARGIN_TOP -
+      bottomInset
+    );
+  }, [screenHeight, topInset, imageSize, bottomInset]);
+
+  const verticalOffsetForImage = React.useMemo(() => {
+    return transportInfoHeight + MOBILE.MARGIN_TOP - progressBarHeight;
+  }, [transportInfoHeight, progressBarHeight]);
+
   return (
     <View
       style={[
@@ -107,6 +124,10 @@ export function MobileLayout({
         }),
       ]}
     >
+      {DEBUG ? <LeftDebugSquare /> : null}
+      {DEBUG ? <RightDebugSquare /> : null}
+      {DEBUG ? <BottomDebugSquare /> : null}
+
       {/* TransportInfo */}
       <TransportInfo
         entry={entry}
@@ -139,7 +160,6 @@ export function MobileLayout({
               }),
             },
           ]}
-          onLayout={onLayout}
         >
           <PlayerImage
             entry={entry}
@@ -155,20 +175,15 @@ export function MobileLayout({
             summary={summary}
             docked={docked}
             imageWidth={imageSize}
-            verticalOffset={
-              transportInfoHeight + MOBILE.MARGIN_TOP - progressBarHeight
-            }
+            verticalOffset={verticalOffsetForImage}
           />
         </View>
         {/* PlayerImage */}
 
         <View
-          style={[
-            styles.flex,
-            {
-              marginBottom: MOBILE.MARGIN_BOTTOM,
-            },
-          ]}
+          style={{
+            height: controlsContainerHeight,
+          }}
         >
           <Controls
             entry={entry}
@@ -177,10 +192,7 @@ export function MobileLayout({
             value={value}
             title={title}
             summary={summary}
-            sleepTimerDate={sleepTimerDate}
-            cancelSleepTimer={cancelSleepTimer}
             playbackSpeedName={playbackSpeedName}
-            playbackSleepName={playbackSleepName}
             onPlaybackButtonPress={onPlaybackButtonPress}
             onRewindButtonPress={onRewindButtonPress}
             onForwardButtonPress={onForwardButtonPress}
@@ -188,7 +200,6 @@ export function MobileLayout({
             onSkipStart={onSkipStart}
             onSkipLive={onSkipLive}
             onSpeedButtonPress={onSpeedButtonPress}
-            onSleepButtonPress={onSleepButtonPress}
             docked={docked}
           />
         </View>
@@ -199,7 +210,6 @@ export function MobileLayout({
         layoutState={layoutState}
         playerState={playerState}
         value={value}
-        configuration={configuration}
         dimensions={dimensions}
         onCloseVideoModal={onCloseVideoModal}
         onPlayerSeek={onPlayerSeek}

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

@@ -1,13 +1,16 @@
 import React, { PropsWithChildren } from "react";
-import { ImageBackground, Animated, StyleSheet } from "react-native";
+import { Image, Animated, StyleSheet, ImageStyle } from "react-native";
 
-import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
 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: {
@@ -19,47 +22,50 @@ const styles = StyleSheet.create({
 
 type Props = PropsWithChildren<{
   entry: ZappEntry;
-  style?: { [K: string]: any };
-  imageStyle?: { [K: string]: any };
+  style?: ImageStyle | ImageStyle[];
   imageWidth: number;
+  docked: boolean;
 }>;
 
-export const AnimatedImage = ({
-  entry,
-  style,
-  imageStyle,
-  imageWidth,
-}: Props) => {
+export const AnimatedImage = ({ entry, style, imageWidth, docked }: Props) => {
   const heightAnim = React.useRef(new Animated.Value(imageWidth)).current;
 
-  const source = React.useMemo(
-    () => ({ uri: imageSrcFromMediaItem(entry, undefined) }),
-    [entry]
-  );
+  const backgroundImageSource = useBackgroundImage(entry);
+
+  const { minimisedHeight } = useModalAnimationContext();
 
-  const { playerAnimationState, minimisedHeight } = useModalAnimationContext();
+  const changePlayerState$ = useChangePlayerState({ docked });
 
   React.useEffect(() => {
-    if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
-      Animated.timing(heightAnim, {
-        toValue: minimisedHeight,
-        duration: DURATION_TO_MINIMIZE,
-        useNativeDriver: false, // width/height can't use native driver
-      }).start();
+    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();
+        }
 
-      return;
-    }
+        if (nextPlayerState === PlayerAnimationStateEnum.maximize) {
+          Animated.timing(heightAnim, {
+            toValue: imageWidth,
+            duration: DURATION_TO_MAXIMIZE,
+            useNativeDriver: false, // width/height can't use native driver
+          }).start();
+        }
 
-    if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
-      Animated.timing(heightAnim, {
-        toValue: imageWidth,
-        duration: DURATION_TO_MAXIMIZE,
-        useNativeDriver: false, // width/height can't use native driver
-      }).start();
-    }
-  }, [playerAnimationState, imageWidth]);
+        if (nextPlayerState === PlayerAnimationStateEnum.appear_as_docked) {
+          // minimize image immediatly
+          heightAnim.setValue(minimisedHeight);
+        }
+      },
+    });
 
-  if (!source) return null;
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [changePlayerState$, minimisedHeight, imageWidth]);
 
   return (
     <Animated.View
@@ -70,14 +76,7 @@ export const AnimatedImage = ({
         },
       ]}
     >
-      <ImageBackground
-        resizeMode="cover"
-        style={style}
-        imageStyle={imageStyle}
-        source={source}
-      >
-        {null}
-      </ImageBackground>
+      <Image resizeMode="cover" style={style} source={backgroundImageSource} />
     </Animated.View>
   );
 };