@applicaster/quick-brick-player 14.0.0-rc.4 → 14.0.0-rc.40

package/src/Player/PlayerView/types.ts

@@ -0,0 +1,42 @@
+import { ReactNode, ComponentType } from "react";
+import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
+import { ViewStyle } from "react-native";
+
+export interface PlayNextOverlayProps {
+  playerIsDocked: boolean;
+  playerId?: string;
+  playNextData: PlayNextData;
+  setNextVideoPreloadThresholdPercentage: (percentage: number) => void;
+}
+
+export interface PlayerComponentProps {
+  ref: React.RefObject<any>;
+  listener: Record<string, any>;
+  configuration: Record<string, any>;
+  style: ViewStyle;
+}
+
+export interface AudioPlayerProps {
+  style: ViewStyle;
+}
+
+export interface PlayerViewBaseProps {
+  children?: ReactNode;
+  type: "audio" | "video";
+  entry: ZappEntry;
+  pluginConfiguration: Record<string, any>;
+  PlayerComponent: ComponentType<any>;
+  playerProps: PlayerComponentProps;
+  playNextProps: PlayNextOverlayProps;
+  audioPlayerProps: AudioPlayerProps;
+  transportControls?: ReactNode;
+  inline?: boolean;
+}
+
+export interface TvOSPlayerViewProps extends PlayerViewBaseProps {
+  nativePlayerIsReady: boolean;
+}
+
+export type GenericTVPlayerViewProps = PlayerViewBaseProps;
+
+export type TVPlayerViewProps = TvOSPlayerViewProps | GenericTVPlayerViewProps;

package/src/Player/index.tsx

@@ -1,12 +1,12 @@
+/* eslint-disable react-native/no-inline-styles */
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable react-native/no-color-literals */
 
 import React from "react";
 import * as R from "ramda";
 
-import { flatten } from "@applicaster/zapp-react-native-utils/utils";
+import { findNodeHandle, StyleSheet, View, Dimensions } from "react-native";
 
-import { findNodeHandle, StyleSheet, View } from "react-native";
 import TransportControlsMobile from "@applicaster/quick-brick-mobile-transport-controls";
 import TransportControlsTV from "@applicaster/quick-brick-tv-transport-controls";
 
