react-native-theoplayer 1.8.2 → 2.0.0

package/lib/module/ui/components/menu/LanguageMenuButton.js

@@ -0,0 +1,165 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { PureComponent } from 'react';
+import { PlayerEventType } from 'react-native-theoplayer';
+import { PlayerContext } 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';
+/**
+ * A button component that opens a language selection menu (audio/text) for the `react-native-theoplayer` UI.
+ */
+export class LanguageMenuButton extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "_updateTrackLists", () => {
+      const player = this.context.player;
+      this.setState({
+        audioTracks: player.audioTracks,
+        textTracks: player.textTracks
+      });
+    });
+    this.state = {
+      audioTracks: [],
+      textTracks: []
+    };
+  }
+  componentDidMount() {
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
+    player.addEventListener(PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
+    this._updateTrackLists();
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
+    player.removeEventListener(PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
+  }
+  render() {
+    const {
+      audioTracks,
+      textTracks
+    } = this.state;
+    const {
+      menuStyle
+    } = this.props;
+    const selectableTextTracks = filterRenderableTracks(textTracks);
+    if (audioTracks.length < 2 && selectableTextTracks.length === 0) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    const createMenu = () => {
+      return /*#__PURE__*/React.createElement(LanguageMenuView, {
+        style: menuStyle
+      });
+    };
+    return /*#__PURE__*/React.createElement(MenuButton, {
+      svg: /*#__PURE__*/React.createElement(LanguageSvg, null),
+      menuConstructor: createMenu
+    });
+  }
+}
+export class LanguageMenuView extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "_updateTrackLists", () => {
+      const player = this.context.player;
+      this.setState({
+        audioTracks: player.audioTracks,
+        textTracks: player.textTracks,
+        selectedAudioTrack: player.selectedAudioTrack,
+        selectedTextTrack: player.selectedTextTrack
+      });
+    });
+    _defineProperty(this, "onSelectTextTrack", uid => {
+      const {
+        textTracks
+      } = this.state;
+      const textTrack = textTracks.find(track => track.uid === uid);
+      const context = this.context;
+      context.player.selectedTextTrack = textTrack === null || textTrack === void 0 ? void 0 : textTrack.uid;
+      this.setState({
+        selectedTextTrack: textTrack === null || textTrack === void 0 ? void 0 : textTrack.uid
+      });
+    });
+    _defineProperty(this, "selectAudioTrack", uid => {
+      const {
+        audioTracks
+      } = this.state;
+      const audioTrack = audioTracks.find(track => track.uid === uid);
+      if (audioTrack) {
+        const context = this.context;
+        context.player.selectedAudioTrack = audioTrack.uid;
+        this.setState({
+          selectedAudioTrack: audioTrack.uid
+        });
+      }
+    });
+    this.state = {
+      audioTracks: [],
+      textTracks: [],
+      selectedAudioTrack: undefined,
+      selectedTextTrack: undefined
+    };
+  }
+  componentDidMount() {
+    const player = this.context.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.player;
+    player.removeEventListener(PlayerEventType.MEDIA_TRACK_LIST, this._updateTrackLists);
+    player.removeEventListener(PlayerEventType.TEXT_TRACK_LIST, this._updateTrackLists);
+  }
+  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 /*#__PURE__*/React.createElement(MenuView, {
+      style: style,
+      menu: /*#__PURE__*/React.createElement(React.Fragment, null, selectableAudioTracks.length > 1 && /*#__PURE__*/React.createElement(ScrollableMenu, {
+        title: 'Audio',
+        items: selectableAudioTracks.map((track, id) => /*#__PURE__*/React.createElement(MenuRadioButton, {
+          key: id,
+          label: getTrackLabel(track),
+          uid: track.uid,
+          onSelect: this.selectAudioTrack,
+          selected: track.uid === selectedAudioTrack
+        }))
+      }), selectableTextTracks.length > 0 && /*#__PURE__*/React.createElement(ScrollableMenu, {
+        title: 'Subtitles',
+        items: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuRadioButton, {
+          key: 0,
+          label: 'off',
+          uid: undefined,
+          onSelect: this.onSelectTextTrack,
+          selected: selectedTextTrack === undefined
+        }), selectableTextTracks.map((track, id) => /*#__PURE__*/React.createElement(MenuRadioButton, {
+          key: id + 1,
+          label: getTrackLabel(track),
+          uid: track.uid,
+          onSelect: this.onSelectTextTrack,
+          selected: track.uid === selectedTextTrack
+        })))
+      }))
+    });
+  }
+}
+LanguageMenuButton.contextType = PlayerContext;
+LanguageMenuView.contextType = PlayerContext;
+//# sourceMappingURL=LanguageMenuButton.js.map

