react-native-theoplayer 2.8.0 → 2.9.0

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>
-  );
-};

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;