@applicaster/quick-brick-player 13.0.0-alpha.5004843012 → 13.0.0-alpha.5112402674

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "13.0.0-alpha.5004843012",
+  "version": "13.0.0-alpha.5112402674",
   "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.28",
-    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-alpha.5004843012",
-    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.5004843012",
-    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.5004843012",
-    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5004843012",
+    "@applicaster/quick-brick-mobile-transport-controls": "13.0.0-alpha.5112402674",
+    "@applicaster/quick-brick-tv-transport-controls": "13.0.0-rc.19",
+    "@applicaster/zapp-react-native-tvos-app": "13.0.0-alpha.5112402674",
+    "@applicaster/zapp-react-native-ui-components": "13.0.0-alpha.5112402674",
+    "@applicaster/zapp-react-native-utils": "13.0.0-alpha.5112402674",
     "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 { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { MagicBG } from "./MagicBG";
 import {
   formatSpeed,
@@ -33,13 +33,6 @@ 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",
@@ -139,11 +132,11 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
   } = props;
 
   const speeds = [
-    { 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 },
+    { 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();
@@ -196,7 +189,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     if (!defaultDimensions) setDefaultDimensions({ width, height });
   };
 
-  const cancelSleepTimer = useCallback(async () => {
+  const cancelSleepTimer = async () => {
     player?.cancelSleepTimer();
 
     setSleepTimer({
@@ -207,47 +200,46 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
     setSleepTimerDate(0);
 
     await localStorage.removeItem("sleep", NAMESPACE);
-  }, [player, setSleepTimer, setSleepTimerDate]);
-
-  const startSleepTimer = useCallback(
-    (timerValue: number) => {
-      try {
-        const futureSleepDate = Date.now() + timerValue * 60000;
+  };
 
-        player?.cancelSleepTimer?.();
+  const startSleepTimer = (timerValue: number) => {
+    try {
+      const currentDate = new Date();
+      const futureDate = new Date(currentDate.getTime() + timerValue * 60000);
+      const futureSleepDate = futureDate.getTime();
 
-        player?.startSleepTimer?.(futureSleepDate);
+      player?.cancelSleepTimer();
 
-        return futureSleepDate;
-      } catch (e) {
-        return 0;
-      }
-    },
-    [player]
-  );
+      player?.startSleepTimer(futureSleepDate);
 
-  const handleSleep = useCallback(
-    async (timerValue: number, currentFutureSleepDate = null) => {
-      if (currentFutureSleepDate) {
-        if (hasDatePassed(currentFutureSleepDate)) {
-          await cancelSleepTimer();
+      return futureSleepDate;
+    } catch (e) {
+      return 0;
+    }
+  };
 
-          return 0;
-        }
+  const handleSleep = async (
+    timerValue: number,
+    currentFutureSleepDate = null
+  ) => {
+    if (currentFutureSleepDate) {
+      if (hasDatePassed(currentFutureSleepDate)) {
+        await cancelSleepTimer();
 
-        return currentFutureSleepDate;
+        return 0;
       }
 
-      if (timerValue === 0) {
-        await cancelSleepTimer();
+      return currentFutureSleepDate;
+    }
 
-        return timerValue;
-      }
+    if (timerValue === 0) {
+      await cancelSleepTimer();
 
-      return startSleepTimer(timerValue);
-    },
-    [startSleepTimer, cancelSleepTimer]
-  );
+      return timerValue;
+    }
+
+    return startSleepTimer(timerValue);
+  };
 
   useEffect(() => {
     const loadSpeed = async () => {
@@ -270,16 +262,9 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
       }
     };
 
-    void loadSpeed();
-    void loadSleep();
-  }, [
-    playerState.isReadyToPlay,
-    handleSleep,
-    setSleepTimer,
-    setSleepTimerDate,
-    setPlaybackSpeed,
-    player,
-  ]);
+    loadSpeed().then();
+    loadSleep().then();
+  }, [playerState.isReadyToPlay]);
 
   const getValue = (key: string, stylesObj: {}) =>
     R.propOr(null, key, stylesObj);
@@ -307,7 +292,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"));
@@ -323,7 +308,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]
@@ -341,7 +326,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         NAMESPACE
       );
     },
-    [setSleepTimer, setSleepTimerDate, handleSleep]
+    [player, setSleepTimer]
   );
 
   const onSpeedButtonPress = React.useCallback(() => {
@@ -356,22 +341,13 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [
-    playbackSpeed,
-    setPlaybackSpeed,
-    navigator,
-    onSpeedSelect,
-    configuration["playback_speed_title"],
-  ]);
+  }, [playbackSpeed, setPlaybackSpeed]);
 
   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,
@@ -381,13 +357,7 @@ export const AudioPlayerWrapper: React.FC<Props> = (props: Props) => {
         supportedOrientations: ["portrait"],
       },
     });
-  }, [
-    navigator,
-    sleepTimer,
-    configuration["playback_sleep_title"],
-    configuration["playback_sleep_off_label"],
-    onSleepSelect,
-  ]);
+  }, [sleepTimer, setSleepTimer, configuration]);
 
   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()) {