package/lib/module/ui/components/menu/LanguageMenuButton.js.map

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

package/lib/module/ui/components/menu/PlaybackRateSubMenu.js

@@ -0,0 +1,80 @@
+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';
+/**
+ * The default playback rate values for the menu.
+ */
+export const DEFAULT_PLAYBACK_RATE_MENU_VALUES = [{
+  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'
+}];
+/**
+ * A button component that opens a playbackRate selection menu for the `react-native-theoplayer` UI.
+ */
+export const PlaybackRateSubMenu = props => {
+  var _selectedValues$find;
+  const {
+    values,
+    menuStyle
+  } = props;
+  const selectedValues = values ?? DEFAULT_PLAYBACK_RATE_MENU_VALUES;
+  const player = useContext(PlayerContext).player;
+  const createMenu = () => {
+    return /*#__PURE__*/React.createElement(PlaybackSelectionView, {
+      values: selectedValues,
+      menuStyle: menuStyle
+    });
+  };
+  const preview = ((_selectedValues$find = selectedValues.find(value => value.value === player.playbackRate)) === null || _selectedValues$find === void 0 ? void 0 : _selectedValues$find.label) ?? player.playbackRate.toString() + 'x';
+  return /*#__PURE__*/React.createElement(SubMenuWithButton, {
+    menuConstructor: createMenu,
+    label: 'Speed',
+    preview: preview
+  });
+};
+export const PlaybackSelectionView = props => {
+  const {
+    values,
+    menuStyle
+  } = props;
+  const player = useContext(PlayerContext).player;
+  const [selectedPlaybackRate, setSelectedPlaybackRate] = useState(player.playbackRate);
+  const onChangePlaybackRate = playbackRate => {
+    if (playbackRate) {
+      player.playbackRate = playbackRate;
+      setSelectedPlaybackRate(playbackRate);
+    }
+  };
+  return /*#__PURE__*/React.createElement(MenuView, {
+    style: menuStyle,
+    menu: /*#__PURE__*/React.createElement(ScrollableMenu, {
+      title: 'Playback Rate',
+      items: values.map((playbackRateValue, id) => /*#__PURE__*/React.createElement(MenuRadioButton, {
+        key: id,
+        label: playbackRateValue.label,
+        uid: playbackRateValue.value,
+        onSelect: onChangePlaybackRate,
+        selected: selectedPlaybackRate === playbackRateValue.value
+      }))
+    })
+  });
+};
+//# sourceMappingURL=PlaybackRateSubMenu.js.map

package/lib/module/ui/components/menu/PlaybackRateSubMenu.js.map

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

package/lib/module/ui/components/menu/QualitySubMenu.js

