react-native-theoplayer 1.8.2 → 2.0.0

package/src/ui/components/timelabel/TimeLabel.tsx

@@ -0,0 +1,79 @@
+import type { StyleProp, TextStyle } from 'react-native';
+import React, { PureComponent } from 'react';
+import { DurationChangeEvent, PlayerEventType, TimeUpdateEvent } from 'react-native-theoplayer';
+import { PlayerContext, UiContext } from '../util/PlayerContext';
+import { StaticTimeLabel } from './StaticTimeLabel';
+
+export interface TimeLabelProps {
+  /**
+   * Whether to show the duration of the player.
+   */
+  showDuration: boolean;
+  /**
+   * The style overrides.
+   */
+  style?: StyleProp<TextStyle>;
+}
+
+export interface TimeLabelState {
+  currentTime: number;
+  duration: number;
+}
+
+/**
+ * The default style for the time label.
+ */
+export const DEFAULT_TIME_LABEL_STYLE: TextStyle = {
+  marginLeft: 10,
+  marginRight: 10,
+  height: 20,
+  alignSelf: 'center',
+};
+
+/**
+ * The default time label component for the `react-native-theoplayer` UI.
+ */
+export class TimeLabel extends PureComponent<TimeLabelProps, TimeLabelState> {
+  private static initialState: TimeLabelState = {
+    currentTime: 0.0,
+    duration: 0,
+  };
+
+  constructor(props: TimeLabelProps) {
+    super(props);
+    this.state = TimeLabel.initialState;
+  }
+
+  componentDidMount() {
+    const player = (this.context as UiContext).player;
+    player.addEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdate);
+    player.addEventListener(PlayerEventType.DURATION_CHANGE, this.onDurationChange);
+    this.setState({ currentTime: player.currentTime, duration: player.duration });
+  }
+
+  componentWillUnmount() {
+    const player = (this.context as UiContext).player;
+    player.removeEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdate);
+    player.removeEventListener(PlayerEventType.DURATION_CHANGE, this.onDurationChange);
+  }
+
+  private onTimeUpdate = (event: TimeUpdateEvent) => {
+    const { currentTime } = event;
+    this.setState({ currentTime });
+  };
+
+  private onDurationChange = (event: DurationChangeEvent) => {
+    const { duration } = event;
+    this.setState({ duration });
+  };
+
+  render() {
+    const { currentTime, duration } = this.state;
+    const { style, showDuration } = this.props;
+    return (
+      <StaticTimeLabel showDuration={showDuration} time={currentTime} duration={duration} style={[DEFAULT_TIME_LABEL_STYLE, style]}></StaticTimeLabel>
+    );
+  }
+}
+
+TimeLabel.contextType = PlayerContext;

package/src/ui/components/timelabel/barrel.ts

@@ -0,0 +1,2 @@
+export * from './StaticTimeLabel';
+export * from './TimeLabel';

package/src/ui/components/uicontroller/UiContainer.tsx

