react-native-theoplayer 1.8.2 → 2.0.0

package/src/internal/adapter/event/native/NativeTrackEvent.ts

@@ -0,0 +1,159 @@
+import type { MediaTrack, Quality, TextTrack, TextTrackCue } from 'react-native-theoplayer';
+import { MediaTrackEventType, MediaTrackType, TextTrackEventType, TrackListEventType } from 'react-native-theoplayer';
+
+export enum NativeTrackListEventType {
+  /**
+   * Dispatched when track has been added to the track list.
+   */
+  AddTrack,
+
+  /**
+   * Dispatched when track has been removed from the track list.
+   */
+  RemoveTrack,
+
+  /**
+   * Fired when a track has been changed.
+   */
+  ChangeTrack,
+}
+
+export interface NativeTrackListEvent {
+  /**
+   * The type of track list event.
+   */
+  readonly type: NativeTrackListEventType;
+}
+
+export interface NativeTextTrackListEvent extends NativeTrackListEvent {
+  /**
+   * The relevant text track.
+   */
+  readonly track: TextTrack;
+}
+
+export enum NativeTextTrackEventType {
+  /**
+   * Dispatched when cue has been added to the text track.
+   */
+  AddCue,
+
+  /**
+   * Dispatched when cue has been removed from the text track.
+   */
+  RemoveCue,
+
+  /**
+   * Dispatched when a cue of the track enters.
+   */
+  EnterCue,
+
+  /**
+   * Dispatched when a cue of the track exits.
+   */
+  ExitCue,
+}
+
+export interface NativeTextTrackEvent {
+  /**
+   * The type of text track event.
+   */
+  readonly type: NativeTextTrackEventType;
+
+  /**
+   * The text track's uid to which this cue belongs.
+   */
+  readonly trackUid: number;
+
+  /**
+   * The text track's cue.
+   */
+  readonly cue: TextTrackCue;
+}
+
+export enum NativeMediaTrackType {
+  Audio,
+
+  Video,
+}
+
+export interface NativeMediaTrackListEvent extends NativeTrackListEvent {
+  /**
+   * The relevant media track type, either {@link NativeMediaTrackType.Audio} or {@link NativeMediaTrackType.Video}.
+   */
+  readonly trackType: NativeMediaTrackType;
+
+  /**
+   * The relevant media track.
+   */
+  readonly track: MediaTrack;
+}
+
+export enum NativeMediaTrackEventType {
+  /**
+   * Dispatched when the media track's active quality changes.
+   */
+  ActiveQualityChanged,
+}
+
+export interface NativeMediaTrackEvent {
+  /**
+   * The type of media track event.
+   */
+  readonly type: NativeMediaTrackEventType;
+
+  /**
+   * The media track's type to which event belongs, either {@link MediaTrackType.Audio} or {@link MediaTrackType.Video}.
+   */
+  readonly trackType: NativeMediaTrackType;
+
+  /**
+   * The media track's uid to which event belongs.
+   */
+  readonly trackUid: number;
+
+  /**
+   * The affected media track's qualities.
+   */
+  readonly qualities?: Quality | Quality[];
+}
+
+export function toTrackListEventType(type: NativeTrackListEventType): TrackListEventType {
+  switch (type) {
+    case NativeTrackListEventType.AddTrack:
+      return TrackListEventType.ADD_TRACK;
+    case NativeTrackListEventType.ChangeTrack:
+      return TrackListEventType.CHANGE_TRACK;
+    case NativeTrackListEventType.RemoveTrack:
+      return TrackListEventType.REMOVE_TRACK;
+  }
+}
+
+export function toTextTrackEventType(type: NativeTextTrackEventType): TextTrackEventType {
+  switch (type) {
+    case NativeTextTrackEventType.AddCue:
+      return TextTrackEventType.ADD_CUE;
+    case NativeTextTrackEventType.RemoveCue:
+      return TextTrackEventType.REMOVE_CUE;
+    case NativeTextTrackEventType.EnterCue:
+      return TextTrackEventType.ENTER_CUE;
+    case NativeTextTrackEventType.ExitCue:
+      return TextTrackEventType.EXIT_CUE;
+  }
+}
+
+export function toMediaTrackType(type: NativeMediaTrackType): MediaTrackType {
+  switch (type) {
+    case NativeMediaTrackType.Audio:
+      return MediaTrackType.AUDIO;
+    case NativeMediaTrackType.Video:
+      return MediaTrackType.VIDEO;
+  }
+}
+
+export function toMediaTrackTypeEventType(type: NativeMediaTrackEventType): MediaTrackEventType {
+  switch (type) {
+    case NativeMediaTrackEventType.ActiveQualityChanged:
+      return MediaTrackEventType.ACTIVE_QUALITY_CHANGED;
+  }
+}

