react-native-theoplayer 2.7.0 → 2.9.0

package/lib/typescript/ui/components/uicontroller/UiContainer.d.ts

@@ -1,115 +0,0 @@
-import React, { PureComponent, ReactNode } from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import type { THEOplayer } from 'react-native-theoplayer';
-import { PlayerError } from 'react-native-theoplayer';
-import type { THEOplayerTheme } from '../../THEOplayerTheme';
-import type { UiControls } from './UiControls';
-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 declare const FULLSCREEN_CENTER_STYLE: ViewStyle;
-/**
- * The default style for the center container.
- */
-export declare const UI_CONTAINER_STYLE: ViewStyle;
-/**
- * The default style for the top container.
- */
-export declare const TOP_UI_CONTAINER_STYLE: ViewStyle;
-/**
- * The default style for the center container.
- */
-export declare const CENTER_UI_CONTAINER_STYLE: ViewStyle;
-/**
- * The default style for the bottom container.
- */
-export declare const BOTTOM_UI_CONTAINER_STYLE: ViewStyle;
-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 declare class UiContainer extends PureComponent<React.PropsWithChildren<UiContainerProps>, UiContainerState> implements UiControls {
-    private _currentFadeOutTimeout;
-    private _menus;
-    static initialState: UiContainerState;
-    constructor(props: UiContainerProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    private onPlay;
-    private onPause;
-    private onSourceChange;
-    private onLoadStart;
-    private onError;
-    private onCastEvent;
-    private onEnded;
-    private onPresentationModeChange;
-    get buttonsEnabled_(): boolean;
-    /**
-     * Request to show the UI due to user input.
-     */
-    onUserAction_: () => void;
-    openMenu_: (menuConstructor: () => ReactNode) => void;
-    closeCurrentMenu_: () => void;
-    private stopAnimationsAndShowUi_;
-    private resumeAnimationsIfPossible_;
-    private doFadeIn_;
-    private doFadeOut_;
-    private get animationsBlocked_();
-    render(): JSX.Element;
-}
-export {};

package/lib/typescript/ui/components/uicontroller/UiControls.d.ts

@@ -1,14 +0,0 @@
-import type { ReactNode } from 'react';
-/**
- * A callback function to render a menu when needed.
- */
-export declare type MenuConstructor = () => ReactNode;
-/**
- * The API provided to all UI components in `react-native-theoplayer` so they can communicate with the UI.
- */
-export interface UiControls {
-    readonly buttonsEnabled_: boolean;
-    onUserAction_: () => void;
-    openMenu_: (menuConstructor: MenuConstructor) => void;
-    closeCurrentMenu_: () => void;
-}

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

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

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/lib/typescript/web/platform/BrowserDetection.d.ts

@@ -1,23 +0,0 @@
-declare global {
-    interface Window {
-        ActiveXObject?: any;
-        DocumentTouch?: any;
-    }
-}
-declare class BrowserDetection {
-    static readonly instance_: BrowserDetection;
-    private readonly _isWindowsPhone;
-    private readonly _isIphone;
-    private readonly _isIpad;
-    private readonly _isIpod;
-    private readonly _isMac;
-    private readonly _isTizen;
-    private readonly _isTouch;
-    private readonly _isIpadOs;
-    private readonly _isIos;
-    private readonly _isSafari;
-    get IS_IOS_(): boolean;
-    get IS_SAFARI_(): boolean;
-}
-export declare const browserDetection: BrowserDetection;
-export {};

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;