react-native-theoplayer 2.7.0 → 2.9.0

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;

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

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

@@ -1,61 +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 { 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;

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

@@ -1,107 +0,0 @@
-import { ActionButton } from './actionbutton/ActionButton';
-import type { StyleProp, ViewStyle } from 'react-native';
-import React, { PureComponent } from 'react';
-import { PlayerEventType } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { PlaySvg } from './svg/PlaySvg';
-
-import { PauseSvg } from './svg/PauseSvg';
-import { ReplaySvg } from './svg/ReplaySvg';
-
-interface PlayButtonProps {
-  /**
-   * The style overrides for the play/pause button.
-   */
-  style?: StyleProp<ViewStyle>;
-}
-
-interface PlayButtonState {
-  paused: boolean;
-  ended: boolean;
-}
-
-/**
- * The default play/pause button for the `react-native-theoplayer` UI.
- */
-export class PlayButton extends PureComponent<PlayButtonProps, PlayButtonState> {
-  constructor(props: PlayButtonProps) {
-    super(props);
-    this.state = {
-      paused: true,
-      ended: false,
-    };
-  }
-
-  componentDidMount() {
-    const context = this.context as UiContext;
-    context.player.addEventListener(PlayerEventType.PLAY, this.onPlay);
-    context.player.addEventListener(PlayerEventType.PLAYING, this.onPlay);
-    context.player.addEventListener(PlayerEventType.PAUSE, this.onPause);
-    context.player.addEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
-    context.player.addEventListener(PlayerEventType.ENDED, this.onEnded);
-    context.player.addEventListener(PlayerEventType.SEEKING, this.onSeeking);
-    this.setState({
-      paused: context.player.paused,
-      ended: context.player.currentTime === context.player.duration,
-    });
-  }
-
-  componentWillUnmount() {
-    const context = this.context as UiContext;
-    context.player.removeEventListener(PlayerEventType.PLAY, this.onPlay);
-    context.player.removeEventListener(PlayerEventType.PLAYING, this.onPlay);
-    context.player.removeEventListener(PlayerEventType.PAUSE, this.onPause);
-    context.player.removeEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
-    context.player.removeEventListener(PlayerEventType.ENDED, this.onEnded);
-    context.player.removeEventListener(PlayerEventType.SEEKING, this.onSeeking);
-  }
-
-  private onPlay = () => {
-    const player = (this.context as UiContext).player;
-    if (player.seeking) {
-      return;
-    }
-    this.setState({ paused: false, ended: false });
-  };
-
-  private onPause = () => {
-    const player = (this.context as UiContext).player;
-    if (player.seeking) {
-      return;
-    }
-    this.setState({ paused: true });
-  };
-
-  private onSourceChange = () => {
-    const player = (this.context as UiContext).player;
-    this.setState({ paused: player.paused });
-  };
-
-  private onEnded = () => {
-    this.setState({ ended: true });
-  };
-
-  private onSeeking = () => {
-    this.setState({ ended: false });
-  };
-
-  private togglePlayPause = () => {
-    const player = (this.context as UiContext).player;
-    if (player.paused) {
-      player.play();
-    } else {
-      player.pause();
-    }
-  };
-
-  render() {
-    const { paused, ended } = this.state;
-    const { style } = this.props;
-
-    return (
-      <ActionButton style={style} touchable={true} svg={ended ? <ReplaySvg /> : paused ? <PlaySvg /> : <PauseSvg />} onPress={this.togglePlayPause} />
-    );
-  }
-}
-
-PlayButton.contextType = PlayerContext;

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

@@ -1,112 +0,0 @@
-import { ActionButton } from './actionbutton/ActionButton';
-import React, { PureComponent } from 'react';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { ForwardSvg } from './svg/ForwardSvg';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Easing, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { BackwardSvg } from './svg/BackwardSvg';
-import { PlayerEventType, ProgressEvent } from 'react-native-theoplayer';
-
-interface SkipButtonProps {
-  /**
-   * The style overrides for the skip button.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * The skip value for the skip button. This can be set to negative to skip backwards.
-   */
-  skip: number;
-  /**
-   * Whether the skip button should do a rotation animation when pressed instead of fading.
-   */
-  rotate?: boolean;
-}
-
-interface SkipButtonState {
-  enabled: boolean;
-  spinValue: Animated.Value;
-}
-
-/**
- * The default skip button for the `react-native-theoplayer` UI.
- */
-export class SkipButton extends PureComponent<SkipButtonProps, SkipButtonState> {
-  constructor(props: SkipButtonProps) {
-    super(props);
-    this.state = { enabled: false, spinValue: new Animated.Value(0) };
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.PROGRESS, this.onTimeupdate);
-    this.setState({ enabled: player.seekable.length > 0 });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.PROGRESS, this.onTimeupdate);
-  }
-
-  private readonly onTimeupdate = (event: ProgressEvent) => {
-    this.setState({ enabled: event.seekable.length > 0 });
-  };
-
-  private readonly onPress = () => {
-    const { skip, rotate } = this.props;
-    const { spinValue } = this.state;
-    const player = (this.context as UiContext).player;
-    player.currentTime = player.currentTime + skip * 1e3;
-
-    if (rotate === true) {
-      Animated.timing(spinValue, {
-        toValue: 0.1,
-        duration: 100,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }).start(() => {
-        Animated.timing(spinValue, {
-          toValue: 0,
-          duration: 100,
-          easing: Easing.linear,
-          useNativeDriver: true,
-        }).start();
-      });
-    }
-  };
-
-  render() {
-    const { style, skip, rotate } = this.props;
-    const { enabled, spinValue } = this.state;
-
-    if (!enabled) {
-      return <></>;
-    }
-
-    const spin = spinValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: skip >= 0 ? ['0deg', '360deg'] : ['360deg', '0deg'],
-    });
-
-    return (
-      <>
-        <PlayerContext.Consumer>
-          {(context: UiContext) => (
-            <Animated.View style={[{ height: '100%', aspectRatio: 1 }, style, { transform: [{ rotate: spin }] }]}>
-              <TouchableOpacity
-                activeOpacity={rotate === true ? 1 : 0.2}
-                style={[{ height: '100%', aspectRatio: 1, justifyContent: 'center' }, style]}
-                onPress={this.onPress}>
-                <ActionButton touchable={false} svg={skip < 0 ? <BackwardSvg /> : <ForwardSvg />} />
-                <View style={[StyleSheet.absoluteFill, { justifyContent: 'center' }]}>
-                  <Text style={[context.style.text, { color: context.style.colors.text }]}>{Math.abs(skip)}</Text>
-                </View>
-              </TouchableOpacity>
-            </Animated.View>
-          )}
-        </PlayerContext.Consumer>
-      </>
-    );
-  }
-}
-
-SkipButton.contextType = PlayerContext;

