@applicaster/quick-brick-player 15.0.0-alpha.1089439460 → 15.0.0-alpha.1092364530

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.0.0-alpha.1089439460",
+  "version": "15.0.0-alpha.1092364530",
   "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-alpha.1089439460",
-    "@applicaster/quick-brick-tv-transport-controls": "15.0.0-alpha.1089439460",
-    "@applicaster/zapp-react-native-tvos-app": "15.0.0-alpha.1089439460",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.1089439460",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.1089439460",
+    "@applicaster/quick-brick-mobile-transport-controls": "15.0.0-rc.127",
+    "@applicaster/quick-brick-tv-transport-controls": "15.0.0-rc.116",
+    "@applicaster/zapp-react-native-tvos-app": "15.0.0-alpha.1092364530",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.1092364530",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.1092364530",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

package/src/Player/AudioLayer/Layout/DockedControls/index.tsx

@@ -23,7 +23,7 @@ import { usePlayerState } from "@applicaster/zapp-react-native-utils/appUtils/pl
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
-import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
+import { isBottomTabVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 import { usePlugins } from "@applicaster/zapp-react-native-redux";
 import { partial } from "@applicaster/zapp-react-native-utils/utils";
 
@@ -167,7 +167,12 @@ export const DockedControls = (props: Props) => {
   const { currentRoute, screenData } = useNavigation();
 
   const plugins = usePlugins();
-  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+
+  const bottomTabsVisible = isBottomTabVisible(
+    currentRoute,
+    screenData,
+    plugins
+  );
 
   const { minimised_height: minimisedHeight } = useConfiguration();
 
@@ -248,13 +253,13 @@ export const DockedControls = (props: Props) => {
   );
 
   const bottomSpacerStyle = React.useMemo(() => {
-    const tabBarHeight = menuVisible ? bottomTabBarHeight : 0;
+    const tabBarHeight = bottomTabsVisible ? bottomTabBarHeight : 0;
     const safeAreaBottomInset = insets.bottom || 0;
 
     return {
       height: safeAreaBottomInset + tabBarHeight,
     };
-  }, [menuVisible, insets.bottom]);
+  }, [bottomTabsVisible, insets.bottom]);
 
   const contentInfoContent = React.useMemo(
     () => ({ ...entry, title, summary }),

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/PlayerModal/hooks/index.ts

@@ -85,15 +85,15 @@ export const useVideoModalState = () => {
       // Update gesture state tracking
       gestureStateRef.current = newState;
 
+      if (newState === State.FAILED) {
+        return;
+      }
+
       if (translationY !== 0) {
         if (newState === State.BEGAN) {
           // clean up gesture translation
           gestureTranslation.setValue(0);
-        } else if (
-          newState === State.END ||
-          newState === State.FAILED ||
-          newState === State.CANCELLED
-        ) {
+        } else if (newState === State.END || newState === State.CANCELLED) {
           const newY = getAnimatedValue(gestureTranslation);
 
           // clean up gesture translation

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