@applicaster/quick-brick-player 14.0.0-rc.62 → 14.0.0-rc.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/quick-brick-player",
-  "version": "14.0.0-rc.62",
+  "version": "14.0.0-rc.64",
   "description": "Quick Brick Player",
   "main": "./src/index.ts",
   "types": "index.d.ts",
@@ -37,9 +37,9 @@
   "dependencies": {
     "@applicaster/quick-brick-mobile-transport-controls": "14.0.0-rc.56",
     "@applicaster/quick-brick-tv-transport-controls": "14.0.0-rc.60",
-    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.62",
-    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.62",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.62",
+    "@applicaster/zapp-react-native-tvos-app": "14.0.0-rc.64",
+    "@applicaster/zapp-react-native-ui-components": "14.0.0-rc.64",
+    "@applicaster/zapp-react-native-utils": "14.0.0-rc.64",
     "query-string": "7.1.3",
     "shaka-player": "4.3.5",
     "typeface-montserrat": "^0.0.54",

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

@@ -185,8 +185,10 @@ export const DockedControls = (props: Props) => {
   const configuration = useZStore("playerConfiguration")();
   const playerState = usePlayerState("shared-player-wrapper-docked");
 
-  const getValue = (key: string, stylesObj: {}) =>
-    R.propOr(null, key, stylesObj);
+  const getValue = React.useCallback(
+    (key: string, stylesObj: {}) => R.propOr(null, key, stylesObj),
+    []
+  );
 
   const value = React.useCallback(
     (key: string) => {
@@ -206,7 +208,7 @@ export const DockedControls = (props: Props) => {
 
       return retVal;
     },
-    [...Object.values(configuration), playerState]
+    [...Object.values(configuration), playerState.seekableDuration, getValue]
   );
 
   const { title, summary } = useTitleSummaryOverlay(
@@ -224,85 +226,87 @@ export const DockedControls = (props: Props) => {
   const insets = useSafeAreaInsets();
 
   return (
-    <View
-      style={[
-        styles.container,
-        {
-          height:
-            minimisedHeight +
-            (menuVisible ? bottomTabBarHeight : 0) +
-            insets.bottom,
-        },
-      ]}
-    >
-      {!playerState.isLive ? (
-        <ProgressBar
-          name={"shared-docked-layout"}
-          content={entry}
-          value={value}
-          visible
-          layoutState={layoutState}
-          onPlayerSeek={onPlayerSeek}
-          playerState={playerState}
-          startComponentsAnimation={noop}
-          docked
-        />
-      ) : null}
+    <>
+      <View
+        style={[
+          styles.container,
+          {
+            height: minimisedHeight,
+            maxHeight: minimisedHeight,
+          },
+        ]}
+      >
+        {!playerState.isLive ? (
+          <ProgressBar
+            name={"shared-docked-layout"}
+            content={entry}
+            value={value}
+            visible
+            layoutState={layoutState}
+            onPlayerSeek={onPlayerSeek}
+            playerState={playerState}
+            startComponentsAnimation={noop}
+            docked
+          />
+        ) : null}
 
-      <View style={styles.content}>
-        <View style={styles.touchableArea}>
-          {isActiveGesture || layoutState.docked ? (
-            <View style={{ aspectRatio: aspectRatio, height: minimisedHeight }}>
-              {ImageComponent || null}
-            </View>
-          ) : (
+        <View style={styles.content}>
+          <View style={styles.touchableArea}>
+            {isActiveGesture || layoutState.docked ? (
+              <View
+                style={{ aspectRatio: aspectRatio, height: minimisedHeight }}
+              >
+                {ImageComponent || null}
+              </View>
+            ) : (
+              <View
+                style={playerDimensionsStyle(
+                  minimisedHeight,
+                  isActiveGesture || layoutState.docked
+                )}
+              />
+            )}
             <View
-              style={playerDimensionsStyle(
-                minimisedHeight,
-                isActiveGesture || layoutState.docked
-              )}
-            />
-          )}
+              testID="content-info"
+              style={[
+                styles.contentInfo,
+                { backgroundColor: dockedBackgroundColor },
+              ]}
+            >
+              <ContentInfo
+                content={{ ...entry, title, summary }}
+                value={value}
+                docked
+              />
+            </View>
+          </View>
           <View
-            testID="content-info"
             style={[
-              styles.contentInfo,
+              isTablet
+                ? styles.controlsContainerForTablet
+                : styles.controlsContainerForMobile,
               { backgroundColor: dockedBackgroundColor },
             ]}
           >
-            <ContentInfo
-              content={{ ...entry, title, summary }}
+            <Controls
               value={value}
-              docked
+              visible
+              buttons={R.partial(controlButtons, [
+                playerState.isLive && liveButton,
+              ])}
+              style={styles.playPauseButton}
+              playNextData={playNextData}
+              playerState={playerState}
+            />
+            <Button
+              icon={"close_mini"}
+              size={"medium"}
+              value={value}
+              onPress={onCloseVideoModal}
+              style={styles.buttons}
             />
           </View>
         </View>
-        <View
-          style={[
-            isTablet
-              ? styles.controlsContainerForTablet
-              : styles.controlsContainerForMobile,
-            { backgroundColor: dockedBackgroundColor },
-          ]}
-        >
-          <Controls
-            value={value}
-            visible
-            buttons={R.partial(controlButtons, [
-              playerState.isLive && liveButton,
-            ])}
-            style={styles.playPauseButton}
-            playNextData={playNextData}
-            playerState={playerState}
-          />
-          <Button
-            icon={"close_mini"}
-            size={"medium"}
-            value={value}
-            onPress={onCloseVideoModal}
-            style={styles.buttons}
-          />
-        </View>
       </View>
       <View
         style={{
@@ -310,6 +314,6 @@ export const DockedControls = (props: Props) => {
           backgroundColor: dockedBackgroundColor,
         }}
       />
-    </View>
+    </>
   );
 };

package/src/Player/PlayerModal/VideoPlayerModal.tsx

@@ -1,6 +1,6 @@
-import React, { useRef, ReactElement } from "react";
+import React, { ReactElement, useRef } from "react";
 
-import { StyleSheet, Animated, Pressable, ViewStyle } from "react-native";
+import { Animated, Pressable, StyleSheet, ViewStyle } from "react-native";
 import { PanGestureHandler } from "react-native-gesture-handler";
 import { useStyles } from "./styles";
 import { useConfiguration } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/utils";
@@ -19,6 +19,7 @@ import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-comp
 import { PROGRESS_BAR_HEIGHT } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation/utils";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { GestureAnimatedScrollView } from "./GestureAnimatedScrollView";
+import { PlayerDetailsWrapperHeightContext } from "./context";
 
 const orientationStyles = StyleSheet.create({
   landscape: { flexDirection: "row" },
@@ -30,18 +31,12 @@ const directionStyles = (isLandscape: boolean): ViewStyle => {
 };
 
 type AnimatedModalProps = {
-  enabled?: boolean;
   pip?: boolean;
   fullscreen?: boolean;
-  content?: (
-    opacity: Animated.Value | Animated.AnimatedInterpolation<number>
-  ) => ReactElement;
-  collapsedContent?: (
-    opacity: Animated.Value | Animated.AnimatedInterpolation<number>
-  ) => ReactElement;
-  extraContent?: (
-    opacity: Animated.Value | Animated.AnimatedInterpolation<number>
-  ) => ReactElement;
+  modal?: boolean;
+  content?: ReactElement;
+  collapsedContent?: ReactElement;
+  extraContent?: ReactElement;
   aspectRatio?: number;
   isTabletPortrait?: boolean;
   style?: {
@@ -54,7 +49,6 @@ type AnimatedModalProps = {
 const height = SCREEN_HEIGHT;
 
 export function VideoPlayerModal({
-  enabled = true,
   aspectRatio = DEFAULT_IMAGE_RATIO_VIDEO,
   content,
   extraContent,
@@ -63,7 +57,9 @@ export function VideoPlayerModal({
   style,
   pip = false,
   fullscreen = false,
+  modal = true,
 }: AnimatedModalProps) {
+  const enabled = !!modal && !fullscreen;
   const isTablet = useIsTablet();
 
   let width = SCREEN_WIDTH;
@@ -76,6 +72,8 @@ export function VideoPlayerModal({
   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,
@@ -83,7 +81,7 @@ export function VideoPlayerModal({
     collapsedHeight,
     gestureHandlerProps,
     expand,
-  } = useVideoModalState(translateYRef);
+  } = useVideoModalState(modal ? translateYRef : dummyRef);
 
   const isTabletLandscape = !isTV() && isTablet && !isTabletPortrait;
 
@@ -166,6 +164,20 @@ export function VideoPlayerModal({
       })
     : new Animated.Value(0);
 
+  const [playerDetailsWrapperHeight, setPlayerDetailsWrapperHeight] =
+    React.useState(0);
+
+  const onScrollViewLayout = React.useCallback(
+    ({
+      nativeEvent: {
+        layout: { height },
+      },
+    }) => {
+      setPlayerDetailsWrapperHeight(height);
+    },
+    []
+  );
+
   return (
     <PanGestureHandler
       enabled={enabled}
@@ -212,7 +224,7 @@ export function VideoPlayerModal({
                 },
               ]}
             >
-              {content(expandedOpacity)}
+              {content}
             </Animated.View>
             {extraContent ? (
               <GestureAnimatedScrollView
@@ -220,12 +232,17 @@ export function VideoPlayerModal({
                 contentContainerStyle={{
                   paddingBottom: insets.bottom,
                 }}
+                onLayout={onScrollViewLayout}
                 style={[
                   styles.extraContentScrollView,
                   { opacity: expandedOpacity },
                 ]}
               >
-                {extraContent ? extraContent(expandedOpacity) : null}
+                <PlayerDetailsWrapperHeightContext.Provider
+                  value={playerDetailsWrapperHeight}
+                >
+                  {extraContent}
+                </PlayerDetailsWrapperHeightContext.Provider>
               </GestureAnimatedScrollView>
             ) : null}
           </Animated.View>

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

@@ -12,7 +12,7 @@ export const VIDEO_TRANSITION_THRESHOLD = 0.5; // Threshold for video transition
 const windowDimensions = Dimensions.get("window");
 
 const isOldAndroidDevice =
-  isAndroidPlatform() && !isAndroidVersionAtLeast(35) && !isAndroidTablet();
+  isAndroidPlatform() && !isAndroidVersionAtLeast(34) && !isAndroidTablet();
 
 export const SCREEN_WIDTH = windowDimensions.width;
 

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

@@ -0,0 +1,6 @@
+import React from "react";
+
+export const PlayerDetailsWrapperHeightContext = React.createContext(null);
+
+export const usePlayerDetailsWrapperHeight = () =>
+  React.useContext(PlayerDetailsWrapperHeightContext);

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

@@ -33,15 +33,18 @@ export const useVideoModalState = (
   } = useNavigation();
 
   const plugins = usePlugins();
+
   const menuVisible = isMenuVisible(currentRoute, screenData, plugins);
 
   const collapsed = videoModalState.mode === VideoModalMode.MINIMIZED;
 
   const { bottom } = useSafeAreaInsets();
 
+  const initialBottomOffset = useRef(bottom).current;
+
   const collapsedHeight =
     minimisedHeight +
-    bottom +
+    initialBottomOffset +
     (menuVisible ? bottomTabBarHeight : 0) +
     PROGRESS_BAR_HEIGHT;
 
@@ -144,7 +147,7 @@ export const useVideoModalState = (
         });
       }
     },
-    [collapsedHeight, translateY]
+    [collapsedHeight, translateY, collapsed, videoModalState]
   );
 
   const gestureHandlerProps = useMemo(() => {

package/src/Player/PlayerModal/styles.ts

@@ -88,6 +88,7 @@ export const useStyles = ({ height }: { height: number }) => {
         collapsedBarContainer: {
           ...StyleSheet.absoluteFillObject,
           height: COLLAPSED_HEIGHT,
+          zIndex: 90,
           justifyContent: "flex-end",
         },
         collapsedBarWrapper: {

package/src/Player/index.tsx

@@ -793,7 +793,7 @@ export default class VideoPlayer extends React.Component<
     };
 
     const isFullScreenAudioPlayer =
-      this.getPluginConfiguration()?.["full_screen_audio_player"] || false;
+      this.getPluginConfiguration()?.full_screen_audio_player || false;
 
     const isAudioPlayer = isFullScreenAudioPlayer && isAudioItem;
 
@@ -835,7 +835,7 @@ export default class VideoPlayer extends React.Component<
       this.isReactNativeMethodsSupported() &&
       RNPlayerManager?.[this.playerPluginId]?.play
     ) {
-      delete nativeProps["paused"];
+      delete nativeProps.paused;
     }
 
     const adEvents = {
@@ -1032,11 +1032,11 @@ export default class VideoPlayer extends React.Component<
         />
       ) : (
         <VideoPlayerModal
-          enabled={!!isModal && !fullscreen}
           isTabletPortrait={isTabletPortrait}
           aspectRatio={aspectRatio}
           pip={this.state.piped}
           fullscreen={fullscreen}
+          modal={isModal}
           style={{
             tabletLandscapeWidth: getTabletWidth(
               this.getPluginConfiguration().tablet_landscape_sidebar_width,
@@ -1045,9 +1045,10 @@ export default class VideoPlayer extends React.Component<
             width: style.width,
             height: style.height,
           }}
-          content={(_opacityAnim) => (
+          content={
             <PlayerWrapper
               {...sharedWrapperViewProps}
+              // eslint-disable-next-line react/no-unstable-nested-components
               playerContent={(playerDimensions) => {
                 const shouldRenderBackground =
                   !R.isNil(backgroundImageKey) &&
@@ -1060,11 +1061,7 @@ export default class VideoPlayer extends React.Component<
                     <View style={[playerContainerStyles, playerDimensions]}>
                       {isAudioItem ? (
                         <AudioPlayer
-                          style={
-                            isTV()
-                              ? getStyle(playerDimensions)
-                              : styles.playerSize
-                          }
+                          style={styles.playerSize}
                           audio_item={entry}
                           plugin_configuration={this.getPluginConfiguration()}
                         />
@@ -1086,11 +1083,7 @@ export default class VideoPlayer extends React.Component<
                             {...nativeEvents}
                             {...nativeProps}
                             listener={this.props.listener}
-                            style={
-                              isTV()
-                                ? getStyle(playerDimensions)
-                                : styles.playerSize
-                            }
+                            style={styles.playerSize}
                             pluginConfiguration={this.getPluginConfiguration()}
                             controller={this.props.controller}
                           >
@@ -1117,8 +1110,8 @@ export default class VideoPlayer extends React.Component<
                 );
               }}
             />
-          )}
-          extraContent={(_opacityAnim) => (
+          }
+          extraContent={
             <PlayerDetails
               configuration={this.getPluginConfiguration()}
               style={{ flex: 1 }}
@@ -1129,18 +1122,16 @@ export default class VideoPlayer extends React.Component<
               isModal={isModal}
               pip={this.state.piped}
             />
-          )}
-          collapsedContent={(_opacityAnim) =>
-            this.state.piped ? null : (
-              <View style={styles.container}>
-                <DockedControls
-                  entry={entry}
-                  aspectRatio={aspectRatio}
-                  layoutState={sharedWrapperViewProps.layoutState}
-                  playNextData={sharedWrapperViewProps.playNextData}
-                />
-              </View>
-            )
+          }
+          collapsedContent={
+            <View style={styles.container}>
+              <DockedControls
+                entry={entry}
+                aspectRatio={aspectRatio}
+                layoutState={sharedWrapperViewProps.layoutState}
+                playNextData={sharedWrapperViewProps.playNextData}
+              />
+            </View>
           }
         />
       );

package/src/QuickBrickPlayer.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { ZStoreProvider } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
 import { useOrientationEffect } from "@applicaster/zapp-react-native-utils/reactHooks/videoModal";
 import Player from "./Player";
@@ -49,16 +50,18 @@ const QuickBrickPlayerComponent = (
   usePlayerTTS();
 
   return (
-    <Player
-      {...props}
-      ref={ref}
-      castAction={!props?.disableCastAction && castAction}
-      isCasting={isCasting}
-      PlayerComponent={props.PlayerComponent}
-      openPiP={openPiP}
-      closePiP={closePiP}
-      mode={mode}
-    />
+    <ZStoreProvider name="playerConfiguration" value={controller?.config}>
+      <Player
+        {...props}
+        ref={ref}
+        castAction={!props?.disableCastAction && castAction}
+        isCasting={isCasting}
+        PlayerComponent={props.PlayerComponent}
+        openPiP={openPiP}
+        closePiP={closePiP}
+        mode={mode}
+      />
+    </ZStoreProvider>
   );
 };