@applicaster/quick-brick-player 13.0.0-alpha.2060875348 → 13.0.0-alpha.2082004638

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.2060875348",
+  "version": "13.0.0-alpha.2082004638",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
   "scripts": {
-    "test": "jest -w=2",
     "build": "echo 'skipping ts build for core packages'"
   },
   "files": [
@@ -36,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.2060875348",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.46",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.2060875348",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.2060875348",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.2060875348",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.2082004638",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.56",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.2082004638",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.2082004638",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.2082004638",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",
@@ -61,11 +60,8 @@
     "@applicaster/zapp-react-native-tvos-ui-components": "*",
     "@babel/runtime": "*",
     "@react-native-community/netinfo": "*",
-    "@types/node": "*",
-    "@types/react-native": "0.69.6",
     "immer": "*",
     "react": "*",
-    "react-hot-loader": "*",
     "react-native": "*",
     "react-native-fs": "*",
     "react-native-gesture-handler": "*",

package/src/Player/AudioLayer/AudioDescription.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Text, TextStyle, View } from "react-native";
+import { Text, TextStyle, View, StyleSheet } from "react-native";
 import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
 
 type AudioDescriptionProps = {
@@ -13,7 +13,9 @@ type AudioDescriptionProps = {
   value: GetValue;
 };
 
-const containerStyles = { paddingTop: 32, paddingBottom: 12 };
+const styles = StyleSheet.create({
+  container: {},
+});
 
 const titleStyles = (value: GetValue, prefix: string): TextStyle => ({
   textAlign: "left",
@@ -83,11 +85,11 @@ export const AudioDescription = (props: AudioDescriptionProps) => {
   const prefix = layoutState.docked ? "docked_player_" : "";
 
   return (
-    <View style={containerStyles}>
+    <View style={styles.container}>
       <Text style={titleStyles(value, prefix)} numberOfLines={1}>
         {title}
       </Text>
-      <Text style={summaryStyles(value, prefix)} numberOfLines={2}>
+      <Text style={summaryStyles(value, prefix)} numberOfLines={1}>
         {summary}
       </Text>
     </View>

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -25,7 +25,7 @@ import {
   ComponentAnimationType,
   AnimatedScrollModal,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
-import { PADDING_HORIZONTAL } from "./Layout/defaultLayoutsConts";
+import { PADDING_HORIZONTAL } from "./Layout/const";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import {
   speed_0_8,
@@ -41,6 +41,7 @@ import {
 } from "./SleepTimerManager";
 import { SpeedController, PlaybackSpeed, DEFAULT_SPEED } from "./SpeedManager";
 import { imageSrcFromMediaItem } from "@applicaster/zapp-react-native-utils/configurationUtils";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -58,6 +59,7 @@ type Configuration = {
   [key: string]: any;
   magic_background?: boolean;
   audio_player_background_image_query?: string;
+  audio_player_background_image_default_color?: string;
   tablet_landscape_sidebar_width?: string;
   tablet_landscape_player_container_background_color?: string;
 };
@@ -127,9 +129,12 @@ const sleeps = [
   { label: "2 hours", value: 120 },
 ];
 
+const edges: Edge[] = ["right", "left", "top"];
+
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
+  const theme = useTheme();
 
   const {
     docked,
@@ -359,13 +364,9 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.seekTo(0);
   }, [player]);
 
-  const edges = React.useMemo<Edge[]>(() => ["right", "left", "top"], [docked]);
-
-  const ContainerView = SafeAreaView;
-
   const MainContent = React.useMemo(() => {
     return (
-      <ContainerView style={Styles.mainContainer(style)} edges={edges}>
+      <SafeAreaView style={Styles.mainContainer(style)} edges={edges}>
         <AnimationComponent
           animationType={ComponentAnimationType.moveUpComponent}
           additionalData={{ saveArea: true }}
@@ -420,7 +421,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
             </View>
           </AnimatedScrollModal>
         </AnimationComponent>
-      </ContainerView>
+      </SafeAreaView>
     );
   }, [
     docked,
@@ -451,16 +452,21 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     const queryParamName =
       configuration.audio_player_background_image_query || "width";
 
+    const defaultBackgroundColor =
+      configuration.audio_player_background_image_default_color ||
+      theme?.app_background_color;
+
     const queryParamValue = 15;
 
-    const url = addQueryParam(baseUrl, queryParamName, queryParamValue);
+    const url =
+      baseUrl && addQueryParam(baseUrl, queryParamName, queryParamValue);
 
     return (
       <MagicBG
         image={url}
         fallbackUrl={baseUrl}
         colors={entry?.extensions?.backgroundColors}
-        defaultColor="#000000"
+        defaultColor={defaultBackgroundColor}
       >
         {MainContent}
       </MagicBG>

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import { TABLET_VERTICAL_SEPARATOR_HEIGHT } from "../const";
+
+import { withDebug } from "../debug";
+
+const styles = StyleSheet.create({
+  flexingHeight: {
+    flex: 1,
+
+    ...withDebug({ backgroundColor: "red" }),
+  },
+  fixedHeight: {
+    height: TABLET_VERTICAL_SEPARATOR_HEIGHT,
+    ...withDebug({ backgroundColor: "red" }),
+  },
+});
+
+export const VerticalGutter = () => {
+  const isTablet = useIsTablet();
+
+  return <View style={isTablet ? styles.fixedHeight : styles.flexingHeight} />;
+};

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

@@ -0,0 +1,307 @@
+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,
+  CountDown,
+  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 { PlayerState, LayoutState } from "../types";
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  nonFlex: {
+    flex: 0,
+  },
+  progressBar: {
+    flex: 0,
+  },
+});
+
+const controlsStyles = ({
+  isTablet,
+  isLiveShowFullControls,
+}: {
+  isTablet: boolean;
+  isLiveShowFullControls: boolean;
+}) => ({
+  height: isTablet ? undefined : 50,
+  marginHorizontal: isTablet ? undefined : 10,
+  justifyContent: isLiveShowFullControls ? "space-between" : "space-evenly",
+});
+
+type Props = {
+  entry: ZappEntry;
+  layoutState: LayoutState;
+  playerState: PlayerState;
+  value: GetValue;
+  title: string | number;
+  summary: string | number;
+  sleepTimerDate: number;
+  cancelSleepTimer: () => void;
+
+  playbackSpeedName: string;
+  playbackSleepName: string;
+
+  onPlaybackButtonPress: () => void;
+  onRewindButtonPress: () => void;
+  onForwardButtonPress: () => void;
+  onPlayerSeek: (targetTime: number) => void;
+  onSkipStart: () => void;
+  onSkipLive: () => void;
+  onSpeedButtonPress: () => void;
+  onSleepButtonPress: () => void;
+
+  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,
+
+    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 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;
+
+  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}
+      />
+
+      <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}
+          />
+
+          {showCounter && timeLeft >= 0 ? (
+            <CountDown timeLeft={timeLeft} value={value} title={sleepTitle} />
+          ) : null}
+
+          <VerticalGutter />
+        </>
+      ) : null}
+
+      <MobileTransportControls
+        value={value}
+        visible={true}
+        keepAlive={null}
+        buttons={controlButtons}
+        style={controlsStyles({ isTablet, isLiveShowFullControls })}
+        playerState={playerState}
+      />
+    </AnimationComponent>
+  );
+};

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

@@ -1,11 +1,4 @@
-type PlayerState = {
-  currentTime: number;
-  duration: number;
-  seekableDuration: number;
-  isLive: boolean;
-  isPaused: boolean;
-  isBuffering: boolean;
-};
+import { PlayerState } from "../types";
 
 const rewindButtonSize = (isTablet: boolean): keyof ButtonSizeStyles =>
   isTablet ? "big" : "smallMargins";
@@ -17,9 +10,7 @@ const playbackButtonMargins = (
   isTablet: boolean,
   isLiveShowFullControls: boolean
 ): number =>
-  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? 95 : 40;
-
-export const PADDING_HORIZONTAL = 15;
+  isLiveShowFullControls ? (isTablet ? 65 : 10) : isTablet ? undefined : 40;
 
 export const playbackButton = ({
   playerState,
@@ -57,6 +48,7 @@ type ButtonsProps = {
   style?: any;
   name?: string;
 };
+
 type ButtonsByNameProps = ButtonsProps & { name?: string };
 
 const rewindButtonByName = ({

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

@@ -22,36 +22,19 @@ import {
   PlayerAnimationStateEnum,
   useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
-type Dimensions = {
-  width: number;
-  height: number;
-};
+import { LayoutState, PlayerState, Configuration, DimensionsT } from "../types";
 
-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: LayoutState;
+  playerState: PlayerState;
   value: GetValue;
-  configuration: { [key: string]: any };
-  onPlaybackButtonPress: () => void;
-  onRewindButtonPress: () => void;
-  onForwardButtonPress: () => void;
-  onPlayerSeek: (targetTime: number) => void;
+  configuration: Configuration;
+  dimensions: DimensionsT;
   onCloseVideoModal: () => void;
-  maximiseVideoModal: () => void;
-  dimensions: Dimensions;
+  onPlayerSeek: (targetTime: number) => void;
   playNextData: PlayNextData;
   title: string | number;
   summary: string | number;
@@ -113,17 +96,21 @@ const playerDimensionsStyle = (
   minimisedHeight: number,
   addPadding: boolean
 ): ViewStyle => ({
-  paddingLeft: addPadding ? minimisedHeight || 100 : 0,
+  paddingLeft: 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: DimensionsT,
   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,16 +176,16 @@ const controlButtons = (
   ];
 };
 
-export default function DockedLayout(props: LayoutProps) {
+export const DockedControls = (props: Props) => {
   const {
+    entry,
     layoutState,
+    playerState,
     value,
+    configuration,
     dimensions,
-    entry,
     onCloseVideoModal,
     onPlayerSeek,
-    playerState,
-    configuration,
     playNextData,
     title,
     summary,
@@ -219,7 +193,6 @@ export default function DockedLayout(props: LayoutProps) {
 
   const isTablet = useIsTablet();
 
-  const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));
 
   const {
@@ -227,10 +200,11 @@ export default function DockedLayout(props: LayoutProps) {
     setPlayerAnimationState,
     startComponentsAnimation,
     minimisedHeight,
+    progressBarHeight,
   } = useModalAnimationContext();
 
   const maximazeVideoModal = React.useCallback(
-    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximaze),
+    () => setPlayerAnimationState(PlayerAnimationStateEnum.maximize),
     []
   );
 
@@ -241,15 +215,19 @@ export default function DockedLayout(props: LayoutProps) {
       animationType={ComponentAnimationType.componentAppears}
       style={[
         styles.container,
-        animatedContainerStyle(isActiveGesture || layoutState.docked),
+        animatedContainerStyle(
+          isActiveGesture || layoutState.docked,
+          progressBarHeight
+        ),
       ]}
     >
       {!playerState.isLive &&
       (layoutState.docked || startComponentsAnimation) ? (
         <ProgressBar
+          name={"audio-docked-layout"}
           content={entry}
           value={value}
-          visible={visible}
+          visible
           layoutState={layoutState}
           onPlayerSeek={onPlayerSeek}
           playerState={playerState}
@@ -300,9 +278,8 @@ export default function DockedLayout(props: LayoutProps) {
         >
           <Controls
             value={value}
-            visible={visible}
+            visible
             buttons={R.partial(controlButtons, [
-              playNextData,
               playerState.isLive && liveButton,
             ])}
             style={styles.playPauseButton}
@@ -320,4 +297,4 @@ export default function DockedLayout(props: LayoutProps) {
       </View>
     </AnimationComponent>
   );
-}
+};