react-native-theoplayer 2.7.0 → 2.9.0

package/src/ui/components/menu/common/ScrollableMenu.tsx

@@ -1,43 +0,0 @@
-import React, { ReactNode } from 'react';
-import { SafeAreaView, ScrollView, View, ViewStyle } from 'react-native';
-import { MenuTitle } from './MenuTitle';
-
-interface ScrollableMenuProps {
-  /**
-   * The title of the scrollable menu.
-   */
-  title: string;
-  /**
-   * The items to be put in the scrollable menu.
-   */
-  items?: ReactNode;
-}
-
-/**
- * The default style for the scrollable menu.
- */
-export const DEFAULT_SCROLLABLE_MENU_STYLE: ViewStyle = {
-  flex: 1,
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  paddingRight: 10,
-};
-
-/**
- * A menu component that provides a ScrollView for menu items for the `react-native-theoplayer` UI.
- * @param props
- * @constructor
- */
-export const ScrollableMenu = (props: ScrollableMenuProps) => {
-  const { title, items } = props;
-  return (
-    <SafeAreaView style={DEFAULT_SCROLLABLE_MENU_STYLE}>
-      <MenuTitle label={title} />
-      <ScrollView>
-        <View style={{ flexDirection: 'column' }}>{items}</View>
-      </ScrollView>
-    </SafeAreaView>
-  );
-};

package/src/ui/components/menu/common/SubMenuWithButton.tsx

@@ -1,58 +0,0 @@
-import { PlayerContext, UiContext } from '../../util/PlayerContext';
-import { StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';
-import React, { useContext } from 'react';
-import { ArrowForwardSvg } from '../../button/svg/ArrowForwardSvg';
-import type { MenuConstructor } from '../../uicontroller/UiControls';
-import { DEFAULT_MENU_BUTTON_STYLE } from './MenuRadioButton';
-import { ActionButton } from '../../button/actionbutton/ActionButton';
-
-export interface SubMenuButtonProps {
-  /**
-   * The style overrides.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * The style overrides for the text components.
-   */
-  textStyle?: StyleProp<TextStyle>;
-  /**
-   * The sub menu that will be opened.
-   */
-  menuConstructor: MenuConstructor;
-  /**
-   * The label for the sub menu button.
-   */
-  label: string;
-  /**
-   * A preview for the currently selected value before opening the sub menu.
-   */
-  preview: string;
-}
-
-/**
- * A component that can be put inside a SettingsMenuButton to create a sub menu.
- */
-export const SubMenuWithButton = (props: SubMenuButtonProps) => {
-  const { style, textStyle, menuConstructor, label, preview } = props;
-  const context = useContext(PlayerContext);
-  const onTouch = () => {
-    if (menuConstructor) {
-      context.ui.openMenu_(menuConstructor);
-    }
-  };
-  return (
-    <PlayerContext.Consumer>
-      {(context: UiContext) => (
-        <View style={[{ height: 44, flexDirection: 'row', width: '100%', justifyContent: 'center' }, style]}>
-          <Text style={[DEFAULT_MENU_BUTTON_STYLE, { color: context.style.colors.text, width: '30%' }, textStyle]}>{label}</Text>
-          <View style={{ flexDirection: 'row', width: '40%', justifyContent: 'flex-end' }}>
-            <TouchableOpacity style={{ flexDirection: 'row' }} onPress={onTouch}>
-              <Text style={[DEFAULT_MENU_BUTTON_STYLE, { color: context.style.colors.text }, textStyle]}>{preview}</Text>
-              <ActionButton touchable={false} svg={<ArrowForwardSvg />} />
-            </TouchableOpacity>
-          </View>
-        </View>
-      )}
-    </PlayerContext.Consumer>
-  );
-};

package/src/ui/components/menu/common/barrel.ts

@@ -1,6 +0,0 @@
-export * from './MenuButton';
-export * from './MenuTitle';
-export * from './MenuView';
-export * from './MenuRadioButton';
-export * from './ScrollableMenu';
-export * from './SubMenuWithButton';

package/src/ui/components/message/CastMessage.tsx

@@ -1,74 +0,0 @@
-import React, { PureComponent } from 'react';
-import { CastEvent, CastEventType, CastState, PlayerEventType } from 'react-native-theoplayer';
-import { Text } from 'react-native';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-
-interface CastMessageState {
-  message: string | undefined;
-}
-
-/**
- * A simple cast message showing the current state of casting for the `react-native-theoplayer` UI.
- */
-export class CastMessage extends PureComponent<unknown, CastMessageState> {
-  constructor(props: unknown) {
-    super(props);
-    this.state = { message: undefined };
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);
-    const chromecastState = player.cast.chromecast?.state;
-    const airplayState = player.cast.airplay?.state;
-    if (chromecastState === 'connecting' || chromecastState === 'connected') {
-      this._processCastState(chromecastState, 'Chromecast');
-    } else if (airplayState === 'connecting' || airplayState === 'connected') {
-      this._processCastState(airplayState, 'Airplay');
-    }
-  }
-
-  componentWillUnmount() {
-    const context = this.context as UiContext;
-    context.player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);
-  }
-
-  private _processCastState = (state: CastState, target: 'Chromecast' | 'Airplay') => {
-    let message: string | undefined;
-    switch (state) {
-      case 'connecting':
-        message = `Connecting to ${target} ...`;
-        break;
-      case 'connected':
-        message = `Playing on ${target}`;
-        break;
-    }
-    this.setState({
-      message,
-    });
-  };
-
-  private onCastEvent = (event: CastEvent) => {
-    if (event.subType !== CastEventType.CHROMECAST_STATE_CHANGE && event.subType !== CastEventType.AIRPLAY_STATE_CHANGE) {
-      return;
-    }
-    const castTarget = event.subType === CastEventType.CHROMECAST_STATE_CHANGE ? 'Chromecast' : 'Airplay';
-    this._processCastState(event.state, castTarget);
-  };
-
-  render() {
-    const { message } = this.state;
-
-    if (!message) {
-      return <></>;
-    }
-
-    return (
-      <PlayerContext.Consumer>
-        {(context: UiContext) => <Text style={[context.style.text, { color: context.style.colors.text }]}>{message}</Text>}
-      </PlayerContext.Consumer>
-    );
-  }
-}
-
-CastMessage.contextType = PlayerContext;

