react-native-theoplayer 1.8.2 → 2.0.0

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

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QualitySubMenu = exports.QualitySelectionView = void 0;
+var _reactNativeTheoplayer = require("react-native-theoplayer");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _PlayerContext = require("../util/PlayerContext");
+var _TrackUtils = require("../util/TrackUtils");
+var _MenuView = require("./common/MenuView");
+var _ScrollableMenu = require("./common/ScrollableMenu");
+var _MenuRadioButton = require("./common/MenuRadioButton");
+var _SubMenuWithButton = require("./common/SubMenuWithButton");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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); }
+/**
+ * A button component that opens a playbackRate selection menu for the `react-native-theoplayer` UI.
+ */
+const QualitySubMenu = props => {
+  const {
+    menuStyle
+  } = props;
+  if (_reactNative.Platform.OS === 'ios') {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+  }
+  const createMenu = () => {
+    return /*#__PURE__*/_react.default.createElement(QualitySelectionView, {
+      style: menuStyle
+    });
+  };
+  const player = (0, _react.useContext)(_PlayerContext.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 = (0, _TrackUtils.getVideoQualityLabel)(selectedQuality, false);
+  }
+  return /*#__PURE__*/_react.default.createElement(_SubMenuWithButton.SubMenuWithButton, {
+    menuConstructor: createMenu,
+    label: 'Quality',
+    preview: selectedQualityLabel
+  });
+};
+exports.QualitySubMenu = QualitySubMenu;
+class QualitySelectionView extends _react.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(_reactNativeTheoplayer.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(_reactNativeTheoplayer.PlayerEventType.MEDIA_TRACK_LIST, this.onTrackListChanged);
+  }
+  render() {
+    var _findMediaTrackByUid;
+    const {
+      style
+    } = this.props;
+    const {
+      videoTracks,
+      selectedVideoTrack,
+      targetVideoTrackQuality
+    } = this.state;
+    const availableVideoQualities = ((_findMediaTrackByUid = (0, _reactNativeTheoplayer.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.default.createElement(_MenuView.MenuView, {
+      style: style,
+      menu: /*#__PURE__*/_react.default.createElement(_ScrollableMenu.ScrollableMenu, {
+        title: 'Video quality',
+        items: [undefined, ...availableVideoQualities].map((track, id) => /*#__PURE__*/_react.default.createElement(_MenuRadioButton.MenuRadioButton, {
+          key: id,
+          label: (0, _TrackUtils.getVideoQualityLabel)(track),
+          uid: id,
+          onSelect: this.selectTargetVideoQuality,
+          selected: track === undefined && selectedTarget === undefined || track !== undefined && track.uid === selectedTarget
+        }))
+      })
+    });
+  }
+}
+exports.QualitySelectionView = QualitySelectionView;
+QualitySelectionView.contextType = _PlayerContext.PlayerContext;
+//# sourceMappingURL=QualitySubMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeTheoplayer","require","_react","_interopRequireWildcard","_reactNative","_PlayerContext","_TrackUtils","_MenuView","_ScrollableMenu","_MenuRadioButton","_SubMenuWithButton","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_defineProperty","value","_toPropertyKey","enumerable","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","QualitySubMenu","props","menuStyle","Platform","OS","createElement","Fragment","createMenu","QualitySelectionView","style","player","useContext","PlayerContext","selectedQualityLabel","targetVideoQuality","id","length","selectedTrack","videoTracks","find","track","uid","selectedVideoTrack","selectedQuality","qualities","quality","getVideoQualityLabel","SubMenuWithButton","menuConstructor","label","preview","exports","PureComponent","constructor","context","setState","targetVideoTrackQuality","qualityIndex","state","videoTrack","componentDidMount","addEventListener","PlayerEventType","MEDIA_TRACK_LIST","onTrackListChanged","componentWillUnmount","removeEventListener","render","_findMediaTrackByUid","availableVideoQualities","findMediaTrackByUid","sort","q1","q2","bandwidth","selectedTarget","MenuView","menu","ScrollableMenu","title","items","map","MenuRadioButton","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":";;;;;;AACA,IAAAA,sBAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AACA,IAAAQ,gBAAA,GAAAR,OAAA;AACA,IAAAS,kBAAA,GAAAT,OAAA;AAA+D,SAAAU,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAT,wBAAAa,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAAW,gBAAAjB,GAAA,EAAAW,GAAA,EAAAO,KAAA,IAAAP,GAAA,GAAAQ,cAAA,CAAAR,GAAA,OAAAA,GAAA,IAAAX,GAAA,IAAAQ,MAAA,CAAAC,cAAA,CAAAT,GAAA,EAAAW,GAAA,IAAAO,KAAA,EAAAA,KAAA,EAAAE,UAAA,QAAAC,YAAA,QAAAC,QAAA,oBAAAtB,GAAA,CAAAW,GAAA,IAAAO,KAAA,WAAAlB,GAAA;AAAA,SAAAmB,eAAAI,GAAA,QAAAZ,GAAA,GAAAa,YAAA,CAAAD,GAAA,2BAAAZ,GAAA,gBAAAA,GAAA,GAAAc,MAAA,CAAAd,GAAA;AAAA,SAAAa,aAAAE,KAAA,EAAAC,IAAA,eAAAD,KAAA,iBAAAA,KAAA,kBAAAA,KAAA,MAAAE,IAAA,GAAAF,KAAA,CAAAG,MAAA,CAAAC,WAAA,OAAAF,IAAA,KAAAG,SAAA,QAAAC,GAAA,GAAAJ,IAAA,CAAAd,IAAA,CAAAY,KAAA,EAAAC,IAAA,2BAAAK,GAAA,sBAAAA,GAAA,YAAAC,SAAA,4DAAAN,IAAA,gBAAAF,MAAA,GAAAS,MAAA,EAAAR,KAAA;AAS/D;AACA;AACA;AACO,MAAMS,cAAc,GAAIC,KAA0B,IAAK;EAC5D,MAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAC3B,IAAIE,qBAAQ,CAACC,EAAE,KAAK,KAAK,EAAE;IACzB,oBAAOrD,MAAA,CAAAgB,OAAA,CAAAsC,aAAA,CAAAtD,MAAA,CAAAgB,OAAA,CAAAuC,QAAA,OAAK;EACd;EACA,MAAMC,UAAU,GAAGA,CAAA,KAAM;IACvB,oBAAOxD,MAAA,CAAAgB,OAAA,CAAAsC,aAAA,CAACG,oBAAoB;MAACC,KAAK,EAAEP;IAAU,EAAG;EACnD,CAAC;EACD,MAAMQ,MAAM,GAAG,IAAAC,iBAAU,EAACC,4BAAa,CAAC,CAACF,MAAM;EAE/C,IAAIG,oBAAoB,GAAG,MAAM;EACjC,IAAIH,MAAM,CAACI,kBAAkB,KAAKlB,SAAS,EAAE;IAC3C,IAAImB,EAAsB;IAC1B,IAAI,OAAOL,MAAM,CAACI,kBAAkB,KAAK,QAAQ,EAAE;MACjDC,EAAE,GAAGL,MAAM,CAACI,kBAAkB;IAChC,CAAC,MAAM;MACLC,EAAE,GAAGL,MAAM,CAACI,kBAAkB,CAACE,MAAM,GAAG,CAAC,GAAGN,MAAM,CAACI,kBAAkB,CAAC,CAAC,CAAC,GAAGlB,SAAS;IACtF;IACA,MAAMqB,aAAa,GAAGP,MAAM,CAACQ,WAAW,CAACC,IAAI,CAAEC,KAAK,IAAKA,KAAK,CAACC,GAAG,KAAKX,MAAM,CAACY,kBAAkB,CAAC;IACjG,MAAMC,eAAe,GAAGN,aAAa,KAAKrB,SAAS,GAAGqB,aAAa,CAACO,SAAS,CAACL,IAAI,CAAEM,OAAO,IAAKA,OAAO,CAACJ,GAAG,KAAKN,EAAE,CAAC,GAAGnB,SAAS;IAC/HiB,oBAAoB,GAAG,IAAAa,gCAAoB,EAACH,eAAe,EAAkB,KAAK,CAAC;EACrF;EAEA,oBAAOxE,MAAA,CAAAgB,OAAA,CAAAsC,aAAA,CAAC9C,kBAAA,CAAAoE,iBAAiB;IAACC,eAAe,EAAErB,UAAW;IAACsB,KAAK,EAAE,SAAU;IAACC,OAAO,EAAEjB;EAAqB,EAAG;AAC5G,CAAC;AAACkB,OAAA,CAAA/B,cAAA,GAAAA,cAAA;AAYK,MAAMQ,oBAAoB,SAASwB,oBAAa,CAAuD;EAC5GC,WAAWA,CAAChC,KAAgC,EAAE;IAC5C,KAAK,CAACA,KAAK,CAAC;IAACnB,eAAA,6BAuBc,MAAM;MACjC,MAAM4B,MAAM,GAAI,IAAI,CAACwB,OAAO,CAAexB,MAAM;MACjD,IAAI,CAACyB,QAAQ,CAAC;QACZjB,WAAW,EAAER,MAAM,CAACQ,WAAW;QAC/BI,kBAAkB,EAAEZ,MAAM,CAACY,kBAAkB;QAC7Cc,uBAAuB,EAAE1B,MAAM,CAACI;MAClC,CAAC,CAAC;IACJ,CAAC;IAAAhC,eAAA,mCAEmCuD,YAAgC,IAAK;MACvE,MAAM;QAAEnB,WAAW;QAAEI;MAAmB,CAAC,GAAG,IAAI,CAACgB,KAAK;MACtD,IAAI,CAACpB,WAAW,IAAI,CAACI,kBAAkB,EAAE;QACvC;MACF;MACA,MAAMiB,UAAU,GAAGrB,WAAW,CAACC,IAAI,CAAEC,KAAK,IAAKA,KAAK,CAACC,GAAG,KAAKC,kBAAkB,CAAC;MAChF,MAAME,SAAS,GAAGe,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEf,SAAS;MACvC,IAAI,CAACA,SAAS,EAAE;QACd;MACF;MACA,IAAIH,GAAuB,GAAGzB,SAAS;MACvC,IAAIyC,YAAY,KAAKzC,SAAS,IAAIyC,YAAY,GAAG,CAAC,EAAE;QAClD;QACAhB,GAAG,GAAGG,SAAS,CAACa,YAAY,GAAG,CAAC,CAAC,CAAChB,GAAG;MACvC;MACA,MAAMX,MAAM,GAAI,IAAI,CAACwB,OAAO,CAAexB,MAAM;MACjDA,MAAM,CAACI,kBAAkB,GAAGO,GAAG;MAC/B,IAAI,CAACc,QAAQ,CAAC;QAAEC,uBAAuB,EAAEf;MAAI,CAAC,CAAC;IACjD,CAAC;IAjDC,IAAI,CAACiB,KAAK,GAAG;MACXpB,WAAW,EAAE,EAAE;MACfI,kBAAkB,EAAE1B,SAAS;MAC7BwC,uBAAuB,EAAExC;IAC3B,CAAC;EACH;EAEA4C,iBAAiBA,CAAA,EAAG;IAClB,MAAM9B,MAAM,GAAI,IAAI,CAACwB,OAAO,CAAexB,MAAM;IACjDA,MAAM,CAAC+B,gBAAgB,CAACC,sCAAe,CAACC,gBAAgB,EAAE,IAAI,CAACC,kBAAkB,CAAC;IAClF,IAAI,CAACT,QAAQ,CAAC;MACZjB,WAAW,EAAER,MAAM,CAACQ,WAAW;MAC/BI,kBAAkB,EAAEZ,MAAM,CAACY,kBAAkB;MAC7Cc,uBAAuB,EAAE1B,MAAM,CAACI;IAClC,CAAC,CAAC;EACJ;EAEA+B,oBAAoBA,CAAA,EAAG;IACrB,MAAMnC,MAAM,GAAI,IAAI,CAACwB,OAAO,CAAexB,MAAM;IACjDA,MAAM,CAACoC,mBAAmB,CAACJ,sCAAe,CAACC,gBAAgB,EAAE,IAAI,CAACC,kBAAkB,CAAC;EACvF;EA+BAG,MAAMA,CAAA,EAAG;IAAA,IAAAC,oBAAA;IACP,MAAM;MAAEvC;IAAM,CAAC,GAAG,IAAI,CAACR,KAAK;IAC5B,MAAM;MAAEiB,WAAW;MAAEI,kBAAkB;MAAEc;IAAwB,CAAC,GAAG,IAAI,CAACE,KAAK;IAC/E,MAAMW,uBAAuB,GAAG,EAAAD,oBAAA,OAAAE,0CAAmB,EAAChC,WAAW,EAAEI,kBAAkB,CAAC,cAAA0B,oBAAA,uBAApDA,oBAAA,CAAsDxB,SAAS,KAAI,EAAE;IACrGyB,uBAAuB,CAACE,IAAI,CAAC,CAACC,EAAE,EAAEC,EAAE,KAAKA,EAAE,CAACC,SAAS,GAAGF,EAAE,CAACE,SAAS,CAAC;IAErE,IAAIC,cAAkC;IACtC,IAAInB,uBAAuB,KAAKxC,SAAS,IAAI,OAAOwC,uBAAuB,KAAK,QAAQ,EAAE;MACxFmB,cAAc,GAAGnB,uBAAuB;IAC1C,CAAC,MAAM;MACLmB,cAAc,GAAGnB,uBAAuB,CAACpB,MAAM,GAAG,CAAC,GAAGoB,uBAAuB,CAAC,CAAC,CAAC,GAAGxC,SAAS;IAC9F;IAEA,oBACE7C,MAAA,CAAAgB,OAAA,CAAAsC,aAAA,CAACjD,SAAA,CAAAoG,QAAQ;MACP/C,KAAK,EAAEA,KAAM;MACbgD,IAAI,eACF1G,MAAA,CAAAgB,OAAA,CAAAsC,aAAA,CAAChD,eAAA,CAAAqG,cAAc;QACbC,KAAK,EAAE,eAAgB;QACvBC,KAAK,EAAE,CAAChE,SAAS,EAAE,GAAGqD,uBAAuB,CAAC,CAACY,GAAG,CAAC,CAACzC,KAAK,EAAEL,EAAE,kBAC3DhE,MAAA,CAAAgB,OAAA,CAAAsC,aAAA,CAAC/C,gBAAA,CAAAwG,eAAe;UACdtF,GAAG,EAAEuC,EAAG;UACRc,KAAK,EAAE,IAAAH,gCAAoB,EAACN,KAAK,CAAkB;UACnDC,GAAG,EAAEN,EAAG;UACRgD,QAAQ,EAAE,IAAI,CAACC,wBAAyB;UACxCC,QAAQ,EACL7C,KAAK,KAAKxB,SAAS,IAAI2D,cAAc,KAAK3D,SAAS,IAAMwB,KAAK,KAAKxB,SAAS,IAAIwB,KAAK,CAACC,GAAG,KAAKkC;QAChG,EACJ;MAAE;IAEN,EACD;EAEN;AACF;AAACxB,OAAA,CAAAvB,oBAAA,GAAAA,oBAAA;AAEDA,oBAAoB,CAAC0D,WAAW,GAAGtD,4BAAa"}

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SettingsMenuButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _MenuButton = require("./common/MenuButton");
+var _SettingsSvg = require("../button/svg/SettingsSvg");
+var _MenuView = require("./common/MenuView");
+var _ScrollableMenu = require("./common/ScrollableMenu");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A button component that opens a settings menu containing all children for the `react-native-theoplayer` UI.
+ */
+const SettingsMenuButton = props => {
+  const {
+    children,
+    menuStyle
+  } = props;
+  const createMenu = () => {
+    return /*#__PURE__*/_react.default.createElement(_MenuView.MenuView, {
+      style: menuStyle,
+      menu: /*#__PURE__*/_react.default.createElement(_ScrollableMenu.ScrollableMenu, {
+        title: 'Settings',
+        items: children
+      })
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_MenuButton.MenuButton, {
+    svg: /*#__PURE__*/_react.default.createElement(_SettingsSvg.SettingsSvg, null),
+    menuConstructor: createMenu
+  });
+};
+exports.SettingsMenuButton = SettingsMenuButton;
+//# sourceMappingURL=SettingsMenuButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_MenuButton","_SettingsSvg","_MenuView","_ScrollableMenu","obj","__esModule","default","SettingsMenuButton","props","children","menuStyle","createMenu","createElement","MenuView","style","menu","ScrollableMenu","title","items","MenuButton","svg","SettingsSvg","menuConstructor","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,eAAA,GAAAJ,OAAA;AAAyD,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAUzD;AACA;AACA;AACO,MAAMG,kBAAkB,GAAIC,KAAuD,IAAK;EAC7F,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAGF,KAAK;EACrC,MAAMG,UAAU,GAAGA,CAAA,KAAM;IACvB,oBAAOd,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACV,SAAA,CAAAW,QAAQ;MAACC,KAAK,EAAEJ,SAAU;MAACK,IAAI,eAAElB,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACT,eAAA,CAAAa,cAAc;QAACC,KAAK,EAAE,UAAW;QAACC,KAAK,EAAET;MAAS;IAAI,EAAG;EACrG,CAAC;EAED,oBAAOZ,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACZ,WAAA,CAAAmB,UAAU;IAACC,GAAG,eAAEvB,MAAA,CAAAS,OAAA,CAAAM,aAAA,CAACX,YAAA,CAAAoB,WAAW,OAAI;IAACC,eAAe,EAAEX;EAAW,EAAG;AAC1E,CAAC;AAACY,OAAA,CAAAhB,kBAAA,GAAAA,kBAAA"}

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _barrel = require("./common/barrel");
+Object.keys(_barrel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _barrel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _barrel[key];
+    }
+  });
+});
+var _LanguageMenuButton = require("./LanguageMenuButton");
+Object.keys(_LanguageMenuButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LanguageMenuButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _LanguageMenuButton[key];
+    }
+  });
+});
+var _PlaybackRateSubMenu = require("./PlaybackRateSubMenu");
+Object.keys(_PlaybackRateSubMenu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PlaybackRateSubMenu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PlaybackRateSubMenu[key];
+    }
+  });
+});
+var _QualitySubMenu = require("./QualitySubMenu");
+Object.keys(_QualitySubMenu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _QualitySubMenu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _QualitySubMenu[key];
+    }
+  });
+});
+var _SettingsMenuButton = require("./SettingsMenuButton");
+Object.keys(_SettingsMenuButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SettingsMenuButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SettingsMenuButton[key];
+    }
+  });
+});
+//# sourceMappingURL=barrel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_barrel","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_LanguageMenuButton","_PlaybackRateSubMenu","_QualitySubMenu","_SettingsMenuButton"],"sources":["barrel.ts"],"sourcesContent":["export * from './common/barrel';\nexport * from './LanguageMenuButton';\nexport * from './PlaybackRateSubMenu';\nexport * from './QualitySubMenu';\nexport * from './SettingsMenuButton';\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,mBAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,mBAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,mBAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,mBAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,oBAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,oBAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,oBAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,oBAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,eAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,eAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,eAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,eAAA,CAAAP,GAAA;IAAA;EAAA;AAAA;AACA,IAAAQ,mBAAA,GAAAZ,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAU,mBAAA,EAAAT,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAQ,mBAAA,CAAAR,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAI,mBAAA,CAAAR,GAAA;IAAA;EAAA;AAAA"}

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ActionButton = require("../../button/actionbutton/ActionButton");
+var _PlayerContext = require("../../util/PlayerContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * A menu button that opens a fullscreen menu for in the `react-native-theoplayer` UI.
+ */
+const MenuButton = props => {
+  const {
+    icon,
+    svg,
+    style,
+    menuConstructor
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_PlayerContext.PlayerContext.Consumer, null, context => /*#__PURE__*/_react.default.createElement(_ActionButton.ActionButton, {
+    svg: svg,
+    icon: icon,
+    onPress: () => {
+      if (menuConstructor) {
+        context.ui.openMenu_(menuConstructor);
+      }
+    },
+    style: style,
+    touchable: true
+  }));
+};
+exports.MenuButton = MenuButton;
+//# sourceMappingURL=MenuButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_ActionButton","_PlayerContext","obj","__esModule","default","MenuButton","props","icon","svg","style","menuConstructor","createElement","PlayerContext","Consumer","context","ActionButton","onPress","ui","openMenu_","touchable","exports"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAAoE,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAsBpE;AACA;AACA;AACO,MAAMG,UAAU,GAAIC,KAAsB,IAAK;EACpD,MAAM;IAAEC,IAAI;IAAEC,GAAG;IAAEC,KAAK;IAAEC;EAAgB,CAAC,GAAGJ,KAAK;EAEnD,oBACET,MAAA,CAAAO,OAAA,CAAAO,aAAA,CAACV,cAAA,CAAAW,aAAa,CAACC,QAAQ,QACnBC,OAAkB,iBAClBjB,MAAA,CAAAO,OAAA,CAAAO,aAAA,CAACX,aAAA,CAAAe,YAAY;IACXP,GAAG,EAAEA,GAAI;IACTD,IAAI,EAAEA,IAAK;IACXS,OAAO,EAAEA,CAAA,KAAM;MACb,IAAIN,eAAe,EAAE;QACnBI,OAAO,CAACG,EAAE,CAACC,SAAS,CAACR,eAAe,CAAC;MACvC;IACF,CAAE;IACFD,KAAK,EAAEA,KAAM;IACbU,SAAS,EAAE;EAAK,EAEnB,CACsB;AAE7B,CAAC;AAACC,OAAA,CAAAf,UAAA,GAAAA,UAAA"}

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuRadioButton = exports.DEFAULT_MENU_BUTTON_STYLE = void 0;
+var _reactNative = require("react-native");
+var _react = _interopRequireDefault(require("react"));
+var _PlayerContext = require("../../util/PlayerContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * The default style for the menu button.
+ */
+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.
+ */
+exports.DEFAULT_MENU_BUTTON_STYLE = DEFAULT_MENU_BUTTON_STYLE;
+const MenuRadioButton = props => {
+  const {
+    uid,
+    onSelect,
+    label,
+    selected,
+    style
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => {
+      onSelect(uid);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PlayerContext.PlayerContext.Consumer, null, context => /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [DEFAULT_MENU_BUTTON_STYLE, selected ? {
+      color: context.style.colors.textSelected,
+      backgroundColor: context.style.colors.textSelectedBackground
+    } : {
+      color: context.style.colors.text
+    }, style]
+  }, label)));
+};
+exports.MenuRadioButton = MenuRadioButton;
+//# sourceMappingURL=MenuRadioButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_react","_interopRequireDefault","_PlayerContext","obj","__esModule","default","DEFAULT_MENU_BUTTON_STYLE","fontSize","lineHeight","padding","textAlign","exports","MenuRadioButton","props","uid","onSelect","label","selected","style","createElement","TouchableOpacity","onPress","PlayerContext","Consumer","context","Text","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,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAAoE,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AA0BpE;AACA;AACA;AACO,MAAMG,yBAAoC,GAAG;EAClDC,QAAQ,EAAE,EAAE;EACZC,UAAU,EAAE,EAAE;EACdC,OAAO,EAAE,EAAE;EACXC,SAAS,EAAE;AACb,CAAC;;AAED;AACA;AACA;AAFAC,OAAA,CAAAL,yBAAA,GAAAA,yBAAA;AAGO,MAAMM,eAAe,GAAIC,KAA2B,IAAK;EAC9D,MAAM;IAAEC,GAAG;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGL,KAAK;EACvD,oBACEb,MAAA,CAAAK,OAAA,CAAAc,aAAA,CAACrB,YAAA,CAAAsB,gBAAgB;IACfC,OAAO,EAAEA,CAAA,KAAM;MACbN,QAAQ,CAACD,GAAG,CAAC;IACf;EAAE,gBACFd,MAAA,CAAAK,OAAA,CAAAc,aAAA,CAACjB,cAAA,CAAAoB,aAAa,CAACC,QAAQ,QACnBC,OAAkB,iBAClBxB,MAAA,CAAAK,OAAA,CAAAc,aAAA,CAACrB,YAAA,CAAA2B,IAAI;IACHP,KAAK,EAAE,CACLZ,yBAAyB,EACzBW,QAAQ,GACJ;MAAES,KAAK,EAAEF,OAAO,CAACN,KAAK,CAACS,MAAM,CAACC,YAAY;MAAEC,eAAe,EAAEL,OAAO,CAACN,KAAK,CAACS,MAAM,CAACG;IAAuB,CAAC,GAC1G;MAAEJ,KAAK,EAAEF,OAAO,CAACN,KAAK,CAACS,MAAM,CAACI;IAAK,CAAC,EACxCb,KAAK;EACL,GACDF,KAAK,CAET,CACsB,CACR;AAEvB,CAAC;AAACL,OAAA,CAAAC,eAAA,GAAAA,eAAA"}

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuTitle = exports.DEFAULT_MENU_TITLE_STYLE = void 0;
+var _reactNative = require("react-native");
+var _react = _interopRequireDefault(require("react"));
+var _PlayerContext = require("../../util/PlayerContext");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * The default style for the menu title.
+ */
+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.
+ */
+exports.DEFAULT_MENU_TITLE_STYLE = DEFAULT_MENU_TITLE_STYLE;
+const MenuTitle = props => {
+  const {
+    label,
+    style
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_PlayerContext.PlayerContext.Consumer, null, context => /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [DEFAULT_MENU_TITLE_STYLE, {
+      color: context.style.colors.text
+    }, style]
+  }, label));
+};
+exports.MenuTitle = MenuTitle;
+//# sourceMappingURL=MenuTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_react","_interopRequireDefault","_PlayerContext","obj","__esModule","default","DEFAULT_MENU_TITLE_STYLE","fontSize","lineHeight","padding","textAlign","fontWeight","exports","MenuTitle","props","label","style","createElement","PlayerContext","Consumer","context","Text","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,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAAoE,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAapE;AACA;AACA;AACO,MAAMG,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;AAFAC,OAAA,CAAAN,wBAAA,GAAAA,wBAAA;AAGO,MAAMO,SAAS,GAAIC,KAAqB,IAAK;EAClD,MAAM;IAAEC,KAAK;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAC9B,oBACEd,MAAA,CAAAK,OAAA,CAAAY,aAAA,CAACf,cAAA,CAAAgB,aAAa,CAACC,QAAQ,QACnBC,OAAkB,iBAAKpB,MAAA,CAAAK,OAAA,CAAAY,aAAA,CAACnB,YAAA,CAAAuB,IAAI;IAACL,KAAK,EAAE,CAACV,wBAAwB,EAAE;MAAEgB,KAAK,EAAEF,OAAO,CAACJ,KAAK,CAACO,MAAM,CAACC;IAAK,CAAC,EAAER,KAAK;EAAE,GAAED,KAAK,CAAQ,CACtG;AAE7B,CAAC;AAACH,OAAA,CAAAC,SAAA,GAAAA,SAAA"}

