@applicaster/quick-brick-player 12.0.0-alpha.6602834797 → 12.0.0-alpha.7101461483

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.0-alpha.6602834797",
+  "version": "12.0.0-alpha.7101461483",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -36,11 +36,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-alpha.6602834797",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.0-alpha.7101461483",
     "@applicaster/quick-brick-tv-transport-controls": "11.0.0-rc.133",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.6602834797",
-    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.6602834797",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.6602834797",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.0-alpha.7101461483",
+    "@applicaster/zapp-react-native-ui-components": "12.0.0-alpha.7101461483",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.7101461483",
     "keymirror": "^0.1.1",
     "react-native-web-linear-gradient": "1.1.2",
     "shaka-player": "4.3.5",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -15,7 +15,15 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { PlayerDetails } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/PlayerDetails";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useEffect, useState } from "react";
 import { MagicBG } from "./MagicBG";
+import {
+  formatSpeed,
+  hasDatePassed,
+  loadItemsFromStorage,
+  NAMESPACE,
+} from "./utils";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -96,6 +104,17 @@ const Styles = {
   },
 };
 
+const sleeps = [
+  // { label: "End of episode", value: "episode" },
+  { label: "5 minutes", value: 5 },
+  { label: "10 minutes", value: 10 },
+  { label: "15 minutes", value: 15 },
+  { label: "30 minutes", value: 30 },
+  { label: "45 minutes", value: 45 },
+  { label: "1 hour", value: 60 },
+  { label: "2 hours", value: 120 },
+];
+
 export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const player = usePlayer();
   const playerState = usePlayerState("audio-player-wrapper");
@@ -111,15 +130,37 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     isTabletPortrait,
   } = props;
 
+  const speeds = [
+    { asset: configuration["speed_0_8"], value: 0.8 },
+    { asset: configuration["speed_1"], value: 1.0 },
+    { asset: configuration["speed_1_2"], value: 1.2 },
+    { asset: configuration["speed_1_5"], value: 1.5 },
+    { asset: configuration["speed_2"], value: 2.0 },
+  ];
+
   const isTablet = useIsTablet();
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
+  const [playbackSpeed, setPlaybackSpeed] = useState({
+    asset: configuration["speed_1"],
+    value: 1.0,
+  });
+
+  const [sleepTimer, setSleepTimer] = useState({
+    label: "playback_sleep_off_label",
+    value: 0,
+  });
+
+  const [sleepTimerDate, setSleepTimerDate] = useState(0);
+
   const [dimensions, setDimensions] = React.useState<Dimensions>({
     width: 0,
     height: 0,
   });
 
+  const navigator = useNavigation();
+
   const { maximiseVideoModal } = useNavigation();
 
   const onLayout = (event: any) => {
@@ -131,6 +172,84 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     });
   };
 
+  const cancelSleepTimer = async () => {
+    player?.cancelSleepTimer();
+
+    setSleepTimer({
+      label: "playback_sleep_off_label",
+      value: 0,
+    });
+
+    setSleepTimerDate(0);
+    player?.pause();
+
+    await localStorage.removeItem("sleep", NAMESPACE);
+  };
+
+  const startSleepTimer = (timerValue: number) => {
+    try {
+      const currentDate = new Date();
+      const futureDate = new Date(currentDate.getTime() + timerValue * 60000);
+      const futureSleepDate = futureDate.getTime();
+
+      player?.cancelSleepTimer();
+
+      player?.startSleepTimer(futureSleepDate);
+
+      return futureSleepDate;
+    } catch (e) {
+      return 0;
+    }
+  };
+
+  const handleSleep = async (
+    timerValue: number,
+    currentFutureSleepDate = null
+  ) => {
+    if (currentFutureSleepDate) {
+      if (hasDatePassed(currentFutureSleepDate)) {
+        await cancelSleepTimer();
+
+        return 0;
+      }
+
+      return currentFutureSleepDate;
+    }
+
+    if (timerValue === 0) {
+      await cancelSleepTimer();
+
+      return timerValue;
+    }
+
+    return startSleepTimer(timerValue);
+  };
+
+  useEffect(() => {
+    const loadSpeed = async () => {
+      const speed = await loadItemsFromStorage("speed");
+
+      if (playerState.isReadyToPlay && speed) {
+        setPlaybackSpeed(speed);
+        player?.setPlaybackRate(speed.value);
+      }
+    };
+
+    const loadSleep = async () => {
+      const sleep = await loadItemsFromStorage("sleep");
+
+      if (playerState.isReadyToPlay && sleep) {
+        const { futureSleepDate, ...rest } = sleep;
+        setSleepTimer(rest);
+        const sleepTimerDate = await handleSleep(sleep.value, futureSleepDate);
+        setSleepTimerDate(sleepTimerDate);
+      }
+    };
+
+    loadSpeed().then();
+    loadSleep().then();
+  }, [playerState.isReadyToPlay]);
+
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
 