package/src/ui/components/button/actionbutton/ActionButton.tsx

@@ -1,105 +0,0 @@
-import { Image, ImageSourcePropType, Platform, StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
-import React, { ReactNode, useContext, useState } from 'react';
-import { SvgContext } from '../svg/SvgUtils';
-import { PlayerContext, UiContext } from '../../util/PlayerContext';
-
-export interface ActionButtonProps {
-  /**
-   * The image to put in the button.
-   */
-  icon?: ImageSourcePropType;
-  /**
-   * The SVG component to put in the button. Takes priority over images.
-   */
-  svg?: ReactNode;
-  /**
-   * Whether the button should be touchable. This is `true` by default.
-   */
-  touchable: boolean;
-  /**
-   * The callback when the button is pressed.
-   */
-  onPress?: () => void;
-  /**
-   * The styling overrides.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Whether the button should be highlighted with `ColorTheme.iconSelected` color.
-   */
-  highlighted?: boolean;
-}
-
-/**
- * The default style applied to the ActionButton
- */
-export const DEFAULT_ACTION_BUTTON_STYLE: ViewStyle = {
-  height: '100%',
-  aspectRatio: 1,
-  padding: 5,
-};
-
-/**
- * The default button component that renders an image/svg source for the `react-native-theoplayer` UI.
- */
-export const ActionButton = (props: ActionButtonProps) => {
-  const { icon, style, touchable, svg, onPress, highlighted } = props;
-  const [focused, setFocused] = useState<boolean>(false);
-  const context = useContext(PlayerContext);
-
-  const shouldChangeTintColor = highlighted || (focused && Platform.isTV);
-
-  if (!touchable) {
-    return <View style={[DEFAULT_ACTION_BUTTON_STYLE, style]}>{svg}</View>;
-  }
-
-  const onTouch = () => {
-    if (context.ui.buttonsEnabled_) {
-      onPress?.();
-    }
-    context.ui.onUserAction_();
-  };
-
-  return (
-    <PlayerContext.Consumer>
-      {(context: UiContext) => (
-        <TouchableOpacity
-          style={[DEFAULT_ACTION_BUTTON_STYLE, style]}
-          tvParallaxProperties={{ enabled: false }}
-          onPress={onTouch}
-          onFocus={() => {
-            context.ui.onUserAction_();
-            setFocused(true);
-          }}
-          onBlur={() => {
-            setFocused(false);
-          }}>
-          {/* Give priority to SVG over image sources.*/}
-          {svg && (
-            <SvgContext.Provider
-              value={{
-                fill: shouldChangeTintColor ? context.style.colors.iconSelected : context.style.colors.icon,
-                height: '100%',
-                width: '100%',
-              }}>
-              <View>{svg}</View>
-            </SvgContext.Provider>
-          )}
-          {svg === undefined && icon && (
-            <Image
-              style={[
-                { height: '100%', width: '100%' },
-                { tintColor: shouldChangeTintColor ? context.style.colors.iconSelected : context.style.colors.icon },
-              ]}
-              source={icon}
-            />
-          )}
-        </TouchableOpacity>
-      )}
-    </PlayerContext.Consumer>
-  );
-};
-
-ActionButton.defaultProps = {
-  touchable: true,
-};

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

@@ -1,9 +0,0 @@
-export * from './actionbutton/ActionButton';
-export * from './svg/barrel';
-export * from './AirplayButton';
-export * from './ChromecastButton';
-export * from './FullscreenButton';
-export * from './MuteButton';
-export * from './PipButton';
-export * from './PlayButton';
-export * from './SkipButton';

package/src/ui/components/button/svg/AirplaySvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const AirplaySvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 96 960 960'} {...context} {...props}>
-            <Path d="m273 936 207-206 206 206H273Zm-133-80q-24 0-42-18t-18-42V276q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H631v-60h189V276H140v520h189v60H140Zm340-290Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/ArrowForwardSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const ArrowForwardSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 0 24 24'} {...context} {...props}>
-            <Path d="M6.925 21.325q-.45-.45-.45-1.113 0-.662.45-1.112l7.1-7.1L6.9 4.875q-.45-.45-.462-1.1-.013-.65.462-1.125.475-.45 1.125-.45t1.1.45l8.425 8.425q.2.2.287.437.088.238.088.488t-.088.488q-.087.237-.287.437L9.125 21.35q-.45.45-1.087.45-.638 0-1.113-.475Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};