react-native-theoplayer 2.7.0 → 2.9.0

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

@@ -1,355 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

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

@@ -1,29 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

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

package/src/ui/utils/ArrayUtils.ts

@@ -1,12 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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;