react-native-theoplayer 2.8.0 → 2.9.0

package/lib/typescript/ui/components/util/PlayerContext.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import type { THEOplayer } from 'react-native-theoplayer';
-import type { THEOplayerTheme } 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 declare const PlayerContext: React.Context<UiContext>;

package/lib/typescript/ui/components/util/TrackUtils.d.ts

@@ -1,10 +0,0 @@
-import type { MediaTrack, TextTrack } from 'react-native-theoplayer';
-import { TrackListEventType, VideoQuality } from 'react-native-theoplayer';
-export declare function getTrackLabel(track: MediaTrack | TextTrack): string;
-export declare function stringFromTextTrackListEvent(type: TrackListEventType): string;
-/**
- * Retain renderable tracks.
- * https://html.spec.whatwg.org/multipage/embedded-content.html#text-track-showing
- */
-export declare function filterRenderableTracks(textTracks: TextTrack[]): TextTrack[];
-export declare function getVideoQualityLabel(quality: VideoQuality | undefined, withBandWidth?: boolean): string;

package/lib/typescript/ui/components/util/barrel.d.ts

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

package/lib/typescript/ui/utils/ArrayUtils.d.ts

@@ -1,2 +0,0 @@
-export declare function arrayRemoveElement<T>(array: T[], element: T): boolean;
-export declare function arrayRemoveAt<T>(array: T[], index: number): void;

package/lib/typescript/ui/utils/language/Language.d.ts

@@ -1,19 +0,0 @@
-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 declare const ISO639_UNDETERMINED = "und";
-export declare function getISO639LanguageByCode(code: string): ISO639Language | undefined;
-export declare const iso639Data: ISO639Language[];

package/src/ui/THEOplayerDefaultUi.tsx

@@ -1,108 +0,0 @@
-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>
-  );
-}

package/src/ui/THEOplayerTheme.ts

@@ -1,112 +0,0 @@
-import type { TextStyle } from 'react-native';
-
-/**
- * The theme colors.
- */
-export interface ColorTheme {
-  /**
-   * The color of the UI background.
-   */
-  uiBackground: string;
-  /**
-   * The color of the error display background.
-   */
-  errorBackground: string;
-  /**
-   * The color of the SVG icons.
-   */
-  icon: string;
-  /**
-   * The color of the SVG icons when they are selected.
-   */
-  iconSelected: string;
-  /**
-   * The color of the text components.
-   */
-  text: string;
-  /**
-   * The color of the text components when they are selected.
-   */
-  textSelected: string;
-  /**
-   * The color of the text component background when it is selected.
-   */
-  textSelectedBackground: string;
-  /**
-   * The color of the left side of the seek bar.
-   */
-  seekBarMinimum: string;
-  /**
-   * The color of the right side of the seek bar.
-   */
-  seekBarMaximum: string;
-  /**
-   * The color of the dot on the seek bar.
-   */
-  seekBarDot: string;
-}
-
-/**
- * The dimensions of various UI components.
- */
-export interface Dimensions {
-  /**
-   * The height of the center control bar.
-   */
-  centerControlBarHeight: number;
-  /**
-   * The height of all other control bars.
-   */
-  controlBarHeight: number;
-}
-
-/**
- * The theme used by `react-native-theoplayer` UI components.
- */
-export interface THEOplayerTheme {
-  /**
-   * The theme colors.
-   */
-  colors: ColorTheme;
-  /**
-   * The styling for all text components.
-   */
-  text: TextStyle;
-  /**
-   * The amount of time after a user action where UI animations will resume.
-   */
-  fadeAnimationTimoutMs: number;
-  /**
-   * The dimensions of various UI components.
-   */
-  dimensions: Dimensions;
-}
-
-/**
- * The default theme for the UI.
- */
-export const DEFAULT_THEOPLAYER_THEME: THEOplayerTheme = {
-  colors: {
-    uiBackground: '#00000080',
-    errorBackground: '#2C2C2C',
-    icon: '#FFFFFF',
-    iconSelected: '#FFC50F',
-    text: '#FFFFFF',
-    textSelected: '#2C2C2C',
-    textSelectedBackground: '#FFFFFF',
-    seekBarMinimum: '#FFFFFF',
-    seekBarMaximum: '#FFFFFF50',
-    seekBarDot: '#FFFFFF',
-  },
-  text: {
-    textAlignVertical: 'center',
-    textAlign: 'center',
-    alignSelf: 'center',
-    fontSize: 16,
-  },
-  fadeAnimationTimoutMs: 2500,
-  dimensions: {
-    controlBarHeight: 40,
-    centerControlBarHeight: 52,
-  },
-};

