@applicaster/quick-brick-player 15.0.0-rc.99 → 15.1.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.0.0-rc.99",
+  "version": "15.1.0-rc.2",
   "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": "15.0.0-rc.91",
-    "@applicaster/quick-brick-tv-transport-controls": "15.0.0-rc.91",
-    "@applicaster/zapp-react-native-tvos-app": "15.0.0-rc.99",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-rc.99",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.99",
+    "@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.2",
+    "@applicaster/zapp-react-native-ui-components": "15.1.0-rc.2",
+    "@applicaster/zapp-react-native-utils": "15.1.0-rc.2",
     "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 { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 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 = usePlugins();
+  const { plugins } = usePickFromState(["plugins"]);
 
   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/index.tsx

@@ -7,8 +7,12 @@ import * as R from "ramda";
 
 import { findNodeHandle, StyleSheet, View, ViewStyle } from "react-native";
 
-import TransportControlsMobile from "@applicaster/quick-brick-mobile-transport-controls";
-import TransportControlsTV from "@applicaster/quick-brick-tv-transport-controls";
+import TransportControlsMobile, {
+  ErrorOverlay,
+} from "@applicaster/quick-brick-mobile-transport-controls";
+import TransportControlsTV, {
+  ErrorOverlay as TVErrorOverlay,
+} from "@applicaster/quick-brick-tv-transport-controls";
 
 import { AudioPlayer } from "@applicaster/zapp-react-native-ui-components/Components/AudioPlayer";
 import {
@@ -102,6 +106,7 @@ export default class VideoPlayer extends React.Component<
     isLive?: boolean;
     seekableDuration?: number;
     displayOverlay?: boolean;
+    error: PlayerError | null;
   }
 > {
   public static propTypes = {};
@@ -121,6 +126,7 @@ export default class VideoPlayer extends React.Component<
     isLive?: boolean;
     seekableDuration?: number;
     displayOverlay?: boolean;
+    error: PlayerError | null;
   } = {
     // Base required properties from NativePlayerState
     buffering: false,
@@ -131,7 +137,7 @@ export default class VideoPlayer extends React.Component<
     isTabletPortrait: false,
     muted: false,
     showPoster: false,
-
+    error: null,
     // Extended properties
     audioTrackId: null,
     textTrackId: null,
@@ -462,6 +468,8 @@ export default class VideoPlayer extends React.Component<
 
     const newError = new PlayerError(error, description);
 
+    this.setState({ error: newError });
+
     return this.props?.listener?.onError(newError);
   };
 
@@ -749,7 +757,7 @@ export default class VideoPlayer extends React.Component<
   }
 
   renderPlayerContent(playerDimensions: ViewStyle) {
-    const { entry, docked } = this.props;
+    const { entry, docked, fullscreen } = this.props;
     const { isAd, piped } = this.state;
 
     const pluginConfiguration = this.getPluginConfiguration();
@@ -812,6 +820,20 @@ export default class VideoPlayer extends React.Component<
       pluginConfiguration
     );
 
+    if (this.state.error) {
+      return (
+        <View style={styles.container}>
+          <ErrorOverlay
+            error={this.state.error}
+            onClose={() => playerManager.close()}
+            configuration={pluginConfiguration}
+            docked={docked}
+            fullscreen={fullscreen}
+          />
+        </View>
+      );
+    }
+
     return (
       <View style={styles.container}>
         <View style={[playerContainerStyles, playerDimensions]}>
@@ -1346,6 +1368,18 @@ export default class VideoPlayer extends React.Component<
       style: { ...styles.audio, ...this.takeParentStyle },
     };
 
+    if (this.state.error) {
+      return (
+        <View style={this.takeParentStyle} testID={"player-view"}>
+          <TVErrorOverlay
+            error={this.state.error}
+            onClose={() => playerManager.close()}
+            configuration={this.getPluginConfiguration()}
+          />
+        </View>
+      );
+    }
+
     return (
       <View style={this.takeParentStyle} testID={"player-view"}>
         <TVPlayerView

package/src/QuickBrickPlayer.tsx

@@ -7,7 +7,7 @@ import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/acti
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { usePlayerTTS } from "@applicaster/zapp-react-native-utils/playerUtils/usePlayerTTS";
-import { useIsCasting } from "./Player/hooks/useIsCasting";
+import { useIsCasting } from "@applicaster/zapp-react-native-utils/reactHooks/casting";
 
 const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
 

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

@@ -1,23 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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}`;
-}

package/src/Player/hooks/useIsCasting.tsx

@@ -1,57 +0,0 @@
-import React from "react";
-import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-import { useAppState } from "@applicaster/zapp-react-native-utils/reactHooks/app";
-import { isApplePlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-const CHROMECAST_IDENTIFIER = "quick-brick-chromecast-action";
-
-const fakeEntry: any = {
-  title: "Chromecast use is casting fake entry",
-  id: "quick-brick-use-is-casting-fake-entry",
-};
-
-/**
- * Returns the cast action state connection status, does not update when app is in background on Apple platforms
- * On other platforms, it continues to check the cast action state even when the app is in background
- */
-export const useIsCasting = () => {
-  const actionContext = useActions(CHROMECAST_IDENTIFIER);
-  const appState = useAppState();
-  const isAppInForeground = appState === "active";
-  const shouldOnlyUpdateInForeground = isApplePlatform();
-
-  const [castActionState, setCastActionState] = React.useState(
-    !actionContext ? null : actionContext.initialEntryState(fakeEntry)
-  );
-
-  React.useEffect(() => {
-    if (!shouldOnlyUpdateInForeground || isAppInForeground) {
-      if (actionContext && castActionState === null) {
-        setCastActionState(actionContext.initialEntryState(fakeEntry));
-      }
-    }
-  }, [
-    actionContext,
-    setCastActionState,
-    isAppInForeground,
-    shouldOnlyUpdateInForeground,
-  ]);
-
-  React.useEffect(() => {
-    if (typeof actionContext?.addListener === "function") {
-      return actionContext?.addListener(String(fakeEntry.id), (state) => {
-        // Only check foreground state on Apple platforms
-        if (!shouldOnlyUpdateInForeground || isAppInForeground) {
-          setCastActionState(state);
-        }
-      });
-    }
-  }, [
-    setCastActionState,
-    actionContext,
-    isAppInForeground,
-    shouldOnlyUpdateInForeground,
-  ]);
-
-  return !!castActionState?.connected;
-};