bitmovin-player-react-native 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitmovin-player-react-native",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Official React Native bindings for Bitmovin's mobile Player SDKs.",
   "main": "lib/index.js",
   "module": "lib/index.mjs",

package/src/analytics/collector.ts

@@ -0,0 +1,97 @@
+import { NativeModules } from 'react-native';
+import NativeInstance from '../nativeInstance';
+import { AnalyticsConfig, CustomDataConfig } from './config';
+
+const AnalyticsModule = NativeModules.AnalyticsModule;
+
+/**
+ * Analytics collector that can be attached to a player object in order to collect and send
+ * its analytics information.
+ */
+export class AnalyticsCollector extends NativeInstance<AnalyticsConfig> {
+  /**
+   * Whether the native `AnalyticsCollector` object has been created.
+   */
+  isInitialized = false;
+
+  /**
+   * Whether the native `AnalyticsCollector` object has been disposed.
+   */
+  isDestroyed = false;
+
+  /**
+   * Initializes a native `BitmovinPlayerCollector` object.
+   */
+  initialize = () => {
+    if (!this.isInitialized) {
+      AnalyticsModule.initWithConfig(this.nativeId, this.config);
+      this.isInitialized = true;
+    }
+  };
+
+  /**
+   * Disposes the native `BitmovinPlayerCollector` object that has been created
+   * during initialization.
+   */
+  destroy = () => {
+    if (!this.isDestroyed) {
+      AnalyticsModule.destroy(this.nativeId);
+      this.isDestroyed = true;
+    }
+  };
+
+  /**
+   * Attach a player instance to this analytics plugin. After this is completed, BitmovinAnalytics
+   * will start monitoring and sending analytics data based on the attached player instance.
+   *
+   * @param playerId - Native Id of the player to attach this collector instance.
+   */
+  attach = (playerId: string): void => {
+    AnalyticsModule.attach(this.nativeId, playerId);
+  };
+
+  /**
+   * Detach a player instance from this analytics plugin if there's any attached. If no player is attached,
+   * nothing happens.
+   */
+  detach = (): void => {
+    AnalyticsModule.detach(this.nativeId);
+  };
+
+  /**
+   * Dynamically updates analytics custom data information. Use this method
+   * to update your custom data during runtime.
+   *
+   * @param customData - Analytics custom data config.
+   */
+  setCustomDataOnce = (customData: CustomDataConfig) => {
+    AnalyticsModule.setCustomDataOnce(this.nativeId, customData);
+  };
+
+  /**
+   * Sets the internal analytics custom data state.
+   *
+   * @param customData - Analytics custom data config.
+   */
+  setCustomData = (customData: CustomDataConfig) => {
+    AnalyticsModule.setCustomData(this.nativeId, customData);
+  };
+
+  /**
+   * Gets the current custom data config from the native `BitmovinPlayerCollector` instance.
+   *
+   * @returns The current custom data config.
+   */
+  getCustomData = async (): Promise<CustomDataConfig> => {
+    return AnalyticsModule.getCustomData(this.nativeId);
+  };
+
+  /**
+   * Gets the current user id used by the native `BitmovinPlayerCollector` instance.
+   *
+   * @returns The current user id.
+   */
+  getUserId = async (): Promise<string> => {
+    return AnalyticsModule.getUserId(this.nativeId);
+  };
+}

package/src/analytics/config.ts

