react-native-theoplayer 2.7.0 → 2.9.0

package/src/ui/components/menu/LanguageMenuButton.tsx

@@ -1,192 +0,0 @@
-import React, { PureComponent } from 'react';
-import type { MediaTrack } from 'react-native-theoplayer';
-import { PlayerEventType, TextTrack } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { LanguageSvg } from '../button/svg/LanguageSvg';
-import { ScrollableMenu } from './common/ScrollableMenu';
-import { MenuRadioButton } from './common/MenuRadioButton';
-import { MenuButton } from './common/MenuButton';
-import { filterRenderableTracks, getTrackLabel } from '../util/TrackUtils';
-import { MenuView } from './common/MenuView';
-import type { StyleProp, ViewStyle } from 'react-native';
-
-export interface LanguageMenuButtonState {
-  audioTracks: MediaTrack[];
-  textTracks: TextTrack[];
-}
-
-export interface LanguageMenuButtonProps {
-  /**
-   * The style overrides.
-   */
-  menuStyle?: StyleProp<ViewStyle>;
-}
-
-/**
- * A button component that opens a language selection menu (audio/text) for the `react-native-theoplayer` UI.
- */
-export class LanguageMenuButton extends PureComponent<LanguageMenuButtonProps, LanguageMenuButtonState> {
-  constructor(props: LanguageMenuButtonProps) {
-    super(props);
-    this.state = { audioTracks: [], textTracks: [] };
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
-    player.addEventListener(PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
-    this._updateTrackLists();
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
-    player.removeEventListener(PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
-  }
-
-  private _updateTrackLists = () => {
-    const player = (this.context as UiContext).player;
-    this.setState({
-      audioTracks: player.audioTracks,
-      textTracks: player.textTracks,
-    });
-  };
-
-  render() {
-    const { audioTracks, textTracks } = this.state;
-    const { menuStyle } = this.props;
-
-    const selectableTextTracks = filterRenderableTracks(textTracks);
-
-    if (audioTracks.length < 2 && selectableTextTracks.length === 0) {
-      return <></>;
-    }
-
-    const createMenu = () => {
-      return <LanguageMenuView style={menuStyle} />;
-    };
-
-    return <MenuButton svg={<LanguageSvg />} menuConstructor={createMenu} />;
-  }
-}
-
-export interface LanguageMenuViewState extends LanguageMenuButtonState {
-  selectedAudioTrack: number | undefined;
-  selectedTextTrack: number | undefined;
-}
-
-export interface LanguageMenuViewProps {
-  style?: StyleProp<ViewStyle>;
-}
-
-export class LanguageMenuView extends PureComponent<LanguageMenuViewProps, LanguageMenuViewState> {
-  constructor(props: LanguageMenuViewProps) {
-    super(props);
-    this.state = {
-      audioTracks: [],
-      textTracks: [],
-      selectedAudioTrack: undefined,
-      selectedTextTrack: undefined,
-    };
-  }
-
-  private _updateTrackLists = () => {
-    const player = (this.context as UiContext).player;
-    this.setState({
-      audioTracks: player.audioTracks,
-      textTracks: player.textTracks,
-      selectedAudioTrack: player.selectedAudioTrack,
-      selectedTextTrack: player.selectedTextTrack,
-    });
-  };
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    // The track lists might change while the menu is open, so we need to monitor them.
-    player.addEventListener(PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
-    player.addEventListener(PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
-    this._updateTrackLists();
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
-    player.removeEventListener(PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
-  }
-
-  private onSelectTextTrack = (uid: number | undefined) => {
-    const { textTracks } = this.state;
-    const textTrack = textTracks.find((track) => track.uid === uid);
-    const context = this.context as UiContext;
-    context.player.selectedTextTrack = textTrack?.uid;
-    this.setState({ selectedTextTrack: textTrack?.uid });
-  };
-
-  private selectAudioTrack = (uid: number | undefined) => {
-    const { audioTracks } = this.state;
-    const audioTrack = audioTracks.find((track) => track.uid === uid);
-    if (audioTrack) {
-      const context = this.context as UiContext;
-      context.player.selectedAudioTrack = audioTrack.uid;
-      this.setState({ selectedAudioTrack: audioTrack.uid });
-    }
-  };
-
-  render() {
-    const { style } = this.props;
-    const { audioTracks, textTracks, selectedAudioTrack, selectedTextTrack } = this.state;
-    // The sort is needed because tracks are returned in different order on the native SDKs.
-    const selectableTextTracks = filterRenderableTracks(textTracks).sort((first, second) => first.uid - second.uid);
-    const selectableAudioTracks = audioTracks.sort((first, second) => first.uid - second.uid);
-    return (
-      <MenuView
-        style={style}
-        menu={
-          <>
-            {selectableAudioTracks.length > 1 && (
-              <ScrollableMenu
-                title={'Audio'}
-                items={selectableAudioTracks.map((track, id) => (
-                  <MenuRadioButton
-                    key={id}
-                    label={getTrackLabel(track)}
-                    uid={track.uid}
-                    onSelect={this.selectAudioTrack}
-                    selected={track.uid === selectedAudioTrack}></MenuRadioButton>
-                ))}
-              />
-            )}
-            {selectableTextTracks.length > 0 && (
-              <ScrollableMenu
-                title={'Subtitles'}
-                items={
-                  <>
-                    <MenuRadioButton
-                      key={0}
-                      label={'off'}
-                      uid={undefined}
-                      onSelect={this.onSelectTextTrack}
-                      selected={selectedTextTrack === undefined}
-                    />
-                    {selectableTextTracks.map((track, id) => (
-                      <MenuRadioButton
-                        key={id + 1}
-                        label={getTrackLabel(track)}
-                        uid={track.uid}
-                        onSelect={this.onSelectTextTrack}
-                        selected={track.uid === selectedTextTrack}
-                      />
-                    ))}
-                  </>
-                }
-              />
-            )}
-          </>
-        }
-      />
-    );
-  }
-}
-
-LanguageMenuButton.contextType = PlayerContext;
-LanguageMenuView.contextType = PlayerContext;

package/src/ui/components/menu/PlaybackRateSubMenu.tsx

@@ -1,93 +0,0 @@
-import React, { useContext, useState } from 'react';
-import { PlayerContext } from '../util/PlayerContext';
-import { MenuView } from './common/MenuView';
-import { ScrollableMenu } from './common/ScrollableMenu';
-import { MenuRadioButton } from './common/MenuRadioButton';
-import { SubMenuWithButton } from './common/SubMenuWithButton';
-import type { StyleProp, ViewStyle } from 'react-native';
-
-export interface PlaybackRateValue {
-  /**
-   * The playbackRate value.
-   */
-  readonly value: number;
-  /**
-   * The label of the playbackRate value.
-   */
-  readonly label: string;
-}
-
-/**
- * The default playback rate values for the menu.
- */
-export const DEFAULT_PLAYBACK_RATE_MENU_VALUES: PlaybackRateValue[] = [
-  { value: 0.25, label: '0.25x' },
-  { value: 0.5, label: '0.5x' },
-  { value: 1, label: 'Normal' },
-  { value: 1.25, label: '1.25x' },
-  { value: 1.5, label: '1.5x' },
-  { value: 2, label: '2x' },
-];
-
-interface PlaybackRateSubMenuProps {
-  /**
-   * Overrides for the default playbackRate values.
-   */
-  values?: PlaybackRateValue[];
-  /**
-   * Overrides for the style of the menu.
-   */
-  menuStyle?: StyleProp<ViewStyle>;
-}
-
-/**
- * A button component that opens a playbackRate selection menu for the `react-native-theoplayer` UI.
- */
-export const PlaybackRateSubMenu = (props: PlaybackRateSubMenuProps) => {
-  const { values, menuStyle } = props;
-  const selectedValues: PlaybackRateValue[] = values ?? DEFAULT_PLAYBACK_RATE_MENU_VALUES;
-  const player = useContext(PlayerContext).player;
-
-  const createMenu = () => {
-    return <PlaybackSelectionView values={selectedValues} menuStyle={menuStyle} />;
-  };
-  const preview = selectedValues.find((value) => value.value === player.playbackRate)?.label ?? player.playbackRate.toString() + 'x';
-
-  return <SubMenuWithButton menuConstructor={createMenu} label={'Speed'} preview={preview} />;
-};
-
-interface PlaybackSelectionViewProps {
-  menuStyle?: StyleProp<ViewStyle>;
-  values: PlaybackRateValue[];
-}
-
-export const PlaybackSelectionView = (props: PlaybackSelectionViewProps) => {
-  const { values, menuStyle } = props;
-  const player = useContext(PlayerContext).player;
-  const [selectedPlaybackRate, setSelectedPlaybackRate] = useState(player.playbackRate);
-  const onChangePlaybackRate = (playbackRate: number | undefined) => {
-    if (playbackRate) {
-      player.playbackRate = playbackRate;
-      setSelectedPlaybackRate(playbackRate);
-    }
-  };
-
-  return (
-    <MenuView
-      style={menuStyle}
-      menu={
-        <ScrollableMenu
-          title={'Playback Rate'}
-          items={values.map((playbackRateValue, id) => (
-            <MenuRadioButton
-              key={id}
-              label={playbackRateValue.label}
-              uid={playbackRateValue.value}
-              onSelect={onChangePlaybackRate}
-              selected={selectedPlaybackRate === playbackRateValue.value}></MenuRadioButton>
-          ))}
-        />
-      }
-    />
-  );
-};

package/src/ui/components/menu/QualitySubMenu.tsx

@@ -1,148 +0,0 @@
-import type { VideoQuality } from 'react-native-theoplayer';
-import { findMediaTrackByUid, MediaTrack, PlayerEventType } from 'react-native-theoplayer';
-import React, { PureComponent, useContext } from 'react';
-import { Platform, StyleProp, ViewStyle } from 'react-native';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { getVideoQualityLabel } from '../util/TrackUtils';
-import { MenuView } from './common/MenuView';
-import { ScrollableMenu } from './common/ScrollableMenu';
-import { MenuRadioButton } from './common/MenuRadioButton';
-import { SubMenuWithButton } from './common/SubMenuWithButton';
-
-export interface QualitySubMenuProps {
-  /**
-   * Overrides for the style of the menu.
-   */
-  menuStyle?: StyleProp<ViewStyle>;
-}
-
-/**
- * A button component that opens a playbackRate selection menu for the `react-native-theoplayer` UI.
- */
-export const QualitySubMenu = (props: QualitySubMenuProps) => {
-  const { menuStyle } = props;
-  if (Platform.OS === 'ios') {
-    return <></>;
-  }
-  const createMenu = () => {
-    return <QualitySelectionView style={menuStyle} />;
-  };
-  const player = useContext(PlayerContext).player;
-
-  let selectedQualityLabel = 'auto';
-  if (player.targetVideoQuality !== undefined) {
-    let id: number | undefined;
-    if (typeof player.targetVideoQuality === 'number') {
-      id = player.targetVideoQuality;
-    } else {
-      id = player.targetVideoQuality.length > 0 ? player.targetVideoQuality[0] : undefined;
-    }
-    const selectedTrack = player.videoTracks.find((track) => track.uid === player.selectedVideoTrack);
-    const selectedQuality = selectedTrack !== undefined ? selectedTrack.qualities.find((quality) => quality.uid === id) : undefined;
-    selectedQualityLabel = getVideoQualityLabel(selectedQuality as VideoQuality, false);
-  }
-
-  return <SubMenuWithButton menuConstructor={createMenu} label={'Quality'} preview={selectedQualityLabel} />;
-};
-
-export interface QualitySelectionViewState {
-  videoTracks: MediaTrack[];
-  selectedVideoTrack: number | undefined;
-  targetVideoTrackQuality: number | number[] | undefined;
-}
-
-export interface QualitySelectionViewProps {
-  style?: StyleProp<ViewStyle>;
-}
-
-export class QualitySelectionView extends PureComponent<QualitySelectionViewProps, QualitySelectionViewState> {
-  constructor(props: QualitySelectionViewProps) {
-    super(props);
-    this.state = {
-      videoTracks: [],
-      selectedVideoTrack: undefined,
-      targetVideoTrackQuality: undefined,
-    };
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.MEDIA_TRACK_LIST, this.onTrackListChanged);
-    this.setState({
-      videoTracks: player.videoTracks,
-      selectedVideoTrack: player.selectedVideoTrack,
-      targetVideoTrackQuality: player.targetVideoQuality,
-    });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.MEDIA_TRACK_LIST, this.onTrackListChanged);
-  }
-
-  private onTrackListChanged = () => {
-    const player = (this.context as UiContext).player;
-    this.setState({
-      videoTracks: player.videoTracks,
-      selectedVideoTrack: player.selectedVideoTrack,
-      targetVideoTrackQuality: player.targetVideoQuality,
-    });
-  };
-
-  private selectTargetVideoQuality = (qualityIndex: number | undefined) => {
-    const { videoTracks, selectedVideoTrack } = this.state;
-    if (!videoTracks || !selectedVideoTrack) {
-      return;
-    }
-    const videoTrack = videoTracks.find((track) => track.uid === selectedVideoTrack);
-    const qualities = videoTrack?.qualities;
-    if (!qualities) {
-      return;
-    }
-    let uid: number | undefined = undefined;
-    if (qualityIndex !== undefined && qualityIndex > 0) {
-      // The first quality in the list is "auto". The rest are selectable qualities.
-      uid = qualities[qualityIndex - 1].uid;
-    }
-    const player = (this.context as UiContext).player;
-    player.targetVideoQuality = uid;
-    this.setState({ targetVideoTrackQuality: uid });
-  };
-
-  render() {
-    const { style } = this.props;
-    const { videoTracks, selectedVideoTrack, targetVideoTrackQuality } = this.state;
-    const availableVideoQualities = findMediaTrackByUid(videoTracks, selectedVideoTrack)?.qualities || [];
-    availableVideoQualities.sort((q1, q2) => q2.bandwidth - q1.bandwidth);
-
-    let selectedTarget: number | undefined;
-    if (targetVideoTrackQuality === undefined || typeof targetVideoTrackQuality === 'number') {
-      selectedTarget = targetVideoTrackQuality;
-    } else {
-      selectedTarget = targetVideoTrackQuality.length > 0 ? targetVideoTrackQuality[0] : undefined;
-    }
-
-    return (
-      <MenuView
-        style={style}
-        menu={
-          <ScrollableMenu
-            title={'Video quality'}
-            items={[undefined, ...availableVideoQualities].map((track, id) => (
-              <MenuRadioButton
-                key={id}
-                label={getVideoQualityLabel(track as VideoQuality)}
-                uid={id}
-                onSelect={this.selectTargetVideoQuality}
-                selected={
-                  (track === undefined && selectedTarget === undefined) || (track !== undefined && track.uid === selectedTarget)
-                }></MenuRadioButton>
-            ))}
-          />
-        }
-      />
-    );
-  }
-}
-
-QualitySelectionView.contextType = PlayerContext;

package/src/ui/components/menu/SettingsMenuButton.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { MenuButton } from './common/MenuButton';
-import { SettingsSvg } from '../button/svg/SettingsSvg';
-import { MenuView } from './common/MenuView';
-import { ScrollableMenu } from './common/ScrollableMenu';
-import type { StyleProp, ViewStyle } from 'react-native';
-
-export interface SettingsMenuButtonProps {
-  /**
-   * Overrides for the style of the menu.
-   */
-  menuStyle?: StyleProp<ViewStyle>;
-}
-
-/**
- * A button component that opens a settings menu containing all children for the `react-native-theoplayer` UI.
- */
-export const SettingsMenuButton = (props: React.PropsWithChildren<SettingsMenuButtonProps>) => {
-  const { children, menuStyle } = props;
-  const createMenu = () => {
-    return <MenuView style={menuStyle} menu={<ScrollableMenu title={'Settings'} items={children} />} />;
-  };
-
-  return <MenuButton svg={<SettingsSvg />} menuConstructor={createMenu} />;
-};

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

@@ -1,5 +0,0 @@
-export * from './common/barrel';
-export * from './LanguageMenuButton';
-export * from './PlaybackRateSubMenu';
-export * from './QualitySubMenu';
-export * from './SettingsMenuButton';

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

@@ -1,49 +0,0 @@
-import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
-import React, { ReactNode } from 'react';
-import { ActionButton } from '../../button/actionbutton/ActionButton';
-import { PlayerContext, UiContext } from '../../util/PlayerContext';
-import type { MenuConstructor } from '../../uicontroller/UiControls';
-
-export interface MenuButtonProps {
-  /**
-   * The image that will be used in the button.
-   */
-  icon?: ImageSourcePropType;
-  /**
-   * The SVG that will be used in the button. Takes priority over images.
-   */
-  svg?: ReactNode;
-  /**
-   * The style overrides for the menu button.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * The menu that will be constructed when the button is pressed.
-   */
-  menuConstructor?: MenuConstructor;
-}
-
-/**
- * A menu button that opens a fullscreen menu for in the `react-native-theoplayer` UI.
- */
-export const MenuButton = (props: MenuButtonProps) => {
-  const { icon, svg, style, menuConstructor } = props;
-
-  return (
-    <PlayerContext.Consumer>
-      {(context: UiContext) => (
-        <ActionButton
-          svg={svg}
-          icon={icon}
-          onPress={() => {
-            if (menuConstructor) {
-              context.ui.openMenu_(menuConstructor);
-            }
-          }}
-          style={style}
-          touchable={true}
-        />
-      )}
-    </PlayerContext.Consumer>
-  );
-};

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

@@ -1,65 +0,0 @@
-import { StyleProp, Text, TextStyle, TouchableOpacity } from 'react-native';
-import React from 'react';
-import { PlayerContext, UiContext } from '../../util/PlayerContext';
-
-export interface MenuRadioButtonProps {
-  /**
-   * The label for the button.
-   */
-  label: string;
-  /**
-   * The uid used in the callback when the button is pressed.
-   */
-  uid: number | undefined;
-  /**
-   * Whether the radio button is selected.
-   */
-  selected?: boolean;
-  /**
-   * The callback that is called when the button is pressed.
-   * @param id The uid prop.
-   */
-  onSelect: (id: number | undefined) => void;
-  /**
-   * The style overrides for the radio button.
-   */
-  style?: StyleProp<TextStyle>;
-}
-
-/**
- * The default style for the menu button.
- */
-export const DEFAULT_MENU_BUTTON_STYLE: TextStyle = {
-  fontSize: 16,
-  lineHeight: 24,
-  padding: 10,
-  textAlign: 'center',
-};
-
-/**
- * The default radio button that can be used in menus for the `react-native-theoplayer` UI.
- */
-export const MenuRadioButton = (props: MenuRadioButtonProps) => {
-  const { uid, onSelect, label, selected, style } = props;
-  return (
-    <TouchableOpacity
-      onPress={() => {
-        onSelect(uid);
-      }}>
-      <PlayerContext.Consumer>
-        {(context: UiContext) => (
-          <Text
-            style={[
-              DEFAULT_MENU_BUTTON_STYLE,
-              selected
-                ? { color: context.style.colors.textSelected, backgroundColor: context.style.colors.textSelectedBackground }
-                : { color: context.style.colors.text },
-              style,
-            ]}>
-            {label}
-          </Text>
-        )}
-      </PlayerContext.Consumer>
-    </TouchableOpacity>
-  );
-};

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

@@ -1,37 +0,0 @@
-import { StyleProp, Text, TextStyle } from 'react-native';
-import React from 'react';
-import { PlayerContext, UiContext } from '../../util/PlayerContext';
-
-export interface MenuTitleProps {
-  /**
-   * The label of the menu title component.
-   */
-  label: string;
-  /**
-   * The style overrides.
-   */
-  style?: StyleProp<TextStyle>;
-}
-
-/**
- * The default style for the menu title.
- */
-export const DEFAULT_MENU_TITLE_STYLE: TextStyle = {
-  fontSize: 20,
-  lineHeight: 24,
-  padding: 10,
-  textAlign: 'center',
-  fontWeight: 'bold',
-};
-
-/**
- * The title placed at the top of the fullscreen menu.
- */
-export const MenuTitle = (props: MenuTitleProps) => {
-  const { label, style } = props;
-  return (
-    <PlayerContext.Consumer>
-      {(context: UiContext) => <Text style={[DEFAULT_MENU_TITLE_STYLE, { color: context.style.colors.text }, style]}>{label}</Text>}
-    </PlayerContext.Consumer>
-  );
-};

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

@@ -1,62 +0,0 @@
-import React, { ReactNode, useContext } from 'react';
-import { PlayerContext, UiContext } from '../../util/PlayerContext';
-import { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
-import { ControlBar } from '../../controlbar/ControlBar';
-import { TOP_UI_CONTAINER_STYLE } from '../../uicontroller/UiContainer';
-import { BackSvg } from '../../button/svg/BackSvg';
-import { ActionButton } from '../../button/actionbutton/ActionButton';
-
-interface MenuViewProps {
-  /**
-   * The menu to render inside the menu view.
-   */
-  menu: ReactNode;
-  /**
-   * The style overrides for the menu view.
-   */
-  style?: StyleProp<ViewStyle>;
-}
-
-/**
- * The default style for the menu view.
- */
-export const DEFAULT_MENU_VIEW_STYLE: ViewStyle = {
-  flex: 1,
-  flexDirection: 'row',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  paddingVertical: 20,
-  paddingLeft: 50,
-  paddingRight: 40,
-};
-
-/**
- * A component to render a fullscreen menu with a title and back button for the `react-native-theoplayer` UI.
- */
-export const MenuView = (props: MenuViewProps) => {
-  const { menu, style } = props;
-  const context = useContext(PlayerContext);
-  const onClose = () => {
-    context.ui.closeCurrentMenu_();
-  };
-  return (
-    <PlayerContext.Consumer>
-      {(context: UiContext) => (
-        <View style={StyleSheet.absoluteFill}>
-          <ControlBar style={TOP_UI_CONTAINER_STYLE}>
-            <View style={{ flexDirection: 'row' }}>
-              <TouchableOpacity style={{ flexDirection: 'row' }} onPress={onClose}>
-                <ActionButton touchable={false} svg={<BackSvg />} />
-                <Text style={{ color: context.style.colors.text, fontSize: 16, lineHeight: 30 }}>Back</Text>
-              </TouchableOpacity>
-            </View>
-            <View style={{ flexGrow: 1 }} />
-          </ControlBar>
-          <View style={[DEFAULT_MENU_VIEW_STYLE, style]}>{menu}</View>
-        </View>
-      )}
-    </PlayerContext.Consumer>
-  );
-};