@applicaster/quick-brick-player 12.0.0-rc.1 → 12.0.0-rc.100

package/src/Player/index.tsx

@@ -4,7 +4,7 @@
 import React from "react";
 import * as R from "ramda";
 
-import { findNodeHandle, NativeModules, StyleSheet, View } 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";
 
@@ -36,15 +36,13 @@ import { AudioPlayerWrapper } from "./AudioLayer/AudioPlayerWrapper";
 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";
-
-const RNPlayerManager = {
-  QuickBrickPlayerPlugin: isApplePlatform()
-    ? NativeModules.PlayerModule
-    : NativeModules.QuickBrickDefaultPlayerModule,
-  KalturaPlayerPlugin: isApplePlatform()
-    ? NativeModules.KalturaPlayerModule
-    : NativeModules.QBKalturaPlayerModule,
-};
+import { getTargetScreenDataFromEntry } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useTargetScreenData";
+import { isAppleTV } from "@applicaster/zapp-react-native-ui-components/Helpers/Platform";
+import {
+  AnimationComponent,
+  ComponentAnimationType,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import { RNPlayerManager } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/nativePlayerManager";
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
@@ -55,6 +53,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     zIndex: 1,
   },
+  playerSize: { width: "100%", height: "100%" },
 });
 
 const logger = createLogger({
@@ -87,7 +86,7 @@ export default class VideoPlayer extends React.Component<
     // TODO: Can be deleted, on controller logic
     paused: false,
     piped: false,
-    rate: 1,
+    rate: 1.0,
     // TODO: Hack for analytics, must br removed
     resume: null,
 
@@ -113,8 +112,6 @@ export default class VideoPlayer extends React.Component<
   }
 
   componentWillUnmount() {
-    this.stopBackgroundPlayback();
-
     this.playbackStarted = false;
     this.handleAnalyticEvent(GENERAL_EVENT.session_end);
     this.onPlayerClosed();
@@ -159,6 +156,11 @@ export default class VideoPlayer extends React.Component<
     }
   }
 
+  // For close button
+  public closeNativePlayer = () => {
+    this.stopBackgroundPlayback();
+  };
+
   getPlayNextData = () => this.props.playNextData as PlayNextData;
 
   /**
@@ -333,11 +335,7 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
-  /**
-   * Sets either subtitle language, or audio language if we have a selected a new locale.
-   * If no locale is set it defaults to system language for audio, and leaves subtitles unaltered.
-   */
-  setLanguage = (selected = null) => {
+  selectTrack = (selected) => {
     const { trackType, id, language } = selected || {};
 
     const isOff = language === "Off";
@@ -368,6 +366,10 @@ export default class VideoPlayer extends React.Component<
     }
   };
 
+  setPlaybackRate = (rate = 1.0) => {
+    this.setState({ rate });
+  };
+
   getCurrentTime = () => {
     return this.state.currentTime;
   };
@@ -551,6 +553,26 @@ export default class VideoPlayer extends React.Component<
     this.props.listener?.onPlayerDetached?.(nativeEvent);
   };
 
+  onVideoFullscreenPlayerDidDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidDismiss?.();
+  };
+
+  onVideoFullscreenPlayerDidPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerDidPresent?.();
+  };
+
+  onVideoFullscreenPlayerWillDismiss = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillDismiss?.();
+  };
+
+  onVideoFullscreenPlayerWillPresent = () => {
+    this.props.listener?.onVideoFullscreenPlayerWillPresent?.();
+  };
+
+  onPlayerClose = () => {
+    this.props.listener?.onPlayerClose?.();
+  };
+
   onPiPEnter = () => {
     this.setState({ piped: true });
     this.props.openPiP();
@@ -754,8 +776,6 @@ export default class VideoPlayer extends React.Component<
 
   render() {
     const {
-      castAction,
-      controls,
       docked,
       entry,
       fullscreen,
@@ -765,9 +785,15 @@ export default class VideoPlayer extends React.Component<
       isTabletPortrait,
       muted,
       style,
+      castAction,
+      controller,
+      startComponentsAnimation,
     } = this.props;
 
-    const { audioTrackId, keyEvent, paused, seek, textTrackId } = this.state;
+    const supportNativeCast = controller.supportNativeCast();
+
+    const { audioTrackId, keyEvent, paused, seek, textTrackId, rate } =
+      this.state;
 
     const isAudioItem =
       entry?.content?.type?.includes?.("audio") ||
@@ -812,17 +838,35 @@ export default class VideoPlayer extends React.Component<
     const liveCatchUpEnabled =
       this.props.pluginConfiguration?.liveCatchUpEnabled;
 
-    const hideNativeControls = isTV()
-      ? { controls: !this.getPlayNextData() }
-      : {};
+    // TODO: Get screen data more reliable way useCurrentScreenData
+    const screenData = getTargetScreenDataFromEntry(this.props.playableItem);
+
+    const isInlineTV = screenData?.ui_components?.length > 0 && isTV();
 
-    const platformSpecificProps = isApplePlatform()
+    let platformSpecificProps: any = isApplePlatform()
       ? {
-          ...hideNativeControls,
           resizeMode: nativeResizeMode,
         }
       : {};
 
+    const supportsNativeControls =
+      !!this.props.controller?.supportsNativeControls?.();
+
+    const controls = isAppleTV()
+      ? (supportsNativeControls && !isInlineTV) || !!this.getPlayNextData()
+      : supportsNativeControls && !this.getPlayNextData();
+
+    const shouldUseNativeControls =
+      controls &&
+      !startComponentsAnimation &&
+      !docked &&
+      !castAction?.state?.connected;
+
+    platformSpecificProps = {
+      ...platformSpecificProps,
+      controls: shouldUseNativeControls,
+    };
+
     const pictureInPictureEnabled =
       this.props.pluginConfiguration?.pictureInPictureEnabled;
 
@@ -830,7 +874,6 @@ export default class VideoPlayer extends React.Component<
       entry, // Must be passed first in list
       ...platformSpecificProps,
       audioTrackId,
-      controls,
       docked,
       enableAutoAudioTrackSelection,
       fullscreen, // TODO: Check fullscreen params not crash
@@ -839,6 +882,7 @@ export default class VideoPlayer extends React.Component<
       nowPlayingEnabled,
       paused,
       seek,
+      rate,
       textTrackId,
       liveSeekingEnabled,
       liveCatchUpEnabled,
@@ -884,22 +928,17 @@ export default class VideoPlayer extends React.Component<
       onVideoEnd: this.onVideoEnd, // complete
       onVideoError: this.onVideoError, // error
       onVideoProgress: this.onVideoProgress,
-      onVideoFullscreenPlayerDidDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerDidPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerDidPresent"
-      ),
-      onVideoFullscreenPlayerWillDismiss: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillDismiss"
-      ),
-      onVideoFullscreenPlayerWillPresent: this.unHandledEvent(
-        "onVideoFullscreenPlayerWillPresent"
-      ),
+      onVideoFullscreenPlayerDidDismiss: this.onVideoFullscreenPlayerDidDismiss,
+      onVideoFullscreenPlayerDidPresent: this.onVideoFullscreenPlayerDidPresent,
+      onVideoFullscreenPlayerWillDismiss:
+        this.onVideoFullscreenPlayerWillDismiss,
+      onVideoFullscreenPlayerWillPresent:
+        this.onVideoFullscreenPlayerWillPresent,
       onVideoLoad: this.onVideoLoad,
       onVideoLoadStart: this.unHandledEvent("onVideoLoadStart"),
       onVideoBuffer: this.onVideoBuffer,
       onPlaybackStalled: this.onPlaybackStalled,
+      onPlayerClose: this.onPlayerClose,
       onPlayerAttached: this.onPlayerAttached,
       onPlayerDetached: this.onPlayerDetached,
     };
@@ -950,7 +989,13 @@ export default class VideoPlayer extends React.Component<
       ...androidLifecyclePiPEvents,
     };
 
-    const needToShowPlayNextOverlay = this.getPlayNextData() && !docked;
+    const needToShowPlayNextOverlay =
+      isTV() && this.getPlayNextData() && !docked;
+
+    const needToShowDefaultControls = !(
+      (controls && !castAction?.state?.connected) ||
+      this.getPlayNextData()
+    );
 
     const playerContainerStyles = isApplePlatform()
       ? styles.playerContainerBlack