@@ -170,6 +289,60 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     player?.forward(seekDuration);
   }, [seekDuration, player]);
 
+  const onSpeedSelect = React.useCallback(
+    async (item) => {
+      setPlaybackSpeed(item);
+      player.setPlaybackRate(item.value);
+      await localStorage.setItem("speed", item, NAMESPACE);
+    },
+    [player, setPlaybackSpeed]
+  );
+
+  const onSleepSelect = React.useCallback(
+    async (item) => {
+      setSleepTimer(item);
+      const futureSleepDate = await handleSleep(item.value);
+      setSleepTimerDate(futureSleepDate);
+
+      await localStorage.setItem(
+        "sleep",
+        { ...item, futureSleepDate },
+        NAMESPACE
+      );
+    },
+    [player, setSleepTimer]
+  );
+
+  const onSpeedButtonPress = React.useCallback(() => {
+    navigator.openModalBottomSheet({
+      modalBottomSheetContentProps: {
+        items: speeds,
+        current_selection: playbackSpeed,
+        onPress: onSpeedSelect,
+        title: configuration["playback_speed_title"],
+      },
+      options: {
+        supportedOrientations: ["portrait"],
+      },
+    });
+  }, [playbackSpeed, setPlaybackSpeed]);
+
+  const onSleepButtonPress = React.useCallback(() => {
+    navigator.openModalBottomSheet({
+      modalBottomSheetContentProps: {
+        items: [
+          { label: configuration["playback_sleep_off_label"], value: 0 },
+        ].concat(sleeps),
+        current_selection: sleepTimer,
+        onPress: onSleepSelect,
+        title: configuration["playback_sleep_title"],
+      },
+      options: {
+        supportedOrientations: ["portrait"],
+      },
+    });
+  }, [sleepTimer, setSleepTimer, configuration]);
+
   const onCloseVideoModal = React.useCallback(() => {
     playerManager.close();
   }, [playerManager]);
@@ -213,6 +386,14 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
             onForwardButtonPress={onForwardButtonPress}
             onPlayerSeek={onPlayerSeek}
             onSkipStart={onSkipStart}
+            onSpeedButtonPress={onSpeedButtonPress}
+            onSleepButtonPress={onSleepButtonPress}
+            playbackSpeedName={formatSpeed(playbackSpeed.value)}
+            playbackSleepName={
+              sleepTimer.value === 0 ? "sleep_timer" : "sleep_timer_active"
+            }
+            sleepTimerDate={sleepTimerDate}
+            cancelSleepTimer={cancelSleepTimer}
             onSkipLive={onSkipLive}
             onCloseVideoModal={onCloseVideoModal}
             maximiseVideoModal={maximiseVideoModal}
@@ -252,6 +433,8 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     playNextData,
     onSkipStart,
     onSkipLive,