package/src/ui/components/message/ErrorDisplay.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-import type { PlayerError } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { SvgContext } from '../button/svg/SvgUtils';
-import { ErrorSvg } from '../button/svg/ErrorSvg';
-import { FULLSCREEN_CENTER_STYLE } from '../uicontroller/UiContainer';
-
-export interface ErrorDisplayProps {
-  /**
-   * The error that will be displayed.
-   */
-  error: PlayerError;
-}
-
-/**
- * A fullscreen error component for the `react-native-theoplayer` UI.
- */
-export function ErrorDisplay(props: ErrorDisplayProps) {
-  const { error } = props;
-  return (
-    <PlayerContext.Consumer>
-      {(context: UiContext) => (
-        <View style={[FULLSCREEN_CENTER_STYLE, { backgroundColor: context.style.colors.errorBackground }]}>
-          <View style={{ flexDirection: 'row' }}>
-            <SvgContext.Provider
-              value={{
-                fill: context.style.colors.icon,
-                height: '100%',
-                width: '100%',
-              }}>
-              <View style={{ height: context.style.dimensions.controlBarHeight, aspectRatio: 1, padding: 5 }}>
-                <ErrorSvg />
-              </View>
-            </SvgContext.Provider>
-            <Text style={[context.style.text, { color: context.style.colors.text, alignSelf: 'center', paddingLeft: 5 }]}>Error:</Text>
-          </View>
-          <Text style={[context.style.text, { color: context.style.colors.text }]}>{error.errorMessage}</Text>
-        </View>
-      )}
-    </PlayerContext.Consumer>
-  );
-}

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

@@ -1,2 +0,0 @@
-export * from './CastMessage';
-export * from './ErrorDisplay';

package/src/ui/components/seekbar/SeekBar.tsx