@@ -973,7 +1018,7 @@ export default class VideoPlayer extends React.Component<
         !needToShowPlayNextOverlay &&
         this.props.mode !== "PIP";
 
-      if (controls === true) {
+      if (shouldUseNativeControls) {
         return null;
       }
 
@@ -992,6 +1037,7 @@ export default class VideoPlayer extends React.Component<
           extraInfoText={castAction?.state?.friendlyStatus}
           controlsAlwaysVisible={castAction?.state?.connected}
           playNextData={this.getPlayNextData()}
+          needToShowDefaultControls={needToShowDefaultControls}
         />
       ) : null;
     };
@@ -1005,10 +1051,12 @@ export default class VideoPlayer extends React.Component<
       inline,
       docked,
       isModal,
+      pip: this.state.piped,
       layoutState: {
         inline,
         docked,
         isModal,
+        pip: this.state.piped,
       },
       configuration: this.getPluginConfiguration(),
       fullscreen: fullscreen,
@@ -1024,29 +1072,14 @@ export default class VideoPlayer extends React.Component<
     const renderMobilePlayer = () => {
       return isFullScreenAudioPlayer && isAudioItem ? (
         <View style={containerStyle}>
-          {!castAction?.state?.connected && (
+          {(!castAction?.state?.connected || supportNativeCast) && (
             <this.props.PlayerComponent
               ref={this._assignRoot}
               {...nativeEvents}
               {...nativeProps}
             />
           )}
-          <AudioPlayerWrapper {...sharedWrapperViewProps}>
-            <View>
-              {
-                <PlayNextOverlay
-                  item={entry}
-                  playerIsDocked={docked}
-                  pluginConfiguration={this.getPluginConfiguration()}
-                  playerId={this.props.playerId}
-                  playNextData={this.getPlayNextData()}
-                  setNextVideoPreloadThresholdPercentage={
-                    this.props.setNextVideoPreloadThresholdPercentage
-                  }
-                />
-              }
-            </View>
-          </AudioPlayerWrapper>
+          <AudioPlayerWrapper {...sharedWrapperViewProps} />
         </View>
       ) : (
         <PlayerWrapper {...sharedWrapperViewProps}>
@@ -1061,11 +1094,24 @@ export default class VideoPlayer extends React.Component<
               <View style={styles.container}>
                 <View style={[playerContainerStyles, playerDimensions]}>
                   {isAudioItem && (
-                    <AudioPlayer
-                      style={playerDimensions}
-                      audio_item={entry}
-                      plugin_configuration={this.getPluginConfiguration()}
-                    />
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={{
+                        ...playerDimensions,
+                        inlineAudioPlayer: true,
+                      }}
+                      style={getStyle(playerDimensions)}
+                    >
+                      <AudioPlayer
+                        style={
+                          isTV()
+                            ? getStyle(playerDimensions)
+                            : styles.playerSize
+                        }
+                        audio_item={entry}
+                        plugin_configuration={this.getPluginConfiguration()}
+                      />
+                    </AnimationComponent>
                   )}
 
                   {shouldRenderBackground && (
@@ -1077,17 +1123,28 @@ export default class VideoPlayer extends React.Component<
                     />
                   )}
 
-                  {!castAction?.state?.connected && (
-                    <this.props.PlayerComponent
-                      ref={this._assignRoot}
-                      {...nativeEvents}
-                      {...nativeProps}
-                      listener={this.props.listener}
+                  {(!castAction?.state?.connected || supportNativeCast) && (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.player}
+                      additionalData={playerDimensions}
                       style={getStyle(playerDimensions)}
-                      pluginConfiguration={this.getPluginConfiguration()}
                     >
-                      {this.childrenWithPlayNext()}
-                    </this.props.PlayerComponent>
+                      <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.childrenWithPlayNext()}
+                      </this.props.PlayerComponent>
+                    </AnimationComponent>
                   )}
                 </View>
 
@@ -1121,6 +1178,7 @@ export default class VideoPlayer extends React.Component<
             listener={this.props.listener}
             style={this.takeParentStyle}
             pluginConfiguration={this.getPluginConfiguration()}
+            controller={this.props.controller}
           >
             {this.childrenWithPlayNext()}
           </this.props.PlayerComponent>