@@ -0,0 +1,218 @@
+import { NativeInstanceConfig } from '../nativeInstance';
+
+/**
+ * Available cdn provider options for AnalyticsConfig.
+ */
+export enum CdnProvider {
+  BITMOVIN = 'bitmovin',
+  AKAMAI = 'akamai',
+  FASTLY = 'fastly',
+  MAXCDN = 'maxcdn',
+  CLOUDFRONT = 'cloudfront',
+  CHINACACHE = 'chinacache',
+  BITGRAVITY = 'bitgravity',
+}
+
+/**
+ * Object used to configure a new `AnalyticsCollector` instance.
+ */
+export interface AnalyticsConfig
+  extends NativeInstanceConfig,
+    CustomDataConfig {
+  /**
+   * CDN Provide that the video playback session is using.
+   */
+  cdnProvider?: CdnProvider;
+  /**
+   * User ID of the customer.
+   */
+  customUserId?: string;
+  /**
+   * Experiment name needed for A/B testing.
+   */
+  experimentName?: string;
+  /**
+   * ID of the video in the CMS system.
+   */
+  videoId?: string;
+  /**
+   * Human readable title of the video asset currently playing.
+   */
+  title?: string;
+  /**
+   * Analytics key.
+   */
+  key: string;
+  /**
+   * Player key.
+   */
+  playerKey?: string;
+  /**
+   * Breadcrumb path to show where in the app the user is.
+   */
+  path?: string;
+  /**
+   * Flag to see if stream is live before stream metadata is available (default: false).
+   */
+  isLive?: boolean;
+  /**
+   * Flag to enable Ad tracking (default: false).
+   */
+  ads?: boolean;
+  /**
+   * Flag to use randomised userId not depending on device specific values (default: false).
+   */
+  randomizeUserId?: boolean;
+}
+
+export interface CustomDataConfig {
+  /**
+   * Optional free-form custom data
+   */
+  customData1?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData2?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData3?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData4?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData5?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData6?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData7?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData8?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData9?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData10?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData11?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData12?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData13?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData14?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData15?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData16?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData17?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData18?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData19?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData20?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData21?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData22?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData23?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData24?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData25?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData26?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData27?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData28?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData29?: string;
+
+  /**
+   * Optional free-form custom data
+   */
+  customData30?: string;
+}

package/src/analytics/index.ts

@@ -0,0 +1,2 @@
+export * from './config';
+export * from './collector';

package/src/components/PlayerView/events.ts

@@ -13,6 +13,10 @@ import {
   AdStartedEvent,
   DestroyEvent,
   Event,
+  FullscreenEnabledEvent,
+  FullscreenDisabledEvent,
+  FullscreenEnterEvent,
+  FullscreenExitEvent,
   MutedEvent,
   PausedEvent,
   PictureInPictureAvailabilityChangedEvent,
@@ -41,6 +45,7 @@ import {
   SubtitleRemovedEvent,
   TimeChangedEvent,
   UnmutedEvent,
+  VideoPlaybackQualityChangedEvent,
 } from '../../events';
 
 /**
@@ -61,6 +66,10 @@ interface EventProps {
   onAdStarted: AdStartedEvent;
   onDestroy: DestroyEvent;
   onEvent: Event;
+  onFullscreenEnabled: FullscreenEnabledEvent;
+  onFullscreenDisabled: FullscreenDisabledEvent;
+  onFullscreenEnter: FullscreenEnterEvent;
+  onFullscreenExit: FullscreenExitEvent;
   onMuted: MutedEvent;
   onPaused: PausedEvent;
   onPictureInPictureAvailabilityChanged: PictureInPictureAvailabilityChangedEvent;
@@ -89,6 +98,7 @@ interface EventProps {
   onSubtitleRemoved: SubtitleRemovedEvent;
   onTimeChanged: TimeChangedEvent;
   onUnmuted: UnmutedEvent;
+  onVideoPlaybackQualityChanged: VideoPlaybackQualityChangedEvent;
 }
 
 /**

package/src/components/PlayerView/index.tsx

@@ -11,6 +11,8 @@ import { PlayerViewEvents } from './events';
 import { NativePlayerView } from './native';
 import { Player } from '../../player';
 import { useProxy } from '../../hooks/useProxy';
+import { FullscreenHandler } from '../../ui/fullscreenhandler';
+import { FullscreenHandlerBridge } from '../../ui/fullscreenhandlerbridge';
 
 /**
  * Base `PlayerView` component props. Used to stablish common
@@ -31,6 +33,8 @@ export interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents {
    * and render audio/video inside the `PlayerView`.
    */
   player: Player;
+
+  fullscreenHandler?: FullscreenHandler;
 }
 
 /**
@@ -61,13 +65,29 @@ function dispatch(command: string, node: NodeHandle, ...args: any[]) {
  * 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.
  */