@@ -0,0 +1,135 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { findMediaTrackByUid, PlayerEventType } from 'react-native-theoplayer';
+import React, { PureComponent, useContext } from 'react';
+import { Platform } from 'react-native';
+import { PlayerContext } 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';
+/**
+ * A button component that opens a playbackRate selection menu for the `react-native-theoplayer` UI.
+ */
+export const QualitySubMenu = props => {
+  const {
+    menuStyle
+  } = props;
+  if (Platform.OS === 'ios') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  const createMenu = () => {
+    return /*#__PURE__*/React.createElement(QualitySelectionView, {
+      style: menuStyle
+    });
+  };
+  const player = useContext(PlayerContext).player;
+  let selectedQualityLabel = 'auto';
+  if (player.targetVideoQuality !== undefined) {
+    let id;
+    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, false);
+  }
+  return /*#__PURE__*/React.createElement(SubMenuWithButton, {
+    menuConstructor: createMenu,
+    label: 'Quality',
+    preview: selectedQualityLabel
+  });
+};
+export class QualitySelectionView extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onTrackListChanged", () => {
+      const player = this.context.player;
+      this.setState({
+        videoTracks: player.videoTracks,
+        selectedVideoTrack: player.selectedVideoTrack,
+        targetVideoTrackQuality: player.targetVideoQuality
+      });
+    });
+    _defineProperty(this, "selectTargetVideoQuality", qualityIndex => {
+      const {
+        videoTracks,
+        selectedVideoTrack
+      } = this.state;
+      if (!videoTracks || !selectedVideoTrack) {
+        return;
+      }
+      const videoTrack = videoTracks.find(track => track.uid === selectedVideoTrack);
+      const qualities = videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.qualities;
+      if (!qualities) {
+        return;
+      }
+      let uid = 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.player;
+      player.targetVideoQuality = uid;
+      this.setState({
+        targetVideoTrackQuality: uid
+      });
+    });
+    this.state = {
+      videoTracks: [],
+      selectedVideoTrack: undefined,
+      targetVideoTrackQuality: undefined
+    };
+  }
+  componentDidMount() {
+    const player = this.context.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.player;
+    player.removeEventListener(PlayerEventType.MEDIA_TRACK_LIST, this.onTrackListChanged);
+  }
+  render() {
+    var _findMediaTrackByUid;
+    const {
+      style
+    } = this.props;
+    const {
+      videoTracks,
+      selectedVideoTrack,
+      targetVideoTrackQuality
+    } = this.state;
+    const availableVideoQualities = ((_findMediaTrackByUid = findMediaTrackByUid(videoTracks, selectedVideoTrack)) === null || _findMediaTrackByUid === void 0 ? void 0 : _findMediaTrackByUid.qualities) || [];
+    availableVideoQualities.sort((q1, q2) => q2.bandwidth - q1.bandwidth);
+    let selectedTarget;
+    if (targetVideoTrackQuality === undefined || typeof targetVideoTrackQuality === 'number') {
+      selectedTarget = targetVideoTrackQuality;
+    } else {
+      selectedTarget = targetVideoTrackQuality.length > 0 ? targetVideoTrackQuality[0] : undefined;
+    }
+    return /*#__PURE__*/React.createElement(MenuView, {
+      style: style,
+      menu: /*#__PURE__*/React.createElement(ScrollableMenu, {
+        title: 'Video quality',
+        items: [undefined, ...availableVideoQualities].map((track, id) => /*#__PURE__*/React.createElement(MenuRadioButton, {
+          key: id,
+          label: getVideoQualityLabel(track),
+          uid: id,
+          onSelect: this.selectTargetVideoQuality,
+          selected: track === undefined && selectedTarget === undefined || track !== undefined && track.uid === selectedTarget
+        }))
+      })
+    });
+  }
+}
+QualitySelectionView.contextType = PlayerContext;
+//# sourceMappingURL=QualitySubMenu.js.map

package/lib/module/ui/components/menu/QualitySubMenu.js.map

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

package/lib/module/ui/components/menu/SettingsMenuButton.js