@@ -0,0 +1,355 @@
+import React, { PureComponent, ReactNode } from 'react';
+import { Animated, Platform, StyleProp, View, ViewStyle } from 'react-native';
+import { PlayerContext } from '../util/PlayerContext';
+import type { PresentationModeChangeEvent, THEOplayer } from 'react-native-theoplayer';
+import { CastEvent, CastEventType, ErrorEvent, PlayerError, PlayerEventType, PresentationMode } from 'react-native-theoplayer';
+import type { THEOplayerTheme } from '../../THEOplayerTheme';
+import type { MenuConstructor, UiControls } from './UiControls';
+import { ErrorDisplay } from '../message/ErrorDisplay';
+
+interface UiContainerProps {
+  /**
+   * The player that is provided to all children using PlayerContext.
+   */
+  player: THEOplayer;
+  /**
+   * The theme that is provided to all children using PlayerContext.
+   */
+  theme: THEOplayerTheme;
+  /**
+   * The style of the container.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The style of the top slot.
+   */
+  topStyle?: StyleProp<ViewStyle>;
+  /**
+   * The style of the center slot.
+   */
+  centerStyle?: StyleProp<ViewStyle>;
+  /**
+   * The style of the button slot.
+   */
+  bottomStyle?: StyleProp<ViewStyle>;
+  /**
+   * The components to be put in the top slot.
+   */
+  top?: ReactNode;
+  /**
+   * The components to be put in the center slot.
+   */
+  center?: ReactNode;
+  /**
+   * The components to be put in the bottom slot.
+   */
+  bottom?: ReactNode;
+  /**
+   * A slot to put components behind the UI background.
+   */
+  behind?: ReactNode;
+}
+
+/**
+ * The default style for a fullscreen centered view.
+ */
+export const FULLSCREEN_CENTER_STYLE: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+};
+
+/**
+ * The default style for the center container.
+ */
+export const UI_CONTAINER_STYLE: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  zIndex: 0,
+  justifyContent: 'center',
+  overflow: 'hidden',
+};
+
+/**
+ * The default style for the top container.
+ */
+export const TOP_UI_CONTAINER_STYLE: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 1,
+  paddingTop: 10,
+  paddingLeft: 10,
+  paddingRight: 10,
+};
+
+/**
+ * The default style for the center container.
+ */
+export const CENTER_UI_CONTAINER_STYLE: ViewStyle = {
+  alignSelf: 'center',
+  width: '60%',
+};
+
+/**
+ * The default style for the bottom container.
+ */
+export const BOTTOM_UI_CONTAINER_STYLE: ViewStyle = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 1,
+  paddingBottom: 10,
+  paddingLeft: 10,
+  paddingRight: 10,
+};
+
+interface UiContainerState {
+  fadeAnimation: Animated.Value;
+  currentMenu: ReactNode | undefined;
+  showing: boolean;
+  buttonsEnabled: boolean;
+  error: PlayerError | undefined;
+  firstPlay: boolean;
+  paused: boolean;
+  casting: boolean;
+  pip: boolean;
+}
+
+/**
+ * A component that does all the coordination between UI components.
+ * - It provides all UI components with the PlayerContext, so they can access the styling and player.
+ * - It provides slots for UI components to be places in the top/center/bottom positions.
+ * - It uses animations to fade the UI in and out when applicable.
+ */
+export class UiContainer extends PureComponent<React.PropsWithChildren<UiContainerProps>, UiContainerState> implements UiControls {
+  private _currentFadeOutTimeout: number | undefined = undefined;
+
+  private _menus: MenuConstructor[] = [];
+
+  static initialState: UiContainerState = {
+    fadeAnimation: new Animated.Value(1),
+    currentMenu: undefined,
+    showing: true,
+    buttonsEnabled: true,
+    error: undefined,
+    firstPlay: false,
+    paused: true,
+    casting: false,
+    pip: false,
+  };
+
+  constructor(props: UiContainerProps) {
+    super(props);
+    this.state = UiContainer.initialState;
+  }
+
+  componentDidMount() {
+    const player = this.props.player;
+    player.addEventListener(PlayerEventType.LOAD_START, this.onLoadStart);
+    player.addEventListener(PlayerEventType.ERROR, this.onError);
+    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);
+    player.addEventListener(PlayerEventType.PLAY, this.onPlay);
+    player.addEventListener(PlayerEventType.PLAYING, this.onPlay);
+    player.addEventListener(PlayerEventType.PAUSE, this.onPause);
+    player.addEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
+    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);
+    player.addEventListener(PlayerEventType.ENDED, this.onEnded);
+    player.addEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+    if (player.source !== undefined && player.currentTime !== 0) {
+      this.onPlay();
+    }
+    this.setState({ pip: player.presentationMode === 'picture-in-picture' });
+  }
+
+  componentWillUnmount() {
+    const player = this.props.player;
+    player.removeEventListener(PlayerEventType.LOAD_START, this.onLoadStart);
+    player.removeEventListener(PlayerEventType.ERROR, this.onError);
+    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);
+    player.removeEventListener(PlayerEventType.PLAY, this.onPlay);
+    player.removeEventListener(PlayerEventType.PLAYING, this.onPlay);
+    player.removeEventListener(PlayerEventType.PAUSE, this.onPause);
+    player.removeEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
+    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);
+    player.removeEventListener(PlayerEventType.ENDED, this.onEnded);
+    player.removeEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+    clearTimeout(this._currentFadeOutTimeout);
+  }
+
+  private onPlay = () => {
+    this.setState({ firstPlay: true, paused: false });
+    this.resumeAnimationsIfPossible_();
+  };
+
+  private onPause = () => {
+    this.setState({ firstPlay: true, paused: true });
+    this.stopAnimationsAndShowUi_();
+  };
+
+  private onSourceChange = () => {
+    this.setState({ paused: this.props.player.paused });
+  };
+
+  private onLoadStart = () => {
+    this.setState({ error: undefined });
+  };
+
+  private onError = (event: ErrorEvent) => {
+    const { error } = event;
+    this.setState({ error });
+  };
+
+  private onCastEvent = (event: CastEvent) => {
+    if (event.subType === CastEventType.CHROMECAST_STATE_CHANGE || event.subType === CastEventType.AIRPLAY_STATE_CHANGE) {
+      this.setState({ casting: event.state === 'connecting' || event.state === 'connected' });
+      this.resumeAnimationsIfPossible_();
+    }
+  };
+
+  private onEnded = () => {
+    this.stopAnimationsAndShowUi_();
+  };
+
+  private onPresentationModeChange = (event: PresentationModeChangeEvent) => {
+    this.setState({ pip: event.presentationMode === PresentationMode.pip });
+  };
+
+  get buttonsEnabled_(): boolean {
+    return this.state.buttonsEnabled;
+  }
+
+  /**
+   * Request to show the UI due to user input.
+   */
+  public onUserAction_ = () => {
+    if (!this.state.firstPlay) {
+      return;
+    }
+    this.stopAnimationsAndShowUi_();
+    this.resumeAnimationsIfPossible_();
+  };
+
+  public openMenu_ = (menuConstructor: () => ReactNode) => {
+    this._menus.push(menuConstructor);
+    this.setState({ currentMenu: menuConstructor() });
+    this.stopAnimationsAndShowUi_();
+  };
+
+  public closeCurrentMenu_ = () => {
+    this._menus.pop();
+    const nextMenu = this._menus.length > 0 ? this._menus[this._menus.length - 1] : undefined;
+    this.setState({ currentMenu: nextMenu?.() });
+    this.resumeAnimationsIfPossible_();
+  };
+
+  private stopAnimationsAndShowUi_() {
+    clearTimeout(this._currentFadeOutTimeout);
+    this._currentFadeOutTimeout = undefined;
+    if (!this.state.showing) {
+      this.doFadeIn_();
+    }
+  }
+
+  private resumeAnimationsIfPossible_() {
+    clearTimeout(this._currentFadeOutTimeout);
+    if (this.animationsBlocked_) {
+      return;
+    }
+    // Only resume animation when paused except for web.
+    // This is because mobile users can tap away the UI when paused, but desktop users can't.
+    if (Platform.OS === 'web' || !this.state.paused) {
+      // @ts-ignore
+      this._currentFadeOutTimeout = setTimeout(this.doFadeOut_, this.props.theme.fadeAnimationTimoutMs);
+    }
+  }
+
+  private doFadeIn_ = () => {
+    const { fadeAnimation } = this.state;
+    this.setState({ showing: true });
+    Animated.timing(fadeAnimation, {
+      useNativeDriver: true,
+      toValue: 1,
+      duration: 200,
+    }).start(() => {
+      this.setState({ buttonsEnabled: true });
+    });
+  };
+
+  private doFadeOut_ = () => {
+    if (this.animationsBlocked_) {
+      return;
+    }
+    clearTimeout(this._currentFadeOutTimeout);
+    const { fadeAnimation } = this.state;
+    this.setState({ buttonsEnabled: false });
+    Animated.timing(fadeAnimation, {
+      useNativeDriver: true,
+      toValue: 0,
+      duration: 200,
+    }).start(() => {
+      this.setState({ showing: false });
+    });
+  };
+
+  private get animationsBlocked_(): boolean {
+    const { firstPlay, currentMenu, casting, pip } = this.state;
+    return !firstPlay || currentMenu !== undefined || casting || pip;
+  }
+
+  render() {
+    const { player, theme, top, center, bottom, children, style, topStyle, centerStyle, bottomStyle, behind } = this.props;
+    const { fadeAnimation, currentMenu, error, firstPlay, pip } = this.state;
+
+    if (error !== undefined) {
+      return <ErrorDisplay error={error} />;
+    }
+
+    if (Platform.OS !== 'web' && pip) {
+      return <></>;
+    }
+
+    const combinedContainerStyle = [UI_CONTAINER_STYLE, style];
+
+    return (
+      <PlayerContext.Provider value={{ player, style: theme, ui: this }}>
+        {/* The View behind the UI, that is always visible.*/}
+        <View style={FULLSCREEN_CENTER_STYLE}>{behind}</View>
+        {/* The Animated.View is for showing and hiding the UI*/}
+        <Animated.View
+          style={[combinedContainerStyle, { opacity: fadeAnimation }]}
+          onTouchStart={this.onUserAction_}
+          {...(Platform.OS === 'web' ? { onMouseMove: this.onUserAction_, onMouseLeave: this.doFadeOut_ } : {})}>
+          <>
+            {/* The UI background */}
+            <View style={[combinedContainerStyle, { backgroundColor: theme.colors.uiBackground }]} onTouchStart={this.doFadeOut_} />
+
+            {/* The Settings Menu */}
+            {currentMenu !== undefined && <View style={[combinedContainerStyle]}>{currentMenu}</View>}
+
+            {/* The UI control bars*/}
+            {currentMenu === undefined && (
+              <>
+                {firstPlay && <View style={[TOP_UI_CONTAINER_STYLE, topStyle]}>{top}</View>}
+                <View style={[CENTER_UI_CONTAINER_STYLE, centerStyle]}>{center}</View>
+                {firstPlay && <View style={[BOTTOM_UI_CONTAINER_STYLE, bottomStyle]}>{bottom}</View>}
+                {children}
+              </>
+            )}
+          </>
+        </Animated.View>
+      </PlayerContext.Provider>
+    );
+  }
+}
+
+UiContainer.contextType = PlayerContext;

