react-native-theoplayer 1.0.0 → 1.3.0

package/src/api/track/TextTrack.ts

@@ -0,0 +1,133 @@
+import type { Track } from './Track';
+import type { TextTrackCue } from './TextTrackCue';
+
+export type TextTrackType = 'srt' | 'ttml' | 'webvtt' | 'cea608' | '';
+
+export type TextTrackKind = 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata' | 'thumbnails';
+
+export type TextTrackMode = 'disabled' | 'showing';
+
+export interface TextTrack extends Track {
+  /**
+   * The kind of the text track, represented by a value from the following list:
+   * <br/> - `'subtitles'`: The track contains subtitles.
+   * <br/> - `'captions'`: The track contains closed captions, a translation of dialogue and sound effects.
+   * <br/> - `'descriptions'`: The track contains descriptions, a textual description of the video.
+   * <br/> - `'chapters'`: The track contains chapter titles.
+   * <br/> - `'metadata'`: The track contains metadata. This track will not serve display purposes.
+   */
+  readonly kind: TextTrackKind;
+
+  /**
+   * The label of the text track.
+   */
+  label: string;
+
+  /**
+   * The language of the text track.
+   */
+  readonly language: string;
+
+  /**
+   * The identifier of the text track.
+   *
+   * @remarks
+   * <br/> - This identifier can be used to distinguish between related tracks, e.g. tracks in the same list.
+   */
+  readonly id: string;
+
+  /**
+   * A unique identifier of the text track.
+   *
+   * @remarks
+   * <br/> - This identifier is unique across tracks of a THEOplayer instance and can be used to distinguish between tracks.
+   */
+  readonly uid: number;
+
+  /**
+   * The mode of the text track, represented by a value from the following list:
+   * <br/> - `'disabled'`: The track is disabled.
+   * <br/> - `'showing'`: The track is showing.
+   */
+  mode: TextTrackMode;
+
+  /**
+   * The content type of the text track.
+   */
+  readonly type: TextTrackType;
+
+  /**
+   * The list of cues of the track.
+   *
+   * @remarks
+   * <br/> - If the {@link TextTrack.mode} is `'disabled'`, this property is `null`.
+   */
+  cues: TextTrackCue[] | null;
+
+  /**
+   * The source of the text track.
+   */
+  readonly src: string;
+
+  /**
+   * Indicates whether the track contains Forced Narrative cues.
+   * This may only be true for subtitle tracks where
+   * <br/> - For DASH: the corresponding AdaptationSet contains a child Role with its value attribute equal to `'forced_subtitle'`
+   * <br/> - For HLS: the corresponding #EXT-X-MEDIA tag contains the attributes TYPE=SUBTITLES and FORCED=YES (not supported yet)
+   */
+  readonly forced: boolean;
+}
+
+/**
+ * Retain renderable tracks.
+ * https://html.spec.whatwg.org/multipage/embedded-content.html#text-track-showing
+ */
+export function filterRenderableTracks(textTracks: TextTrack[] | undefined): TextTrack[] | undefined {
+  return textTracks && textTracks.filter((textTrack) => textTrack.kind === 'subtitles' || textTrack.kind === 'captions');
+}
+
+/**
+ * Retain first thumbnail track encountered in the textTracks list.
+ */
+export function filterThumbnailTracks(textTracks: TextTrack[] | undefined): TextTrack | undefined {
+  return textTracks && textTracks.find(isThumbnailTrack);
+}
+
+/**
+ * Query whether a track is a valid thumbnail track.
+ */
+export function isThumbnailTrack(textTrack: TextTrack | undefined): boolean {
+  return !!textTrack && (textTrack.kind === 'thumbnails' || (textTrack.kind === 'metadata' && textTrack.label === 'thumbnails'));
+}
+
+export function hasTextTrack(textTrackList: TextTrack[], textTrack: TextTrack): boolean {
+  return !!(textTrackList && textTrack && textTrackList.find((t) => t.uid === textTrack.uid));
+}
+
+export function removeTextTrack(textTrackList: TextTrack[], textTrack: TextTrack): TextTrack[] {
+  return textTrackList && textTrack ? textTrackList.filter((t) => t.uid !== textTrack.uid) : textTrackList;
+}
+
+export function addTextTrack(textTrackList: TextTrack[], textTrack: TextTrack): TextTrack[] {
+  return textTrackList && textTrack && !hasTextTrack(textTrackList, textTrack) ? [...textTrackList, textTrack] : textTrackList;
+}
+
+export function hasTextTrackCue(textTrack: TextTrack, cue: TextTrackCue): boolean {
+  return !!(textTrack.cues && cue && textTrack.cues.find((c) => cue.uid === c.uid));
+}
+
+export function removeTextTrackCue(textTrack: TextTrack, cue: TextTrackCue) {
+  if (textTrack && textTrack.cues && cue && !hasTextTrackCue(textTrack, cue)) {
+    textTrack.cues = textTrack.cues.filter((c) => c.uid !== cue.uid);
+  }
+}
+
+export function addTextTrackCue(textTrack: TextTrack, cue: TextTrackCue) {
+  if (textTrack && textTrack.cues && cue && !hasTextTrackCue(textTrack, cue)) {
+    textTrack.cues.push(cue);
+  }
+}
+
+export function findTextTrackByUid(textTracks: TextTrack[], uid: number): TextTrack | undefined {
+  return textTracks.find((t) => t.uid === uid);
+}

