react-native-theoplayer 1.8.2 → 2.0.0

package/src/ui/THEOplayerTheme.ts

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

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

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

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

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

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

package/src/ui/components/barrel.ts

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

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

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

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

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

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

@@ -0,0 +1,52 @@
+import { ActionButton } from './actionbutton/ActionButton';
+import React, { PureComponent } from 'react';
+import { PlayerContext, UiContext } from '../util/PlayerContext';
+import { PlayerEventType, VolumeChangeEvent } from 'react-native-theoplayer';
+import { Platform } from 'react-native';
+import { VolumeOffSvg } from './svg/VolumeOffSvg';
+import { VolumeUpSvg } from './svg/VolumeUpSvg';
+
+interface MuteButtonState {
+  muted: boolean;
+}
+
+/**
+ * The default mute button for the `react-native-theoplayer` UI.
+ */
+export class MuteButton extends PureComponent<unknown, MuteButtonState> {
+  constructor(props: unknown) {
+    super(props);
+    this.state = { muted: false };
+  }
+
+  componentDidMount() {
+    const player = (this.context as UiContext).player;
+    player.addEventListener(PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);
+    this.setState({ muted: player.muted });
+  }
+
+  componentWillUnmount() {
+    const player = (this.context as UiContext).player;
+    player.removeEventListener(PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);
+  }
+
+  private onVolumeChange = (_: VolumeChangeEvent) => {
+    const player = (this.context as UiContext).player;
+    this.setState({ muted: player.muted });
+  };
+
+  private toggleMuted = () => {
+    const player = (this.context as UiContext).player;
+    player.muted = !player.muted;
+  };
+
+  render() {
+    const { muted } = this.state;
+    if (Platform.isTV) {
+      return <></>;
+    }
+    return <ActionButton svg={muted ? <VolumeOffSvg /> : <VolumeUpSvg />} onPress={this.toggleMuted} touchable={true} />;
+  }
+}
+
+MuteButton.contextType = PlayerContext;

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

@@ -0,0 +1,61 @@
+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 { PipExitSvg } from './svg/PipExitSvg';
+import { PipEnterSvg } from './svg/PipEnterSvg';
+
+interface PipButtonState {
+  presentationMode: PresentationMode;
+}
+
+/**
+ * The default button to enable picture-in-picture for the `react-native-theoplayer` UI.
+ */
+export class PipButton extends PureComponent<unknown, PipButtonState> {
+  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 togglePip = () => {
+    const player = (this.context as UiContext).player;
+    switch (player.presentationMode) {
+      case 'inline':
+      case 'fullscreen':
+        player.presentationMode = PresentationMode.pip;
+        break;
+      case 'picture-in-picture':
+        player.presentationMode = PresentationMode.inline;
+        break;
+    }
+  };
+
+  render() {
+    if (Platform.isTV) {
+      return <></>;
+    }
+    const { presentationMode } = this.state;
+
+    return <ActionButton svg={presentationMode === 'picture-in-picture' ? <PipExitSvg /> : <PipEnterSvg />} onPress={this.togglePip} />;
+  }
+}
+
+PipButton.contextType = PlayerContext;