Merge pull request #300 from bitmovin/typescript-improvements

Split interfaces and implementations for `Player` and `PlayerView`

src/components/PlayerView/index.tsx

@@ -2,87 +2,15 @@ import React, { useRef, useEffect, useCallback } from 'react';
 import {
   Platform,
   UIManager,
-  ViewStyle,
   StyleSheet,
   findNodeHandle,
   NodeHandle,
 } from 'react-native';
-import { PlayerViewEvents } from './events';
 import { NativePlayerView } from './native';
-import { Player } from '../../player';
 import { useProxy } from '../../hooks/useProxy';
-import { FullscreenHandler, CustomMessageHandler } from '../../ui';
 import { FullscreenHandlerBridge } from '../../ui/fullscreenhandlerbridge';
 import { CustomMessageHandlerBridge } from '../../ui/custommessagehandlerbridge';
-import { ScalingMode } from '../../styleConfig';
-import { PictureInPictureConfig } from './pictureInPictureConfig';
-import { PlayerViewConfig } from './playerViewConfig';
-
-/**
- * Base `PlayerView` component props. Used to establish common
- * props between `NativePlayerView` and `PlayerView`.
- * @see NativePlayerView
- */
-export interface BasePlayerViewProps {
-  /**
-   * The `FullscreenHandler` that is used by the `PlayerView` to control the fullscreen mode.
-   */
-  fullscreenHandler?: FullscreenHandler;
-
-  /**
-   * The `CustomMessageHandler` that can be used to directly communicate with the embedded Bitmovin Web UI.
-   */
-  customMessageHandler?: CustomMessageHandler;
-  /**
-   * Style of the `PlayerView`.
-   */
-  style?: ViewStyle;
-
-  /**
-   * Provides options to configure Picture in Picture playback.
-   */
-  pictureInPictureConfig?: PictureInPictureConfig;
-
-  /**
-   * Configures the visual presentation and behaviour of the `PlayerView`.
-   * The value must not be altered after setting it initially.
-   */
-  config?: PlayerViewConfig;
-}
-
-/**
- * `PlayerView` component props.
- * @see PlayerView
- */
-export interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents {
-  /**
-   * `Player` instance (generally returned from `usePlayer` hook) that will control
-   * and render audio/video inside the `PlayerView`.
-   */
-  player: Player;
-
-  /**
-   * Can be set to `true` to request fullscreen mode, or `false` to request exit of fullscreen mode.
-   * Should not be used to get the current fullscreen state. Use `onFullscreenEnter` and `onFullscreenExit`
-   * or the `FullscreenHandler.isFullscreenActive` property to get the current state.
-   * Using this property to change the fullscreen state, it is ensured that the embedded Player UI is also aware
-   * of potential fullscreen state changes.
-   * To use this property, a `FullscreenHandler` must be set.
-   */
-  isFullscreenRequested?: Boolean;
-
-  /**
-   * A value defining how the video is displayed within the parent container's bounds.
-   * Possible values are defined in `ScalingMode`.
-   */
-  scalingMode?: ScalingMode;
-
-  /**
-   * Can be set to `true` to request Picture in Picture mode, or `false` to request exit of Picture in Picture mode.
-   * Should not be used to get the current Picture in Picture state. Use `onPictureInPictureEnter` and `onPictureInPictureExit.
-   */
-  isPictureInPictureRequested?: Boolean;
-}
+import { PlayerViewProps } from './properties';
 
 /**
  * Base style that initializes the native view frame when no width/height prop has been set.

src/components/PlayerView/native.ts

@@ -1,6 +1,6 @@
 import { requireNativeComponent } from 'react-native';
 import { NativePlayerViewEvents } from './events';
-import { BasePlayerViewProps } from './index';
+import { BasePlayerViewProps } from './properties';
 import { FullscreenHandlerBridge } from '../../ui/fullscreenhandlerbridge';
 import { CustomMessageHandlerBridge } from '../../ui/custommessagehandlerbridge';
 

src/components/PlayerView/properties.ts

@@ -0,0 +1,72 @@
+import { PlayerViewEvents } from './events';
+import { Player } from '../../player';
+import { FullscreenHandler, CustomMessageHandler } from '../../ui';
+import { ScalingMode } from '../../styleConfig';
+import { PictureInPictureConfig } from './pictureInPictureConfig';
+import { ViewStyle } from 'react-native';
+import { PlayerViewConfig } from './playerViewConfig';
+
+/**
+ * Base `PlayerView` component props.
+ * Used to establish common props between `NativePlayerView` and {@link PlayerView}.
+ */
+export interface BasePlayerViewProps {
+  /**
+   * The {@link FullscreenHandler} that is used by the {@link PlayerView} to control the fullscreen mode.
+   */
+  fullscreenHandler?: FullscreenHandler;
+
+  /**
+   * The {@link CustomMessageHandler} that can be used to directly communicate with the embedded Bitmovin Web UI.
+   */
+  customMessageHandler?: CustomMessageHandler;
+
+  /**
+   * Style of the {@link PlayerView}.
+   */
+  style?: ViewStyle;
+
+  /**
+   * Provides options to configure Picture in Picture playback.
+   */
+  pictureInPictureConfig?: PictureInPictureConfig;
+
+  /**
+   * Configures the visual presentation and behaviour of the {@link PlayerView}.
+   * The value must not be altered after setting it initially.
+   */
+  config?: PlayerViewConfig;
+}
+
+/**
+ * {@link PlayerView} component props.
+ */
+export interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents {
+  /**
+   * {@link Player} instance (generally returned from {@link usePlayer} hook) that will control
+   * and render audio/video inside the {@link PlayerView}.
+   */
+  player: Player;
+
+  /**
+   * Can be set to `true` to request fullscreen mode, or `false` to request exit of fullscreen mode.
+   * Should not be used to get the current fullscreen state. Use {@link PlayerViewEvents.onFullscreenEnter} and {@link PlayerViewEvents.onFullscreenExit}
+   * or the {@link FullscreenHandler.isFullscreenActive} property to get the current state.
+   * Using this property to change the fullscreen state, it is ensured that the embedded Player UI is also aware
+   * of potential fullscreen state changes.
+   * To use this property, a {@link FullscreenHandler} must be set.
+   */
+  isFullscreenRequested?: Boolean;
+
+  /**
+   * A value defining how the video is displayed within the parent container's bounds.
+   * Possible values are defined in {@link ScalingMode}.
+   */
+  scalingMode?: ScalingMode;
+
+  /**
+   * Can be set to `true` to request Picture in Picture mode, or `false` to request exit of Picture in Picture mode.
+   * Should not be used to get the current Picture in Picture state. Use {@link PlayerViewEvents.onPictureInPictureEnter} and {@link PlayerViewEvents.onPictureInPictureExit}.
+   */
+  isPictureInPictureRequested?: Boolean;
+}