package/src/ui/barrel.ts

@@ -1,3 +0,0 @@
-export * from './THEOplayerDefaultUi';
-export * from './THEOplayerTheme';
-export * from './components/barrel';

package/src/ui/components/activityindicator/CenteredDelayedActivityIndicator.tsx

@@ -1,96 +0,0 @@
-import React, { PureComponent } from 'react';
-import type { DelayedActivityIndicatorProps } from './DelayedActivityIndicator';
-import { DelayedActivityIndicator } from './DelayedActivityIndicator';
-import { View } from 'react-native';
-import { ErrorEvent, PlayerError, PlayerEventType, ReadyStateChangeEvent } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { FULLSCREEN_CENTER_STYLE } from '../uicontroller/UiContainer';
-
-interface CenteredDelayedActivityIndicatorState {
-  showLoadingIndicator: boolean;
-  error: PlayerError | undefined;
-}
-
-/**
- * The default spinner for the `react-native-theoplayer` UI. It renders a ActivityIndicator when the player's playback is stalling due
- * readystate changes.
- */
-export class CenteredDelayedActivityIndicator extends PureComponent<DelayedActivityIndicatorProps, CenteredDelayedActivityIndicatorState> {
-  private static initialState: CenteredDelayedActivityIndicatorState = {
-    showLoadingIndicator: false,
-    error: undefined,
-  };
-
-  constructor(props: DelayedActivityIndicatorProps) {
-    super(props);
-    this.state = CenteredDelayedActivityIndicator.initialState;
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.READYSTATE_CHANGE, this.onReadyStateChange);
-    player.addEventListener(PlayerEventType.ERROR, this.onError);
-    player.addEventListener(PlayerEventType.PLAYING, this.onPlaying);
-    player.addEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
-    player.addEventListener(PlayerEventType.LOAD_START, this.onLoadStart);
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.READYSTATE_CHANGE, this.onReadyStateChange);
-    player.removeEventListener(PlayerEventType.ERROR, this.onError);
-    player.removeEventListener(PlayerEventType.PLAYING, this.onPlaying);
-    player.removeEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
-    player.removeEventListener(PlayerEventType.LOAD_START, this.onLoadStart);
-  }
-
-  private onReadyStateChange = (event: ReadyStateChangeEvent) => {
-    this.maybeShowLoadingIndicator(event.readyState < 3);
-  };
-
-  private onError = (event: ErrorEvent) => {
-    const { error } = event;
-    this.setState({ error });
-    this.maybeShowLoadingIndicator(false);
-  };
-
-  private onPlaying = () => {
-    this.maybeShowLoadingIndicator(false);
-  };
-
-  private onSourceChange = () => {
-    this.setState({ error: undefined });
-    this.maybeShowLoadingIndicator(false);
-  };
-
-  private onLoadStart = () => {
-    this.setState({ error: undefined });
-    this.maybeShowLoadingIndicator(true);
-  };
-
-  private maybeShowLoadingIndicator(showLoading: boolean) {
-    const { error } = this.state;
-    // do not change state to buffering in case of an error or if the player is paused
-    const player = (this.context as UiContext).player;
-    this.setState({ showLoadingIndicator: showLoading && !error && !player.paused });
-  }
-
-  render() {
-    const { showLoadingIndicator } = this.state;
-    const player = (this.context as UiContext).player;
-    return (
-      showLoadingIndicator &&
-      !player.paused && (
-        <PlayerContext.Consumer>
-          {(context: UiContext) => (
-            <View style={FULLSCREEN_CENTER_STYLE}>
-              <DelayedActivityIndicator color={context.style.colors.icon} {...this.props} />
-            </View>
-          )}
-        </PlayerContext.Consumer>
-      )
-    );
-  }
-}
-
-CenteredDelayedActivityIndicator.contextType = PlayerContext;

package/src/ui/components/activityindicator/DelayedActivityIndicator.tsx

