bitmovin-player-react-native 0.1.0

package/lib/index.mjs

@@ -0,0 +1,191 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// src/player.ts
+import { NativeModules, Platform } from "react-native";
+var PlayerModule = NativeModules.PlayerModule;
+var Player = class {
+  constructor(config) {
+    __publicField(this, "nativeId");
+    __publicField(this, "config");
+    __publicField(this, "load", (source) => {
+      PlayerModule.loadSource(this.nativeId, source);
+    });
+    __publicField(this, "unload", () => {
+      PlayerModule.unload(this.nativeId);
+    });
+    __publicField(this, "play", () => {
+      PlayerModule.play(this.nativeId);
+    });
+    __publicField(this, "pause", () => {
+      PlayerModule.pause(this.nativeId);
+    });
+    __publicField(this, "seek", (time) => {
+      PlayerModule.seek(this.nativeId, time);
+    });
+    __publicField(this, "mute", () => {
+      PlayerModule.mute(this.nativeId);
+    });
+    __publicField(this, "unmute", () => {
+      PlayerModule.unmute(this.nativeId);
+    });
+    __publicField(this, "destroy", () => {
+      PlayerModule.destroy(this.nativeId);
+    });
+    __publicField(this, "setVolume", (volume) => {
+      PlayerModule.setVolume(this.nativeId, volume);
+    });
+    __publicField(this, "getSource", async () => {
+      return PlayerModule.source(this.nativeId);
+    });
+    __publicField(this, "getVolume", async () => {
+      return PlayerModule.getVolume(this.nativeId);
+    });
+    __publicField(this, "getCurrentTime", async (mode) => {
+      return PlayerModule.currentTime(this.nativeId, mode);
+    });
+    __publicField(this, "getDuration", async () => {
+      return PlayerModule.duration(this.nativeId);
+    });
+    __publicField(this, "isMuted", async () => {
+      return PlayerModule.isMuted(this.nativeId);
+    });
+    __publicField(this, "isPlaying", async () => {
+      return PlayerModule.isPlaying(this.nativeId);
+    });
+    __publicField(this, "isPaused", async () => {
+      return PlayerModule.isPaused(this.nativeId);
+    });
+    __publicField(this, "isLive", async () => {
+      return PlayerModule.isLive(this.nativeId);
+    });
+    __publicField(this, "isAirPlayActive", async () => {
+      if (Platform.OS === "android") {
+        console.warn(`[Player ${this.nativeId}] Method isAirPlayActive is not available for Android. Only iOS devices.`);
+        return false;
+      }
+      return PlayerModule.isAirPlayActive(this.nativeId);
+    });
+    __publicField(this, "isAirPlayAvailable", async () => {
+      if (Platform.OS === "android") {
+        console.warn(`[Player ${this.nativeId}] Method isAirPlayAvailable is not available for Android. Only iOS devices.`);
+        return false;
+      }
+      return PlayerModule.isAirPlayAvailable(this.nativeId);
+    });
+    this.config = config ?? null;
+    this.nativeId = config?.nativeId ?? PlayerModule.generateUUIDv4();
+    PlayerModule.initWithConfig(this.nativeId, this.config);
+  }
+};
+
+// src/source.ts
+var SourceType = /* @__PURE__ */ ((SourceType2) => {
+  SourceType2["NONE"] = "none";
+  SourceType2["HLS"] = "hls";
+  SourceType2["DASH"] = "dash";
+  SourceType2["PROGRESSIVE"] = "progressive";
+  return SourceType2;
+})(SourceType || {});
+var LoadingState = /* @__PURE__ */ ((LoadingState2) => {
+  LoadingState2[LoadingState2["UNLOADED"] = 0] = "UNLOADED";
+  LoadingState2[LoadingState2["LOADING"] = 1] = "LOADING";
+  LoadingState2[LoadingState2["LOADED"] = 2] = "LOADED";
+  return LoadingState2;
+})(LoadingState || {});
+
+// src/hooks/usePlayer.ts
+import { useRef } from "react";
+function usePlayer(config) {
+  return useRef(new Player(config)).current;
+}
+
+// src/components/PlayerView/index.tsx
+import React, { useRef as useRef3, useEffect } from "react";
+import {
+  Platform as Platform2,
+  UIManager,
+  StyleSheet,
+  findNodeHandle as findNodeHandle2
+} from "react-native";
+
+// src/components/PlayerView/native.ts
+import { requireNativeComponent } from "react-native";
+var NativePlayerView = requireNativeComponent("NativePlayerView");
+
+// src/hooks/useProxy.ts
+import omit from "lodash.omit";
+import { useCallback, useRef as useRef2 } from "react";
+import { findNodeHandle } from "react-native";
+function unwrapNativeEvent(event) {
+  return omit(event.nativeEvent, ["target"]);
+}
+function useProxy(viewRef, proxy) {
+  const proxyRef = useRef2(proxy);
+  return useCallback((event) => {
+    const node = event.target._nativeTag;
+    if (node === findNodeHandle(viewRef.current)) {
+      proxyRef.current?.(unwrapNativeEvent(event));
+    }
+  }, [viewRef]);
+}
+
+// src/components/PlayerView/index.tsx
+var styles = StyleSheet.create({
+  baseStyle: {
+    alignSelf: "stretch"
+  }
+});
+function dispatch(command, node, playerId) {
+  const commandId = Platform2.OS === "android" ? UIManager.NativePlayerView.Commands[command].toString() : UIManager.getViewManagerConfig("NativePlayerView").Commands[command];
+  UIManager.dispatchViewManagerCommand(node, commandId, Platform2.select({
+    ios: [playerId],
+    android: [node, playerId]
+  }));
+}
+function PlayerView(props) {
+  const nativeView = useRef3(null);
+  const style = StyleSheet.flatten([styles.baseStyle, props.style]);
+  useEffect(() => {
+    const node = findNodeHandle2(nativeView.current);
+    dispatch("attachPlayer", node, props.player.nativeId);
+    return () => {
+      dispatch("detachPlayer", node, props.player.nativeId);
+    };
+  }, [props.player.nativeId]);
+  return /* @__PURE__ */ React.createElement(NativePlayerView, {
+    ref: nativeView,
+    style,
+    onEvent: useProxy(nativeView, props.onEvent),
+    onPlayerActive: useProxy(nativeView, props.onPlayerActive),
+    onPlayerError: useProxy(nativeView, props.onPlayerError),
+    onPlayerWarning: useProxy(nativeView, props.onPlayerWarning),
+    onDestroy: useProxy(nativeView, props.onDestroy),
+    onMuted: useProxy(nativeView, props.onMuted),
+    onUnmuted: useProxy(nativeView, props.onUnmuted),
+    onReady: useProxy(nativeView, props.onReady),
+    onPaused: useProxy(nativeView, props.onPaused),
+    onPlay: useProxy(nativeView, props.onPlay),
+    onPlaying: useProxy(nativeView, props.onPlaying),
+    onPlaybackFinished: useProxy(nativeView, props.onPlaybackFinished),
+    onSeek: useProxy(nativeView, props.onSeek),
+    onSeeked: useProxy(nativeView, props.onSeeked),
+    onTimeChanged: useProxy(nativeView, props.onTimeChanged),
+    onSourceLoad: useProxy(nativeView, props.onSourceLoad),
+    onSourceLoaded: useProxy(nativeView, props.onSourceLoaded),
+    onSourceUnloaded: useProxy(nativeView, props.onSourceUnloaded),
+    onSourceError: useProxy(nativeView, props.onSourceError),
+    onSourceWarning: useProxy(nativeView, props.onSourceWarning)
+  });
+}
+export {
+  LoadingState,
+  Player,
+  PlayerView,
+  SourceType,
+  usePlayer
+};

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "bitmovin-player-react-native",
+  "version": "0.1.0",
+  "description": "Official React Native bindings for Bitmovin's mobile Player SDKs.",
+  "main": "lib/index.js",
+  "module": "lib/index.mjs",
+  "types": "lib/index.d.ts",
+  "source": "src/index.ts",
+  "react-native": "src/index.ts",
+  "author": "Bitmovin GmbH",
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "RNBitmovinPlayer.podspec",
+    "!android/build",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{ts,tsx}\"",
+    "format": "prettier --write .",
+    "build": "tsup ./src/index.ts --dts --target es2020 --format cjs,esm -d lib",
+    "example": "yarn --cwd example",
+    "pods": "cd example && pod-install --quiet",
+    "bootstrap": "yarn && yarn example && yarn pods"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "bitmovin",
+    "player",
+    "video",
+    "streaming"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/bitmovin/bitmovin-player-react-native",
+  "repository": "https://github.com/bitmovin/bitmovin-player-react-native",
+  "devDependencies": {
+    "@commitlint/config-conventional": "11.0.0",
+    "@react-native-community/eslint-config": "3.0.2",
+    "@types/jest": "26.0.24",
+    "@types/lodash.omit": "4.5.0",
+    "@types/react": "17.0.39",
+    "@types/react-native": "0.67.7",
+    "commitlint": "11.0.0",
+    "eslint": "8.18.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "husky": "8.0.1",
+    "jest": "26.6.3",
+    "lint-staged": "13.0.3",
+    "pod-install": "0.1.37",
+    "prettier": "2.7.1",
+    "react": "17.0.2",
+    "tsup": "5.12.9",
+    "typescript": "4.5.5"
+  },
+  "dependencies": {
+    "lodash.omit": "4.5.0"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-native": ">=0.64"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.(ts|tsx)": "eslint",
+    "*.(ts|tsx|js|jsx|md|json|yml|yaml)": "prettier --write"
+  }
+}

