@applicaster/quick-brick-player 15.0.0-alpha.9667030680 → 15.0.0-alpha.9980835537

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "15.0.0-alpha.9667030680",
+  "version": "15.0.0-alpha.9980835537",
   "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.27",
-    "@applicaster/quick-brick-tv-transport-controls": "15.0.0-rc.15",
-    "@applicaster/zapp-react-native-tvos-app": "15.0.0-alpha.9667030680",
-    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.9667030680",
-    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.9667030680",
+    "@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": "15.0.0-alpha.9980835537",
+    "@applicaster/zapp-react-native-ui-components": "15.0.0-alpha.9980835537",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.9980835537",
     "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/AudioLayer/Layout/PlayerImage/index.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LayoutChangeEvent, View } from "react-native";
+import { Animated, LayoutChangeEvent, View } from "react-native";
 
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { toBooleanWithDefaultTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
@@ -8,6 +8,7 @@ import { FlexImage } from "./FlexImage";
 
 import { styles } from "./styles";
 import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = {
   entry: ZappEntry;
@@ -29,15 +30,34 @@ export const PlayerImage = (props: Props) => {
     configuration.audio_player_artwork_border_radius
   );
 
+  const { yTranslate } = useModalAnimationContext();
+
+  const isModalExpanded = yTranslate.current.interpolate({
+    inputRange: [0, 1], // this should be end with `1` only when it's in initial state ( 0pos), otherwise `0`
+    outputRange: [1, 0],
+  });
+
+  // do not use styles.shadow when isModalExpanded is 0
+
+  const animatedStyle = {
+    opacity: isModalExpanded,
+  };
+
   return (
     <View style={styles.alignItemsCenter}>
+      {/* Using an Animated.View to apply shadow to the image */}
+      <Animated.View
+        style={[
+          animatedStyle,
+          shouldShowShadow ? styles.shadow : undefined,
+          { borderRadius },
+        ]}
+      />
       <View
         onLayout={onLayoutImage}
-        style={[shouldShowShadow ? styles.shadow : undefined, { borderRadius }]}
+        style={[styles.defaultImageWrapperView, { borderRadius }]}
       >
-        <View style={[styles.defaultImageWrapperView, { borderRadius }]}>
-          <FlexImage entry={entry} style={styles.backgroundImageContainer} />
-        </View>
+        <FlexImage entry={entry} style={styles.backgroundImageContainer} />
       </View>
     </View>
   );

package/src/Player/AudioLayer/Layout/PlayerImage/styles.ts

@@ -23,7 +23,12 @@ export const styles = StyleSheet.create({
     overflow: "hidden",
   },
   shadow: {
-    borderColor: "transparent",
+    zIndex: 0,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
     shadowColor: SHADOW_COLOR,
     shadowOffset: { width: 0, height: 24 },
     shadowOpacity: platformSelect({

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/PlayerModal.tsx

@@ -5,8 +5,8 @@ import { PanGestureHandler } from "react-native-gesture-handler";
 import { useStyles } from "./styles";
 import { useVideoModalState } from "./hooks";
 import { MODAL_COLLAPSE_RATIO, MODAL_RADIUS } from "./consts";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { getWindowHeight } from "./utils";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
 
 type AnimatedModalProps = {
   content?: ReactElement;
@@ -17,21 +17,17 @@ export function AnimatedModal({
   content,
   collapsedContent,
 }: AnimatedModalProps) {
-  const translateYRef = useModalAnimationContext().yTranslate;
+  const { translateY, collapsed, gestureHandlerProps, expand, offset } =
+    useVideoModalState();
 
-  const {
-    translateY,
-    collapsed,
-    collapsedHeight,
-    gestureHandlerProps,
-    expand,
-  } = useVideoModalState(translateYRef);
-
-  const styles = useStyles({ height: collapsedHeight, type: "audio" });
+  const frame = useSafeAreaFrame();
+  const collapsedHeight = frame.height - offset.current;
 
   const height = getWindowHeight();
   const heightAboveMinimised = height - collapsedHeight;
 
+  const styles = useStyles({ height: collapsedHeight, type: "audio" });
+
   const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
 
   // Interpolated opacities for smooth cross-fade

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -12,7 +12,6 @@ import {
   VIDEO_TRANSITION_THRESHOLD,
 } from "./consts";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/useModalAnimationContext";
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 import {
   SafeAreaView,
@@ -29,6 +28,9 @@ import {
   getScaledPos,
   getExtraContentPadding,
 } from "./utils";
+import { addOrientationChangeListener } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
+
+const AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 
 type AnimatedModalProps = {
   pip?: boolean;
@@ -65,30 +67,26 @@ export function VideoPlayerModal({
     () =>
       isTablet && !isTabletPortrait
         ? style.tabletLandscapeWidth
-        : getWindowWidth(),
+        : getWindowWidth(isTablet, !isTabletPortrait),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
 
-  const height = useMemo(() => getWindowHeight(), []); // remember initial height, ignore rotation changes
+  const height = useMemo(
+    () => getWindowHeight(isTablet, !isTabletPortrait),
+    []
+  ); // remember initial height, ignore rotation changes
+
   const MODAL_COLLAPSE_START = height * MODAL_COLLAPSE_RATIO;
 
   const { minimised_height: minimisedHeight } = useConfiguration();
   const scrollViewRef = useRef<typeof Animated.ScrollView | null>(null);
 
-  const translateYRef = useModalAnimationContext().yTranslate;
-  // used when modal is false, should not be used in animation
-  const dummyRef = useRef(new Animated.Value(0));
-
-  const {
-    translateY,
-    collapsed,
-    collapsedHeight,
-    gestureHandlerProps,
-    expand,
-  } = useVideoModalState(modal ? translateYRef : dummyRef);
+  const { translateY, collapsed, gestureHandlerProps, expand, offset } =
+    useVideoModalState();
 
   const frame = useSafeAreaFrame();
+  const collapsedHeight = frame.height - offset.current;
 
   const heightAboveMinimised = height - collapsedHeight;
 
@@ -98,9 +96,27 @@ export function VideoPlayerModal({
 
   const insets = useSafeAreaInsets();
 
-  const isFullScreenOrPIP = fullscreen || pip;
+  const [isFullScreenMode, setFullScreenMode] = React.useState(
+    fullscreen || pip
+  );
+
+  React.useEffect(() => {
+    const listener = addOrientationChangeListener(({ toOrientation }) => {
+      /* ignored in collapsed mode non-PiP player */
+      if (collapsed && !pip) return;
+      setFullScreenMode(!(toOrientation === 1));
+    });
 
-  // Interpolated opacities for smooth cross-fade
+    return () => {
+      listener.remove();
+    };
+  }, [collapsed, pip]);
+
+  const isFullScreenOrPIP = isFullScreenMode;
+
+  const vidHeight = width / aspectRatio;
+
+  // animated opacity for smooth cross-fade of collapsed content
   const collapsedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
         inputRange: [MODAL_COLLAPSE_START, heightAboveMinimised],
@@ -109,6 +125,7 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(0);
 
+  // animated opacity for extra content
   const expandedOpacity = !isFullScreenOrPIP
     ? translateY.interpolate({
         inputRange: [0, heightAboveMinimised],
@@ -117,7 +134,7 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(1);
 
-  // animated position for video content during modal transition
+  // animated x position for video content
   const xPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
         inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
@@ -126,9 +143,7 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(0);
 
-  const vidHeight = width / aspectRatio;
-
-  // animated position for video content during modal transition
+  // animated y position for video content
   const yPosition = !isFullScreenOrPIP
     ? translateY.interpolate({
         inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
@@ -144,7 +159,7 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(0);
 
-  // animated position for video content during modal transition
+  // animated position for video content
   const scalePosition = !isFullScreenOrPIP
     ? translateY.interpolate({
         inputRange: [height * VIDEO_TRANSITION_THRESHOLD, MODAL_COLLAPSE_START],
@@ -179,9 +194,11 @@ export function VideoPlayerModal({
     <PanGestureHandler
       enabled={enabled}
       waitFor={scrollViewRef}
+      activeOffsetY={[-25, 25]}
+      activeOffsetX={[-25, 25]}
       {...gestureHandlerProps}
     >
-      <SafeAreaView pointerEvents="box-none" edges={["bottom"]}>
+      <AnimatedSafeAreaView pointerEvents="box-none" edges={["bottom"]}>
         <Animated.View
           pointerEvents={"auto"}
           style={[
@@ -266,7 +283,7 @@ export function VideoPlayerModal({
             ) : null}
           </Animated.View>
         </Animated.View>
-      </SafeAreaView>
+      </AnimatedSafeAreaView>
     </PanGestureHandler>
   );
 }

package/src/Player/PlayerModal/hooks/index.ts

@@ -1,159 +1,132 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from "react-native-safe-area-context";
+
 import { State } from "react-native-gesture-handler";
-import { Animated } from "react-native";
 
 import { VideoModalMode } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
-import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
-import { getTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/getTabBarHeight";
+import { useAnimationStateStore } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
-import { isMenuVisible } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 import {
   ANIMATION_DURATION,
   DRAG_TO_COLLAPSE,
   DRAG_TO_EXPAND,
 } from "../consts";
-import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux";
-import { isOldAndroidDevice } from "../utils";
-
-const bottomTabBarHeight = getTabBarHeight();
+import { Animated } from "react-native";
+import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
-export const useVideoModalState = (
-  translateYRef: React.MutableRefObject<Animated.Value>
-) => {
-  const { minimised_height: minimisedHeight } = useConfiguration();
+const getAnimatedValue = (animatedValue: Animated.Value): number => {
+  return (animatedValue as any).__getValue() as number;
+};
 
+export const useVideoModalState = () => {
   const {
-    maximiseVideoModal,
-    minimiseVideoModal,
-    videoModalState,
-    currentRoute,
-    screenData,
-  } = useNavigation();
+    yTranslate,
+    offset,
+    heightAboveMinimised,
+    gestureTranslationRef,
+    offsetAnimatedValueRef,
+  } = useModalAnimationContext();
 
-  const plugins = usePlugins();
+  const modalAnimatedValue = offsetAnimatedValueRef.current;
+  const gestureTranslation = gestureTranslationRef.current;
 
-  const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
+  const updateModalTranslation = useCallback(
+    (toValue: number, duration: number = ANIMATION_DURATION) =>
+      Animated.timing(modalAnimatedValue, {
+        toValue,
+        duration,
+        useNativeDriver: true,
+      }),
+    [modalAnimatedValue]
+  );
 
-  const collapsed =
-    videoModalState.visible &&
-    videoModalState.mode === VideoModalMode.MINIMIZED;
+  const translateY = yTranslate.current;
 
-  const frame = useSafeAreaFrame();
-  const insets = useSafeAreaInsets();
+  const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
+    useNavigation();
 
-  const collapsedHeight =
-    minimisedHeight +
-    (menuVisible ? bottomTabBarHeight : 0) +
-    (isOldAndroidDevice ? 0 : insets.bottom) + // insets.bottom is added to properly display docked modal
-    PROGRESS_BAR_HEIGHT;
+  const videoModalMode = videoModalState.mode;
 
-  const heightAboveMinimised = frame.height - collapsedHeight;
+  const prevModeStateRef = useRef(videoModalMode); // keep track of last non-PIP mode
+  const gestureStateRef = useRef<any>(State.UNDETERMINED); // keep track of gesture state
 
-  const translateY = translateYRef.current;
+  // Track last non-PIP mode
+  if (videoModalMode !== prevModeStateRef.current) {
+    if (["MAXIMIZED", "MINIMIZED"].includes(videoModalMode)) {
+      prevModeStateRef.current = videoModalMode;
+    }
+  }
 
-  const handleExpand = useCallback(
-    (toValue: number) => {
-      return Animated.timing(translateYRef.current, {
-        toValue,
-        duration: ANIMATION_DURATION,
-        useNativeDriver: true,
-      });
-    },
-    [translateYRef]
-  );
+  const collapsed =
+    videoModalState.visible &&
+    ((prevModeStateRef.current === "MINIMIZED" &&
+      videoModalState.mode === "PIP") || // If STILL in PIP mode, check if last non-PIP mode was MINIMIZED
+      videoModalState.mode === VideoModalMode.MINIMIZED); // Or if currently in MINIMIZED mode
 
-  const handleCollapse = useCallback(
-    (toValue: number) => {
-      return Animated.timing(translateYRef.current, {
-        toValue,
-        duration: ANIMATION_DURATION,
+  // Gesture handler for modal
+  const onGestureEvent = useMemo(
+    () =>
+      Animated.event([{ nativeEvent: { translationY: gestureTranslation } }], {
         useNativeDriver: true,
-      });
-    },
-    [translateYRef]
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
 
-  const offset = useRef(heightAboveMinimised);
-
-  // Gesture handler for modal
-  const onGestureEvent = useCallback(
+  const onHandlerStateChange = useCallback(
     (event: any) => {
-      if (event.nativeEvent.state === State.ACTIVE) {
-        const y = event.nativeEvent.translationY;
-        let newY = offset.current + y;
-        if (newY < 0) newY = 0;
+      const { state: newState, oldState, translationY } = event.nativeEvent;
 
-        if (newY > heightAboveMinimised) {
-          newY = heightAboveMinimised;
-        }
-
-        translateY.setValue(newY);
+      if (newState === State.ACTIVE || oldState === State.ACTIVE) {
+        useAnimationStateStore.setState({
+          isAnimationInProgress: newState === State.ACTIVE,
+        });
       }
-    },
-    [collapsedHeight, translateY]
-  );
 
-  const onHandlerStateChange = useCallback(
-    (event: any) => {
-      if (event.nativeEvent.oldState === State.ACTIVE) {
-        const { translationY } = event.nativeEvent;
-        let newY = offset.current + translationY;
-        if (newY < 0) newY = 0;
+      // Update gesture state tracking
+      gestureStateRef.current = newState;
 
-        if (newY > heightAboveMinimised) {
-          newY = heightAboveMinimised;
-        }
+      if (newState === State.FAILED) {
+        return;
+      }
 
-        const shouldCollapse =
-          translationY > heightAboveMinimised * DRAG_TO_COLLAPSE;
-
-        const shouldExpand =
-          translationY < -heightAboveMinimised * DRAG_TO_EXPAND;
-
-        if (!collapsed && shouldCollapse) {
-          // Collapse
-          Animated.timing(translateY, {
-            toValue: heightAboveMinimised,
-            duration: ANIMATION_DURATION,
-            useNativeDriver: true,
-          }).start(() => {
-            minimiseVideoModal();
-            offset.current = heightAboveMinimised;
-          });
-        } else if (collapsed && shouldExpand) {
-          // Expand
-          Animated.timing(translateY, {
-            toValue: 0,
-            duration: ANIMATION_DURATION,
-            useNativeDriver: true,
-          }).start(() => {
-            maximiseVideoModal();
-            offset.current = 0;
-            translateY.setValue(0);
-          });
-        } else {
-          // Snap back to current state
-          Animated.spring(translateY, {
-            toValue: collapsed ? heightAboveMinimised : 0,
-            useNativeDriver: true,
-          }).start(() => {
-            offset.current = collapsed ? heightAboveMinimised : 0;
-            translateY.setValue(offset.current);
-          });
+      if (translationY !== 0) {
+        if (newState === State.BEGAN) {
+          // clean up gesture translation
+          gestureTranslation.setValue(0);
+        } else if (newState === State.END || newState === State.CANCELLED) {
+          const newY = getAnimatedValue(gestureTranslation);
+
+          // clean up gesture translation
+          gestureTranslation.setValue(0);
+
+          const v = getAnimatedValue(modalAnimatedValue);
+
+          // store current offset
+          modalAnimatedValue.setValue(v + newY);
+
+          const shouldCollapse = newY > offset.current * DRAG_TO_COLLAPSE;
+
+          const shouldExpand = newY < offset.current * DRAG_TO_EXPAND;
+
+          if (!collapsed && shouldCollapse) {
+            // Collapse
+            updateModalTranslation(offset.current).start(() => {
+              minimiseVideoModal();
+            });
+          } else if (collapsed && shouldExpand) {
+            // Expand
+            updateModalTranslation(0).start(() => {
+              maximiseVideoModal();
+            });
+          } else {
+            // Snap back to current state
+            updateModalTranslation(collapsed ? offset.current : 0).start();
+          }
         }
-      } else if (event.nativeEvent.state === State.BEGAN) {
-        // Gesture started, set offset
-        translateY.stopAnimation((value: number) => {
-          offset.current = value;
-        });
       }
     },
-    [collapsedHeight, translateY, collapsed, videoModalState]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [collapsed]
   );
 
   const gestureHandlerProps = useMemo(() => {
@@ -163,44 +136,34 @@ export const useVideoModalState = (
     };
   }, [onGestureEvent, onHandlerStateChange]);
 
+  // Track video modal state changes & calling updateAnimatedPosition
   useEffect(() => {
     if (videoModalState.visible) {
-      if (videoModalState.mode === VideoModalMode.MAXIMIZED) {
-        handleExpand(0).start(() => {
-          maximiseVideoModal();
-          offset.current = 0;
-          translateY.setValue(0);
-        });
-      } else if (videoModalState.mode === VideoModalMode.MINIMIZED) {
-        handleCollapse(heightAboveMinimised).start(() => {
-          minimiseVideoModal();
-          offset.current = heightAboveMinimised;
-          translateY.setValue(heightAboveMinimised);
-        });
+      const mode =
+        videoModalMode === "PIP" ? prevModeStateRef.current : videoModalMode;
+
+      // Prevent changes during active gesture states to avoid interference
+      if ([State.ACTIVE].includes(gestureStateRef.current)) {
+        return;
+      }
+
+      if (mode === VideoModalMode.MAXIMIZED) {
+        updateModalTranslation(0).start();
+      } else if (mode === VideoModalMode.MINIMIZED) {
+        updateModalTranslation(heightAboveMinimised).start();
       }
     }
-  }, [
-    videoModalState.visible,
-    videoModalState.mode,
-    collapsedHeight,
-    heightAboveMinimised,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [videoModalState.visible, videoModalState.mode, heightAboveMinimised]);
 
   return useMemo(
     () => ({
       collapsed,
-      collapsedHeight,
       offset,
       gestureHandlerProps,
       translateY,
       expand: maximiseVideoModal,
     }),
-    [
-      collapsed,
-      collapsedHeight,
-      gestureHandlerProps,
-      translateY,
-      maximiseVideoModal,
-    ]
+    [collapsed, offset, gestureHandlerProps, translateY, maximiseVideoModal]
   );
 };

package/src/Player/PlayerModal/utils/index.ts

@@ -5,10 +5,7 @@ import {
   isAndroidVersionAtLeast,
   isTV,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
-import {
-  isTablet,
-  useIsTablet as getIsTablet,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsTablet as getIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const SAFE_AREA_BREAKING_API_VERSION = 35;
 
@@ -16,9 +13,20 @@ export const isOldAndroidDevice =
   isAndroidPlatform() &&
   !isAndroidVersionAtLeast(SAFE_AREA_BREAKING_API_VERSION);
 
-export const getWindowHeight = (): number => {
+export const getWindowHeight = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
   const windowDimensions = Dimensions.get("window");
 
+  if (isTablet && landscape) {
+    return windowDimensions.height;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.width;
+  }
+
   return windowDimensions.height;
 };
 
@@ -28,14 +36,25 @@ export const getScreenHeight = (): number => {
   return screenDimensions.height;
 };
 
-export const getWindowWidth = (): number => {
+export const getWindowWidth = (
+  isTablet: boolean,
+  landscape: boolean
+): number => {
   const windowDimensions = Dimensions.get("window");
 
+  if (isTablet && landscape) {
+    return windowDimensions.width;
+  }
+
+  if (windowDimensions.width > windowDimensions.height) {
+    return windowDimensions.height;
+  }
+
   return windowDimensions.width;
 };
 
 const getIsTabletLandscape = (isTabletPortrait: boolean): boolean => {
-  return !isTV() && isTablet() && !isTabletPortrait;
+  return !isTV() && getIsTablet() && !isTabletPortrait;
 };
 
 export const getInsetsOffset = (
@@ -44,7 +63,7 @@ export const getInsetsOffset = (
 ): number => {
   const isTabletLandscape = getIsTabletLandscape(isTabletPortrait);
 
-  return isTablet() && isTabletLandscape
+  return getIsTablet() && isTabletLandscape
     ? isOldAndroidDevice
       ? insets.top / 2
       : 0

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}`;
+}

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/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;
-};