package/lib/commonjs/ui/components/menu/common/MenuView.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuView = exports.DEFAULT_MENU_VIEW_STYLE = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _PlayerContext = require("../../util/PlayerContext");
+var _reactNative = require("react-native");
+var _ControlBar = require("../../controlbar/ControlBar");
+var _UiContainer = require("../../uicontroller/UiContainer");
+var _BackSvg = require("../../button/svg/BackSvg");
+var _ActionButton = require("../../button/actionbutton/ActionButton");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * The default style for the menu view.
+ */
+const DEFAULT_MENU_VIEW_STYLE = {
+  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.
+ */
+exports.DEFAULT_MENU_VIEW_STYLE = DEFAULT_MENU_VIEW_STYLE;
+const MenuView = props => {
+  const {
+    menu,
+    style
+  } = props;
+  const context = (0, _react.useContext)(_PlayerContext.PlayerContext);
+  const onClose = () => {
+    context.ui.closeCurrentMenu_();
+  };
+  return /*#__PURE__*/_react.default.createElement(_PlayerContext.PlayerContext.Consumer, null, context => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: _reactNative.StyleSheet.absoluteFill
+  }, /*#__PURE__*/_react.default.createElement(_ControlBar.ControlBar, {
+    style: _UiContainer.TOP_UI_CONTAINER_STYLE
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: {
+      flexDirection: 'row'
+    },
+    onPress: onClose
+  }, /*#__PURE__*/_react.default.createElement(_ActionButton.ActionButton, {
+    touchable: false,
+    svg: /*#__PURE__*/_react.default.createElement(_BackSvg.BackSvg, null)
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: {
+      color: context.style.colors.text,
+      fontSize: 16,
+      lineHeight: 30
+    }
+  }, "Back"))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flexGrow: 1
+    }
+  })), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: [DEFAULT_MENU_VIEW_STYLE, style]
+  }, menu)));
+};
+exports.MenuView = MenuView;
+//# sourceMappingURL=MenuView.js.map