package/src/internal/adapter/track/TextTrackStyleAdapter.ts

@@ -0,0 +1,55 @@
+import type { EdgeStyle, TextTrackStyle, THEOplayerView } from 'react-native-theoplayer';
+
+export class TextTrackStyleAdapter implements TextTrackStyle {
+  // @ts-ignore
+  constructor(private readonly _player: THEOplayerView) {}
+
+  get backgroundColor(): string | undefined {
+    // NYI
+    return undefined;
+  }
+
+  set backgroundColor(_: string | undefined) {
+    // NYI
+  }
+
+  get edgeStyle(): EdgeStyle | undefined {
+    return undefined;
+  }
+
+  set edgeStyle(_: EdgeStyle | undefined) {
+    // NYI
+  }
+
+  get fontColor(): string | undefined {
+    return undefined;
+  }
+
+  set fontColor(_: string | undefined) {
+    // NYI
+  }
+
+  get fontFamily(): string | undefined {
+    return undefined;
+  }
+
+  set fontFamily(_: string | undefined) {
+    // NYI
+  }
+
+  get fontSize(): string | undefined {
+    return undefined;
+  }
+
+  set fontSize(_: string | undefined) {
+    // NYI
+  }
+
+  get windowColor(): string | undefined {
+    return undefined;
+  }
+
+  set windowColor(_: string | undefined) {
+    // NYI
+  }
+}

package/src/internal/adapter/web/TrackUtils.ts

@@ -0,0 +1,73 @@
+import type {
+  MediaTrack as NativeMediaTrack,
+  MediaTrackList as NativeMediaTrackList,
+  Quality as NativeQuality,
+  TextTrack as NativeTextTrack,
+  TextTrackCue as NativeTextTrackCue,
+  TextTracksList as NativeTextTrackList,
+} from 'theoplayer';
+import type { MediaTrack, TextTrack, TextTrackCue } from 'react-native-theoplayer';
+
+export function fromNativeCue(cue: NativeTextTrackCue): TextTrackCue {
+  return {
+    id: cue.id,
+    uid: cue.uid,
+    startTime: 1e3 * cue.startTime,
+    endTime: 1e3 * cue.endTime,
+    content: cue.content,
+  } as TextTrackCue;
+}
+
+export function fromNativeTextTrackList(tracks: NativeTextTrackList): TextTrack[] {
+  return tracks.map((track) => fromNativeTextTrack(track));
+}
+
+export function fromNativeTextTrack(track: NativeTextTrack): TextTrack {
+  const { id, uid, kind, label, language, mode, type, src, forced } = track;
+
+  return {
+    id,
+    uid,
+    kind,
+    label,
+    language,
+    mode,
+    type,
+    src,
+    forced,
+    cues: track.cues ? track.cues.map((cue) => fromNativeCue(cue)) : [],
+  } as TextTrack;
+}
+
+export function fromNativeMediaTrackList(tracks: NativeMediaTrackList): MediaTrack[] {
+  return tracks.map((track) => fromNativeMediaTrack(track));
+}
+
+export function fromNativeMediaTrack(track: NativeMediaTrack): MediaTrack {
+  const { id, uid, kind, label, language, activeQuality, qualities } = track;
+  return {
+    kind,
+    label,
+    language,
+    id,
+    uid,
+    activeQuality,
+    qualities,
+  } as MediaTrack;
+}
+
+export function findNativeQualityByUid(mediaTrack: NativeMediaTrack, uid: number | undefined): NativeQuality | undefined {
+  return mediaTrack.qualities.find((quality) => quality.uid === uid);
+}
+
+export function findNativeQualitiesByUid(mediaTrack: NativeMediaTrack | undefined, uid: number | number[] | undefined): NativeQuality[] | undefined {
+  if (uid !== undefined && mediaTrack) {
+    if (Array.isArray(uid)) {
+      return mediaTrack.qualities.filter((quality) => uid.includes(quality.uid));
+    } else {
+      const quality = findNativeQualityByUid(mediaTrack, uid);
+      return quality ? [quality] : undefined;
+    }
+  }
+  return undefined;
+}