package/src/components/PlayerView/events.ts

@@ -0,0 +1,69 @@
+import { NativeSyntheticEvent } from 'react-native';
+import {
+  Event,
+  PlayerActiveEvent,
+  PlayerErrorEvent,
+  PlayerWarningEvent,
+  DestroyEvent,
+  MutedEvent,
+  UnmutedEvent,
+  ReadyEvent,
+  PausedEvent,
+  PlayEvent,
+  PlayingEvent,
+  PlaybackFinishedEvent,
+  SeekEvent,
+  SeekedEvent,
+  TimeChangedEvent,
+  SourceLoadEvent,
+  SourceLoadedEvent,
+  SourceUnloadedEvent,
+  SourceErrorEvent,
+  SourceWarningEvent,
+} from '../../events';
+
+/**
+ * Type that defines all event props supported by `PlayerView` and `NativePlayerView`.
+ * Used to generate the specific events interface for each component.
+ */
+interface EventProps {
+  onEvent: Event;
+  onPlayerActive: PlayerActiveEvent;
+  onPlayerError: PlayerErrorEvent;
+  onPlayerWarning: PlayerWarningEvent;
+  onDestroy: DestroyEvent;
+  onMuted: MutedEvent;
+  onUnmuted: UnmutedEvent;
+  onReady: ReadyEvent;
+  onPaused: PausedEvent;
+  onPlay: PlayEvent;
+  onPlaying: PlayingEvent;
+  onPlaybackFinished: PlaybackFinishedEvent;
+  onSeek: SeekEvent;
+  onSeeked: SeekedEvent;
+  onTimeChanged: TimeChangedEvent;
+  onSourceLoad: SourceLoadEvent;
+  onSourceLoaded: SourceLoadedEvent;
+  onSourceUnloaded: SourceUnloadedEvent;
+  onSourceError: SourceErrorEvent;
+  onSourceWarning: SourceWarningEvent;
+}
+
+/**
+ * Event props for `PlayerView`.
+ *
+ * Note the events of `PlayerView` are simply a proxy over
+ * the events from `NativePlayerView` just removing RN's bubbling data.
+ */
+export type PlayerViewEvents = {
+  [Prop in keyof EventProps]?: (event: EventProps[Prop]) => void;
+};
+
+/**
+ * Event props for `NativePlayerView`.
+ */
+export type NativePlayerViewEvents = {
+  [Prop in keyof EventProps]?: (
+    nativeEvent: NativeSyntheticEvent<EventProps[Prop]>
+  ) => void;
+};

