bitmovin-player-react-native 0.1.0

package/lib/index.d.ts

@@ -0,0 +1,486 @@
+import { ViewStyle } from 'react-native';
+
+/**
+ * Types of media that can be handled by the player.
+ */
+declare enum SourceType {
+    /**
+     * Indicates a missing source type.
+     */
+    NONE = "none",
+    /**
+     * Indicates media type HLS.
+     */
+    HLS = "hls",
+    /**
+     * Indicates media type DASH.
+     */
+    DASH = "dash",
+    /**
+     * Indicates media type Progressive MP4.
+     */
+    PROGRESSIVE = "progressive"
+}
+/**
+ * The different loading states a `Source` instance can be in.
+ */
+declare enum LoadingState {
+    /**
+     * The source is unloaded.
+     */
+    UNLOADED = 0,
+    /**
+     * The source is currently loading.
+     */
+    LOADING = 1,
+    /**
+     * The source is loaded.
+     */
+    LOADED = 2
+}
+/**
+ * Represents a source configuration that be loaded into a player instance.
+ */
+interface SourceConfig {
+    /**
+     *  The url for this source configuration.
+     */
+    url: string;
+    /**
+     * The `SourceType` for this configuration.
+     */
+    type?: SourceType;
+    /**
+     * The title of the video source.
+     */
+    title?: string;
+    /**
+     * The URL to a preview image displayed until the video starts.
+     */
+    poster?: string;
+    /**
+     * Indicates whether to show the poster image during playback.
+     * Useful, for example, for audio-only streams.
+     */
+    isPosterPersistent?: boolean;
+}
+/**
+ * Represents audio and video content that can be loaded into a player.
+ */
+interface Source {
+    /**
+     * The duration of the source in seconds if it’s a VoD or `INFINITY` if it’s a live stream.
+     * Default value is `0` if the duration is not available or not known.
+     */
+    duration: number;
+    /**
+     * Whether the source is currently active in a player (i.e. playing back or paused).
+     * Only one source can be active in the same player instance at any time.
+     */
+    isActive: boolean;
+    /**
+     * Whether the source is currently attached to a player instance.
+     */
+    isAttachedToPlayer: boolean;
+    /**
+     * Metadata for the currently loaded source.
+     * Setting the metadata value for a source is not supported yet.
+     */
+    metadata?: Record<string, any>;
+    /**
+     * The current `LoadingState` of the source.
+     */
+    loadingState?: LoadingState;
+}
+
+/**
+ * Object used to configure a new `Player` instance.
+ */
+interface PlayerConfig {
+    /**
+     * Optionally user-defined string `id` for the native `Player` instances. Used to access a certain native `Player` instance from any point in the source code then call methods/properties on it.
+     *
+     * When left empty, a random `UUIDv4` is generated for it.
+     * @example
+     * Accessing or creating the `Player` with `nativeId` equal to `my-player`:
+     * ```
+     * const player = new Player({ nativeId: 'my-player' })
+     * player.play(); // call methods and properties...
+     * ```
+     */
+    nativeId?: string;
+    /**
+     * 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: '\<LICENSE-KEY-CODE\>',
+     * });
+     * ```
+     * @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;
+}
+/**
+ * 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
+ * loaded. Once `load` is called, the player becomes active and initiates necessary downloads to
+ * start playback of the loaded source(s).
+ *
+ * Can be attached to `PlayerView` component in order to use Bitmovin's Player Web UI.
+ * @see PlayerView
+ */
+declare class Player {
+    /**
+     * User-defined `nativeId` string or random `UUIDv4` identifying this `Player` in the native side.
+     */
+    readonly nativeId: string;
+    /**
+     * Configuration object used to initialize this `Player`.
+     */
+    readonly config: PlayerConfig | null;
+    constructor(config?: PlayerConfig);
+    /**
+     * Loads a new `Source` into the player.
+     */
+    load: (source: SourceConfig) => void;
+    /**
+     * Unloads all `Source`s from the player.
+     */
+    unload: () => void;
+    /**
+     * Starts or resumes playback after being paused. Has no effect if the player is already playing.
+     */
+    play: () => void;
+    /**
+     * Pauses the video if it is playing. Has no effect if the player is already paused.
+     */
+    pause: () => void;
+    /**
+     * Seeks to the given playback time specified by the parameter `time` in seconds. Must not be
+     * greater than the total duration of the video. Has no effect when watching a live stream since
+     * seeking is not possible.
+     *
+     * @param time - The time to seek to in seconds.
+     */
+    seek: (time: number) => void;
+    /**
+     * Mutes the player if an audio track is available. Has no effect if the player is already muted.
+     */
+    mute: () => void;
+    /**
+     * Unmutes the player if it is muted. Has no effect if the player is already unmuted.
+     */
+    unmute: () => void;
+    /**
+     * Destroys the player and releases all of its allocated resources.
+     * The player instance must not be used after calling this method.
+     */
+    destroy: () => void;
+    /**
+     * Sets the player's volume between 0 (silent) and 100 (max volume).
+     *
+     * @param volume - The volume level to set.
+     */
+    setVolume: (volume: number) => void;
+    /**
+     * @returns The currently active source or null if no source is active.
+     */
+    getSource: () => Promise<Source>;
+    /**
+     * @returns The player's current volume level.
+     */
+    getVolume: () => Promise<number>;
+    /**
+     * @returns The current playback time in seconds.
+     *
+     * For VoD streams the returned time ranges between 0 and the duration of the asset.
+     *
+     * For live streams it can be specified if an absolute UNIX timestamp or a value
+     * relative to the playback start should be returned.
+     *
+     * @param mode - The time mode to specify: an absolute UNIX timestamp ('absolute') or relative time ('relative').
+     */
+    getCurrentTime: (mode?: "relative" | "absolute" | undefined) => Promise<number>;
+    /**
+     * @returns The total duration in seconds of the current video or INFINITY if it’s a live stream.
+     */
+    getDuration: () => Promise<number>;
+    /**
+     * @returns `true` if the player is muted.
+     */
+    isMuted: () => Promise<boolean>;
+    /**
+     * @returns `true` if the player is currently playing, i.e. has started and is not paused.
+     */
+    isPlaying: () => Promise<boolean>;
+    /**
+     * @returns `true` if the player has started playback but it's currently paused.
+     */
+    isPaused: () => Promise<boolean>;
+    /**
+     * @returns `true` if the displayed video is a live stream.
+     */
+    isLive: () => Promise<boolean>;
+    /**
+     * @remarks Only available for iOS devices.
+     * @returns `true` when media is played externally using AirPlay.
+     */
+    isAirPlayActive: () => Promise<boolean>;
+    /**
+     * @remarks Only available for iOS devices.
+     * @returns `true` when AirPlay is available.
+     */
+    isAirPlayAvailable: () => Promise<boolean>;
+}
+
+/**
+ * Base event type for all events.
+ */
+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.
+ */
+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.
+ */
+interface PlayerActiveEvent extends Event {
+}
+/**
+ * Emitted when a player error happens.
+ */
+interface PlayerErrorEvent extends ErrorEvent {
+}
+/**
+ * Emitted when a player warning happens.
+ */
+interface PlayerWarningEvent extends ErrorEvent {
+}
+/**
+ * Emitted when the player is destroyed.
+ */
+interface DestroyEvent extends Event {
+}
+/**
+ * Emitted when the player is muted.
+ */
+interface MutedEvent extends Event {
+}
+/**
+ * Emitted when the player is unmuted.
+ */
+interface UnmutedEvent extends Event {
+}
+/**
+ * Emitted when the player is ready for immediate playback, because initial audio/video
+ * has been downloaded.
+ */
+interface ReadyEvent extends Event {
+}
+/**
+ * Emitted when the player is paused.
+ */
+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.
+ */
+interface PlayEvent extends Event {
+    /**
+     * The player's playback time from when this event happened.
+     */
+    time: number;
+}
+/**
+ * Emitted when playback has started.
+ */
+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.
+ */
+interface PlaybackFinishedEvent extends Event {
+}
+/**
+ * Emitted when the player is about to seek to a new position.
+ * Only applies to VoD streams.
+ */
+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.
+ */
+interface SeekedEvent extends Event {
+}
+/**
+ * Emitted when the current playback time has changed.
+ */
+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.
+ */
+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.
+ */
+interface SourceLoadedEvent extends Event {
+    /**
+     * Source that was loaded into player.
+     */
+    source: Source;
+}
+/**
+ * Emitted when the current source has been unloaded.
+ */
+interface SourceUnloadedEvent extends Event {
+    /**
+     * Source that was unloaded from player.
+     */
+    source: Source;
+}
+/**
+ * Emitted when a source error happens.
+ */
+interface SourceErrorEvent extends ErrorEvent {
+}
+/**
+ * Emitted when a source warning happens.
+ */
+interface SourceWarningEvent extends ErrorEvent {
+}
+
+/**
+ * React hook that creates and returns a reference to a `Player` instance
+ * that can be used inside any component.
+ */
+declare function usePlayer(config?: PlayerConfig): Player;
+
+/**
+ * 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.
+ */
+declare type PlayerViewEvents = {
+    [Prop in keyof EventProps]?: (event: EventProps[Prop]) => void;
+};
+
+/**
+ * Base `PlayerView` component props. Used to stablish common
+ * props between `NativePlayerView` and `PlayerView`.
+ * @see NativePlayerView
+ */
+interface BasePlayerViewProps {
+    style?: ViewStyle;
+}
+/**
+ * `PlayerView` component props.
+ * @see PlayerView
+ */
+interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents {
+    /**
+     * `Player` instance (generally returned from `usePlayer` hook) that will control
+     * and render audio/video inside the `PlayerView`.
+     */
+    player: Player;
+}
+/**
+ * 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.
+ */
+declare function PlayerView(props: PlayerViewProps): JSX.Element;
+
+export { BasePlayerViewProps, DestroyEvent, ErrorEvent, Event, LoadingState, MutedEvent, PausedEvent, PlayEvent, PlaybackFinishedEvent, Player, PlayerActiveEvent, PlayerConfig, PlayerErrorEvent, PlayerView, PlayerViewProps, PlayerWarningEvent, PlayingEvent, ReadyEvent, SeekEvent, SeekedEvent, Source, SourceConfig, SourceErrorEvent, SourceLoadEvent, SourceLoadedEvent, SourceType, SourceUnloadedEvent, SourceWarningEvent, TimeChangedEvent, UnmutedEvent, usePlayer };

package/lib/index.js

@@ -0,0 +1,218 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  LoadingState: () => LoadingState,
+  Player: () => Player,
+  PlayerView: () => PlayerView,
+  SourceType: () => SourceType,
+  usePlayer: () => usePlayer
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/player.ts
+var import_react_native = require("react-native");
+var PlayerModule = import_react_native.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 (import_react_native.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 (import_react_native.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
+var import_react = require("react");
+function usePlayer(config) {
+  return (0, import_react.useRef)(new Player(config)).current;
+}
+
+// src/components/PlayerView/index.tsx
+var import_react3 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+
+// src/components/PlayerView/native.ts
+var import_react_native2 = require("react-native");
+var NativePlayerView = (0, import_react_native2.requireNativeComponent)("NativePlayerView");
+
+// src/hooks/useProxy.ts
+var import_lodash = __toESM(require("lodash.omit"));
+var import_react2 = require("react");
+var import_react_native3 = require("react-native");
+function unwrapNativeEvent(event) {
+  return (0, import_lodash.default)(event.nativeEvent, ["target"]);
+}
+function useProxy(viewRef, proxy) {
+  const proxyRef = (0, import_react2.useRef)(proxy);
+  return (0, import_react2.useCallback)((event) => {
+    const node = event.target._nativeTag;
+    if (node === (0, import_react_native3.findNodeHandle)(viewRef.current)) {
+      proxyRef.current?.(unwrapNativeEvent(event));
+    }
+  }, [viewRef]);
+}
+
+// src/components/PlayerView/index.tsx
+var styles = import_react_native4.StyleSheet.create({
+  baseStyle: {
+    alignSelf: "stretch"
+  }
+});
+function dispatch(command, node, playerId) {
+  const commandId = import_react_native4.Platform.OS === "android" ? import_react_native4.UIManager.NativePlayerView.Commands[command].toString() : import_react_native4.UIManager.getViewManagerConfig("NativePlayerView").Commands[command];
+  import_react_native4.UIManager.dispatchViewManagerCommand(node, commandId, import_react_native4.Platform.select({
+    ios: [playerId],
+    android: [node, playerId]
+  }));
+}
+function PlayerView(props) {
+  const nativeView = (0, import_react3.useRef)(null);
+  const style = import_react_native4.StyleSheet.flatten([styles.baseStyle, props.style]);
+  (0, import_react3.useEffect)(() => {
+    const node = (0, import_react_native4.findNodeHandle)(nativeView.current);
+    dispatch("attachPlayer", node, props.player.nativeId);
+    return () => {
+      dispatch("detachPlayer", node, props.player.nativeId);
+    };
+  }, [props.player.nativeId]);
+  return /* @__PURE__ */ import_react3.default.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)
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LoadingState,
+  Player,
+  PlayerView,
+  SourceType,
+  usePlayer
+});