@applicaster/quick-brick-player 12.0.4 → 12.0.5-alpha.1340200034

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "12.0.4",
+  "version": "12.0.5-alpha.1340200034",
   "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.4",
+    "@applicaster/quick-brick-mobile-transport-controls": "12.0.5-rc.0",
     "@applicaster/quick-brick-tv-transport-controls": "12.0.4",
-    "@applicaster/zapp-react-native-tvos-app": "12.0.4",
-    "@applicaster/zapp-react-native-ui-components": "12.0.4",
-    "@applicaster/zapp-react-native-utils": "12.0.4",
+    "@applicaster/zapp-react-native-tvos-app": "12.0.5-alpha.1340200034",
+    "@applicaster/zapp-react-native-ui-components": "12.0.5-alpha.1340200034",
+    "@applicaster/zapp-react-native-utils": "12.0.5-alpha.1340200034",
     "keymirror": "^0.1.1",
     "query-string": "7.1.3",
     "react-native-web-linear-gradient": "1.1.2",

package/src/Player/AudioLayer/AudioPlayerWrapper.tsx

@@ -15,7 +15,7 @@ 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 { useCallback, useEffect, useState } from "react";
 import { MagicBG } from "./MagicBG";
 import {
   formatSpeed,
@@ -33,6 +33,13 @@ import {
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PADDING_HORIZONTAL } from "./Layout/defaultLayoutsConts";
 import { toNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+import {
+  speed_0_8,
+  speed_1,
+  speed_1_2,
+  speed_1_5,
+  speed_2,
+} from "@applicaster/quick-brick-mobile-transport-controls";
 
 const { log_debug } = createLogger({
   subsystem: "UIComponent",
@@ -132,11 +139,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   } = 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 },
+    { asset: configuration["speed_0_8"] || speed_0_8, value: 0.8 },
+    { asset: configuration["speed_1"] || speed_1, value: 1.0 },
+    { asset: configuration["speed_1_2"] || speed_1_2, value: 1.2 },
+    { asset: configuration["speed_1_5"] || speed_1_5, value: 1.5 },
+    { asset: configuration["speed_2"] || speed_2, value: 2.0 },
   ];
 
   const isTablet = useIsTablet();
@@ -189,7 +196,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     if (!defaultDimensions) setDefaultDimensions({ width, height });
   };
 
-  const cancelSleepTimer = async () => {
+  const cancelSleepTimer = useCallback(async () => {
     player?.cancelSleepTimer();
 
     setSleepTimer({
@@ -200,46 +207,47 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     setSleepTimerDate(0);
 
     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, setSleepTimer, setSleepTimerDate]);
 
-      player?.cancelSleepTimer();
+  const startSleepTimer = useCallback(
+    (timerValue: number) => {
+      try {
+        const futureSleepDate = Date.now() + timerValue * 60000;
 
-      player?.startSleepTimer(futureSleepDate);
+        player?.cancelSleepTimer?.();
 
-      return futureSleepDate;
-    } catch (e) {
-      return 0;
-    }
-  };
-
-  const handleSleep = async (
-    timerValue: number,
-    currentFutureSleepDate = null
-  ) => {
-    if (currentFutureSleepDate) {
-      if (hasDatePassed(currentFutureSleepDate)) {
-        await cancelSleepTimer();
+        player?.startSleepTimer?.(futureSleepDate);
 
+        return futureSleepDate;
+      } catch (e) {
         return 0;
       }
+    },
+    [player]
+  );
 
-      return currentFutureSleepDate;
-    }
+  const handleSleep = useCallback(
+    async (timerValue: number, currentFutureSleepDate = null) => {
+      if (currentFutureSleepDate) {
+        if (hasDatePassed(currentFutureSleepDate)) {
+          await cancelSleepTimer();
 
-    if (timerValue === 0) {
-      await cancelSleepTimer();
+          return 0;
+        }
 
-      return timerValue;
-    }
+        return currentFutureSleepDate;
+      }
 
-    return startSleepTimer(timerValue);
-  };
+      if (timerValue === 0) {
+        await cancelSleepTimer();
+
+        return timerValue;
+      }
+
+      return startSleepTimer(timerValue);
+    },
+    [startSleepTimer, cancelSleepTimer]
+  );
 
   useEffect(() => {
     const loadSpeed = async () => {
@@ -262,9 +270,16 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
       }
     };
 
-    loadSpeed().then();
-    loadSleep().then();
-  }, [playerState.isReadyToPlay]);
+    void loadSpeed();
+    void loadSleep();
+  }, [
+    playerState.isReadyToPlay,
+    handleSleep,
+    setSleepTimer,
+    setSleepTimerDate,
+    setPlaybackSpeed,
+    player,
+  ]);
 
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
@@ -292,7 +307,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
 
   const onPlaybackButtonPress = React.useCallback(() => {
     if (playerState.isBuffering) return;
-    playerState.isPaused ? player?.play() : player.pause();
+    playerState.isPaused ? player?.play() : player?.pause();
   }, [playerState, player]);
 
   const seekDuration = toNumberWithDefault(10, value("seek_duration"));
@@ -308,7 +323,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   const onSpeedSelect = React.useCallback(
     async (item) => {
       setPlaybackSpeed(item);
-      player.setPlaybackRate(item.value);
+      player?.setPlaybackRate(item.value);
       await localStorage.setItem("speed", item, NAMESPACE);
     },
     [player, setPlaybackSpeed]
@@ -326,7 +341,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         NAMESPACE
       );
     },
-    [player, setSleepTimer]
+    [setSleepTimer, setSleepTimerDate, handleSleep]
   );
 
   const onSpeedButtonPress = React.useCallback(() => {
@@ -341,13 +356,22 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [playbackSpeed, setPlaybackSpeed]);
+  }, [
+    playbackSpeed,
+    setPlaybackSpeed,
+    navigator,
+    onSpeedSelect,
+    configuration["playback_speed_title"],
+  ]);
 
   const onSleepButtonPress = React.useCallback(() => {
     navigator.openModalBottomSheet({
       modalBottomSheetContentProps: {
         items: [
-          { label: configuration["playback_sleep_off_label"], value: 0 },
+          {
+            label: configuration["playback_sleep_off_label"],
+            value: 0,
+          },
         ].concat(sleeps),
         current_selection: sleepTimer,
         onPress: onSleepSelect,
@@ -357,7 +381,13 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [sleepTimer, setSleepTimer, configuration]);
+  }, [
+    navigator,
+    sleepTimer,
+    configuration["playback_sleep_title"],
+    configuration["playback_sleep_off_label"],
+    onSleepSelect,
+  ]);
 
   const onCloseVideoModal = React.useCallback(() => {
     playerManager.close();