package/src/internal/adapter/web/WebMediaSession.ts

@@ -0,0 +1,193 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import type { ChromelessPlayer } from 'theoplayer';
+import type { THEOplayerWebAdapter } from '../THEOplayerWebAdapter';
+import { PresentationMode } from 'react-native-theoplayer';
+
+interface WebMediaSessionConfig {
+  skipTime: number;
+}
+
+export const defaultWebMediaSessionConfig: WebMediaSessionConfig = {
+  skipTime: 15,
+};
+
+const NoOp = () => {};
+
+// This prevents unnecessary errors when Media Session API is not available.
+const mediaSession = (function () {
+  const mediaSession = navigator.mediaSession || {};
+  mediaSession.setActionHandler = navigator.mediaSession?.setActionHandler || function () {};
+  mediaSession.setPositionState = navigator.mediaSession?.setPositionState || function () {};
+  window.MediaMetadata = window.MediaMetadata || function () {};
+  return mediaSession;
+})();
+
+/**
+ * The MediaSession interface of the Media Session API allows a web page to provide custom behaviors for standard media playback interactions, and
+ * to report metadata that can be sent by the user agent to the device or operating system for presentation in standardized user interface elements.
+ *
+ * @link https://w3c.github.io/mediasession
+ */
+export class WebMediaSession {
+  private readonly _config: WebMediaSessionConfig;
+  private readonly _player: ChromelessPlayer;
+  private readonly _webAdapter: THEOplayerWebAdapter;
+
+  constructor(adapter: THEOplayerWebAdapter, player: ChromelessPlayer, config: WebMediaSessionConfig = defaultWebMediaSessionConfig) {
+    this._player = player;
+    this._webAdapter = adapter;
+    this._config = config;
+
+    this._player.addEventListener('sourcechange', this.onSourceChange);
+    this._player.addEventListener('loadedmetadata', this.onLoadedMetadata);
+    this._player.addEventListener('durationchange', this.onDurationChange);
+    this._player.ads?.addEventListener('adbreakbegin', this.onAdbreakBegin);
+    this._player.ads?.addEventListener('adbreakend', this.onAdbreakEnd);
+    this.updateActionHandlers();
+  }
+
+  updateActionHandlers() {
+    if (this.isTrickplayEnabled()) {
+      mediaSession.setActionHandler('seekbackward', (event) => {
+        const skipTime = event.seekOffset || this._config.skipTime;
+        this._player.currentTime = Math.max(this._player.currentTime - skipTime, 0);
+      });
+      mediaSession.setActionHandler('seekforward', (event) => {
+        const skipTime = event.seekOffset || this._config.skipTime;
+        this._player.currentTime = Math.min(this._player.currentTime + skipTime, this._player.duration);
+      });
+    } else {
+      mediaSession.setActionHandler('seekbackward', NoOp);
+      mediaSession.setActionHandler('seekforward', NoOp);
+    }
+
+    if (this.isPlayPauseEnabled()) {
+      mediaSession.setActionHandler('play', () => {
+        this._player?.play();
+      });
+      mediaSession?.setActionHandler('pause', () => {
+        this._player?.pause();
+      });
+    } else {
+      mediaSession.setActionHandler('play', NoOp);
+      mediaSession.setActionHandler('pause', NoOp);
+    }
+  }
+
+  destroy() {
+    this._player.removeEventListener('sourcechange', this.onSourceChange);
+    this._player.removeEventListener('loadedmetadata', this.onLoadedMetadata);
+    this._player.removeEventListener('durationchange', this.onDurationChange);
+    this._player.ads?.removeEventListener('adbreakbegin', this.onAdbreakBegin);
+    this._player.ads?.removeEventListener('adbreakend', this.onAdbreakEnd);
+    mediaSession.setActionHandler('play', NoOp);
+    mediaSession.setActionHandler('pause', NoOp);
+    mediaSession.setActionHandler('seekbackward', NoOp);
+    mediaSession.setActionHandler('seekforward', NoOp);
+  }
+
+  private onSourceChange = () => {
+    this.updateMetadata();
+    this.updatePositionState();
+    this.updateActionHandlers();
+  };
+
+  private onLoadedMetadata = () => {
+    this.updateActionHandlers();
+  };
+
+  private onDurationChange = () => {
+    this.updateActionHandlers();
+  };
+
+  private updateMetadata = () => {
+    const source = this._player.source;
+    const metadata = source?.metadata;
+    const artwork = [source?.poster, metadata?.displayIconUri, ...(metadata?.images ? metadata?.images : [])]
+      .filter((image) => image !== undefined)
+      .map((image) => {
+        if (typeof image === 'string') {
+          return { src: image };
+        }
+        return image;
+      });
+    mediaSession.metadata = new MediaMetadata({
+      title: metadata?.title,
+      artist: metadata?.artist || metadata?.subtitle,
+      album: metadata?.album,
+      artwork,
+    });
+  };
+
+  private updatePositionState = () => {
+    const { duration, playbackRate, currentTime } = this._player;
+    const isLive = !isFinite(duration);
+    if (!isLive) {
+      mediaSession.setPositionState({
+        // The duration is used to specify the duration in seconds.
+        // It should always be positive and positive infinity can be used to indicate media without a defined end such as live playback.
+        // NOTE: passing Infinite causes an exception to be thrown.
+        duration: isNaN(duration) || duration < 0 ? 0 : duration,
+
+        // The playbackRate is used to specify the playback rate.
+        // It can be positive to represent forward playback or negative to represent backwards playback. It should not be zero.
+        playbackRate,
+
+        // The position is used to specify the last reported playback position in seconds. It should always be positive.
+        position: currentTime,
+      });
+    }
+  };
+
+  private onAdbreakBegin = () => {
+    this.updateActionHandlers();
+  };
+
+  private onAdbreakEnd = () => {
+    this.updateActionHandlers();
+  };
+
+  private isLive(): boolean {
+    return !isFinite(this._player.duration);
+  }
+
+  private isAd(): boolean {
+    return this._player.ads?.playing == true;
+  }
+
+  private isInBackground(): boolean {
+    return document.visibilityState !== 'visible';
+  }
+
+  private isTrickplayEnabled(): boolean {
+    // By default, no trickplay for live
+    if (this.isLive()) {
+      return false;
+    }
+
+    // In PiP mode, disable trick-play for ads.
+    if (this._webAdapter.presentationMode === PresentationMode.pip) {
+      return !this.isAd();
+    }
+    // During background playback
+    if (this.isInBackground()) {
+      // Disable trick-play for ads.
+      return !(this.isAd() || this.isLive());
+    }
+    return true;
+  }
+
+  private isPlayPauseEnabled(): boolean {
+    // In PiP mode
+    if (this._webAdapter.presentationMode === PresentationMode.pip) {
+      // Disable play/pause for ads
+      return !this.isAd();
+    }
+    // During background playback
+    if (this.isInBackground()) {
+      // Disable play/pause for ads & live content.
+      return !(this.isAd() || this.isLive());
+    }
+    return true;
+  }
+}