package/lib/commonjs/ui/components/menu/common/MenuView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_PlayerContext","_reactNative","_ControlBar","_UiContainer","_BackSvg","_ActionButton","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","DEFAULT_MENU_VIEW_STYLE","flex","flexDirection","left","right","top","bottom","paddingVertical","paddingLeft","paddingRight","exports","MenuView","props","menu","style","context","useContext","PlayerContext","onClose","ui","closeCurrentMenu_","createElement","Consumer","View","StyleSheet","absoluteFill","ControlBar","TOP_UI_CONTAINER_STYLE","TouchableOpacity","onPress","ActionButton","touchable","svg","BackSvg","Text","color","colors","text","fontSize","lineHeight","flexGrow"],"sources":["MenuView.tsx"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\nimport { PlayerContext, UiContext } from '../../util/PlayerContext';\nimport { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';\nimport { ControlBar } from '../../controlbar/ControlBar';\nimport { TOP_UI_CONTAINER_STYLE } from '../../uicontroller/UiContainer';\nimport { BackSvg } from '../../button/svg/BackSvg';\nimport { ActionButton } from '../../button/actionbutton/ActionButton';\n\ninterface MenuViewProps {\n  /**\n   * The menu to render inside the menu view.\n   */\n  menu: ReactNode;\n  /**\n   * The style overrides for the menu view.\n   */\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * The default style for the menu view.\n */\nexport const DEFAULT_MENU_VIEW_STYLE: ViewStyle = {\n  flex: 1,\n  flexDirection: 'row',\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  paddingVertical: 20,\n  paddingLeft: 50,\n  paddingRight: 40,\n};\n\n/**\n * A component to render a fullscreen menu with a title and back button for the `react-native-theoplayer` UI.\n */\nexport const MenuView = (props: MenuViewProps) => {\n  const { menu, style } = props;\n  const context = useContext(PlayerContext);\n  const onClose = () => {\n    context.ui.closeCurrentMenu_();\n  };\n  return (\n    <PlayerContext.Consumer>\n      {(context: UiContext) => (\n        <View style={StyleSheet.absoluteFill}>\n          <ControlBar style={TOP_UI_CONTAINER_STYLE}>\n            <View style={{ flexDirection: 'row' }}>\n              <TouchableOpacity style={{ flexDirection: 'row' }} onPress={onClose}>\n                <ActionButton touchable={false} svg={<BackSvg />} />\n                <Text style={{ color: context.style.colors.text, fontSize: 16, lineHeight: 30 }}>Back</Text>\n              </TouchableOpacity>\n            </View>\n            <View style={{ flexGrow: 1 }} />\n          </ControlBar>\n          <View style={[DEFAULT_MENU_VIEW_STYLE, style]}>{menu}</View>\n        </View>\n      )}\n    </PlayerContext.Consumer>\n  );\n};\n"],"mappings":"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"}

