bitmovin-player-react-native 0.44.1-alpha.0 → 1.0.0-alpha.0

package/src/components/PlayerView/index.tsx

@@ -1,12 +1,7 @@
-import React, { useRef, useEffect, useCallback } from 'react';
-import {
-  Platform,
-  UIManager,
-  StyleSheet,
-  findNodeHandle,
-  NodeHandle,
-} from 'react-native';
-import { NativePlayerView } from './native';
+import React, { useRef, useEffect, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { useKeepAwake } from 'expo-keep-awake';
+import { NativePlayerView, NativePlayerViewConfig } from './native';
 import { useProxy } from '../../hooks/useProxy';
 import { FullscreenHandlerBridge } from '../../ui/fullscreenhandlerbridge';
 import { CustomMessageHandlerBridge } from '../../ui/custommessagehandlerbridge';
@@ -21,21 +16,6 @@ const styles = StyleSheet.create({
   },
 });
 
-/**
- * Dispatches any given `NativePlayerView` commands on React's `UIManager`.
- */
-function dispatch(command: string, node: NodeHandle, ...args: any[]) {
-  const commandId =
-    Platform.OS === 'android'
-      ? (UIManager as any).NativePlayerView.Commands[command].toString()
-      : UIManager.getViewManagerConfig('NativePlayerView').Commands[command];
-  UIManager.dispatchViewManagerCommand(
-    node,
-    commandId,
-    Platform.select({ ios: args, android: [node, ...args] })
-  );
-}
-
 /**
  * Component that provides the Bitmovin Player UI and default UI handling to an attached `Player` instance.
  * This component needs a `Player` instance to work properly so make sure one is passed to it as a prop.
@@ -54,13 +34,8 @@ export function PlayerView({
   isPictureInPictureRequested = false,
   ...props
 }: PlayerViewProps) {
-  // Workaround React Native UIManager commands not sent until UI refresh
-  // See: https://github.com/bitmovin/bitmovin-player-react-native/issues/163
-  // Might be fixed in recent RN version: https://github.com/microsoft/react-native-windows/issues/7543
-  // Workaround: call a native (noop) function after a (necessary) arbitrary delay
-  const workaroundViewManagerCommandNotSent = useCallback(() => {
-    setTimeout(() => player.getDuration(), 100);
-  }, [player]);
+  // Keep the device awake while the PlayerView is mounted
+  useKeepAwake();
 
   const nativeView = useRef(viewRef?.current || null);
 
@@ -69,9 +44,8 @@ export function PlayerView({
   // Style resulting from merging `baseStyle` and `props.style`.
   const nativeViewStyle = StyleSheet.flatten([styles.baseStyle, style]);
 
-  const fullscreenBridge: React.MutableRefObject<
-    FullscreenHandlerBridge | undefined
-  > = useRef(undefined);
+  const fullscreenBridge: React.RefObject<FullscreenHandlerBridge | undefined> =
+    useRef(undefined);
   if (fullscreenHandler && !fullscreenBridge.current) {
     fullscreenBridge.current = new FullscreenHandlerBridge();
   }
@@ -79,7 +53,7 @@ export function PlayerView({
     fullscreenBridge.current.setFullscreenHandler(fullscreenHandler);
   }
 
-  const customMessageHandlerBridge: React.MutableRefObject<
+  const customMessageHandlerBridge: React.RefObject<
     CustomMessageHandlerBridge | undefined
   > = useRef(undefined);
   if (customMessageHandler && !customMessageHandlerBridge.current) {
@@ -91,31 +65,24 @@ export function PlayerView({
     );
   }
 
+  const nativePlayerViewConfig: NativePlayerViewConfig = {
+    playerId: player.nativeId,
+    customMessageHandlerBridgeId: customMessageHandlerBridge.current?.nativeId,
+    enableBackgroundPlayback:
+      player.config?.playbackConfig?.isBackgroundPlaybackEnabled,
+    isPictureInPictureEnabledOnPlayer:
+      player.config?.playbackConfig?.isPictureInPictureEnabled,
+    userInterfaceTypeName: player.config?.styleConfig?.userInterfaceType,
+    playerViewConfig: config,
+  };
+
+  const [isPlayerInitialized, setIsPlayerInitialized] = useState(false);
+
   useEffect(() => {
-    // Initialize native player instance if needed.
-    player.initialize();
-    // Attach native player to native `PlayerView`.
-    const node = findNodeHandle(nativeView.current);
-    if (node) {
-      // For iOS this has to happen before attaching the player to the view
-      // as we need to set the CustomMessageHandler on the BitmovinUserInterfaceConfig
-      if (customMessageHandlerBridge.current) {
-        dispatch(
-          'setCustomMessageHandlerBridgeId',
-          node,
-          customMessageHandlerBridge.current.nativeId
-        );
-      }
-      dispatch('attachPlayer', node, player.nativeId, player.config);
-      if (fullscreenBridge.current) {
-        dispatch(
-          'attachFullscreenBridge',
-          node,
-          fullscreenBridge.current.nativeId
-        );
-      }
-      workaroundViewManagerCommandNotSent();
-    }
+    player.initialize().then(() => {
+      setIsPlayerInitialized(true);
+      // call attach player on native view if switched to AsyncFunction for RNPlayerViewExpo
+    });
 
     return () => {
       fullscreenBridge.current?.destroy();
@@ -123,28 +90,7 @@ export function PlayerView({
       customMessageHandlerBridge.current?.destroy();
       customMessageHandlerBridge.current = undefined;
     };
-  }, [player, workaroundViewManagerCommandNotSent]);
-
-  useEffect(() => {
-    const node = findNodeHandle(nativeView.current);
-    if (node) {
-      dispatch('setFullscreen', node, isFullscreenRequested);
-    }
-  }, [isFullscreenRequested, nativeView]);
-
-  useEffect(() => {
-    const node = findNodeHandle(nativeView.current);
-    if (node && scalingMode) {
-      dispatch('setScalingMode', node, scalingMode);
-    }
-  }, [scalingMode, nativeView]);
-
-  useEffect(() => {
-    const node = findNodeHandle(nativeView.current);
-    if (node) {
-      dispatch('setPictureInPicture', node, isPictureInPictureRequested);
-    }
-  }, [isPictureInPictureRequested, nativeView]);
+  }, [player, fullscreenBridge, customMessageHandlerBridge]);
 
   useEffect(() => {
     if (viewRef) {
@@ -153,83 +99,87 @@ export function PlayerView({
   }, [viewRef, nativeView]);
 
   return (
-    <NativePlayerView
-      ref={nativeView}
-      style={nativeViewStyle}
-      fullscreenBridge={fullscreenBridge.current}
-      customMessageHandlerBridge={customMessageHandlerBridge.current}
-      config={config}
-      onBmpAdBreakFinished={proxy(props.onAdBreakFinished)}
-      onBmpAdBreakStarted={proxy(props.onAdBreakStarted)}
-      onBmpAdClicked={proxy(props.onAdClicked)}
-      onBmpAdError={proxy(props.onAdError)}
-      onBmpAdFinished={proxy(props.onAdFinished)}
-      onBmpAdManifestLoad={proxy(props.onAdManifestLoad)}
-      onBmpAdManifestLoaded={proxy(props.onAdManifestLoaded)}
-      onBmpAdQuartile={proxy(props.onAdQuartile)}
-      onBmpAdScheduled={proxy(props.onAdScheduled)}
-      onBmpAdSkipped={proxy(props.onAdSkipped)}
-      onBmpAdStarted={proxy(props.onAdStarted)}
-      onBmpCastAvailable={proxy(props.onCastAvailable)}
-      onBmpCastPaused={proxy(props.onCastPaused)}
-      onBmpCastPlaybackFinished={proxy(props.onCastPlaybackFinished)}
-      onBmpCastPlaying={proxy(props.onCastPlaying)}
-      onBmpCastStarted={proxy(props.onCastStarted)}
-      onBmpCastStart={proxy(props.onCastStart)}
-      onBmpCastStopped={proxy(props.onCastStopped)}
-      onBmpCastTimeUpdated={proxy(props.onCastTimeUpdated)}
-      onBmpCastWaitingForDevice={proxy(props.onCastWaitingForDevice)}
-      onBmpCueEnter={proxy(props.onCueEnter)}
-      onBmpCueExit={proxy(props.onCueExit)}
-      onBmpDestroy={proxy(props.onDestroy)}
-      onBmpEvent={proxy(props.onEvent)}
-      onBmpFullscreenEnabled={proxy(props.onFullscreenEnabled)}
-      onBmpFullscreenDisabled={proxy(props.onFullscreenDisabled)}
-      onBmpFullscreenEnter={proxy(props.onFullscreenEnter)}
-      onBmpFullscreenExit={proxy(props.onFullscreenExit)}
-      onBmpMuted={proxy(props.onMuted)}
-      onBmpPaused={proxy(props.onPaused)}
-      onBmpPictureInPictureAvailabilityChanged={proxy(
-        props.onPictureInPictureAvailabilityChanged
-      )}
-      onBmpPictureInPictureEnter={proxy(props.onPictureInPictureEnter)}
-      onBmpPictureInPictureEntered={proxy(props.onPictureInPictureEntered)}
-      onBmpPictureInPictureExit={proxy(props.onPictureInPictureExit)}
-      onBmpPictureInPictureExited={proxy(props.onPictureInPictureExited)}
-      onBmpPlay={proxy(props.onPlay)}
-      onBmpPlaybackFinished={proxy(props.onPlaybackFinished)}
-      onBmpPlaybackSpeedChanged={proxy(props.onPlaybackSpeedChanged)}
-      onBmpPlayerActive={proxy(props.onPlayerActive)}
-      onBmpPlayerError={proxy(props.onPlayerError)}
-      onBmpPlayerWarning={proxy(props.onPlayerWarning)}
-      onBmpPlaying={proxy(props.onPlaying)}
-      onBmpReady={proxy(props.onReady)}
-      onBmpSeek={proxy(props.onSeek)}
-      onBmpSeeked={proxy(props.onSeeked)}
-      onBmpTimeShift={proxy(props.onTimeShift)}
-      onBmpTimeShifted={proxy(props.onTimeShifted)}
-      onBmpStallStarted={proxy(props.onStallStarted)}
-      onBmpStallEnded={proxy(props.onStallEnded)}
-      onBmpSourceError={proxy(props.onSourceError)}
-      onBmpSourceLoad={proxy(props.onSourceLoad)}
-      onBmpSourceLoaded={proxy(props.onSourceLoaded)}
-      onBmpSourceUnloaded={proxy(props.onSourceUnloaded)}
-      onBmpSourceWarning={proxy(props.onSourceWarning)}
-      onBmpAudioAdded={proxy(props.onAudioAdded)}
-      onBmpAudioChanged={proxy(props.onAudioChanged)}
-      onBmpAudioRemoved={proxy(props.onAudioRemoved)}
-      onBmpSubtitleAdded={proxy(props.onSubtitleAdded)}
-      onBmpSubtitleChanged={proxy(props.onSubtitleChanged)}
-      onBmpSubtitleRemoved={proxy(props.onSubtitleRemoved)}
-      onBmpTimeChanged={proxy(props.onTimeChanged)}
-      onBmpUnmuted={proxy(props.onUnmuted)}
-      onBmpVideoDownloadQualityChanged={proxy(
-        props.onVideoDownloadQualityChanged
-      )}
-      onBmpVideoPlaybackQualityChanged={proxy(
-        props.onVideoPlaybackQualityChanged
-      )}
-      onBmpDownloadFinished={proxy(props.onDownloadFinished)}
-    />
+    isPlayerInitialized && (
+      <NativePlayerView
+        ref={nativeView}
+        style={nativeViewStyle}
+        config={nativePlayerViewConfig}
+        isFullscreenRequested={isFullscreenRequested}
+        isPictureInPictureRequested={isPictureInPictureRequested}
+        scalingMode={scalingMode}
+        fullscreenBridgeId={fullscreenBridge.current?.nativeId}
+        onBmpAdBreakFinished={proxy(props.onAdBreakFinished)}
+        onBmpAdBreakStarted={proxy(props.onAdBreakStarted)}
+        onBmpAdClicked={proxy(props.onAdClicked)}
+        onBmpAdError={proxy(props.onAdError)}
+        onBmpAdFinished={proxy(props.onAdFinished)}
+        onBmpAdManifestLoad={proxy(props.onAdManifestLoad)}
+        onBmpAdManifestLoaded={proxy(props.onAdManifestLoaded)}
+        onBmpAdQuartile={proxy(props.onAdQuartile)}
+        onBmpAdScheduled={proxy(props.onAdScheduled)}
+        onBmpAdSkipped={proxy(props.onAdSkipped)}
+        onBmpAdStarted={proxy(props.onAdStarted)}
+        onBmpCastAvailable={proxy(props.onCastAvailable)}
+        onBmpCastPaused={proxy(props.onCastPaused)}
+        onBmpCastPlaybackFinished={proxy(props.onCastPlaybackFinished)}
+        onBmpCastPlaying={proxy(props.onCastPlaying)}
+        onBmpCastStarted={proxy(props.onCastStarted)}
+        onBmpCastStart={proxy(props.onCastStart)}
+        onBmpCastStopped={proxy(props.onCastStopped)}
+        onBmpCastTimeUpdated={proxy(props.onCastTimeUpdated)}
+        onBmpCastWaitingForDevice={proxy(props.onCastWaitingForDevice)}
+        onBmpCueEnter={proxy(props.onCueEnter)}
+        onBmpCueExit={proxy(props.onCueExit)}
+        onBmpDestroy={proxy(props.onDestroy)}
+        onBmpEvent={proxy(props.onEvent)}
+        onBmpFullscreenEnabled={proxy(props.onFullscreenEnabled)}
+        onBmpFullscreenDisabled={proxy(props.onFullscreenDisabled)}
+        onBmpFullscreenEnter={proxy(props.onFullscreenEnter)}
+        onBmpFullscreenExit={proxy(props.onFullscreenExit)}
+        onBmpMuted={proxy(props.onMuted)}
+        onBmpPaused={proxy(props.onPaused)}
+        onBmpPictureInPictureAvailabilityChanged={proxy(
+          props.onPictureInPictureAvailabilityChanged
+        )}
+        onBmpPictureInPictureEnter={proxy(props.onPictureInPictureEnter)}
+        onBmpPictureInPictureEntered={proxy(props.onPictureInPictureEntered)}
+        onBmpPictureInPictureExit={proxy(props.onPictureInPictureExit)}
+        onBmpPictureInPictureExited={proxy(props.onPictureInPictureExited)}
+        onBmpPlay={proxy(props.onPlay)}
+        onBmpPlaybackFinished={proxy(props.onPlaybackFinished)}
+        onBmpPlaybackSpeedChanged={proxy(props.onPlaybackSpeedChanged)}
+        onBmpPlayerActive={proxy(props.onPlayerActive)}
+        onBmpPlayerError={proxy(props.onPlayerError)}
+        onBmpPlayerWarning={proxy(props.onPlayerWarning)}
+        onBmpPlaying={proxy(props.onPlaying)}
+        onBmpReady={proxy(props.onReady)}
+        onBmpSeek={proxy(props.onSeek)}
+        onBmpSeeked={proxy(props.onSeeked)}
+        onBmpTimeShift={proxy(props.onTimeShift)}
+        onBmpTimeShifted={proxy(props.onTimeShifted)}
+        onBmpStallStarted={proxy(props.onStallStarted)}
+        onBmpStallEnded={proxy(props.onStallEnded)}
+        onBmpSourceError={proxy(props.onSourceError)}
+        onBmpSourceLoad={proxy(props.onSourceLoad)}
+        onBmpSourceLoaded={proxy(props.onSourceLoaded)}
+        onBmpSourceUnloaded={proxy(props.onSourceUnloaded)}
+        onBmpSourceWarning={proxy(props.onSourceWarning)}
+        onBmpAudioAdded={proxy(props.onAudioAdded)}
+        onBmpAudioChanged={proxy(props.onAudioChanged)}
+        onBmpAudioRemoved={proxy(props.onAudioRemoved)}
+        onBmpSubtitleAdded={proxy(props.onSubtitleAdded)}
+        onBmpSubtitleChanged={proxy(props.onSubtitleChanged)}
+        onBmpSubtitleRemoved={proxy(props.onSubtitleRemoved)}
+        onBmpTimeChanged={proxy(props.onTimeChanged)}
+        onBmpUnmuted={proxy(props.onUnmuted)}
+        onBmpVideoDownloadQualityChanged={proxy(
+          props.onVideoDownloadQualityChanged
+        )}
+        onBmpVideoPlaybackQualityChanged={proxy(
+          props.onVideoPlaybackQualityChanged
+        )}
+        onBmpDownloadFinished={proxy(props.onDownloadFinished)}
+      />
+    )
   );
 }

package/src/components/PlayerView/native.ts

@@ -1,22 +1,35 @@
-import { requireNativeComponent } from 'react-native';
+import { requireNativeViewManager } from 'expo-modules-core';
 import { NativePlayerViewEvents } from './nativeEvents';
-import { BasePlayerViewProps } from './properties';
-import { FullscreenHandlerBridge } from '../../ui/fullscreenhandlerbridge';
-import { CustomMessageHandlerBridge } from '../../ui/custommessagehandlerbridge';
+import { ViewStyle } from 'react-native';
+import { ScalingMode } from '../../styleConfig';
+import { PlayerViewConfig } from './playerViewConfig';
+
+export interface NativePlayerViewConfig {
+  playerViewConfig?: PlayerViewConfig;
+  playerId: string;
+  customMessageHandlerBridgeId?: string;
+  enableBackgroundPlayback?: boolean;
+  isPictureInPictureEnabledOnPlayer?: boolean;
+  userInterfaceTypeName?: string;
+}
 
 /**
  * Props type for `NativePlayerView` native component.
  * Mostly maps the event props defined in native code.
  */
-export interface NativePlayerViewProps
-  extends BasePlayerViewProps,
-    NativePlayerViewEvents {
-  fullscreenBridge?: FullscreenHandlerBridge;
-  customMessageHandlerBridge?: CustomMessageHandlerBridge;
+export interface NativePlayerViewProps extends NativePlayerViewEvents {
+  ref?: React.RefObject<null>;
+  isFullscreenRequested?: boolean;
+  scalingMode?: ScalingMode;
+  isPictureInPictureRequested?: boolean;
+  style?: ViewStyle;
+  config: NativePlayerViewConfig;
+  fullscreenBridgeId?: string;
 }
 
 /**
  * Native host component bridging Bitmovin's `PlayerView`.
  */
-export const NativePlayerView =
-  requireNativeComponent<NativePlayerViewProps>('NativePlayerView');
+export const NativePlayerView = requireNativeViewManager<NativePlayerViewProps>(
+  'RNPlayerViewManager'
+);