package/src/internal/adapter/web/WebPresentationModeManager.ts

@@ -0,0 +1,96 @@
+import type { PlayerEventMap } from 'react-native-theoplayer';
+import { PresentationMode } from 'react-native-theoplayer';
+import type * as THEOplayerWeb from 'theoplayer';
+import { DefaultPresentationModeChangeEvent } from '../event/PlayerEvents';
+import { browserDetection } from '../../../web/platform/BrowserDetection';
+import type { DefaultEventDispatcher } from '../event/DefaultEventDispatcher';
+
+export class WebPresentationModeManager {
+  private readonly _player: THEOplayerWeb.ChromelessPlayer;
+  private _presentationMode: PresentationMode = PresentationMode.inline;
+  private _element: HTMLVideoElement | undefined = undefined;
+  private _eventForwarder: DefaultEventDispatcher<PlayerEventMap>;
+
+  constructor(player: THEOplayerWeb.ChromelessPlayer, eventForwarder: DefaultEventDispatcher<PlayerEventMap>) {
+    this._player = player;
+    this._eventForwarder = eventForwarder;
+  }
+
+  get presentationMode(): PresentationMode {
+    return this._presentationMode;
+  }
+
+  set presentationMode(presentationMode: PresentationMode) {
+    if (presentationMode === this._presentationMode) {
+      return;
+    }
+
+    this.prepareForPresentationModeChanges();
+
+    // on iOS Safari requestFullscreen isn't supported (https://caniuse.com/?search=requestFullscreen), where we need to use webkit methods on the video element
+    if (/*browserDetection.IS_IOS_ && */ browserDetection.IS_SAFARI_) {
+      if (presentationMode === PresentationMode.fullscreen) {
+        this._element?.webkitEnterFullscreen?.();
+      } else if (presentationMode === PresentationMode.pip) {
+        this._element?.webkitSetPresentationMode?.(PresentationMode.pip);
+      } else {
+        this._element?.webkitSetPresentationMode?.(PresentationMode.inline);
+      }
+    } else {
+      // other web-platformsyarn
+
+      if (presentationMode === PresentationMode.fullscreen) {
+        const appElement = document.getElementById('app');
+        void appElement?.requestFullscreen();
+      } else if (presentationMode === PresentationMode.pip) {
+        void this._element?.requestPictureInPicture?.();
+      } else {
+        if (this._presentationMode === PresentationMode.fullscreen) {
+          void document.exitFullscreen();
+        }
+        if (this._presentationMode === PresentationMode.pip) {
+          void document.exitPictureInPicture();
+        }
+      }
+    }
+  }
+
+  private prepareForPresentationModeChanges() {
+    const elements = this._player.element.children;
+    for (const element of Array.from(elements)) {
+      if (element.tagName === 'VIDEO' && element.attributes.getNamedItem('src') !== null) {
+        this._element = element as HTMLVideoElement;
+      }
+    }
+    // listen for pip updates on element
+    if (this._element != null) {
+      this._element.onenterpictureinpicture = () => {
+        this.updatePresentationMode();
+      };
+      this._element.onleavepictureinpicture = () => {
+        this.updatePresentationMode();
+      };
+    }
+    // listen for fullscreen updates on document
+    document.onfullscreenchange = () => {
+      this.updatePresentationMode();
+    };
+  }
+
+  private updatePresentationMode() {
+    // detect new presentation mode
+    let newPresentationMode: PresentationMode = PresentationMode.inline;
+    if (document.fullscreenElement !== null) {
+      newPresentationMode = PresentationMode.fullscreen;
+    } else if (document.pictureInPictureElement !== null) {
+      newPresentationMode = PresentationMode.pip;
+    }
+
+    // when changed, notify by dispatching presentationModeChange event
+    const previousPresentationMode = this._presentationMode;
+    if (newPresentationMode !== previousPresentationMode) {
+      this._presentationMode = newPresentationMode;
+      this._eventForwarder.dispatchEvent(new DefaultPresentationModeChangeEvent(this._presentationMode, previousPresentationMode));
+    }
+  }
+}