package/src/ui/components/uicontroller/UiControls.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+/**
+ * A callback function to render a menu when needed.
+ */
+export type MenuConstructor = () => ReactNode;
+
+/**
+ * The API provided to all UI components in `react-native-theoplayer` so they can communicate with the UI.
+ */
+export interface UiControls {
+  /*
+   * Whether the UI buttons are enabled.
+   */
+  readonly buttonsEnabled_: boolean;
+
+  /*
+   * Used to notify the UI that a user pressed did an action, so the UI can be faded in.
+   */
+  onUserAction_: () => void;
+
+  /*
+   * Opens a new menu on top of the player.
+   */
+  openMenu_: (menuConstructor: MenuConstructor) => void;
+
+  /*
+   * Closes the current menu. If this was a sub-menu, the parent menu will re-open.
+   */
+  closeCurrentMenu_: () => void;
+}

package/src/ui/components/uicontroller/barrel.ts

@@ -0,0 +1,2 @@
+export * from './UiContainer';
+export * from './UiControls';

package/src/ui/components/util/PlayerContext.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { THEOplayer } from 'react-native-theoplayer';
+import type { THEOplayerTheme } from '../../THEOplayerTheme';
+import { DEFAULT_THEOPLAYER_THEME } from '../../THEOplayerTheme';
+import type { UiControls } from '../uicontroller/UiControls';
+
+export interface UiContext {
+  /**
+   * The THEOplayer from the THEOplayerView.
+   */
+  readonly player: THEOplayer;
+  /**
+   * The configured THEOplayerTheme.
+   */
+  readonly style: THEOplayerTheme;
+  /**
+   * UI controls for the components to communicate with the UI.
+   */
+  readonly ui: UiControls;
+}
+
+/**
+ * The context for all UI components of `react-native-theoplayer`.
+ */
+export const PlayerContext = React.createContext<UiContext>({
+  player: undefined as unknown as THEOplayer,
+  style: DEFAULT_THEOPLAYER_THEME,
+  ui: undefined as unknown as UiControls,
+});