-export function PlayerView({ style, player, ...props }: PlayerViewProps) {
+export function PlayerView({
+  style,
+  player,
+  fullscreenHandler,
+  ...props
+}: PlayerViewProps) {
   // Native view reference.
   const nativeView = useRef(null);
   // Native events proxy helper.
   const proxy = useProxy(nativeView);
   // Style resulting from merging `baseStyle` and `props.style`.
   const nativeViewStyle = StyleSheet.flatten([styles.baseStyle, style]);
+
+  const fullscreenBridge: React.MutableRefObject<
+    FullscreenHandlerBridge | undefined
+  > = useRef(undefined);
+  if (fullscreenHandler && !fullscreenBridge.current) {
+    fullscreenBridge.current = new FullscreenHandlerBridge();
+  }
+  if (fullscreenBridge.current) {
+    fullscreenBridge.current.fullscreenHandler = fullscreenHandler;
+  }
+
   useEffect(() => {
     // Initialize native player instance if needed.
     player.initialize();
@@ -75,12 +95,24 @@ export function PlayerView({ style, player, ...props }: PlayerViewProps) {
     const node = findNodeHandle(nativeView.current);
     if (node) {
       dispatch('attachPlayer', node, player.nativeId, player.config);
+      if (fullscreenBridge.current) {
+        dispatch(
+          'attachFullscreenBridge',
+          node,
+          fullscreenBridge.current.nativeId
+        );
+      }
     }
+    return () => {
+      fullscreenBridge.current?.destroy();
+      fullscreenBridge.current = undefined;
+    };
   }, [player]);
   return (
     <NativePlayerView
       ref={nativeView}
       style={nativeViewStyle}
+      fullscreenBridge={fullscreenBridge.current}
       onAdBreakFinished={proxy(props.onAdBreakFinished)}
       onAdBreakStarted={proxy(props.onAdBreakStarted)}
       onAdClicked={proxy(props.onAdClicked)}
@@ -94,6 +126,10 @@ export function PlayerView({ style, player, ...props }: PlayerViewProps) {
       onAdStarted={proxy(props.onAdStarted)}
       onDestroy={proxy(props.onDestroy)}
       onEvent={proxy(props.onEvent)}
+      onFullscreenEnabled={proxy(props.onFullscreenEnabled)}
+      onFullscreenDisabled={proxy(props.onFullscreenDisabled)}
+      onFullscreenEnter={proxy(props.onFullscreenEnter)}
+      onFullscreenExit={proxy(props.onFullscreenExit)}
       onMuted={proxy(props.onMuted)}
       onPaused={proxy(props.onPaused)}
       onPictureInPictureAvailabilityChanged={proxy(
@@ -124,6 +160,7 @@ export function PlayerView({ style, player, ...props }: PlayerViewProps) {
       onSubtitleRemoved={proxy(props.onSubtitleRemoved)}
       onTimeChanged={proxy(props.onTimeChanged)}
       onUnmuted={proxy(props.onUnmuted)}
+      onVideoPlaybackQualityChanged={proxy(props.onVideoPlaybackQualityChanged)}
     />
   );
 }

package/src/components/PlayerView/native.ts

@@ -1,6 +1,7 @@
 import { requireNativeComponent } from 'react-native';
 import { NativePlayerViewEvents } from './events';
 import { BasePlayerViewProps } from './index';
+import { FullscreenHandlerBridge } from '../../ui/fullscreenhandlerbridge';
 
 /**
  * Props type for `NativePlayerView` native component.
@@ -8,7 +9,9 @@ import { BasePlayerViewProps } from './index';
  */
 export interface NativePlayerViewProps
   extends BasePlayerViewProps,
-    NativePlayerViewEvents {}
+    NativePlayerViewEvents {
+  fullscreenBridge?: FullscreenHandlerBridge;
+}
 
 /**
  * Native host component bridging Bitmovin's `PlayerView`.

package/src/events.ts

@@ -7,6 +7,7 @@ import {
   AdSourceType,
 } from './advertising';
 import { SubtitleTrack } from './subtitleTrack';
+import { VideoQuality } from './media';
 
 /**
  * Base event type for all events.
@@ -290,6 +291,34 @@ export interface PictureInPictureEnteredEvent extends Event {}
  */
 export interface PictureInPictureExitedEvent extends Event {}
 
+/**
+ * Emitted when the fullscreen functionality has been enabled.
+ *
+ * @platform iOS, Android
+ */
+export interface FullscreenEnabledEvent extends Event {}
+
+/**
+ * Emitted when the fullscreen functionality has been disabled.
+ *
+ * @platform iOS, Android
+ */
+export interface FullscreenDisabledEvent extends Event {}
+
+/**
+ * Emitted when the player enters fullscreen mode.
+ *
+ * @platform iOS, Android
+ */
+export interface FullscreenEnterEvent extends Event {}
+
+/**
+ * Emitted when the player exits fullscreen mode.
+ *
+ * @platform iOS, Android
+ */
+export interface FullscreenExitEvent extends Event {}
+
 /**
  * Emitted when the availability of the Picture in Picture mode changed on Android.
  *
@@ -455,3 +484,17 @@ export interface AdManifestLoadedEvent extends Event {
    */
   downloadTime: number;
 }
+
+/**
+ * Emitted when the current video playback quality has changed.
+ */
+export interface VideoPlaybackQualityChangedEvent extends Event {
+  /**
+   * The new quality
+   */
+  newVideoQuality: VideoQuality;
+  /**
+   * The previous quality
+   */
+  oldVideoQuality: VideoQuality;
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './advertising';
+export * from './analytics';
 export * from './audioSession';
 export * from './components';
 export * from './drm';
@@ -7,3 +8,4 @@ export * from './hooks';
 export * from './player';
 export * from './source';
 export * from './subtitleTrack';
+export * from './styleConfig';

package/src/media.ts

@@ -0,0 +1,33 @@
+/**
+ * Quality definition of a video representation.
+ */
+export interface VideoQuality {
+  /**
+   * The id of the media quality.
+   */
+  id: string;
+  /**
+   * The label of the media quality that should be exposed to the user.
+   */
+  label?: string;
+  /**
+   * The bitrate of the media quality.
+   */
+  bitrate?: number;
+  /**
+   * The codec of the media quality.
+   */
+  codec?: string;
+  /**
+   * The frame rate of the video quality. If the frame rate is not known or not applicable a value of -1 will be returned.
+   */
+  frameRate?: number;
+  /**
+   * The height of the video quality.
+   */
+  height?: number;
+  /**
+   * The width of the video quality.
+   */
+  width?: number;
+}

package/src/player.ts

@@ -1,8 +1,10 @@
 import { NativeModules, Platform } from 'react-native';
 import { AdItem, AdvertisingConfig } from './advertising';
+import { AnalyticsCollector, AnalyticsConfig } from './analytics';
 import NativeInstance, { NativeInstanceConfig } from './nativeInstance';
 import { Source, SourceConfig } from './source';
 import { SubtitleTrack } from './subtitleTrack';
+import { StyleConfig } from './styleConfig';
 import { TweaksConfig } from './tweaksConfig';
 
 const PlayerModule = NativeModules.PlayerModule;
@@ -34,6 +36,10 @@ export interface PlayerConfig extends NativeInstanceConfig {
    * Configures playback behaviour. A default PlaybackConfig is set initially.
    */
   playbackConfig?: PlaybackConfig;
+  /**
+   * Configures the visual presentation and behaviour of the player UI. A default StyleConfig is set initially.
+   */
+  styleConfig?: StyleConfig;
   /**
    * Configures advertising functionality. A default AdvertisingConfig is set initially.
    */
@@ -42,6 +48,10 @@ export interface PlayerConfig extends NativeInstanceConfig {
    * Configures experimental features. A default TweaksConfig is set initially.
    */
   tweaksConfig?: TweaksConfig;
+  /**
+   * Configures analytics functionality.
+   */
+  analyticsConfig?: AnalyticsConfig;
 }
 
 /**
@@ -135,6 +145,10 @@ export class Player extends NativeInstance<PlayerConfig> {
    * Currently active source, or `null` if none is active.
    */
   source?: Source;
+  /**
+   * Analytics collector currently attached to this player instance.
+   */
+  analyticsCollector?: AnalyticsCollector;
   /**
    * Whether the native `Player` object has been created.
    */
@@ -150,6 +164,12 @@ export class Player extends NativeInstance<PlayerConfig> {
   initialize = () => {
     if (!this.isInitialized) {
       PlayerModule.initWithConfig(this.nativeId, this.config);
+      const analyticsConfig = this.config?.analyticsConfig;
+      if (analyticsConfig) {
+        this.analyticsCollector = new AnalyticsCollector(analyticsConfig);
+        this.analyticsCollector?.initialize();
+        this.analyticsCollector?.attach(this.nativeId);
+      }
       this.isInitialized = true;
     }
   };
@@ -161,6 +181,7 @@ export class Player extends NativeInstance<PlayerConfig> {
     if (!this.isDestroyed) {
       PlayerModule.destroy(this.nativeId);
       this.source?.destroy();
+      this.analyticsCollector?.destroy();
       this.isDestroyed = true;
     }
   };

package/src/source.ts

@@ -78,6 +78,10 @@ export interface SourceConfig extends NativeInstanceConfig {
    * External subtitle tracks to be added into the player.
    */
   subtitleTracks?: SideLoadedSubtitleTrack[];
+  /**
+   * External thumbnails to be added into the player.
+   */
+  thumbnailTrack?: string;
 }
 
 /**