package/src/components/PlayerView/index.tsx

@@ -0,0 +1,106 @@
+import React, { useRef, useEffect } from 'react';
+import {
+  Platform,
+  UIManager,
+  ViewStyle,
+  StyleSheet,
+  findNodeHandle,
+} from 'react-native';
+import { PlayerViewEvents } from './events';
+import { NativePlayerView } from './native';
+import { Player } from '../../player';
+import { useProxy } from '../../hooks/useProxy';
+
+/**
+ * Base `PlayerView` component props. Used to stablish common
+ * props between `NativePlayerView` and `PlayerView`.
+ * @see NativePlayerView
+ */
+export interface BasePlayerViewProps {
+  style?: ViewStyle;
+}
+
+/**
+ * `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;
+}
+
+/**
+ * Base style that initializes the native view frame when no width/height prop has been set.
+ */
+const styles = StyleSheet.create({
+  baseStyle: {
+    alignSelf: 'stretch',
+  },
+});
+
+/**
+ * Dispatches any given `NativePlayerView` commands on React's `UIManager`.
+ */
+function dispatch(command: string, node: number | null, playerId: string) {
+  const commandId =
+    Platform.OS === 'android'
+      ? (UIManager as any).NativePlayerView.Commands[command].toString()
+      : UIManager.getViewManagerConfig('NativePlayerView').Commands[command];
+  UIManager.dispatchViewManagerCommand(
+    node,
+    commandId,
+    Platform.select({
+      ios: [playerId],
+      android: [node, playerId],
+    })
+  );
+}
+
+/**
+ * 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(props: PlayerViewProps) {
+  // Native view reference.
+  const nativeView = useRef(null);
+  // Style resulting from merging `baseStyle` and `props.style`.
+  const style = StyleSheet.flatten([styles.baseStyle, props.style]);
+  useEffect(() => {
+    // Attach `props.player` to native `PlayerView`.
+    const node = findNodeHandle(nativeView.current);
+    dispatch('attachPlayer', node, props.player.nativeId);
+    return () => {
+      // Detach `props.player` from native `PlayerView`.
+      dispatch('detachPlayer', node, props.player.nativeId);
+    };
+  }, [props.player.nativeId]);
+  return (
+    <NativePlayerView
+      ref={nativeView}
+      style={style}
+      onEvent={useProxy(nativeView, props.onEvent)}
+      onPlayerActive={useProxy(nativeView, props.onPlayerActive)}
+      onPlayerError={useProxy(nativeView, props.onPlayerError)}
+      onPlayerWarning={useProxy(nativeView, props.onPlayerWarning)}
+      onDestroy={useProxy(nativeView, props.onDestroy)}
+      onMuted={useProxy(nativeView, props.onMuted)}
+      onUnmuted={useProxy(nativeView, props.onUnmuted)}
+      onReady={useProxy(nativeView, props.onReady)}
+      onPaused={useProxy(nativeView, props.onPaused)}
+      onPlay={useProxy(nativeView, props.onPlay)}
+      onPlaying={useProxy(nativeView, props.onPlaying)}
+      onPlaybackFinished={useProxy(nativeView, props.onPlaybackFinished)}
+      onSeek={useProxy(nativeView, props.onSeek)}
+      onSeeked={useProxy(nativeView, props.onSeeked)}
+      onTimeChanged={useProxy(nativeView, props.onTimeChanged)}
+      onSourceLoad={useProxy(nativeView, props.onSourceLoad)}
+      onSourceLoaded={useProxy(nativeView, props.onSourceLoaded)}
+      onSourceUnloaded={useProxy(nativeView, props.onSourceUnloaded)}
+      onSourceError={useProxy(nativeView, props.onSourceError)}
+      onSourceWarning={useProxy(nativeView, props.onSourceWarning)}
+    />
+  );
+}

package/src/components/PlayerView/native.ts

@@ -0,0 +1,17 @@
+import { requireNativeComponent } from 'react-native';
+import { NativePlayerViewEvents } from './events';
+import { BasePlayerViewProps } from './index';
+
+/**
+ * Props type for `NativePlayerView` native component.
+ * Mostly maps the event props defined in native code.
+ */
+export interface NativePlayerViewProps
+  extends BasePlayerViewProps,
+    NativePlayerViewEvents {}
+
+/**
+ * Native host component bridging Bitmovin's `PlayerView`.
+ */
+export const NativePlayerView =
+  requireNativeComponent<NativePlayerViewProps>('NativePlayerView');

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './PlayerView';