+    sleepTimer.value,
+    sleepTimerDate,
   ]);
 
   if (configuration.magic_background) {

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

@@ -6,21 +6,25 @@ 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,
+  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 { useEffect, useMemo, useState } from "react";
 
 type Dimensions = {
   width: number;
@@ -42,11 +46,17 @@ 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;
@@ -68,8 +78,8 @@ const Styles = {
   },
   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) => {
     return {
@@ -117,8 +127,14 @@ export default function DefaultLayout(props: LayoutProps) {
     onPlayerSeek,
     onSkipStart,
     onSkipLive,
+    onSpeedButtonPress,
+    onSleepButtonPress,
+    playbackSpeedName,
+    playbackSleepName,
     configuration,
     dimensions,
+    cancelSleepTimer,
+    sleepTimerDate,
   } = props;
 
   const isTablet = useIsTablet();
@@ -128,8 +144,15 @@ export default function DefaultLayout(props: LayoutProps) {
 
   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");
+
+  const [timeLeft, setTimeLeft] = useState(
+    sleepTimerDate !== 0 ? sleepTimerDate - Date.now() : 0
+  );
 
   let showFullControls =
     controller?.hasContentDuration?.() && !controller?.isAd();
@@ -166,6 +189,18 @@ export default function DefaultLayout(props: LayoutProps) {
     const rewind = rewindButton({ isTablet, onPress: onRewindButtonPress });
     const forward = forwardButton({ isTablet, onPress: onForwardButtonPress });
 
+    const speed = speedButton({
+      isTablet,
+      onPress: onSpeedButtonPress,
+      name: playbackSpeedName,
+    });
+
+    const sleep = sleepButton({
+      isTablet,
+      onPress: onSleepButtonPress,
+      name: playbackSleepName,
+    });
+
     if (isLiveContent) {
       const skipToStart = skipToStartButton({
         isTablet,
@@ -180,7 +215,8 @@ export default function DefaultLayout(props: LayoutProps) {
       return [skipToStart, rewind, play, forward, skipToLive];
     }
 
-    return [rewind, play, forward];
+    // Temporary empty button until we add sleep button. It will ensure the buttons will not break in their position
+    return [speed, rewind, play, forward, sleep];
   }, [
     playerState,
     liveButton,
@@ -188,12 +224,47 @@ export default function DefaultLayout(props: LayoutProps) {
     onPlaybackButtonPress,
     onRewindButtonPress,
     onForwardButtonPress,
+    onSpeedButtonPress,
     showFullControls,
     onSkipStart,
     onSkipLive,
     isLiveContent,
+    playbackSpeedName,
+    playbackSleepName,
   ]);
 
+  useEffect(() => {
+    if (showCounter && sleepTimerDate !== 0) {
+      // Setting the initial timeLeft based on sleepTimerDate
+      setTimeLeft(sleepTimerDate - Date.now());
+
+      // Setting up an interval to update the remaining time every second
+      const intervalId = setInterval(() => {
+        setTimeLeft(() => {
+          const newTimeLeft = sleepTimerDate - Date.now();
+
+          // If the new remaining time is less than or equal to 0, clear the interval and trigger the cancelSleepTimer function
+          if (newTimeLeft <= 0) {
+            clearInterval(intervalId);
+
+            cancelSleepTimer();
+
+            return 0;
+          } else {
+            // Otherwise, update the state with the new remaining time
+            return newTimeLeft;
+          }
+        });
+      }, 1000);
+
+      // Clearing the interval when the component unmounts or dependencies change
+      return () => clearInterval(intervalId);
+    } else {
+      // Ensure the timeLeft state is set correctly if showCounter is false
+      setTimeLeft(0);
+    }
+  }, [sleepTimerDate, showCounter, cancelSleepTimer]);
+
   const Separator = () => <View style={Styles.separator} />;
 
   const liveSeekingEnabled = value("liveSeekingEnabled");
@@ -222,7 +293,6 @@ export default function DefaultLayout(props: LayoutProps) {
       >
         <View style={isTablet ? Styles.tabletLayout : null}>
           <PlayerImageBackground
-            configuration={configuration}
             entry={entry}
             style={Styles.backgroundImageContainer(dimensions, isTablet)}
             imageStyle={Styles.backgroundImageContainerImageStyle(isTablet)}
@@ -245,6 +315,15 @@ export default function DefaultLayout(props: LayoutProps) {
                 disableFullscreen={true}
                 sliderStyle={2}
               />
+
+              {showCounter && timeLeft >= 0 && (
+                <CountDown
+                  timeLeft={timeLeft}
+                  value={value}
+                  title={sleepTitle}
+                />
+              )}
+
               <Separator />
             </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,
@@ -198,9 +198,7 @@ export default function DockedLayout(props: LayoutProps) {
     playNextData,
   } = props;
 
-  const {
-    deviceInfo: { isTablet },
-  } = useDimensions("screen", { deviceInfo: true });
+  const isTablet = useIsTablet();
 
   const visible = true;
   const liveButton = Boolean(value("live_badge_enabled"));

package/src/Player/AudioLayer/Layout/defaultLayoutsConts.ts

@@ -53,8 +53,9 @@ type ButtonsProps = {
   onPress: () => void;
   isTablet: boolean;
   style?: any;
+  name?: string;
 };
-type ButtonsByNameProps = ButtonsProps & { name: string };
+type ButtonsByNameProps = ButtonsProps & { name?: string };
 
 const rewindButtonByName = ({
   name,
@@ -79,6 +80,28 @@ const skipButtonByName = ({
   style,
 });
 
+const speedButtonByName = ({
+  name = "speed_1",
+  onPress,
+  style,
+}: ButtonsByNameProps): ControlsButton => ({
+  size: "small",
+  icon: name,
+  onPress,
+  style,
+});
+
+const sleepButtonByName = ({
+  name = "sleep_timer",
+  onPress,
+  style,
+}: ButtonsByNameProps): ControlsButton => ({
+  size: "small",
+  icon: name,
+  onPress,
+  style,
+});
+
 export const rewindButton = (props: ButtonsProps): ControlsButton =>
   rewindButtonByName({ ...props, name: "rewind" });
 
@@ -90,3 +113,9 @@ export const skipToStartButton = (props: ButtonsProps): ControlsButton =>
 
 export const skipToLiveButton = (props: ButtonsProps): ControlsButton =>
   skipButtonByName({ ...props, name: "skip_live" });
+
+export const speedButton = (props: ButtonsProps): ControlsButton =>
+  speedButtonByName({ ...props });
+
+export const sleepButton = (props: ButtonsProps): ControlsButton =>
+  sleepButtonByName({ ...props });

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

@@ -24,11 +24,17 @@ type LayoutProps = {
     isBuffering: boolean;
   };
   value: GetValue;
+  sleepTimerDate: number;
+  playbackSpeedName: string;
+  playbackSleepName: string;
   configuration: { [key: string]: any };
   onPlaybackButtonPress: () => void;
   onRewindButtonPress: () => void;
   onForwardButtonPress: () => void;
+  onSpeedButtonPress: () => void;
+  onSleepButtonPress: () => void;
   onCloseVideoModal: () => void;
+  cancelSleepTimer: () => void;
   onPlayerSeek: (targetTime: number) => void;
   onSkipStart: () => void;
   onSkipLive: () => void;

package/src/Player/AudioLayer/utils.ts

@@ -0,0 +1,33 @@
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { parseJsonIfNeeded } from "@applicaster/zapp-react-native-utils/functionUtils";
+
+export const NAMESPACE = "audio-player";
+
+export async function loadItemsFromStorage(key: string) {
+  const storedItems = await localStorage.getItem(key, NAMESPACE);
+
+  return parseJsonIfNeeded(storedItems) || null;
+}
+
+export const hasDatePassed = (timestamp: number) => {
+  // Get the current date and time
+  const currentDate = new Date();
+
+  // Compare the current date's timestamp with the given timestamp
+  return currentDate.getTime() > timestamp;
+};
+
+export const formatSpeed = (value: number) => {
+  let formattedValue = value.toString();
+
+  // If the value ends with ".0", remove it
+  if (formattedValue.endsWith(".0")) {
+    formattedValue = formattedValue.slice(0, -2);
+  }
+
+  // Replace "." with "_"
+  formattedValue = formattedValue.replace(".", "_");
+
+  // Return the formatted string with "speed_" prefix
+  return `speed_${formattedValue}`;
+};

package/src/Player/index.tsx

@@ -87,7 +87,7 @@ export default class VideoPlayer extends React.Component<
     // TODO: Can be deleted, on controller logic
     paused: false,
     piped: false,
-    rate: 1,
+    rate: 1.0,
     // TODO: Hack for analytics, must br removed
     resume: null,
 
@@ -368,6 +368,10 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
+  setPlaybackRate = (rate = 1.0) => {
+    this.setState({ rate });
+  };
+
   getCurrentTime = () => {
     return this.state.currentTime;
   };
@@ -767,7 +771,8 @@ export default class VideoPlayer extends React.Component<
       style,
     } = this.props;
 
-    const { audioTrackId, keyEvent, paused, seek, textTrackId } = this.state;
+    const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
+      this.state;
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
@@ -839,6 +844,7 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
+      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -1005,10 +1011,12 @@ export default class VideoPlayer extends React.Component<
       inline,
       docked,
       isModal,
+      pip: this.state.piped,
       layoutState: {
         inline,
         docked,
         isModal,
+        pip: this.state.piped,
       },
       configuration: this.getPluginConfiguration(),
       fullscreen: fullscreen,
@@ -1085,6 +1093,7 @@ export default class VideoPlayer extends React.Component<
                       listener={this.props.listener}
                       style={getStyle(playerDimensions)}
                       pluginConfiguration={this.getPluginConfiguration()}
+                      controller={this.props.controller}
                     >
                       {this.childrenWithPlayNext()}
                     </this.props.PlayerComponent>
@@ -1121,6 +1130,7 @@ export default class VideoPlayer extends React.Component<
             listener={this.props.listener}
             style={this.takeParentStyle}
             pluginConfiguration={this.getPluginConfiguration()}
+            controller={this.props.controller}
           >
             {this.childrenWithPlayNext()}
           </this.props.PlayerComponent>