@@ -19,7 +19,10 @@ import {
   isWeb,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 
-import { PlayerWrapper } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
+import {
+  PlayerDetails,
+  PlayerWrapper,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal";
 
 import { PlayNextOverlay } from "./PlayNextOverlay";
 import { PlayerImageBackground } from "@applicaster/zapp-react-native-ui-components/Components/PlayerImageBackground";
@@ -33,19 +36,21 @@ import { playerManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { getAllAccessibilityProps } from "@applicaster/zapp-react-native-utils/configurationUtils";
 import { PlayNextData } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainer";
 import { getTargetScreenDataFromEntry } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
-import {
-  AnimationComponent,
-  ComponentAnimationType,
-} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { PlayerAnalyticsManager } from "@applicaster/zapp-react-native-utils/analyticsUtils/PlayerAnalyticsManager";
 import { PlayerAnalyticsTrackerI } from "@applicaster/zapp-react-native-utils/analyticsUtils/playerAnalyticsTracker";
 
 import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 import {
+  getTabletWidth,
   isAudioItem as isAudioItemUtil,
   isInlineTV as isInlineTVUtil,
 } from "@applicaster/zapp-react-native-utils/playerUtils";
 
+import { TVPlayerView } from "./PlayerView/TVPlayerView";
+import PlayerModal, { VideoPlayerModal } from "./PlayerModal";
+import { DockedControls } from "./AudioLayer/Layout/DockedControls";
+import { FlexImage } from "./AudioLayer/Layout/PlayerImage/FlexImage";
+
 const styles = StyleSheet.create({
   container: { flex: 1 },
   playerContainerBlack: { backgroundColor: DEFAULT_COLORS.black },
@@ -55,8 +60,8 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
-  audioPlayerSize: { width: "100%", height: "100%" },
   playerSize: { width: "100%", height: "100%" },
+  flexImage: { height: "100%", aspectRatio: 1, flex: -1 },
 });
 
 const logger = createLogger({
@@ -66,7 +71,14 @@ const logger = createLogger({
 
 const isTvOS = isTvOSPlatform();
 
-const AUDIO_PLAYER_NATIVE_ID = "audio-player-view";
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("screen");
+
+const getScreenAspectRatio = () => {
+  const longEdge = Math.max(SCREEN_WIDTH, SCREEN_HEIGHT);
+  const shortEdge = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
+
+  return longEdge / shortEdge;
+};
 
 export default class VideoPlayer extends React.Component<
   QuickBrickPlayer.PlayerProps,
@@ -688,53 +700,6 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
-  childrenWithExtensions = () => {
-    const { docked, entry, children } = this.props;
-
-    if (!isTvOS) {
-      return children;
-    }
-
-    const output = [];
-
-    // audio-player
-    if (isAudioItemUtil(entry)) {
-      const { nativePlayerIsReady } = this.state;
-
-      // we have to wait ready status of native player view, before showing audio_player
-      if (nativePlayerIsReady) {
-        output.push(
-          <View nativeID={AUDIO_PLAYER_NATIVE_ID} key={AUDIO_PLAYER_NATIVE_ID}>
-            {children}
-          </View>
-        );
-      }
-    } else {
-      output.push(children);
-    }
-    // audio-player
-
-    // play-next
-    if (this.getPlayNextData()) {
-      output.push(
-        <PlayNextOverlay
-          key="play-next-overlay"
-          item={entry}
-          playerIsDocked={docked}
-          pluginConfiguration={this.getPluginConfiguration()}
-          playerId={this.props.playerId}
-          playNextData={this.getPlayNextData()}
-          setNextVideoPreloadThresholdPercentage={
-            this.props.setNextVideoPreloadThresholdPercentage
-          }
-        />
-      );
-    }
-    // play-next
-
-    return flatten(output); // prevent possible case with nested array
-  };
-
   get supportNativeCast() {
     return this.props.controller.supportNativeCast();
   }
@@ -1021,159 +986,196 @@ export default class VideoPlayer extends React.Component<
         pip: this.state.piped,
       },
       configuration: this.getPluginConfiguration(),
-      fullscreen: fullscreen,
-      isTabletPortrait: isTabletPortrait,
+      isTabletPortrait,
       playNextData: this.getPlayNextData(),
     };
 
-    const containerStyle = { flex: 1 };
-
     const backgroundImageKey =
       this.getPluginConfiguration()?.player_preview_image_key;
 
     const shouldRenderNativePlayer =
       !this.props.isCasting || this.supportNativeCast;
 
+    const aspectRatio =
+      !inline && isModal && !this.state.piped ? getScreenAspectRatio() : 16 / 9;
+
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
         // Ensure the View remains in the native hierarchy for proper rendering and interaction
-        <View collapsable={false} style={containerStyle}>
-          {shouldRenderNativePlayer ? (
-            <this.props.PlayerComponent
-              ref={this._assignRoot}
-              {...nativeEvents}
-              {...nativeProps}
-              listener={this.props.listener}
-            />
-          ) : null}
-          <AudioPlayerWrapper {...sharedWrapperViewProps} />
-        </View>
+        <PlayerModal
+          content={
+            <View collapsable={false} style={styles.container}>
+              {shouldRenderNativePlayer ? (
+                <this.props.PlayerComponent
+                  ref={this._assignRoot}
+                  {...nativeEvents}
+                  {...nativeProps}
+                  listener={this.props.listener}
+                />
+              ) : null}
+              <AudioPlayerWrapper {...sharedWrapperViewProps} />
+            </View>
+          }
+          collapsedContent={
+            <View style={styles.container}>
+              <DockedControls
+                entry={entry}
+                aspectRatio={1}
+                layoutState={sharedWrapperViewProps.layoutState}
+                playNextData={sharedWrapperViewProps.playNextData}
+                ImageComponent={
+                  <FlexImage entry={entry} style={styles.flexImage} />
+                }
+              />
+            </View>
+          }
+        />
       ) : (
-        <PlayerWrapper {...sharedWrapperViewProps}>
-          {(playerDimensions) => {
-            const shouldRenderBackground =
-              !R.isNil(backgroundImageKey) &&
-              backgroundImageKey.length > 0 &&
-              !this.onVideoLoadCalled &&
-              !this.state.isAd;
-
-            return (
-              <View style={styles.container}>
-                <View style={[playerContainerStyles, playerDimensions]}>
-                  {isAudioItem ? (
-                    <AnimationComponent
-                      animationType={ComponentAnimationType.player}
-                      additionalData={{
-                        ...playerDimensions,
-                        inlineAudioPlayer: true,
-                      }}
-                      style={getStyle(playerDimensions)}
-                    >
-                      <AudioPlayer
-                        style={
-                          isTV()
-                            ? getStyle(playerDimensions)
-                            : styles.playerSize
+        <VideoPlayerModal
+          enabled={!!isModal && !fullscreen}
+          isTabletPortrait={isTabletPortrait}
+          aspectRatio={aspectRatio}
+          pip={this.state.piped}
+          fullscreen={fullscreen}
+          style={{
+            tabletLandscapeWidth: getTabletWidth(
+              this.getPluginConfiguration().tablet_landscape_sidebar_width,
+              style
+            ),
+            width: style.width,
+            height: style.height,
+          }}
+          content={(_opacityAnim) => (
+            <PlayerWrapper
+              {...sharedWrapperViewProps}
+              playerContent={(playerDimensions) => {
+                const shouldRenderBackground =
+                  !R.isNil(backgroundImageKey) &&
+                  backgroundImageKey.length > 0 &&
+                  !this.onVideoLoadCalled &&
+                  !this.state.isAd;
+
+                return (
+                  <View style={styles.container}>
+                    <View style={[playerContainerStyles, playerDimensions]}>
+                      {isAudioItem ? (
+                        <AudioPlayer
+                          style={
+                            isTV()
+                              ? getStyle(playerDimensions)
+                              : styles.playerSize
+                          }
+                          audio_item={entry}
+                          plugin_configuration={this.getPluginConfiguration()}
+                        />
+                      ) : null}
+
+                      {shouldRenderBackground ? (
+                        <PlayerImageBackground
+                          imageKey={backgroundImageKey}
+                          configuration={this.getPluginConfiguration()}
+                          entry={entry}
+                          style={getBackgroundImageStyle(playerDimensions)}
+                        />
+                      ) : null}
+
+                      {shouldRenderNativePlayer ? (
+                        <View style={getStyle(playerDimensions)}>
+                          <this.props.PlayerComponent
+                            ref={this._assignRoot}
+                            {...nativeEvents}
+                            {...nativeProps}
+                            listener={this.props.listener}
+                            style={
+                              isTV()
+                                ? getStyle(playerDimensions)
+                                : styles.playerSize
+                            }
+                            pluginConfiguration={this.getPluginConfiguration()}
+                            controller={this.props.controller}
+                          >
+                            {this.props.children}
+                          </this.props.PlayerComponent>
+                        </View>
+                      ) : null}
+                    </View>
+
+                    {renderTransportControls(playerDimensions)}
+                    {!this.state.piped && (
+                      <PlayNextOverlay
+                        item={entry}
+                        playerIsDocked={docked}
+                        pluginConfiguration={this.getPluginConfiguration()}
+                        playerId={this.props.playerId}
+                        playNextData={this.getPlayNextData()}
+                        setNextVideoPreloadThresholdPercentage={
+                          this.props.setNextVideoPreloadThresholdPercentage
                         }
-                        audio_item={entry}
-                        plugin_configuration={this.getPluginConfiguration()}
                       />
-                    </AnimationComponent>
-                  ) : null}
-
-                  {shouldRenderBackground ? (
-                    <PlayerImageBackground
-                      imageKey={backgroundImageKey}
-                      configuration={this.getPluginConfiguration()}
-                      entry={entry}
-                      style={getBackgroundImageStyle(playerDimensions)}
-                    />
-                  ) : null}
-
-                  {shouldRenderNativePlayer ? (
-                    <AnimationComponent
-                      animationType={ComponentAnimationType.player}
-                      additionalData={{
-                        ...playerDimensions,
-                        disableAnimatedComponent: isAudioItem,
-                      }}
-                      style={getStyle(playerDimensions)}
-                    >
-                      <this.props.PlayerComponent
-                        ref={this._assignRoot}
-                        {...nativeEvents}
-                        {...nativeProps}
-                        listener={this.props.listener}
-                        style={
-                          isTV()
-                            ? getStyle(playerDimensions)
-                            : styles.playerSize
-                        }
-                        pluginConfiguration={this.getPluginConfiguration()}
-                        controller={this.props.controller}
-                      >
-                        {this.props.children}
-                      </this.props.PlayerComponent>
-                    </AnimationComponent>
-                  ) : null}
-                </View>
-
-                {renderTransportControls(playerDimensions)}
-                {!this.state.piped && (
-                  <PlayNextOverlay
-                    item={entry}
-                    playerIsDocked={docked}
-                    pluginConfiguration={this.getPluginConfiguration()}
-                    playerId={this.props.playerId}
-                    playNextData={this.getPlayNextData()}
-                    setNextVideoPreloadThresholdPercentage={
-                      this.props.setNextVideoPreloadThresholdPercentage
-                    }
-                  />
-                )}
+                    )}
+                  </View>
+                );
+              }}
+            />
+          )}
+          extraContent={(_opacityAnim) => (
+            <PlayerDetails
+              configuration={this.getPluginConfiguration()}
+              style={{ flex: 1 }}
+              entry={entry}
+              isTabletLandscape={!isTabletPortrait}
+              inline={inline}
+              docked={docked}
+              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>
-            );
-          }}
-        </PlayerWrapper>
+            )
+          }
+        />
       );
     };
 
     const renderTVPlayer = () => {
       return (
         <View style={this.takeParentStyle} testID={"player-view"}>
-          {isAudioItem && (isInlineTV || !isTvOS) ? (
-            <AudioPlayer
-              style={getStyle(styles.audioPlayerSize)}
-              audio_item={entry}
-              plugin_configuration={this.getPluginConfiguration()}
-            />
-          ) : null}
-
-          <this.props.PlayerComponent
-            ref={this._assignRoot}
-            {...nativeEvents}
-            {...nativeProps}
-            listener={this.props.listener}
-            style={this.takeParentStyle}
+          <TVPlayerView
+            type={isAudioItem ? "audio" : "video"}
+            entry={entry}
+            inline={isInlineTV}
+            transportControls={renderTransportControls(this.takeParentStyle)}
+            PlayerComponent={this.props.PlayerComponent}
+            nativePlayerIsReady={this.state.nativePlayerIsReady}
             pluginConfiguration={this.getPluginConfiguration()}
-            controller={this.props.controller}
+            playerProps={{
+              ref: this._assignRoot,
+              ...nativeEvents,
+              ...nativeProps,
+              listener: this.props.listener,
+              style: this.takeParentStyle,
+              controller: this.props.controller,
+            }}
+            audioPlayerProps={{ style: getStyle(styles.playerSize) }}
+            playNextProps={{
+              playerIsDocked: docked,
+              playerId: this.props.playerId,
+              playNextData: this.getPlayNextData(),
+              setNextVideoPreloadThresholdPercentage:
+                this.props.setNextVideoPreloadThresholdPercentage,
+            }}
           >
-            {!isInlineTV && this.childrenWithExtensions()}
-          </this.props.PlayerComponent>
-
-          {renderTransportControls(this.takeParentStyle)}
-          {!isTvOS && (
-            <PlayNextOverlay
-              item={entry}
-              playerIsDocked={docked}
-              pluginConfiguration={this.getPluginConfiguration()}
-              playerId={this.props.playerId}
-              playNextData={this.getPlayNextData()}
-              setNextVideoPreloadThresholdPercentage={
-                this.props.setNextVideoPreloadThresholdPercentage
-              }
-            />
-          )}
+            {this.props.children}
+          </TVPlayerView>
         </View>
       );
     };