package/src/ui/components/util/TrackUtils.ts

@@ -0,0 +1,62 @@
+import type { MediaTrack, TextTrack } from 'react-native-theoplayer';
+import { TrackListEventType, VideoQuality } from 'react-native-theoplayer';
+import { getISO639LanguageByCode } from '../../utils/language/Language';
+
+export function getTrackLabel(track: MediaTrack | TextTrack): string {
+  if (track.label) {
+    return track.label;
+  }
+  const languageCode: string = track.language;
+  if (languageCode) {
+    const iso639Language = getISO639LanguageByCode(languageCode);
+    if (iso639Language) {
+      return iso639Language.local;
+    }
+  }
+  return languageCode || '';
+}
+
+export function stringFromTextTrackListEvent(type: TrackListEventType): string {
+  switch (type) {
+    case TrackListEventType.ADD_TRACK:
+      return 'AddTrack';
+    case TrackListEventType.REMOVE_TRACK:
+      return 'RemoveTrack';
+    case TrackListEventType.CHANGE_TRACK:
+      return 'ChangeTrack';
+  }
+}
+
+/**
+ * Retain renderable tracks.
+ * https://html.spec.whatwg.org/multipage/embedded-content.html#text-track-showing
+ */
+export function filterRenderableTracks(textTracks: TextTrack[]): TextTrack[] {
+  return textTracks.filter((textTrack) => textTrack.kind === 'subtitles' || textTrack.kind === 'captions');
+}
+
+export function getVideoQualityLabel(quality: VideoQuality | undefined, withBandWidth = true): string {
+  if (!quality) {
+    return 'auto';
+  }
+  if (quality.label && quality.label !== '') {
+    return quality.label;
+  }
+  let label = '';
+  if (quality.height) {
+    label = quality.height + 'p';
+  }
+  if (!withBandWidth || !quality.bandwidth) {
+    return label;
+  }
+  let bandwidth;
+  if (quality.bandwidth > 1e7) {
+    bandwidth = (quality.bandwidth / 1e6).toFixed(0) + 'Mbps';
+  } else if (quality.bandwidth > 1e6) {
+    bandwidth = (quality.bandwidth / 1e6).toFixed(1) + 'Mbps';
+  } else {
+    bandwidth = (quality.bandwidth / 1e3).toFixed(0) + 'kbps';
+  }
+  const isHD = quality.height ? quality.height >= 720 : false;
+  return `${label} - ${bandwidth} ${isHD ? '(HD)' : ''}`;
+}