@@ -0,0 +1,28 @@
+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';
+/**
+ * A button component that opens a settings menu containing all children for the `react-native-theoplayer` UI.
+ */
+export const SettingsMenuButton = props => {
+  const {
+    children,
+    menuStyle
+  } = props;
+  const createMenu = () => {
+    return /*#__PURE__*/React.createElement(MenuView, {
+      style: menuStyle,
+      menu: /*#__PURE__*/React.createElement(ScrollableMenu, {
+        title: 'Settings',
+        items: children
+      })
+    });
+  };
+  return /*#__PURE__*/React.createElement(MenuButton, {
+    svg: /*#__PURE__*/React.createElement(SettingsSvg, null),
+    menuConstructor: createMenu
+  });
+};
+//# sourceMappingURL=SettingsMenuButton.js.map

package/lib/module/ui/components/menu/SettingsMenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","MenuButton","SettingsSvg","MenuView","ScrollableMenu","SettingsMenuButton","props","children","menuStyle","createMenu","createElement","style","menu","title","items","svg","menuConstructor"],"sources":["SettingsMenuButton.tsx"],"sourcesContent":["import React from 'react';\nimport { MenuButton } from './common/MenuButton';\nimport { SettingsSvg } from '../button/svg/SettingsSvg';\nimport { MenuView } from './common/MenuView';\nimport { ScrollableMenu } from './common/ScrollableMenu';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nexport interface SettingsMenuButtonProps {\n  /**\n   * Overrides for the style of the menu.\n   */\n  menuStyle?: StyleProp<ViewStyle>;\n}\n\n/**\n * A button component that opens a settings menu containing all children for the `react-native-theoplayer` UI.\n */\nexport const SettingsMenuButton = (props: React.PropsWithChildren<SettingsMenuButtonProps>) => {\n  const { children, menuStyle } = props;\n  const createMenu = () => {\n    return <MenuView style={menuStyle} menu={<ScrollableMenu title={'Settings'} items={children} />} />;\n  };\n\n  return <MenuButton svg={<SettingsSvg />} menuConstructor={createMenu} />;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,qBAAqB;AAChD,SAASC,WAAW,QAAQ,2BAA2B;AACvD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,cAAc,QAAQ,yBAAyB;AAUxD;AACA;AACA;AACA,OAAO,MAAMC,kBAAkB,GAAIC,KAAuD,IAAK;EAC7F,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAGF,KAAK;EACrC,MAAMG,UAAU,GAAGA,CAAA,KAAM;IACvB,oBAAOT,KAAA,CAAAU,aAAA,CAACP,QAAQ;MAACQ,KAAK,EAAEH,SAAU;MAACI,IAAI,eAAEZ,KAAA,CAAAU,aAAA,CAACN,cAAc;QAACS,KAAK,EAAE,UAAW;QAACC,KAAK,EAAEP;MAAS;IAAI,EAAG;EACrG,CAAC;EAED,oBAAOP,KAAA,CAAAU,aAAA,CAACT,UAAU;IAACc,GAAG,eAAEf,KAAA,CAAAU,aAAA,CAACR,WAAW,OAAI;IAACc,eAAe,EAAEP;EAAW,EAAG;AAC1E,CAAC"}

package/lib/module/ui/components/menu/barrel.js

@@ -0,0 +1,6 @@
+export * from './common/barrel';
+export * from './LanguageMenuButton';
+export * from './PlaybackRateSubMenu';
+export * from './QualitySubMenu';
+export * from './SettingsMenuButton';
+//# sourceMappingURL=barrel.js.map

package/lib/module/ui/components/menu/barrel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["barrel.ts"],"sourcesContent":["export * from './common/barrel';\nexport * from './LanguageMenuButton';\nexport * from './PlaybackRateSubMenu';\nexport * from './QualitySubMenu';\nexport * from './SettingsMenuButton';\n"],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,sBAAsB;AACpC,cAAc,uBAAuB;AACrC,cAAc,kBAAkB;AAChC,cAAc,sBAAsB"}

package/lib/module/ui/components/menu/common/MenuButton.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ActionButton } from '../../button/actionbutton/ActionButton';
+import { PlayerContext } from '../../util/PlayerContext';
+/**
+ * A menu button that opens a fullscreen menu for in the `react-native-theoplayer` UI.
+ */
+export const MenuButton = props => {
+  const {
+    icon,
+    svg,
+    style,
+    menuConstructor
+  } = props;
+  return /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(ActionButton, {
+    svg: svg,
+    icon: icon,
+    onPress: () => {
+      if (menuConstructor) {
+        context.ui.openMenu_(menuConstructor);
+      }
+    },
+    style: style,
+    touchable: true
+  }));
+};
+//# sourceMappingURL=MenuButton.js.map

