bitmovin-player-react-native 0.4.0 → 0.5.0

package/src/styleConfig.ts

@@ -0,0 +1,87 @@
+/**
+ * Contains config values which can be used to alter the visual presentation and behaviour of the player UI.
+ */
+export interface StyleConfig {
+  /**
+   * Sets if the UI should be enabled or not. Default value is true.
+   * @example
+   * ```
+   * const player = new Player({
+   *   styleConfig: {
+   *     isUiEnabled: false,
+   *   },
+   * });
+   * ```
+   */
+  isUiEnabled?: boolean;
+  /**
+   * Set the CSS file that will be used for the UI. The default CSS file will be completely replaced by the CSS file set with this property.
+   * @example
+   * ```
+   * const player = new Player({
+   *   styleConfig: {
+   *     playerUiCss: 'https://domain.tld/path/to/bitmovinplayer-ui.css',
+   *   },
+   * });
+   * ```
+   * @platform iOS, Android
+   */
+  playerUiCss?: string;
+  /**
+   * Set a CSS file which contains supplemental styles for the player UI. These styles will be added to the default CSS file or the CSS file set with StyleConfig#playerUiCss.
+   * @example
+   * ```
+   * const player = new Player({
+   *   styleConfig: {
+   *     supplementalPlayerUiCss: 'https://domain.tld/path/to/bitmovinplayer-supplemental-ui.css',
+   *   },
+   * });
+   * ```
+   * @platform iOS, Android
+   */
+  supplementalPlayerUiCss?: string;
+  /**
+   * Sets the JS file that will be used for the UI. The default JS file will be completely replaced by the JS file set with this property.
+   * @example
+   * ```
+   * const player = new Player({
+   *   styleConfig: {
+   *     playerUiJs: 'https://domain.tld/path/to/bitmovinplayer-ui.js',
+   *   },
+   * });
+   * ```
+   * @platform iOS, Android
+   */
+  playerUiJs?: string;
+  /**
+   * Determines how the video content is scaled or stretched within the parent container’s bounds.  Possible values are defined in ScalingMode.
+   * Default value is ScalingMode.fit.
+   * @example
+   * ```
+   * const player = new Player({
+   *   styleConfig: {
+   *     scalingMode: ScalingMode.Zoom,
+   *   },
+   * });
+   * ```
+   */
+  scalingMode?: ScalingMode;
+}
+
+/**
+ * Specifies how the video content is scaled or stretched.
+ */
+export enum ScalingMode {
+  /**
+   * Specifies that the player should preserve the video’s aspect ratio and fit the video within the container's bounds.
+   */
+  Fit = 'Fit',
+  /**
+   * Specifies that the video should be stretched to fill the container’s bounds. The aspect ratio may not be preserved.
+   */
+  Stretch = 'Stretch',
+  /**
+   * Specifies that the player should preserve the video’s aspect ratio and fill the container’s bounds.
+   */
+  Zoom = 'Zoom',
+}

package/src/ui/fullscreenhandler.ts

@@ -0,0 +1,19 @@
+/**
+ * Handles the UI state change when fullscreen should be entered or exited.
+ */
+export interface FullscreenHandler {
+  /**
+   * Indicates if the UI is currently in fullscreen mode
+   */
+  isFullscreenActive: boolean;
+
+  /**
+   * Is called by the `PlayerView` when the UI should enter fullscreen mode.
+   */
+  enterFullscreen(): void;
+
+  /**
+   * Is called by the `PlayerView` when the UI should exit fullscreen mode.
+   */
+  exitFullscreen(): void;
+}

package/src/ui/fullscreenhandlerbridge.ts

@@ -0,0 +1,59 @@
+import { NativeModules } from 'react-native';
+import BatchedBridge from 'react-native/Libraries/BatchedBridge/BatchedBridge';
+import { FullscreenHandler } from './fullscreenhandler';
+
+const Uuid = NativeModules.UuidModule;
+const FullscreenHandlerModule = NativeModules.FullscreenHandlerModule;
+
+/**
+ * Takes care of JS/Native communication for a FullscreenHandler.
+ */
+export class FullscreenHandlerBridge {
+  readonly nativeId: string;
+  fullscreenHandler?: FullscreenHandler;
+  isDestroyed: boolean;
+
+  constructor(nativeId?: string) {
+    this.nativeId = nativeId ?? Uuid.generate();
+    this.isDestroyed = false;
+    BatchedBridge.registerCallableModule(
+      `FullscreenBridge-${this.nativeId}`,
+      this
+    );
+    FullscreenHandlerModule.registerHandler(this.nativeId);
+  }
+
+  /**
+   * Destroys the native FullscreenHandler
+   */
+  destroy() {
+    if (!this.isDestroyed) {
+      FullscreenHandlerModule.destroy(this.nativeId);
+      this.isDestroyed = true;
+    }
+  }
+
+  // noinspection JSUnusedGlobalSymbols
+  /**
+   * Called by native code, when the UI should enter fullscreen.
+   */
+  enterFullscreen(): void {
+    this.fullscreenHandler?.enterFullscreen();
+    FullscreenHandlerModule.onFullscreenChanged(
+      this.nativeId,
+      this.fullscreenHandler?.isFullscreenActive ?? false
+    );
+  }
+
+  // noinspection JSUnusedGlobalSymbols
+  /**
+   * Called by native code, when the UI should exit fullscreen.
+   */
+  exitFullscreen(): void {
+    this.fullscreenHandler?.exitFullscreen();
+    FullscreenHandlerModule.onFullscreenChanged(
+      this.nativeId,
+      this.fullscreenHandler?.isFullscreenActive ?? false
+    );
+  }
+}