@applicaster/quick-brick-player 13.0.5 → 13.0.6-alpha.4390983410

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,20 @@ 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 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 },
@@ -57,6 +61,7 @@ const styles = StyleSheet.create({
   },
   audioPlayerSize: { width: "100%", height: "100%" },
   playerSize: { width: "100%", height: "100%" },
+  flexImage: { height: "100%", aspectRatio: 1, flex: -1 },
 });
 
 const logger = createLogger({
@@ -68,6 +73,15 @@ 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,
   QuickBrickPlayer.NativePlayerState
@@ -1021,120 +1035,162 @@ 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}
+          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>
+            )
+          }
+        />
       );
     };