@applicaster/quick-brick-player 13.0.0-alpha.2761483533 → 13.0.0-alpha.3013227535

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.2761483533",
+  "version": "13.0.0-alpha.3013227535",
   "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": "13.0.0-rc.23",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-alpha.2761483533",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.2761483533",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.2761483533",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.2761483533",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-rc.25",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.26",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.3013227535",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.3013227535",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.3013227535",
     "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,
@@ -189,7 +189,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 +200,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?.cancelSleepTimer();
+  }, [player, setSleepTimer, setSleepTimerDate]);
 
-      player?.startSleepTimer(futureSleepDate);
+  const startSleepTimer = useCallback(
+    (timerValue: number) => {
+      try {
+        const futureSleepDate = Date.now() + timerValue * 60000;
 
-      return futureSleepDate;
-    } catch (e) {
-      return 0;
-    }
-  };
+        player?.cancelSleepTimer?.();
 
-  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 +263,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 +300,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 +316,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 +334,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         NAMESPACE
       );
     },
-    [player, setSleepTimer]
+    [setSleepTimer, setSleepTimerDate, handleSleep]
   );
 
   const onSpeedButtonPress = React.useCallback(() => {
@@ -341,7 +349,13 @@ 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({
@@ -357,7 +371,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();

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

@@ -120,8 +120,8 @@ const Styles = {
       (startComponentsAnimation && isActiveGesture) || docked
         ? 0
         : isTablet
-        ? 24
-        : 10,
+          ? 24
+          : 10,
   }),
 
   paddingHorizontal: {

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

@@ -37,8 +37,8 @@ export const playbackButton = ({
   const icon = playerState.isPaused
     ? "play"
     : playerState.isLive && liveButton
-    ? "stop"
-    : "pause";
+      ? "stop"
+      : "pause";
 
   return {
     size: playbackButtonSize(isTablet),

package/src/Player/index.tsx

@@ -918,8 +918,8 @@ export default class VideoPlayer extends React.Component<
     const playerContainerStyles = isApplePlatform()
       ? styles.playerContainerBlack
       : isTV() && isAudioItem
-      ? styles.playerContainerTransparent
-      : styles.playerContainerBlack;
+        ? styles.playerContainerTransparent
+        : styles.playerContainerBlack;
 
     const isInline = () => {
       if (isTV()) {