package/lib/module/ui/components/menu/common/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ActionButton","PlayerContext","MenuButton","props","icon","svg","style","menuConstructor","createElement","Consumer","context","onPress","ui","openMenu_","touchable"],"sources":["MenuButton.tsx"],"sourcesContent":["import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';\nimport React, { ReactNode } from 'react';\nimport { ActionButton } from '../../button/actionbutton/ActionButton';\nimport { PlayerContext, UiContext } from '../../util/PlayerContext';\nimport type { MenuConstructor } from '../../uicontroller/UiControls';\n\nexport interface MenuButtonProps {\n  /**\n   * The image that will be used in the button.\n   */\n  icon?: ImageSourcePropType;\n  /**\n   * The SVG that will be used in the button. Takes priority over images.\n   */\n  svg?: ReactNode;\n  /**\n   * The style overrides for the menu button.\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * The menu that will be constructed when the button is pressed.\n   */\n  menuConstructor?: MenuConstructor;\n}\n\n/**\n * A menu button that opens a fullscreen menu for in the `react-native-theoplayer` UI.\n */\nexport const MenuButton = (props: MenuButtonProps) => {\n  const { icon, svg, style, menuConstructor } = props;\n\n  return (\n    <PlayerContext.Consumer>\n      {(context: UiContext) => (\n        <ActionButton\n          svg={svg}\n          icon={icon}\n          onPress={() => {\n            if (menuConstructor) {\n              context.ui.openMenu_(menuConstructor);\n            }\n          }}\n          style={style}\n          touchable={true}\n        />\n      )}\n    </PlayerContext.Consumer>\n  );\n};\n"],"mappings":"AACA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAASC,YAAY,QAAQ,wCAAwC;AACrE,SAASC,aAAa,QAAmB,0BAA0B;AAsBnE;AACA;AACA;AACA,OAAO,MAAMC,UAAU,GAAIC,KAAsB,IAAK;EACpD,MAAM;IAAEC,IAAI;IAAEC,GAAG;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAGJ,KAAK;EAEnD,oBACEJ,KAAA,CAAAS,aAAA,CAACP,aAAa,CAACQ,QAAQ,QACnBC,OAAkB,iBAClBX,KAAA,CAAAS,aAAA,CAACR,YAAY;IACXK,GAAG,EAAEA,GAAI;IACTD,IAAI,EAAEA,IAAK;IACXO,OAAO,EAAEA,CAAA,KAAM;MACb,IAAIJ,eAAe,EAAE;QACnBG,OAAO,CAACE,EAAE,CAACC,SAAS,CAACN,eAAe,CAAC;MACvC;IACF,CAAE;IACFD,KAAK,EAAEA,KAAM;IACbQ,SAAS,EAAE;EAAK,EAEnB,CACsB;AAE7B,CAAC"}

package/lib/module/ui/components/menu/common/MenuRadioButton.js

