@applicaster/quick-brick-player 15.1.0-rc.1 → 16.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.1.0-rc.1",
+  "version": "16.0.0-rc.1",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -35,11 +35,11 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/quick-brick-mobile-transport-controls": "14.0.25",
-    "@applicaster/quick-brick-tv-transport-controls": "14.0.24",
-    "@applicaster/zapp-react-native-tvos-app": "15.1.0-rc.1",
-    "@applicaster/zapp-react-native-ui-components": "15.1.0-rc.1",
-    "@applicaster/zapp-react-native-utils": "15.1.0-rc.1",
+    "@applicaster/quick-brick-mobile-transport-controls": "15.0.0-rc.143",
+    "@applicaster/quick-brick-tv-transport-controls": "15.0.0-rc.142",
+    "@applicaster/zapp-react-native-tvos-app": "16.0.0-rc.1",
+    "@applicaster/zapp-react-native-ui-components": "16.0.0-rc.1",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.1",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/PlayNextOverlay/index.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins } from "@applicaster/zapp-react-native-redux";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 
 type Props = {
@@ -32,7 +32,7 @@ export const PlayNextOverlay = ({
   playNextData,
   setNextVideoPreloadThresholdPercentage,
 }: Props) => {
-  const { plugins } = usePickFromState(["plugins"]);
+  const plugins = usePlugins();
 
   const OverlayPlugin = getOverlayPlugin(plugins);
 

package/src/Player/Utils/index.tsx

@@ -3,13 +3,13 @@ import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils"
 export * from "./Utils";
 
 export const getBottomSheetModalIconProps = (theme) => ({
-  height: theme["audio_modal_bottom_sheet_item_icon_height"],
-  width: theme["audio_modal_bottom_sheet_item_icon_width"],
-  marginBottom: theme["audio_modal_bottom_sheet_item_icon_margin_bottom"],
-  marginLeft: theme["audio_modal_bottom_sheet_item_icon_margin_left"],
-  marginRight: theme["audio_modal_bottom_sheet_item_icon_margin_right"],
-  marginTop: theme["audio_modal_bottom_sheet_item_icon_margin_top"],
-  flavour: theme["modal_bottom_sheet_item_icon_flavour"],
+  height: theme.audio_modal_bottom_sheet_item_icon_height,
+  width: theme.audio_modal_bottom_sheet_item_icon_width,
+  marginBottom: theme.audio_modal_bottom_sheet_item_icon_margin_bottom,
+  marginLeft: theme.audio_modal_bottom_sheet_item_icon_margin_left,
+  marginRight: theme.audio_modal_bottom_sheet_item_icon_margin_right,
+  marginTop: theme.audio_modal_bottom_sheet_item_icon_margin_top,
+  flavour: theme.modal_bottom_sheet_item_icon_flavour,
 });
 
 export const getBottomSheetModalLabelProps = (theme, width: number) => {
@@ -112,10 +112,10 @@ export const getBottomSheetModalItemProps = (theme, width: number) => {
 };
 
 export const getBottomSheetModalSelectedItemIcon = (theme) =>
-  theme["audio_modal_bottom_sheet_item_selected_icon"] || null;
+  theme.audio_modal_bottom_sheet_item_selected_icon || null;
 
 export const getBottomSheetModalDefaultItemIcon = (theme) =>
-  theme["audio_modal_bottom_sheet_item_default_icon"] || null;
+  theme.audio_modal_bottom_sheet_item_default_icon || null;
 
 export const selectSleepTitle = (configuration) =>
   configuration.playback_sleep_title;

package/src/Player/hooks/progressStates/__tests__/utils.test.ts

@@ -0,0 +1,23 @@
+import { calculateLiveProgressBarTime } from "../utils";
+
+describe("Utils", () => {
+  describe("calculateLiveProgressBarTime", () => {
+    it("Should return 0", () => {
+      expect(calculateLiveProgressBarTime(68, 1)).toBe(0);
+
+      expect(calculateLiveProgressBarTime(68, 0)).toBe(0);
+
+      expect(calculateLiveProgressBarTime(68, -1)).toBe(0);
+
+      expect(calculateLiveProgressBarTime(68, -5)).toBe(0);
+    });
+
+    it("Should return equal duration", () => {
+      expect(calculateLiveProgressBarTime(68, -100)).toBe(-68);
+
+      expect(calculateLiveProgressBarTime(68, -68)).toBe(-68);
+
+      expect(calculateLiveProgressBarTime(68, -105)).toBe(-68);
+    });
+  });
+});

package/src/Player/hooks/progressStates/useLiveProgressState.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import { calculateLiveProgressBarTime, formatTimeDisplay } from "./utils";
+import { ProgressState } from "./useProgressState";
+
+// TODO: Must Add check RTL support
+const getSliderValues = (seekableDuration: number, time: number) => {
+  const value = calculateLiveProgressBarTime(seekableDuration, time);
+
+  return {
+    minimumValue: -seekableDuration,
+    maximumValue: 0,
+    value: Math.min(0, value),
+  };
+};
+
+const prepareNewState = ({ seekableDuration, time }) => {
+  const sliderValues = getSliderValues(seekableDuration, time);
+
+  const getProgress = (
+    seekableDuration: number,
+    currentTime: number
+  ): number => {
+    return Math.round((currentTime / seekableDuration) * 100);
+  };
+
+  const getElapsedTime = (currentTime: number): string => {
+    return currentTime === 0
+      ? ""
+      : `-${formatTimeDisplay(Math.abs(currentTime))}`;
+  };
+
+  const getLiveOffsetPercent = (): number =>
+    (100 * (sliderValues.value - sliderValues.minimumValue)) /
+    (sliderValues.maximumValue - sliderValues.minimumValue);
+
+  return {
+    progress: getProgress(seekableDuration, sliderValues.value),
+    liveOffsetPercent: getLiveOffsetPercent(),
+    time: [getElapsedTime(sliderValues.value), null],
+    currentTime: sliderValues.value,
+    duration: Math.max(0, seekableDuration),
+    sliderValues,
+  };
+};
+
+// TODO: Add for `NOW` localization
+export const useLiveProgressState = ({
+  playerState: { currentTime, seekableDuration },
+}): [ProgressState, (seek: number) => void] => {
+  const stateRef = React.useRef<ProgressState>({
+    progress: 0,
+    liveOffsetPercent: 0,
+    time: ["--:--", "--:--"],
+    currentTime: 0,
+    duration: 0,
+    sliderValues: {
+      minimumValue: 0,
+      maximumValue: 0,
+      value: 0,
+    },
+  });
+
+  const updateState = React.useCallback(
+    (seekTime: number): void => {
+      if (seekTime == null || seekableDuration == null) {
+        return;
+      }
+
+      stateRef.current = prepareNewState({ seekableDuration, time: -seekTime });
+    },
+    [seekableDuration]
+  );
+
+  updateState(currentTime);
+
+  return [stateRef.current, updateState];
+};

package/src/Player/hooks/progressStates/useProgressState.tsx

@@ -0,0 +1,30 @@
+import { useLiveProgressState } from "./useLiveProgressState";
+import { useVodProgressState } from "./useVodProgressState";
+
+export type ProgressState = {
+  liveOffsetPercent?: number;
+  progress: number;
+  time: string[];
+  currentTime: number;
+  duration: number;
+  sliderValues: { minimumValue: number; maximumValue: number; value: number };
+};
+
+// TODO: Try refactor to remove code duplication
+export const useProgressState = ({
+  playerState: { seekableDuration, duration, isLive },
+  remainingTimeDisplay = false,
+  currentTime,
+}): [ProgressState, (seek) => void] => {
+  const liveData: [ProgressState, (seek: number) => void] =
+    useLiveProgressState({
+      playerState: { currentTime, seekableDuration },
+    });
+
+  const vodData: [ProgressState, (seek) => void] = useVodProgressState({
+    playerState: { currentTime, duration },
+    remainingTimeDisplay,
+  });
+
+  return isLive ? liveData : vodData;
+};

package/src/Player/hooks/progressStates/useVodProgressState.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+
+import { formatTimeDisplay } from "./utils";
+import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
+import { ProgressState } from "./useProgressState";
+
+// TODO: Refactor if needed, code was aligned to new structure only
+
+const getSliderValues = (duration: number, time: number, isRTL: boolean) => {
+  const minimumValue = 0;
+
+  // Default max value should be greater than duration due to RTL thumb animation
+  const maximumValue = duration || 9999;
+  const initValue = isRTL ? maximumValue : minimumValue;
+  const currentValue = isRTL ? duration - time : time;
+  const progressValue = !duration ? initValue : currentValue;
+  const timeValue = !duration ? minimumValue : time;
+
+  return {
+    minimumValue,
+    maximumValue,
+    value: Math.max(0, progressValue),
+    timeValue: Math.max(0, timeValue),
+  };
+};
+
+const prepareNewState = ({ duration, time, remainingTimeDisplay, isRTL }) => {
+  const sliderValues = getSliderValues(duration, time, isRTL);
+
+  const getProgress = (duration, currentTime): number => {
+    return Math.round((currentTime / duration) * 100);
+  };
+
+  const getElapsedTime = (currentTime): string => {
+    return formatTimeDisplay(currentTime);
+  };
+
+  const getRemainingTime = (duration, currentTime): string => {
+    if (isNaN(duration)) {
+      return "--:--";
+    }
+
+    return formatTimeDisplay(duration - currentTime);
+  };
+
+  const remaining = getRemainingTime(duration, sliderValues.value);
+
+  const remainingTimeState = remainingTimeDisplay
+    ? `-${remaining}`
+    : formatTimeDisplay(duration);
+
+  return {
+    progress: getProgress(duration, sliderValues.value),
+    time: [getElapsedTime(sliderValues.timeValue), remainingTimeState],
+    currentTime: sliderValues.timeValue,
+    duration: Math.max(0, duration),
+    sliderValues,
+  };
+};
+
+export const useVodProgressState = ({
+  remainingTimeDisplay = false,
+  playerState: { currentTime, duration },
+}): [ProgressState, (seek) => void] => {
+  const [state, setState] = React.useState<ProgressState>({
+    progress: 0,
+    time: ["--:--", "--:--"],
+    currentTime: 0,
+    duration: 0,
+    sliderValues: {
+      minimumValue: 0,
+      maximumValue: 0,
+      value: 0,
+    },
+  });
+
+  const isRTL = useIsRTL();
+
+  React.useEffect(() => {
+    if (currentTime == null || duration == null) {
+      return;
+    }
+
+    setState(
+      prepareNewState({
+        duration,
+        time: currentTime,
+        remainingTimeDisplay,
+        isRTL,
+      })
+    );
+  }, [currentTime, duration, isRTL, remainingTimeDisplay]);
+
+  const updateState = React.useCallback(
+    (seekTime?: number): void => {
+      if (seekTime == null || duration == null) {
+        return;
+      }
+
+      const time =
+        (seekTime || seekTime === 0) && Math.abs(seekTime - currentTime) > 1
+          ? seekTime
+          : currentTime;
+
+      if (duration && (time || time === 0)) {
+        setState(
+          prepareNewState({ duration, time, remainingTimeDisplay, isRTL })
+        );
+      }
+    },
+    [duration, currentTime, remainingTimeDisplay, isRTL]
+  );
+
+  return [state, updateState];
+};

package/src/Player/hooks/progressStates/utils.ts

@@ -0,0 +1,33 @@
+const prependZeroIfNeeded = (value) => {
+  const s = typeof value === "number" ? String(value) : String(value ?? "");
+
+  return `0${s}`.slice(-2);
+};
+
+export const calculateLiveProgressBarTime = (duration, time) => {
+  const minimumLiveOffsetStart = -5;
+
+  if (time < minimumLiveOffsetStart && time > -duration) {
+    // -67 < -5 && -67 > -68
+    return time;
+  } else if (time <= -duration) {
+    return -duration;
+  }
+
+  return 0;
+};
+
+export function formatTimeDisplay(durationInSeconds) {
+  const hours = Math.floor(durationInSeconds / 60 / 60);
+  const minutes = Math.floor((durationInSeconds - hours * 60 * 60) / 60);
+
+  const seconds = Math.floor(
+    durationInSeconds - hours * 60 * 60 - minutes * 60
+  );
+
+  const hr = prependZeroIfNeeded(hours);
+  const mn = prependZeroIfNeeded(minutes);
+  const sc = prependZeroIfNeeded(seconds);
+
+  return `${hours ? `${hr}:` : ""}${mn || "00"}:${sc}`;
+}