src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './PlayerView';
 export * from './PlayerView/pictureInPictureConfig';
 export * from './PlayerView/playerViewConfig';
+export * from './PlayerView/properties';

src/hooks/usePlayer.ts

@@ -1,5 +1,6 @@
 import { useRef } from 'react';
-import { Player, PlayerConfig } from '../player';
+import { Player } from '../player';
+import { PlayerConfig } from '../playerConfig';
 
 /**
  * React hook that creates and returns a reference to a `Player` instance

src/index.ts

@@ -19,3 +19,5 @@ export * from './audioTrack';
 export * from './media';
 export * from './tweaksConfig';
 export * from './bufferConfig';
+export * from './playbackConfig';
+export * from './playerConfig';

src/playbackConfig.ts

@@ -0,0 +1,77 @@
+/**
+ * Configures the playback behaviour of the player.
+ */
+export interface PlaybackConfig {
+  /**
+   * Whether the player starts playing automatically after loading a source or not. Default is `false`.
+   * @example
+   * ```
+   * const player = new Player({
+   *   playbackConfig: {
+   *     isAutoplayEnabled: true,
+   *   },
+   * });
+   * ```
+   */
+  isAutoplayEnabled?: boolean;
+  /**
+   * Whether the sound is muted on startup or not. Default value is `false`.
+   * @example
+   * ```
+   * const player = new Player({
+   *   playbackConfig: {
+   *     isMuted: true,
+   *   },
+   * });
+   * ```
+   */
+  isMuted?: boolean;
+  /**
+   * Whether time shift / DVR for live streams is enabled or not. Default is `true`.
+   *  @example
+   * ```
+   * const player = new Player({
+   *   playbackConfig: {
+   *     isTimeShiftEnabled: false,
+   *   },
+   * });
+   * ```
+   */
+  isTimeShiftEnabled?: boolean;
+  /**
+   * Whether background playback is enabled or not.
+   * Default is `false`.
+   *
+   * When set to `true`, playback is not automatically paused
+   * anymore when the app moves to the background.
+   * When set to `true`, also make sure to properly configure your app to allow
+   * background playback.
+   *
+   * On tvOS, background playback is only supported for audio-only content.
+   *
+   * Default is `false`.
+   *
+   *  @example
+   * ```
+   * const player = new Player({
+   *   {
+   *     isBackgroundPlaybackEnabled: true,
+   *   }
+   * })
+   * ```
+   */
+  isBackgroundPlaybackEnabled?: boolean;
+  /**
+   * Whether the Picture in Picture mode option is enabled or not. Default is `false`.
+   *  @example
+   * ```
+   * const player = new Player({
+   *   playbackConfig: {
+   *     isPictureInPictureEnabled: true,
+   *   },
+   * });
+   * ```
+   * @deprecated Use {@link PictureInPictureConfig.isEnabled} instead.
+   */
+  isPictureInPictureEnabled?: boolean;
+}