package/src/ui/components/util/barrel.ts

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

package/src/ui/utils/ArrayUtils.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/utils/language/Language.ts

@@ -0,0 +1,38 @@
+import languages from './languages.json';
+
+export interface ISO639Language {
+  name: string;
+  local: string;
+  '1': string;
+  '2': string;
+  '2T': string;
+  '2B': string;
+  '3': string;
+}
+
+/**
+ * "und" is intended for cases where the language in the data
+ * has not been identified, such as when it is mislabeled
+ * or never had been labeled.
+ *
+ * https://en.wikipedia.org/wiki/ISO_639:und
+ */
+export const ISO639_UNDETERMINED = 'und';
+
+export function getISO639LanguageByCode(code: string): ISO639Language | undefined {
+  if (code === ISO639_UNDETERMINED) {
+    return undefined;
+  }
+  const lcCode = code.toLowerCase();
+  for (const lang of iso639Data) {
+    if (lang['1'] === lcCode || lang['2'] === lcCode || lang['2T'] === lcCode || lang['2B'] === lcCode || lang['3'] === lcCode) {
+      return lang;
+    }
+  }
+  return undefined;
+}
+
+// Original: nodejs-langs by Andrew Lawson
+// License: MIT
+// https://github.com/adlawson/nodejs-langs/blob/bdbf8cfbc26c78dfeeb7f8032889dd88e2219441/data.js
+export const iso639Data: ISO639Language[] = languages;