package/src/events.ts

@@ -0,0 +1,184 @@
+import { Source } from './source';
+
+/**
+ * Base event type for all events.
+ */
+export interface Event {
+  /**
+   * This event name as it is on the native side.
+   */
+  name: string;
+  /**
+   * The UNIX timestamp in which this event happened.
+   */
+  timestamp: number;
+}
+
+/**
+ * Base event type for error and warning events.
+ */
+export interface ErrorEvent extends Event {
+  /**
+   * Error/Warning's code number.
+   */
+  code?: number;
+  /**
+   * Error/Warning's localized message.
+   */
+  message: string;
+  /**
+   * Underlying data emitted with the Error/Warning.
+   */
+  data?: Record<string, any>;
+}
+
+/**
+ * Emitted when a source is loaded into the player.
+ * Seeking and time shifting are allowed as soon as this event is seen.
+ */
+export interface PlayerActiveEvent extends Event {}
+
+/**
+ * Emitted when a player error happens.
+ */
+export interface PlayerErrorEvent extends ErrorEvent {}
+
+/**
+ * Emitted when a player warning happens.
+ */
+export interface PlayerWarningEvent extends ErrorEvent {}
+
+/**
+ * Emitted when the player is destroyed.
+ */
+export interface DestroyEvent extends Event {}
+
+/**
+ * Emitted when the player is muted.
+ */
+export interface MutedEvent extends Event {}
+
+/**
+ * Emitted when the player is unmuted.
+ */
+export interface UnmutedEvent extends Event {}
+
+/**
+ * Emitted when the player is ready for immediate playback, because initial audio/video
+ * has been downloaded.
+ */
+export interface ReadyEvent extends Event {}
+
+/**
+ * Emitted when the player is paused.
+ */
+export interface PausedEvent extends Event {
+  /**
+   * The player's playback time from when this event happened.
+   */
+  time: number;
+}
+
+/**
+ * Emitted when the player received an intention to start/resume playback.
+ */
+export interface PlayEvent extends Event {
+  /**
+   * The player's playback time from when this event happened.
+   */
+  time: number;
+}
+
+/**
+ * Emitted when playback has started.
+ */
+export interface PlayingEvent extends Event {
+  /**
+   * The player's playback time from when this event happened.
+   */
+  time: number;
+}
+
+/**
+ * Emitted when the playback of the current media has finished.
+ */
+export interface PlaybackFinishedEvent extends Event {}
+
+/**
+ * Emitted when the player is about to seek to a new position.
+ * Only applies to VoD streams.
+ */
+export interface SeekEvent extends Event {
+  /**
+   * Removed source metadata.
+   */
+  from: {
+    time: number;
+    source: Source;
+  };
+  /**
+   * Added source metadata.
+   */
+  to: {
+    time: number;
+    source: Source;
+  };
+}
+
+/**
+ * Emitted when seeking has finished and data to continue playback is available.
+ * Only applies to VoD streams.
+ */
+export interface SeekedEvent extends Event {}
+
+/**
+ * Emitted when the current playback time has changed.
+ */
+export interface TimeChangedEvent extends Event {
+  /**
+   * The player's playback time from when this event happened.
+   */
+  currentTime: number;
+}
+
+/**
+ * Emitted when a new source loading has started.
+ * It doesn't mean that the loading of the new manifest has finished.
+ */
+export interface SourceLoadEvent extends Event {
+  /**
+   * Source that is about to load.
+   */
+  source: Source;
+}
+
+/**
+ * Emitted when a new source is loaded.
+ * It doesn't mean that the loading of the new manifest has finished.
+ */
+export interface SourceLoadedEvent extends Event {
+  /**
+   * Source that was loaded into player.
+   */
+  source: Source;
+}
+
+/**
+ * Emitted when the current source has been unloaded.
+ */
+export interface SourceUnloadedEvent extends Event {
+  /**
+   * Source that was unloaded from player.
+   */
+  source: Source;
+}
+
+/**
+ * Emitted when a source error happens.
+ */
+export interface SourceErrorEvent extends ErrorEvent {}
+
+/**
+ * Emitted when a source warning happens.
+ */
+export interface SourceWarningEvent extends ErrorEvent {}

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './usePlayer';

package/src/hooks/usePlayer.ts

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+import { Player, PlayerConfig } from '../player';
+
+/**
+ * React hook that creates and returns a reference to a `Player` instance
+ * that can be used inside any component.
+ */
+export function usePlayer(config?: PlayerConfig): Player {
+  return useRef(new Player(config)).current;
+}