@@ -1,32 +0,0 @@
-import { ActivityIndicator, ActivityIndicatorProps } from 'react-native';
-import React, { useEffect, useState } from 'react';
-
-export interface DelayedActivityIndicatorProps extends ActivityIndicatorProps {
-  delay?: number;
-}
-
-const DEFAULT_DELAY = 200;
-
-/**
- * The DelayedActivityIndicator renders a native ActivityIndicator after a certain delay.
- */
-export const DelayedActivityIndicator = (props: DelayedActivityIndicatorProps) => {
-  const [showing, setShowing] = useState(false);
-
-  useEffect(() => {
-    const { delay } = props;
-    const timer = setTimeout(() => {
-      setShowing(true);
-    }, delay || DEFAULT_DELAY);
-    return () => clearTimeout(timer);
-  });
-
-  return (
-    <ActivityIndicator
-      style={{
-        opacity: showing ? 1.0 : 0.0,
-      }}
-      {...props}
-    />
-  );
-};

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

@@ -1,2 +0,0 @@
-export * from './CenteredDelayedActivityIndicator';
-export * from './DelayedActivityIndicator';

package/src/ui/components/barrel.ts

@@ -1,9 +0,0 @@
-export * from './activityindicator/barrel';
-export * from './button/barrel';
-export * from './controlbar/barrel';
-export * from './menu/barrel';
-export * from './message/barrel';
-export * from './seekbar/barrel';
-export * from './timelabel/barrel';
-export * from './uicontroller/barrel';
-export * from './util/barrel';

package/src/ui/components/button/AirplayButton.tsx

@@ -1,64 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Platform } from 'react-native';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { isConnected } from './ChromecastButton';
-import { ActionButton } from './actionbutton/ActionButton';
-import { AirplaySvg } from './svg/AirplaySvg';
-import { CastEvent, CastEventType, CastState, PlayerEventType } from './../../../api/barrel';
-
-interface CastButtonState {
-  castState: CastState;
-}
-
-/**
- * The default button to enable Airplay for the `react-native-theoplayer` UI.
- */
-export class AirplayButton extends PureComponent<unknown, CastButtonState> {
-  private static initialState: CastButtonState = {
-    castState: CastState.unavailable,
-  };
-
-  constructor(props: unknown) {
-    super(props);
-    this.state = AirplayButton.initialState;
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
-    this.setState({ castState: player.cast.airplay?.state ?? CastState.unavailable });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
-  }
-
-  private onCastStateChangeEvent = (event: CastEvent) => {
-    if (event.subType != CastEventType.AIRPLAY_STATE_CHANGE) {
-      return;
-    }
-    this.setState({ castState: event.state });
-  };
-
-  private onUIAirplayToggled = () => {
-    const player = (this.context as UiContext).player;
-    if (player.cast.airplay?.state !== CastState.unavailable) {
-      if (isConnected(player.cast.airplay?.state)) {
-        player.cast.airplay?.stop();
-      } else {
-        player.cast.airplay?.start();
-      }
-    }
-  };
-
-  render() {
-    const { castState } = this.state;
-    if (castState === CastState.unavailable || Platform.isTV) {
-      return <></>;
-    }
-    return <ActionButton svg={<AirplaySvg />} touchable={true} onPress={this.onUIAirplayToggled} highlighted={isConnected(castState)} />;
-  }
-}
-
-AirplayButton.contextType = PlayerContext;

package/src/ui/components/button/ChromecastButton.tsx

@@ -1,60 +0,0 @@
-import React, { PureComponent } from 'react';
-import { CastButton } from 'react-native-google-cast';
-import type { CastEvent } from 'react-native-theoplayer';
-import { CastEventType, CastState, PlayerEventType } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { DEFAULT_ACTION_BUTTON_STYLE } from './actionbutton/ActionButton';
-
-interface CastButtonState {
-  connected: boolean;
-}
-
-export function isConnected(state: CastState | undefined): boolean {
-  return state === 'connecting' || state === 'connected';
-}
-
-/**
- * The native button to enable Chromecast for the `react-native-theoplayer` UI.
- * This component uses the button from `react-native-google-cast` and is not supported on web.
- */
-export class ChromecastButton extends PureComponent<unknown, CastButtonState> {
-  private static initialState: CastButtonState = {
-    connected: false,
-  };
-
-  constructor(props: unknown) {
-    super(props);
-    this.state = ChromecastButton.initialState;
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
-    this.setState({ connected: player.cast?.casting });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
-  }
-
-  private onCastStateChangeEvent = (event: CastEvent) => {
-    if (event.subType != CastEventType.CHROMECAST_STATE_CHANGE) {
-      return;
-    }
-    this.setState({ connected: isConnected(event.state) });
-  };
-
-  render() {
-    const { connected } = this.state;
-    return (
-      <PlayerContext.Consumer>
-        {(context: UiContext) => (
-          <CastButton style={DEFAULT_ACTION_BUTTON_STYLE} tintColor={connected ? context.style.colors.iconSelected : context.style.colors.icon} />
-        )}
-      </PlayerContext.Consumer>
-    );
-  }
-}
-
-ChromecastButton.contextType = PlayerContext;

