From 6c892760d29e0f5c35cfd4aada92bd2d4d3f2d3c Mon Sep 17 00:00:00 2001 From: Roland Kakonyi Date: Wed, 18 Oct 2023 14:30:40 +0200 Subject: [PATCH 1/3] chore: split interfaces and implementations for player and player view --- src/components/PlayerView/index.tsx | 67 +---------- src/components/PlayerView/native.ts | 2 +- src/components/PlayerView/properties.ts | 65 +++++++++++ src/components/index.ts | 1 + src/hooks/usePlayer.ts | 3 +- src/index.ts | 2 + src/playbackConfig.ts | 77 +++++++++++++ src/player.ts | 146 +----------------------- src/playerConfig.ts | 66 +++++++++++ 9 files changed, 218 insertions(+), 211 deletions(-) create mode 100644 src/components/PlayerView/properties.ts create mode 100644 src/playbackConfig.ts create mode 100644 src/playerConfig.ts diff --git a/src/components/PlayerView/index.tsx b/src/components/PlayerView/index.tsx index 12dbb05c..b81849b3 100644 --- a/src/components/PlayerView/index.tsx +++ b/src/components/PlayerView/index.tsx @@ -2,80 +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'; - -/** - * 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; -} - -/** - * `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..52f50c78 --- /dev/null +++ b/src/components/PlayerView/properties.ts @@ -0,0 +1,65 @@ +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'; +/** + * 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; +} + +/** + * `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; +} diff --git a/src/components/index.ts b/src/components/index.ts index d96b21c5..be747485 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ export * from './PlayerView'; export * from './PlayerView/pictureInPictureConfig'; +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; +} From 5df34f3e58f7d90bb6554a32caf9a8d968a87342 Mon Sep 17 00:00:00 2001 From: Roland Kakonyi Date: Wed, 18 Oct 2023 14:42:39 +0200 Subject: [PATCH 2/3] chore: split interfaces and implementations for player and player view --- src/components/PlayerView/properties.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/PlayerView/properties.ts b/src/components/PlayerView/properties.ts index 52f50c78..ab765b41 100644 --- a/src/components/PlayerView/properties.ts +++ b/src/components/PlayerView/properties.ts @@ -5,22 +5,22 @@ import { ScalingMode } from '../../styleConfig'; import { PictureInPictureConfig } from './pictureInPictureConfig'; import { ViewStyle } from 'react-native'; /** - * Base `PlayerView` component props. Used to establish common - * props between `NativePlayerView` and `PlayerView`. - * @see NativePlayerView + * Base `PlayerView` component props. + * Used to establish common props between {@link NativePlayerView} and {@link PlayerView}. */ export interface BasePlayerViewProps { /** - * The `FullscreenHandler` that is used by the `PlayerView` to control the fullscreen mode. + * The {@link 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. + * The {@link CustomMessageHandler} that can be used to directly communicate with the embedded Bitmovin Web UI. */ customMessageHandler?: CustomMessageHandler; + /** - * Style of the `PlayerView`. + * Style of the {@link PlayerView}. */ style?: ViewStyle; From ffb593eea31c37cec967c87a172ab4f77d5cc358 Mon Sep 17 00:00:00 2001 From: Roland Kakonyi Date: Thu, 19 Oct 2023 14:15:16 +0200 Subject: [PATCH 3/3] chore: improve API docs --- src/components/PlayerView/properties.ts | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/PlayerView/properties.ts b/src/components/PlayerView/properties.ts index 7aaaf73c..e391f8c1 100644 --- a/src/components/PlayerView/properties.ts +++ b/src/components/PlayerView/properties.ts @@ -8,11 +8,11 @@ import { PlayerViewConfig } from './playerViewConfig'; /** * Base `PlayerView` component props. - * Used to establish common props between {@link NativePlayerView} and {@link PlayerView}. + * Used to establish common props between `NativePlayerView` and {@link PlayerView}. */ export interface BasePlayerViewProps { /** - * The {@link FullscreenHandler} that is used by the `PlayerView` to control the fullscreen mode. + * The {@link FullscreenHandler} that is used by the {@link PlayerView} to control the fullscreen mode. */ fullscreenHandler?: FullscreenHandler; @@ -39,35 +39,34 @@ export interface BasePlayerViewProps { } /** - * `PlayerView` component props. - * @see PlayerView + * {@link PlayerView} component props. */ export interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents { /** - * `Player` instance (generally returned from `usePlayer` hook) that will control - * and render audio/video inside the `PlayerView`. + * {@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 `onFullscreenEnter` and `onFullscreenExit` - * or the `FullscreenHandler.isFullscreenActive` property to get the current state. + * 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 `FullscreenHandler` must be set. + * 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 `ScalingMode`. + * 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 `onPictureInPictureEnter` and `onPictureInPictureExit. + * Should not be used to get the current Picture in Picture state. Use {@link PlayerViewEvents.onPictureInPictureEnter} and {@link PlayerViewEvents.onPictureInPictureExit}. */ isPictureInPictureRequested?: Boolean; }