@@ -0,0 +1,38 @@
+import { Text, TouchableOpacity } from 'react-native';
+import React from 'react';
+import { PlayerContext } from '../../util/PlayerContext';
+/**
+ * The default style for the menu button.
+ */
+export const DEFAULT_MENU_BUTTON_STYLE = {
+  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 => {
+  const {
+    uid,
+    onSelect,
+    label,
+    selected,
+    style
+  } = props;
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => {
+      onSelect(uid);
+    }
+  }, /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(Text, {
+    style: [DEFAULT_MENU_BUTTON_STYLE, selected ? {
+      color: context.style.colors.textSelected,
+      backgroundColor: context.style.colors.textSelectedBackground
+    } : {
+      color: context.style.colors.text
+    }, style]
+  }, label)));
+};
+//# sourceMappingURL=MenuRadioButton.js.map

package/lib/module/ui/components/menu/common/MenuRadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","TouchableOpacity","React","PlayerContext","DEFAULT_MENU_BUTTON_STYLE","fontSize","lineHeight","padding","textAlign","MenuRadioButton","props","uid","onSelect","label","selected","style","createElement","onPress","Consumer","context","color","colors","textSelected","backgroundColor","textSelectedBackground","text"],"sources":["MenuRadioButton.tsx"],"sourcesContent":["import { StyleProp, Text, TextStyle, TouchableOpacity } from 'react-native';\nimport React from 'react';\nimport { PlayerContext, UiContext } from '../../util/PlayerContext';\n\nexport interface MenuRadioButtonProps {\n  /**\n   * The label for the button.\n   */\n  label: string;\n  /**\n   * The uid used in the callback when the button is pressed.\n   */\n  uid: number | undefined;\n  /**\n   * Whether the radio button is selected.\n   */\n  selected?: boolean;\n  /**\n   * The callback that is called when the button is pressed.\n   * @param id The uid prop.\n   */\n  onSelect: (id: number | undefined) => void;\n  /**\n   * The style overrides for the radio button.\n   */\n  style?: StyleProp<TextStyle>;\n}\n\n/**\n * The default style for the menu button.\n */\nexport const DEFAULT_MENU_BUTTON_STYLE: TextStyle = {\n  fontSize: 16,\n  lineHeight: 24,\n  padding: 10,\n  textAlign: 'center',\n};\n\n/**\n * The default radio button that can be used in menus for the `react-native-theoplayer` UI.\n */\nexport const MenuRadioButton = (props: MenuRadioButtonProps) => {\n  const { uid, onSelect, label, selected, style } = props;\n  return (\n    <TouchableOpacity\n      onPress={() => {\n        onSelect(uid);\n      }}>\n      <PlayerContext.Consumer>\n        {(context: UiContext) => (\n          <Text\n            style={[\n              DEFAULT_MENU_BUTTON_STYLE,\n              selected\n                ? { color: context.style.colors.textSelected, backgroundColor: context.style.colors.textSelectedBackground }\n                : { color: context.style.colors.text },\n              style,\n            ]}>\n            {label}\n          </Text>\n        )}\n      </PlayerContext.Consumer>\n    </TouchableOpacity>\n  );\n};\n"],"mappings":"AAAA,SAAoBA,IAAI,EAAaC,gBAAgB,QAAQ,cAAc;AAC3E,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAmB,0BAA0B;AA0BnE;AACA;AACA;AACA,OAAO,MAAMC,yBAAoC,GAAG;EAClDC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE;AACb,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EAC9D,MAAM;IAAEC,GAAG;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGL,KAAK;EACvD,oBACER,KAAA,CAAAc,aAAA,CAACf,gBAAgB;IACfgB,OAAO,EAAEA,CAAA,KAAM;MACbL,QAAQ,CAACD,GAAG,CAAC;IACf;EAAE,gBACFT,KAAA,CAAAc,aAAA,CAACb,aAAa,CAACe,QAAQ,QACnBC,OAAkB,iBAClBjB,KAAA,CAAAc,aAAA,CAAChB,IAAI;IACHe,KAAK,EAAE,CACLX,yBAAyB,EACzBU,QAAQ,GACJ;MAAEM,KAAK,EAAED,OAAO,CAACJ,KAAK,CAACM,MAAM,CAACC,YAAY;MAAEC,eAAe,EAAEJ,OAAO,CAACJ,KAAK,CAACM,MAAM,CAACG;IAAuB,CAAC,GAC1G;MAAEJ,KAAK,EAAED,OAAO,CAACJ,KAAK,CAACM,MAAM,CAACI;IAAK,CAAC,EACxCV,KAAK;EACL,GACDF,KAAK,CAET,CACsB,CACR;AAEvB,CAAC"}