package/src/ui/components/button/ChromecastButton.web.tsx

@@ -1,66 +0,0 @@
-import { CastEvent, CastEventType, CastState, PlayerEventType } from './../../../api/barrel';
-import React, { PureComponent } from 'react';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { ChromecastSvg } from './svg/ChromecastSvg';
-import { Platform } from 'react-native';
-import { ActionButton } from 'react-native-theoplayer';
-
-interface CastButtonState {
-  castState: CastState;
-}
-
-export function isConnected(state: CastState | undefined): boolean {
-  return state === 'connecting' || state === 'connected';
-}
-
-/**
- * The button to enable Chromecast for web for the `react-native-theoplayer` UI
- */
-export class ChromecastButton extends PureComponent<unknown, CastButtonState> {
-  private static initialState: CastButtonState = {
-    castState: CastState.unavailable,
-  };
-
-  constructor(props: unknown) {
-    super(props);
-    this.state = ChromecastButton.initialState;
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
-    this.setState({ castState: player.cast.chromecast?.state ?? CastState.unavailable });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
-  }
-
-  private onCastStateChangeEvent = (event: CastEvent) => {
-    if (event.subType != CastEventType.CHROMECAST_STATE_CHANGE) {
-      return;
-    }
-    this.setState({ castState: event.state });
-  };
-
-  private onPress = () => {
-    const player = (this.context as UiContext).player;
-    if (isConnected(this.state.castState)) {
-      player.cast.chromecast?.stop();
-    } else {
-      player.cast.chromecast?.start();
-    }
-  };
-
-  render() {
-    const { castState } = this.state;
-    // TODO: state is reported as unavailable by Android bridge when it is available.
-    if (Platform.OS === 'web' && castState === CastState.unavailable) {
-      return <></>;
-    }
-    return <ActionButton svg={<ChromecastSvg />} touchable={true} onPress={this.onPress} highlighted={isConnected(castState)} />;
-  }
-}
-
-ChromecastButton.contextType = PlayerContext;

package/src/ui/components/button/FullscreenButton.tsx

@@ -1,60 +0,0 @@
-import React, { PureComponent } from 'react';
-import type { PresentationModeChangeEvent } from 'react-native-theoplayer';
-import { PlayerEventType, PresentationMode } from 'react-native-theoplayer';
-import { Platform } from 'react-native';
-import { ActionButton } from './actionbutton/ActionButton';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { FullscreenExitSvg } from './svg/FullscreenExitSvg';
-import { FullscreenEnterSvg } from './svg/FullscreenEnterSvg';
-
-interface FullscreenButtonState {
-  presentationMode: PresentationMode;
-}
-
-/**
- * The button to enable/disable fullscreen for the `react-native-theoplayer` UI.
- */
-export class FullscreenButton extends PureComponent<unknown, FullscreenButtonState> {
-  constructor(props: unknown) {
-    super(props);
-    this.state = { presentationMode: PresentationMode.inline };
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
-    this.setState({ presentationMode: player.presentationMode });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
-  }
-
-  private readonly onPresentationModeChange = (event: PresentationModeChangeEvent) => {
-    this.setState({ presentationMode: event.presentationMode });
-  };
-
-  private toggleFullScreen = () => {
-    const player = (this.context as UiContext).player;
-    switch (player.presentationMode) {
-      case 'picture-in-picture':
-      case 'inline':
-        player.presentationMode = PresentationMode.fullscreen;
-        break;
-      case 'fullscreen':
-        player.presentationMode = PresentationMode.inline;
-        break;
-    }
-  };
-
-  render() {
-    const { presentationMode } = this.state;
-    if (Platform.isTV) {
-      return <></>;
-    }
-    return <ActionButton svg={presentationMode === 'fullscreen' ? <FullscreenExitSvg /> : <FullscreenEnterSvg />} onPress={this.toggleFullScreen} />;
-  }
-}
-
-FullscreenButton.contextType = PlayerContext;