diff --git a/src/components/PlayerView/index.tsx b/src/components/PlayerView/index.tsx index 230bbe7f..718a4479 100644 --- a/src/components/PlayerView/index.tsx +++ b/src/components/PlayerView/index.tsx @@ -2,81 +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 { 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; - - /** - * 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. diff --git a/src/components/PlayerView/native.ts b/src/components/PlayerView/native.ts index 2ed1ab0e..97ea5c53 100644 --- a/src/components/PlayerView/native.ts +++ b/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'; diff --git a/src/components/PlayerView/properties.ts b/src/components/PlayerView/properties.ts new file mode 100644 index 00000000..e391f8c1 --- /dev/null +++ b/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; +} diff --git a/src/components/index.ts b/src/components/index.ts index 54c84900..2e6b61fa 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ export * from './PlayerView'; export * from './PlayerView/pictureInPictureConfig'; export * from './PlayerView/playerViewConfig'; +export * from './PlayerView/properties'; diff --git a/src/hooks/usePlayer.ts b/src/hooks/usePlayer.ts index e1cc9284..83ffb98f 100644 --- a/src/hooks/usePlayer.ts +++ b/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 diff --git a/src/index.ts b/src/index.ts index 0c8fcba1..b70fcb90 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/playbackConfig.ts b/src/playbackConfig.ts new file mode 100644 index 00000000..643ce0cb --- /dev/null +++ b/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; +} diff --git a/src/player.ts b/src/player.ts index 7455342e..ed5991cb 100644 --- a/src/player.ts +++ b/src/player.ts @@ -1,156 +1,16 @@ import { NativeModules, Platform } from 'react-native'; -import { AdItem, AdvertisingConfig } from './advertising'; -import { AnalyticsConfig } from './analytics'; -import NativeInstance, { NativeInstanceConfig } from './nativeInstance'; +import NativeInstance from './nativeInstance'; import { Source, SourceConfig } from './source'; import { AudioTrack } from './audioTrack'; import { SubtitleTrack } from './subtitleTrack'; -import { StyleConfig } from './styleConfig'; -import { TweaksConfig } from './tweaksConfig'; -import { AdaptationConfig } from './adaptationConfig'; import { OfflineContentManager, OfflineSourceOptions } from './offline'; import { Thumbnail } from './thumbnail'; import { AnalyticsApi } from './analytics/player'; -import { RemoteControlConfig } from './remoteControlConfig'; -import { BufferConfig } from './bufferConfig'; +import { PlayerConfig } from './playerConfig'; +import { AdItem } from './advertising'; const PlayerModule = NativeModules.PlayerModule; -/** - * Object used to configure a new `Player` instance. - */ -export interface PlayerConfig extends NativeInstanceConfig { - /** - * Bitmovin license key that can be found in the Bitmovin portal. - * If a license key is set here, it will be used instead of the license key found in the `Info.plist` and `AndroidManifest.xml`. - * @example - * Configuring the player license key from source code: - * ``` - * const player = new Player({ - * licenseKey: '\', - * }); - * ``` - * @example - * `licenseKey` can be safely omitted from source code if it has - * been configured in Info.plist/AndroidManifest.xml. - * ``` - * const player = new Player(); // omit `licenseKey` - * player.play(); // call methods and properties... - * ``` - */ - licenseKey?: string; - /** - * Configures playback behaviour. A default {@link PlaybackConfig} is set initially. - */ - playbackConfig?: PlaybackConfig; - /** - * Configures the visual presentation and behaviour of the player UI. A default {@link StyleConfig} is set initially. - */ - styleConfig?: StyleConfig; - /** - * Configures advertising functionality. A default {@link AdvertisingConfig} is set initially. - */ - advertisingConfig?: AdvertisingConfig; - /** - * Configures experimental features. A default {@link TweaksConfig} is set initially. - */ - tweaksConfig?: TweaksConfig; - /** - * Configures analytics functionality. - */ - analyticsConfig?: AnalyticsConfig; - /** - * Configures adaptation logic. - */ - adaptationConfig?: AdaptationConfig; - /** - * Configures remote playback functionality. - */ - remoteControlConfig?: RemoteControlConfig; - /** - * Configures buffer settings. A default {@link BufferConfig} is set initially. - */ - bufferConfig?: BufferConfig; -} - -/** - * 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; -} - /** * Loads, controls and renders audio and video content represented through `Source`s. A player * instance can be created via the `usePlayer` hook and will idle until one or more `Source`s are diff --git a/src/playerConfig.ts b/src/playerConfig.ts new file mode 100644 index 00000000..21ad9bbb --- /dev/null +++ b/src/playerConfig.ts @@ -0,0 +1,66 @@ +import { AdvertisingConfig } from './advertising'; +import { AnalyticsConfig } from './analytics'; +import { StyleConfig } from './styleConfig'; +import { TweaksConfig } from './tweaksConfig'; +import { AdaptationConfig } from './adaptationConfig'; +import { RemoteControlConfig } from './remoteControlConfig'; +import { BufferConfig } from './bufferConfig'; +import { NativeInstanceConfig } from './nativeInstance'; +import { PlaybackConfig } from './playbackConfig'; + +/** + * Object used to configure a new `Player` instance. + */ +export interface PlayerConfig extends NativeInstanceConfig { + /** + * Bitmovin license key that can be found in the Bitmovin portal. + * If a license key is set here, it will be used instead of the license key found in the `Info.plist` and `AndroidManifest.xml`. + * @example + * Configuring the player license key from source code: + * ``` + * const player = new Player({ + * licenseKey: '\', + * }); + * ``` + * @example + * `licenseKey` can be safely omitted from source code if it has + * been configured in Info.plist/AndroidManifest.xml. + * ``` + * const player = new Player(); // omit `licenseKey` + * player.play(); // call methods and properties... + * ``` + */ + licenseKey?: string; + /** + * Configures playback behaviour. A default {@link PlaybackConfig} is set initially. + */ + playbackConfig?: PlaybackConfig; + /** + * Configures the visual presentation and behaviour of the player UI. A default {@link StyleConfig} is set initially. + */ + styleConfig?: StyleConfig; + /** + * Configures advertising functionality. A default {@link AdvertisingConfig} is set initially. + */ + advertisingConfig?: AdvertisingConfig; + /** + * Configures experimental features. A default {@link TweaksConfig} is set initially. + */ + tweaksConfig?: TweaksConfig; + /** + * Configures analytics functionality. + */ + analyticsConfig?: AnalyticsConfig; + /** + * Configures adaptation logic. + */ + adaptationConfig?: AdaptationConfig; + /** + * Configures remote playback functionality. + */ + remoteControlConfig?: RemoteControlConfig; + /** + * Configures buffer settings. A default {@link BufferConfig} is set initially. + */ + bufferConfig?: BufferConfig; +}