package/lib/module/ui/components/menu/common/MenuTitle.js

@@ -0,0 +1,29 @@
+import { Text } from 'react-native';
+import React from 'react';
+import { PlayerContext } from '../../util/PlayerContext';
+/**
+ * The default style for the menu title.
+ */
+export const DEFAULT_MENU_TITLE_STYLE = {
+  fontSize: 20,
+  lineHeight: 24,
+  padding: 10,
+  textAlign: 'center',
+  fontWeight: 'bold'
+};
+
+/**
+ * The title placed at the top of the fullscreen menu.
+ */
+export const MenuTitle = props => {
+  const {
+    label,
+    style
+  } = props;
+  return /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(Text, {
+    style: [DEFAULT_MENU_TITLE_STYLE, {
+      color: context.style.colors.text
+    }, style]
+  }, label));
+};
+//# sourceMappingURL=MenuTitle.js.map

package/lib/module/ui/components/menu/common/MenuTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","React","PlayerContext","DEFAULT_MENU_TITLE_STYLE","fontSize","lineHeight","padding","textAlign","fontWeight","MenuTitle","props","label","style","createElement","Consumer","context","color","colors","text"],"sources":["MenuTitle.tsx"],"sourcesContent":["import { StyleProp, Text, TextStyle } from 'react-native';\nimport React from 'react';\nimport { PlayerContext, UiContext } from '../../util/PlayerContext';\n\nexport interface MenuTitleProps {\n  /**\n   * The label of the menu title component.\n   */\n  label: string;\n  /**\n   * The style overrides.\n   */\n  style?: StyleProp<TextStyle>;\n}\n\n/**\n * The default style for the menu title.\n */\nexport const DEFAULT_MENU_TITLE_STYLE: TextStyle = {\n  fontSize: 20,\n  lineHeight: 24,\n  padding: 10,\n  textAlign: 'center',\n  fontWeight: 'bold',\n};\n\n/**\n * The title placed at the top of the fullscreen menu.\n */\nexport const MenuTitle = (props: MenuTitleProps) => {\n  const { label, style } = props;\n  return (\n    <PlayerContext.Consumer>\n      {(context: UiContext) => <Text style={[DEFAULT_MENU_TITLE_STYLE, { color: context.style.colors.text }, style]}>{label}</Text>}\n    </PlayerContext.Consumer>\n  );\n};\n"],"mappings":"AAAA,SAAoBA,IAAI,QAAmB,cAAc;AACzD,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAmB,0BAA0B;AAanE;AACA;AACA;AACA,OAAO,MAAMC,wBAAmC,GAAG;EACjDC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE,QAAQ;EACnBC,UAAU,EAAE;AACd,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAIC,KAAqB,IAAK;EAClD,MAAM;IAAEC,KAAK;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAC9B,oBACET,KAAA,CAAAY,aAAA,CAACX,aAAa,CAACY,QAAQ,QACnBC,OAAkB,iBAAKd,KAAA,CAAAY,aAAA,CAACb,IAAI;IAACY,KAAK,EAAE,CAACT,wBAAwB,EAAE;MAAEa,KAAK,EAAED,OAAO,CAACH,KAAK,CAACK,MAAM,CAACC;IAAK,CAAC,EAAEN,KAAK;EAAE,GAAED,KAAK,CAAQ,CACtG;AAE7B,CAAC"}