package/src/internal/utils/arrayUtil.ts

@@ -0,0 +1,12 @@
+export function arrayRemoveElement<T>(array: T[], element: T): boolean {
+  const index = array.indexOf(element);
+  if (index === -1) {
+    return false;
+  }
+  arrayRemoveAt(array, index);
+  return true;
+}
+
+export function arrayRemoveAt<T>(array: T[], index: number): void {
+  array.splice(index, 1);
+}

package/src/ui/THEOplayerDefaultUi.tsx

@@ -0,0 +1,108 @@
+import React, { ReactNode, useState } from 'react';
+import { FULLSCREEN_CENTER_STYLE, PlayerConfiguration, THEOplayer, THEOplayerView } from 'react-native-theoplayer';
+import { SeekBar } from './components/seekbar/SeekBar';
+import { AirplayButton } from './components/button/AirplayButton';
+import { CenteredControlBar, ControlBar } from './components/controlbar/ControlBar';
+import { TimeLabel } from './components/timelabel/TimeLabel';
+import { FullscreenButton } from './components/button/FullscreenButton';
+import { LanguageMenuButton } from './components/menu/LanguageMenuButton';
+import { MuteButton } from './components/button/MuteButton';
+import { CastMessage } from './components/message/CastMessage';
+import { DEFAULT_THEOPLAYER_THEME, THEOplayerTheme } from './THEOplayerTheme';
+import { Platform, StyleProp, View, ViewStyle } from 'react-native';
+import { UiContainer } from './components/uicontroller/UiContainer';
+import { PlayButton } from './components/button/PlayButton';
+import { SkipButton } from './components/button/SkipButton';
+import { Spacer } from './components/controlbar/Spacer';
+import { ChromecastButton } from './components/button/ChromecastButton';
+import { CenteredDelayedActivityIndicator } from './components/activityindicator/CenteredDelayedActivityIndicator';
+
+export interface THEOplayerDefaultUiProps {
+  /**
+   * The style for the container.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The theme for all components.
+   */
+  theme?: Partial<THEOplayerTheme>;
+  /**
+   * The player configuration with THEOplayer license.
+   */
+  config?: PlayerConfiguration;
+  /**
+   * The callback that is called when the internal THEOplayer is created.
+   * @param player the internal THEOplayer
+   */
+  onPlayerReady?: (player: THEOplayer) => void;
+  /**
+   * A slot in the top right to add additional UI components.
+   */
+  topSlot?: ReactNode;
+  /**
+   * A slot in the bottom right to add additional UI components.
+   */
+  bottomSlot?: ReactNode;
+}
+
+/**
+ * A default UI layout which uses UI components from `react-native-theoplayer` to create a basic playback UI around a THEOplayerView.
+ */
+export function THEOplayerDefaultUi(props: THEOplayerDefaultUiProps) {
+  const { theme, config, topSlot, bottomSlot, style } = props;
+  const [player, setPlayer] = useState<THEOplayer | undefined>(undefined);
+  const chromeless = config?.chromeless ?? false;
+
+  const onPlayerReady = (player: THEOplayer) => {
+    setPlayer(player);
+    props.onPlayerReady?.(player);
+  };
+
+  return (
+    <View style={style}>
+      <View style={[FULLSCREEN_CENTER_STYLE, { backgroundColor: '#000000' }]} />
+      <THEOplayerView config={config} onPlayerReady={onPlayerReady}>
+        {player !== undefined && chromeless && (
+          <UiContainer
+            theme={{ ...DEFAULT_THEOPLAYER_THEME, ...theme }}
+            player={player}
+            behind={<CenteredDelayedActivityIndicator size={50} />}
+            top={
+              <ControlBar>
+                {topSlot}
+                {!Platform.isTV && (
+                  <>
+                    <AirplayButton />
+                    <ChromecastButton />
+                  </>
+                )}
+                <LanguageMenuButton />
+              </ControlBar>
+            }
+            center={<CenteredControlBar left={<SkipButton skip={-10} />} middle={<PlayButton />} right={<SkipButton skip={30} />} />}
+            bottom={
+              <>
+                <ControlBar style={{ justifyContent: 'flex-start' }}>
+                  <CastMessage />
+                </ControlBar>
+                <ControlBar>
+                  <SeekBar />
+                </ControlBar>
+
+                <ControlBar>
+                  <MuteButton />
+                  <TimeLabel showDuration={true} />
+
+                  <Spacer />
+
+                  {bottomSlot}
+                  <FullscreenButton />
+                </ControlBar>
+              </>
+            }
+          />
+        )}
+      </THEOplayerView>
+    </View>
+  );
+}