@@ -1,178 +0,0 @@
-import React, { PureComponent } from 'react';
-import { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import { DurationChangeEvent, LoadedMetadataEvent, PlayerEventType, ProgressEvent, TimeRange, TimeUpdateEvent } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import Slider from '@react-native-community/slider';
-import { SingleThumbnailView } from './thumbnail/SingleThumbnailView';
-
-export interface SeekBarProps {
-  /**
-   * Optional style applied to the SeekBar.
-   */
-  style?: StyleProp<ViewStyle>;
-}
-
-interface SeekBarState {
-  ignoreTimeupdate: boolean;
-  isSeeking: boolean;
-  pausedDueToScrubbing: boolean;
-  seekable: TimeRange[];
-  duration: number;
-  sliderTime: number;
-  width: number;
-}
-
-/**
- * The default seek bar component for the `react-native-theoplayer` UI.
- */
-export class SeekBar extends PureComponent<SeekBarProps, SeekBarState> {
-  private static initialState: SeekBarState = {
-    ignoreTimeupdate: false,
-    isSeeking: false,
-    sliderTime: 0,
-    duration: 0,
-    seekable: [],
-    pausedDueToScrubbing: false,
-    width: 0,
-  };
-
-  private _seekBlockingTimeout: NodeJS.Timeout | undefined;
-  private _clearIsScrubbingTimout: NodeJS.Timeout | undefined;
-
-  constructor(props: SeekBarProps) {
-    super(props);
-    this.state = SeekBar.initialState;
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.LOADED_METADATA, this._onLoadedMetadata);
-    player.addEventListener(PlayerEventType.DURATION_CHANGE, this._onDurationChange);
-    player.addEventListener(PlayerEventType.TIME_UPDATE, this._onTimeUpdate);
-    player.addEventListener(PlayerEventType.PROGRESS, this._onProgress);
-    this.setState({
-      ...SeekBar.initialState,
-      sliderTime: player.currentTime,
-      duration: player.duration,
-      seekable: player.seekable,
-    });
-  }
-
-  componentWillUnmount() {
-    const context = this.context as UiContext;
-    context.player.removeEventListener(PlayerEventType.LOADED_METADATA, this._onLoadedMetadata);
-    context.player.removeEventListener(PlayerEventType.DURATION_CHANGE, this._onDurationChange);
-    context.player.removeEventListener(PlayerEventType.TIME_UPDATE, this._onTimeUpdate);
-    context.player.removeEventListener(PlayerEventType.PROGRESS, this._onProgress);
-    clearTimeout(this._seekBlockingTimeout);
-    clearTimeout(this._clearIsScrubbingTimout);
-  }
-
-  private _onTimeUpdate = (event: TimeUpdateEvent) => {
-    if (!this.state.ignoreTimeupdate) {
-      this.setState({ sliderTime: event.currentTime });
-    }
-  };
-  private _onLoadedMetadata = (event: LoadedMetadataEvent) => this.setState({ duration: event.duration });
-  private _onDurationChange = (event: DurationChangeEvent) => this.setState({ duration: event.duration });
-  private _onProgress = (event: ProgressEvent) => this.setState({ seekable: event.seekable });
-
-  private _onSlidingStart = (value: number) => {
-    this.setState({ sliderTime: value });
-    this._prepareSeekStart();
-    const player = (this.context as UiContext).player;
-    if (!player.paused) {
-      this.debounceSeek(value);
-      player.pause();
-      this.setState({ pausedDueToScrubbing: true });
-    }
-  };
-
-  private _onValueChange = (value: number) => {
-    this.setState({ sliderTime: value });
-    if (this.state.ignoreTimeupdate) {
-      this.debounceSeek(value);
-    }
-  };
-
-  private _onSlidingComplete = (value: number) => {
-    this.setState({ sliderTime: value });
-    this.debounceSeek(value, true);
-    const player = (this.context as UiContext).player;
-    const isEnded = player.currentTime === player.duration;
-    if (this.state.pausedDueToScrubbing && !isEnded) {
-      player.play();
-      this.setState({ pausedDueToScrubbing: false });
-    }
-    this._finishSeek();
-  };
-
-  private readonly _prepareSeekStart = () => {
-    this.setState({ isSeeking: true, ignoreTimeupdate: true });
-    clearTimeout(this._clearIsScrubbingTimout);
-  };
-
-  private readonly _finishSeek = () => {
-    this.setState({ isSeeking: false });
-    // Wait for timeupdate events to settle after seeking, so the Slider does not jump back and forth.
-    this._clearIsScrubbingTimout = setTimeout(() => {
-      this.setState({ ignoreTimeupdate: false });
-    }, 1000);
-  };
-
-  private debounceSeek = (value: number, force = false) => {
-    // Don't bombard the player with seeks when seeking. Allow only one seek ever X milliseconds:
-    const MAX_SEEK_INTERVAL = 200;
-    if (force || this._seekBlockingTimeout === undefined) {
-      if (force) {
-        clearTimeout(this._seekBlockingTimeout);
-        this._seekBlockingTimeout = undefined;
-      }
-      this._seekBlockingTimeout = setTimeout(() => {
-        this._seekBlockingTimeout = undefined;
-      }, MAX_SEEK_INTERVAL);
-      // Do seek
-      const player = (this.context as UiContext).player;
-      player.currentTime = value;
-    }
-  };
-
-  render() {
-    const { seekable, sliderTime, duration, isSeeking, width } = this.state;
-    const { style } = this.props;
-    const seekableStart = seekable.length > 0 ? seekable[0].start : 0;
-    const seekableEnd = seekable.length > 0 ? seekable[0].end : 0;
-    return (
-      <PlayerContext.Consumer>
-        {(context: UiContext) => (
-          <View
-            style={[StyleSheet.absoluteFill, style]}
-            onLayout={(event: LayoutChangeEvent) => {
-              this.setState({ width: event.nativeEvent.layout.width });
-            }}>
-            {isSeeking && (
-              <SingleThumbnailView seekableStart={seekableStart} seekableEnd={seekableEnd} currentTime={sliderTime} seekBarWidth={width} />
-            )}
-            <Slider
-              disabled={!(duration > 0) && seekable.length > 0}
-              style={[StyleSheet.absoluteFill, style]}
-              minimumValue={seekableStart}
-              maximumValue={seekableEnd}
-              step={1000}
-              onSlidingStart={this._onSlidingStart}
-              onValueChange={this._onValueChange}
-              onSlidingComplete={this._onSlidingComplete}
-              value={sliderTime}
-              focusable={true}
-              minimumTrackTintColor={context.style.colors.seekBarMinimum}
-              maximumTrackTintColor={context.style.colors.seekBarMaximum}
-              thumbTintColor={context.style.colors.seekBarDot}
-            />
-          </View>
-        )}
-      </PlayerContext.Consumer>
-    );
-  }
-}
-
-SeekBar.contextType = PlayerContext;

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