package/lib/commonjs/ui/components/menu/common/ScrollableMenu.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollableMenu = exports.DEFAULT_SCROLLABLE_MENU_STYLE = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _MenuTitle = require("./MenuTitle");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * The default style for the scrollable menu.
+ */
+const DEFAULT_SCROLLABLE_MENU_STYLE = {
+  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
+ */
+exports.DEFAULT_SCROLLABLE_MENU_STYLE = DEFAULT_SCROLLABLE_MENU_STYLE;
+const ScrollableMenu = props => {
+  const {
+    title,
+    items
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
+    style: DEFAULT_SCROLLABLE_MENU_STYLE
+  }, /*#__PURE__*/_react.default.createElement(_MenuTitle.MenuTitle, {
+    label: title
+  }), /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: {
+      flexDirection: 'column'
+    }
+  }, items)));
+};
+exports.ScrollableMenu = ScrollableMenu;
+//# sourceMappingURL=ScrollableMenu.js.map

package/lib/commonjs/ui/components/menu/common/ScrollableMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_MenuTitle","obj","__esModule","default","DEFAULT_SCROLLABLE_MENU_STYLE","flex","left","right","top","bottom","paddingRight","exports","ScrollableMenu","props","title","items","createElement","SafeAreaView","style","MenuTitle","label","ScrollView","View","flexDirection"],"sources":["ScrollableMenu.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { SafeAreaView, ScrollView, View, ViewStyle } from 'react-native';\nimport { MenuTitle } from './MenuTitle';\n\ninterface ScrollableMenuProps {\n  /**\n   * The title of the scrollable menu.\n   */\n  title: string;\n  /**\n   * The items to be put in the scrollable menu.\n   */\n  items?: ReactNode;\n}\n\n/**\n * The default style for the scrollable menu.\n */\nexport const DEFAULT_SCROLLABLE_MENU_STYLE: ViewStyle = {\n  flex: 1,\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  paddingRight: 10,\n};\n\n/**\n * A menu component that provides a ScrollView for menu items for the `react-native-theoplayer` UI.\n * @param props\n * @constructor\n */\nexport const ScrollableMenu = (props: ScrollableMenuProps) => {\n  const { title, items } = props;\n  return (\n    <SafeAreaView style={DEFAULT_SCROLLABLE_MENU_STYLE}>\n      <MenuTitle label={title} />\n      <ScrollView>\n        <View style={{ flexDirection: 'column' }}>{items}</View>\n      </ScrollView>\n    </SafeAreaView>\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAwC,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAaxC;AACA;AACA;AACO,MAAMG,6BAAwC,GAAG;EACtDC,IAAI,EAAE,CAAC;EACPC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,GAAG,EAAE,CAAC;EACNC,MAAM,EAAE,CAAC;EACTC,YAAY,EAAE;AAChB,CAAC;;AAED;AACA;AACA;AACA;AACA;AAJAC,OAAA,CAAAP,6BAAA,GAAAA,6BAAA;AAKO,MAAMQ,cAAc,GAAIC,KAA0B,IAAK;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAC9B,oBACEjB,MAAA,CAAAO,OAAA,CAAAa,aAAA,CAACjB,YAAA,CAAAkB,YAAY;IAACC,KAAK,EAAEd;EAA8B,gBACjDR,MAAA,CAAAO,OAAA,CAAAa,aAAA,CAAChB,UAAA,CAAAmB,SAAS;IAACC,KAAK,EAAEN;EAAM,EAAG,eAC3BlB,MAAA,CAAAO,OAAA,CAAAa,aAAA,CAACjB,YAAA,CAAAsB,UAAU,qBACTzB,MAAA,CAAAO,OAAA,CAAAa,aAAA,CAACjB,YAAA,CAAAuB,IAAI;IAACJ,KAAK,EAAE;MAAEK,aAAa,EAAE;IAAS;EAAE,GAAER,KAAK,CAAQ,CAC7C,CACA;AAEnB,CAAC;AAACJ,OAAA,CAAAC,cAAA,GAAAA,cAAA"}