package/src/api/track/TextTrackCue.ts

@@ -0,0 +1,42 @@
+/**
+ * Represents a cue of a text track.
+ *
+ * @public
+ */
+export interface TextTrackCue {
+  /**
+   * The identifier of the cue.
+   */
+  id: string;
+
+  /**
+   * A unique identifier of the text track cue.
+   *
+   * @remarks
+   * <br/> - This identifier is unique across text track cues of a THEOplayer instance and can be used to distinguish between cues.
+   * <br/> - This identifier is a randomly generated number.
+   */
+  readonly uid: number;
+
+  /**
+   * The playback position at which the cue becomes active, in milliseconds.
+   */
+  startTime: number;
+
+  /**
+   * The playback position at which the cue becomes inactive, in milliseconds.
+   */
+  endTime: number;
+
+  /**
+   * The content of the cue.
+   *
+   * @remarks
+   * The content differs depending on the {@link TextTrackCue.track}'s {@link TextTrack."type" | type }:
+   * <br/> - `'emsg'`: Content is a Uint8Array representing the binary message data from the `emsg` box.
+   * <br/> - `'eventstream'`: Content is the value of the `messageData` attribute which was specified in the manifest.
+   * <br/> - `'ttml'`: Content is an intermediate TTML document’s body element. This is a view of a TTML document where all nodes in the document are active during the cue’s startTime and endTime. As a result, all begin, dur and end properties have been removed. TTML Styles, Regions and Metadata are stored in cue.styles, cue.regions, cue.metadata respectively. Combining those properties with the given content should suffice to render a TTML cue.
+   * <br/> - `'webvtt'`: Content is the cue text in raw unparsed form.
+   */
+  content: any;
+}

package/src/api/track/Track.ts

@@ -0,0 +1,47 @@
+/**
+ * Represents a track of a media resource.
+ *
+ * @remarks
+ * <br/> - A specific track type (e.g. {@link TextTrack}) will always be used.
+ *
+ * @public
+ */
+export interface Track {
+  /**
+   * The kind of the track.
+   *
+   * @remarks
+   * <br/> - The values for this property depend on the specific type of the track.
+   */
+  readonly kind: string;
+
+  /**
+   * The label of the track.
+   */
+  label: string;
+
+  /**
+   * The identifier of the track.
+   *
+   * @remarks
+   * <br/> - This identifier can be used to distinguish between related tracks, e.g. tracks in the same list.
+   *
+   * @privateRemarks
+   * <br/> - This identifier is a randomly generated string.
+   */
+  readonly id: string;
+
+  /**
+   * A unique identifier of the track.
+   *
+   * @remarks
+   * <br/> - This identifier is unique across tracks of a THEOplayer instance and can be used to distinguish between tracks.
+   * <br/> - This identifier is a randomly generated number.
+   */
+  readonly uid: number;
+
+  /**
+   * The language of the track.
+   */
+  readonly language: string;
+}