@@ -1,2 +0,0 @@
-export * from './SeekBar';
-export * from './thumbnail/barrel';

package/src/ui/components/seekbar/thumbnail/SingleThumbnailView.tsx

@@ -1,38 +0,0 @@
-import { Dimensions, View } from 'react-native';
-import { filterThumbnailTracks } from 'react-native-theoplayer';
-import { PlayerContext } from '../../util/PlayerContext';
-import { ThumbnailView } from './ThumbnailView';
-import React, { useContext } from 'react';
-
-export interface ThumbnailViewProps {
-  seekableStart: number;
-  seekableEnd: number;
-  currentTime: number;
-  seekBarWidth: number;
-}
-
-export function SingleThumbnailView(props: ThumbnailViewProps) {
-  const player = useContext(PlayerContext).player;
-  const thumbnailTrack = filterThumbnailTracks(player.textTracks);
-  if (!thumbnailTrack) {
-    return <></>;
-  }
-  const window = Dimensions.get('window');
-  const thumbnailSize = 0.35 * Math.min(window.height, window.width);
-
-  const { seekableStart, seekableEnd, currentTime, seekBarWidth } = props;
-  const percentageOffset = (currentTime - seekableStart) / (seekableEnd - seekableStart);
-  const marginHorizontal = 10;
-
-  return (
-    <View
-      style={{
-        position: 'absolute',
-        top: -(thumbnailSize * 0.6),
-        left: Math.max(0, Math.min(seekBarWidth - thumbnailSize - marginHorizontal, percentageOffset * seekBarWidth - 0.5 * thumbnailSize)),
-        marginHorizontal,
-      }}>
-      <ThumbnailView thumbnailTrack={thumbnailTrack} duration={player.duration} time={currentTime} size={thumbnailSize} showTimeLabel={false} />
-    </View>
-  );
-}

package/src/ui/components/seekbar/thumbnail/Thumbnail.ts

@@ -1,72 +0,0 @@
-export function isTileMapThumbnail(thumbnail: Thumbnail): thumbnail is TileMapThumbnail {
-  return thumbnail.tileX !== undefined && thumbnail.tileY !== undefined && thumbnail.tileWidth !== undefined && thumbnail.tileHeight !== undefined;
-}
-
-export function isImageThumbnail(thumbnail: Thumbnail): thumbnail is ImageThumbnail {
-  return !isTileMapThumbnail(thumbnail);
-}
-
-/**
- * Description of a thumbnail, which can be either a full image or part of a tile map.
- */
-export interface Thumbnail {
-  /**
-   * The url of the thumbnail image.
-   */
-  url: string;
-
-  /**
-   * Horizontal offset within the tile map in case the thumbnail is part of tile map.
-   */
-  tileX?: number;
-
-  /**
-   * Vertical offset within the tile map in case the thumbnail is part of tile map.
-   */
-  tileY?: number;
-
-  /**
-   * Width of a tile in case the thumbnail is part of tile map.
-   */
-  tileWidth?: number;
-
-  /**
-   * Height of a tile in case the thumbnail is part of tile map.
-   */
-  tileHeight?: number;
-}
-
-/**
- * Description of a tile-map thumbnail.
- */
-export interface TileMapThumbnail extends Thumbnail {
-  /**
-   * The url of the thumbnail image.
-   */
-  url: string;
-
-  /**
-   * Horizontal offset within the tile map in case the thumbnail is part of tile map.
-   */
-  tileX: number;
-
-  /**
-   * Vertical offset within the tile map in case the thumbnail is part of tile map.
-   */
-  tileY: number;
-
-  /**
-   * Width of a tile in case the thumbnail is part of tile map.
-   */
-  tileWidth: number;
-
-  /**
-   * Height of a tile in case the thumbnail is part of tile map.
-   */
-  tileHeight: number;
-}
-
-/**
- * Description of a tile-map thumbnail.
- */
-export type ImageThumbnail = Thumbnail;