package/src/api/track/barrel.ts

@@ -0,0 +1,5 @@
+export * from './MediaTrack';
+export * from './Quality';
+export * from './TextTrack';
+export * from './TextTrackCue';
+export * from './Track';

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './api/barrel';
+export { THEOplayerView } from './internal/THEOplayerView';

package/src/internal/THEOplayerView.style.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  base: {
+    overflow: 'hidden',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  },
+});

package/src/internal/THEOplayerView.tsx

@@ -0,0 +1,301 @@
+import React, { PureComponent } from 'react';
+import { StyleSheet, requireNativeComponent, View, UIManager, Platform, NativeSyntheticEvent } from 'react-native';
+import type {
+  DurationChangeEvent,
+  ErrorEvent,
+  LoadedMetadataEvent,
+  ReadyStateChangeEvent,
+  THEOplayerViewComponent,
+  THEOplayerViewProps,
+  TimeUpdateEvent,
+  ProgressEvent,
+  PlayerError,
+  SegmentNotFoundEvent,
+  TextTrackListEvent,
+  TextTrackEvent,
+} from 'react-native-theoplayer';
+
+import styles from './THEOplayerView.style';
+import type { SourceDescription } from 'react-native-theoplayer';
+
+interface THEOplayerRCTViewProps extends THEOplayerViewProps {
+  ref: React.RefObject<THEOplayerViewNativeComponent>;
+  src: SourceDescription;
+  seek?: number;
+
+  onNativeSourceChange: () => void;
+  onNativeLoadStart: () => void;
+  onNativeLoadedData: () => void;
+  onNativeLoadedMetadata: (event: NativeSyntheticEvent<LoadedMetadataEvent>) => void;
+  onNativeReadyStateChange?: (event: NativeSyntheticEvent<ReadyStateChangeEvent>) => void;
+  onNativeError: (event: NativeSyntheticEvent<ErrorEvent>) => void;
+  onNativeProgress: (event: NativeSyntheticEvent<ProgressEvent>) => void;
+  onNativePlay: () => void;
+  onNativePlaying: () => void;
+  onNativePause: () => void;
+  onNativeSeeking: () => void;
+  onNativeSeeked: () => void;
+  onNativeEnded: () => void;
+  onNativeTimeUpdate: (event: NativeSyntheticEvent<TimeUpdateEvent>) => void;
+  onNativeDurationChange: (event: NativeSyntheticEvent<DurationChangeEvent>) => void;
+  onNativeSegmentNotFound: (event: NativeSyntheticEvent<SegmentNotFoundEvent>) => void;
+  onNativeTextTrackListEvent: (event: NativeSyntheticEvent<TextTrackListEvent>) => void;
+  onNativeTextTrackEvent: (event: NativeSyntheticEvent<TextTrackEvent>) => void;
+  onNativeFullscreenPlayerWillPresent?: () => void;
+  onNativeFullscreenPlayerDidPresent?: () => void;
+  onNativeFullscreenPlayerWillDismiss?: () => void;
+  onNativeFullscreenPlayerDidDismiss?: () => void;
+}
+
+interface THEOplayerRCTViewState {
+  isBuffering: boolean;
+  error?: PlayerError;
+}
+
+interface THEOplayerViewNativeComponent extends THEOplayerViewComponent {
+  setNativeProps: (props: Partial<THEOplayerRCTViewProps>) => void;
+}
+
+export class THEOplayerView extends PureComponent<THEOplayerViewProps, THEOplayerRCTViewState> {
+  private readonly _root: React.RefObject<THEOplayerViewNativeComponent>;
+
+  private static initialState: THEOplayerRCTViewState = {
+    isBuffering: false,
+    error: undefined,
+  };
+
+  constructor(props: THEOplayerRCTViewProps) {
+    super(props);
+    this._root = React.createRef();
+    this.state = THEOplayerView.initialState;
+  }
+
+  public seek(time: number): void {
+    if (isNaN(time)) {
+      throw new Error('Specified time is not a number');
+    }
+    this.setNativeProps({ seek: time });
+  }
+
+  private reset() {
+    this.setState(THEOplayerView.initialState);
+  }
+
+  private setNativeProps(nativeProps: Partial<THEOplayerRCTViewProps>) {
+    if (this._root?.current) {
+      this._root.current.setNativeProps(nativeProps);
+    }
+  }
+
+  private maybeChangeBufferingState(isBuffering: boolean) {
+    const { isBuffering: wasBuffering, error } = this.state;
+    const { paused } = this.props;
+
+    // do not change state to buffering in case of an error or if the player is paused
+    const newIsBuffering = isBuffering && !error && !paused;
+    this.setState({ isBuffering: newIsBuffering });
+
+    // notify change in buffering state
+    if (newIsBuffering !== wasBuffering && this.props.onBufferingStateChange) {
+      this.props.onBufferingStateChange(isBuffering);
+    }
+  }
+
+  private _onSourceChange = () => {
+    this.reset();
+
+    if (this.props.onSourceChange) {
+      this.props.onSourceChange();
+    }
+  };
+
+  private _onLoadStart = () => {
+    // potentially notify change in buffering state
+    this.maybeChangeBufferingState(true);
+
+    if (this.props.onLoadStart) {
+      this.props.onLoadStart();
+    }
+  };
+
+  private _onLoadedData = () => {
+    if (this.props.onLoadedData) {
+      this.props.onLoadedData();
+    }
+  };
+
+  private _onLoadedMetadata = (event: NativeSyntheticEvent<LoadedMetadataEvent>) => {
+    if (this.props.onLoadedMetadata) {
+      this.props.onLoadedMetadata(event.nativeEvent);
+    }
+  };
+
+  private _onError = (event: NativeSyntheticEvent<ErrorEvent>) => {
+    const { error } = event.nativeEvent;
+    this.setState({ error });
+
+    // potentially notify change in buffering state
+    this.maybeChangeBufferingState(false);
+
+    if (this.props.onError) {
+      this.props.onError(event.nativeEvent);
+    }
+  };
+
+  private _onProgress = (event: NativeSyntheticEvent<ProgressEvent>) => {
+    if (this.props.onProgress) {
+      this.props.onProgress(event.nativeEvent);
+    }
+  };
+
+  private _onPlay = () => {
+    if (this.props.onPlay) {
+      this.props.onPlay();
+    }
+  };
+
+  private _onPlaying = () => {
+    if (this.props.onPlaying) {
+      this.props.onPlaying();
+    }
+  };
+
+  private _onPause = () => {
+    if (this.props.onPause) {
+      this.props.onPause();
+    }
+  };
+
+  private _onSeeking = () => {
+    if (this.props.onSeeking) {
+      this.props.onSeeking();
+    }
+  };
+
+  private _onSeeked = () => {
+    if (this.props.onSeeked) {
+      this.props.onSeeked();
+    }
+  };
+
+  private _onEnded = () => {
+    if (this.props.onEnded) {
+      this.props.onEnded();
+    }
+  };
+
+  private _onReadStateChange = (event: NativeSyntheticEvent<ReadyStateChangeEvent>) => {
+    // potentially notify change in buffering state
+    this.maybeChangeBufferingState(event.nativeEvent.readyState < 3);
+
+    if (this.props.onReadyStateChange) {
+      this.props.onReadyStateChange(event.nativeEvent);
+    }
+  };
+
+  private _onTimeUpdate = (event: NativeSyntheticEvent<TimeUpdateEvent>) => {
+    if (this.props.onTimeUpdate) {
+      this.props.onTimeUpdate(event.nativeEvent);
+    }
+  };
+
+  private _onDurationChange = (event: NativeSyntheticEvent<DurationChangeEvent>) => {
+    if (this.props.onDurationChange) {
+      this.props.onDurationChange(event.nativeEvent);
+    }
+  };
+
+  private _onSegmentNotFound = (event: NativeSyntheticEvent<SegmentNotFoundEvent>) => {
+    if (this.props.onSegmentNotFound) {
+      this.props.onSegmentNotFound(event.nativeEvent);
+    }
+  };
+
+  private _onTextTrackListEvent = (event: NativeSyntheticEvent<TextTrackListEvent>) => {
+    if (this.props.onTextTrackListEvent) {
+      this.props.onTextTrackListEvent(event.nativeEvent);
+    }
+  };
+
+  private _onTextTrackEvent = (event: NativeSyntheticEvent<TextTrackEvent>) => {
+    if (this.props.onTextTrackEvent) {
+      this.props.onTextTrackEvent(event.nativeEvent);
+    }
+  };
+
+  private _onFullscreenPlayerWillPresent = () => {
+    if (this.props.onFullscreenPlayerWillPresent) {
+      this.props.onFullscreenPlayerWillPresent();
+    }
+  };
+
+  private _onFullscreenPlayerDidPresent = () => {
+    if (this.props.onFullscreenPlayerDidPresent) {
+      this.props.onFullscreenPlayerDidPresent();
+    }
+  };
+
+  private _onFullscreenPlayerWillDismiss = () => {
+    if (this.props.onFullscreenPlayerWillDismiss) {
+      this.props.onFullscreenPlayerWillDismiss();
+    }
+  };
+
+  private _onFullscreenPlayerDidDismiss = () => {
+    if (this.props.onFullscreenPlayerDidDismiss) {
+      this.props.onFullscreenPlayerDidDismiss();
+    }
+  };
+
+  public render(): JSX.Element {
+    const wrapperProps = Object.assign({}, this.props);
+
+    return (
+      <View style={[styles.base, wrapperProps.style]}>
+        <THEOplayerRCTView
+          ref={this._root}
+          src={this.props.source || {}}
+          onNativeSourceChange={this._onSourceChange}
+          onNativeLoadStart={this._onLoadStart}
+          onNativeLoadedData={this._onLoadedData}
+          onNativeLoadedMetadata={this._onLoadedMetadata}
+          onNativeError={this._onError}
+          onNativeProgress={this._onProgress}
+          onNativePlay={this._onPlay}
+          onNativePlaying={this._onPlaying}
+          onNativePause={this._onPause}
+          onNativeSeeking={this._onSeeking}
+          onNativeSeeked={this._onSeeked}
+          onNativeEnded={this._onEnded}
+          onNativeReadyStateChange={this._onReadStateChange}
+          onNativeTimeUpdate={this._onTimeUpdate}
+          onNativeDurationChange={this._onDurationChange}
+          onNativeSegmentNotFound={this._onSegmentNotFound}
+          onNativeTextTrackListEvent={this._onTextTrackListEvent}
+          onNativeTextTrackEvent={this._onTextTrackEvent}
+          onNativeFullscreenPlayerWillPresent={this._onFullscreenPlayerWillPresent}
+          onNativeFullscreenPlayerDidPresent={this._onFullscreenPlayerDidPresent}
+          onNativeFullscreenPlayerWillDismiss={this._onFullscreenPlayerWillDismiss}
+          onNativeFullscreenPlayerDidDismiss={this._onFullscreenPlayerDidDismiss}
+          style={StyleSheet.absoluteFill}
+          {...wrapperProps}
+        />
+      </View>
+    );
+  }
+}
+
+const LINKING_ERROR =
+  `The package 'react-native-theoplayer' doesn't seem to be linked. Make sure: \n\n` +
+  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
+  '- You rebuilt the app after installing the package\n' +
+  '- You are not using Expo managed workflow\n';
+
+const ComponentName = 'THEOplayerRCTView';
+
+const THEOplayerRCTView =
+  UIManager.getViewManagerConfig(ComponentName) != null
+    ? requireNativeComponent<THEOplayerRCTViewProps>(ComponentName)
+    : () => {
+        throw new Error(LINKING_ERROR);
+      };