react-native-theoplayer 1.8.2 → 2.0.0

package/lib/module/ui/components/activityindicator/CenteredDelayedActivityIndicator.js

@@ -0,0 +1,90 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 { DelayedActivityIndicator } from './DelayedActivityIndicator';
+import { View } from 'react-native';
+import { PlayerEventType } from 'react-native-theoplayer';
+import { PlayerContext } from '../util/PlayerContext';
+import { FULLSCREEN_CENTER_STYLE } from '../uicontroller/UiContainer';
+/**
+ * The default spinner for the `react-native-theoplayer` UI. It renders a ActivityIndicator when the player's playback is stalling due
+ * readystate changes.
+ */
+export class CenteredDelayedActivityIndicator extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onReadyStateChange", event => {
+      this.maybeShowLoadingIndicator(event.readyState < 3);
+    });
+    _defineProperty(this, "onError", event => {
+      const {
+        error
+      } = event;
+      this.setState({
+        error
+      });
+      this.maybeShowLoadingIndicator(false);
+    });
+    _defineProperty(this, "onPlaying", () => {
+      this.maybeShowLoadingIndicator(false);
+    });
+    _defineProperty(this, "onSourceChange", () => {
+      this.setState({
+        error: undefined
+      });
+      this.maybeShowLoadingIndicator(false);
+    });
+    _defineProperty(this, "onLoadStart", () => {
+      this.setState({
+        error: undefined
+      });
+      this.maybeShowLoadingIndicator(true);
+    });
+    this.state = CenteredDelayedActivityIndicator.initialState;
+  }
+  componentDidMount() {
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.READYSTATE_CHANGE, this.onReadyStateChange);
+    player.addEventListener(PlayerEventType.ERROR, this.onError);
+    player.addEventListener(PlayerEventType.PLAYING, this.onPlaying);
+    player.addEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
+    player.addEventListener(PlayerEventType.LOAD_START, this.onLoadStart);
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(PlayerEventType.READYSTATE_CHANGE, this.onReadyStateChange);
+    player.removeEventListener(PlayerEventType.ERROR, this.onError);
+    player.removeEventListener(PlayerEventType.PLAYING, this.onPlaying);
+    player.removeEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
+    player.removeEventListener(PlayerEventType.LOAD_START, this.onLoadStart);
+  }
+  maybeShowLoadingIndicator(showLoading) {
+    const {
+      error
+    } = this.state;
+    // do not change state to buffering in case of an error or if the player is paused
+    const player = this.context.player;
+    this.setState({
+      showLoadingIndicator: showLoading && !error && !player.paused
+    });
+  }
+  render() {
+    const {
+      showLoadingIndicator
+    } = this.state;
+    const player = this.context.player;
+    return showLoadingIndicator && !player.paused && /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(View, {
+      style: FULLSCREEN_CENTER_STYLE
+    }, /*#__PURE__*/React.createElement(DelayedActivityIndicator, _extends({
+      color: context.style.colors.icon
+    }, this.props))));
+  }
+}
+_defineProperty(CenteredDelayedActivityIndicator, "initialState", {
+  showLoadingIndicator: false,
+  error: undefined
+});
+CenteredDelayedActivityIndicator.contextType = PlayerContext;
+//# sourceMappingURL=CenteredDelayedActivityIndicator.js.map

package/lib/module/ui/components/activityindicator/CenteredDelayedActivityIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PureComponent","DelayedActivityIndicator","View","PlayerEventType","PlayerContext","FULLSCREEN_CENTER_STYLE","CenteredDelayedActivityIndicator","constructor","props","_defineProperty","event","maybeShowLoadingIndicator","readyState","error","setState","undefined","state","initialState","componentDidMount","player","context","addEventListener","READYSTATE_CHANGE","onReadyStateChange","ERROR","onError","PLAYING","onPlaying","SOURCE_CHANGE","onSourceChange","LOAD_START","onLoadStart","componentWillUnmount","removeEventListener","showLoading","showLoadingIndicator","paused","render","createElement","Consumer","style","_extends","color","colors","icon","contextType"],"sources":["CenteredDelayedActivityIndicator.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport type { DelayedActivityIndicatorProps } from './DelayedActivityIndicator';\nimport { DelayedActivityIndicator } from './DelayedActivityIndicator';\nimport { View } from 'react-native';\nimport { ErrorEvent, PlayerError, PlayerEventType, ReadyStateChangeEvent } from 'react-native-theoplayer';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { FULLSCREEN_CENTER_STYLE } from '../uicontroller/UiContainer';\n\ninterface CenteredDelayedActivityIndicatorState {\n  showLoadingIndicator: boolean;\n  error: PlayerError | undefined;\n}\n\n/**\n * The default spinner for the `react-native-theoplayer` UI. It renders a ActivityIndicator when the player's playback is stalling due\n * readystate changes.\n */\nexport class CenteredDelayedActivityIndicator extends PureComponent<DelayedActivityIndicatorProps, CenteredDelayedActivityIndicatorState> {\n  private static initialState: CenteredDelayedActivityIndicatorState = {\n    showLoadingIndicator: false,\n    error: undefined,\n  };\n\n  constructor(props: DelayedActivityIndicatorProps) {\n    super(props);\n    this.state = CenteredDelayedActivityIndicator.initialState;\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.READYSTATE_CHANGE, this.onReadyStateChange);\n    player.addEventListener(PlayerEventType.ERROR, this.onError);\n    player.addEventListener(PlayerEventType.PLAYING, this.onPlaying);\n    player.addEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);\n    player.addEventListener(PlayerEventType.LOAD_START, this.onLoadStart);\n  }\n\n  componentWillUnmount() {\n    const player = (this.context as UiContext).player;\n    player.removeEventListener(PlayerEventType.READYSTATE_CHANGE, this.onReadyStateChange);\n    player.removeEventListener(PlayerEventType.ERROR, this.onError);\n    player.removeEventListener(PlayerEventType.PLAYING, this.onPlaying);\n    player.removeEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);\n    player.removeEventListener(PlayerEventType.LOAD_START, this.onLoadStart);\n  }\n\n  private onReadyStateChange = (event: ReadyStateChangeEvent) => {\n    this.maybeShowLoadingIndicator(event.readyState < 3);\n  };\n\n  private onError = (event: ErrorEvent) => {\n    const { error } = event;\n    this.setState({ error });\n    this.maybeShowLoadingIndicator(false);\n  };\n\n  private onPlaying = () => {\n    this.maybeShowLoadingIndicator(false);\n  };\n\n  private onSourceChange = () => {\n    this.setState({ error: undefined });\n    this.maybeShowLoadingIndicator(false);\n  };\n\n  private onLoadStart = () => {\n    this.setState({ error: undefined });\n    this.maybeShowLoadingIndicator(true);\n  };\n\n  private maybeShowLoadingIndicator(showLoading: boolean) {\n    const { error } = this.state;\n    // do not change state to buffering in case of an error or if the player is paused\n    const player = (this.context as UiContext).player;\n    this.setState({ showLoadingIndicator: showLoading && !error && !player.paused });\n  }\n\n  render() {\n    const { showLoadingIndicator } = this.state;\n    const player = (this.context as UiContext).player;\n    return (\n      showLoadingIndicator &&\n      !player.paused && (\n        <PlayerContext.Consumer>\n          {(context: UiContext) => (\n            <View style={FULLSCREEN_CENTER_STYLE}>\n              <DelayedActivityIndicator color={context.style.colors.icon} {...this.props} />\n            </View>\n          )}\n        </PlayerContext.Consumer>\n      )\n    );\n  }\n}\n\nCenteredDelayedActivityIndicator.contextType = PlayerContext;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAE5C,SAASC,wBAAwB,QAAQ,4BAA4B;AACrE,SAASC,IAAI,QAAQ,cAAc;AACnC,SAAkCC,eAAe,QAA+B,yBAAyB;AACzG,SAASC,aAAa,QAAmB,uBAAuB;AAChE,SAASC,uBAAuB,QAAQ,6BAA6B;AAOrE;AACA;AACA;AACA;AACA,OAAO,MAAMC,gCAAgC,SAASN,aAAa,CAAuE;EAMxIO,WAAWA,CAACC,KAAoC,EAAE;IAChD,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,6BAsBeC,KAA4B,IAAK;MAC7D,IAAI,CAACC,yBAAyB,CAACD,KAAK,CAACE,UAAU,GAAG,CAAC,CAAC;IACtD,CAAC;IAAAH,eAAA,kBAEkBC,KAAiB,IAAK;MACvC,MAAM;QAAEG;MAAM,CAAC,GAAGH,KAAK;MACvB,IAAI,CAACI,QAAQ,CAAC;QAAED;MAAM,CAAC,CAAC;MACxB,IAAI,CAACF,yBAAyB,CAAC,KAAK,CAAC;IACvC,CAAC;IAAAF,eAAA,oBAEmB,MAAM;MACxB,IAAI,CAACE,yBAAyB,CAAC,KAAK,CAAC;IACvC,CAAC;IAAAF,eAAA,yBAEwB,MAAM;MAC7B,IAAI,CAACK,QAAQ,CAAC;QAAED,KAAK,EAAEE;MAAU,CAAC,CAAC;MACnC,IAAI,CAACJ,yBAAyB,CAAC,KAAK,CAAC;IACvC,CAAC;IAAAF,eAAA,sBAEqB,MAAM;MAC1B,IAAI,CAACK,QAAQ,CAAC;QAAED,KAAK,EAAEE;MAAU,CAAC,CAAC;MACnC,IAAI,CAACJ,yBAAyB,CAAC,IAAI,CAAC;IACtC,CAAC;IA3CC,IAAI,CAACK,KAAK,GAAGV,gCAAgC,CAACW,YAAY;EAC5D;EAEAC,iBAAiBA,CAAA,EAAG;IAClB,MAAMC,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACE,gBAAgB,CAAClB,eAAe,CAACmB,iBAAiB,EAAE,IAAI,CAACC,kBAAkB,CAAC;IACnFJ,MAAM,CAACE,gBAAgB,CAAClB,eAAe,CAACqB,KAAK,EAAE,IAAI,CAACC,OAAO,CAAC;IAC5DN,MAAM,CAACE,gBAAgB,CAAClB,eAAe,CAACuB,OAAO,EAAE,IAAI,CAACC,SAAS,CAAC;IAChER,MAAM,CAACE,gBAAgB,CAAClB,eAAe,CAACyB,aAAa,EAAE,IAAI,CAACC,cAAc,CAAC;IAC3EV,MAAM,CAACE,gBAAgB,CAAClB,eAAe,CAAC2B,UAAU,EAAE,IAAI,CAACC,WAAW,CAAC;EACvE;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,MAAMb,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACc,mBAAmB,CAAC9B,eAAe,CAACmB,iBAAiB,EAAE,IAAI,CAACC,kBAAkB,CAAC;IACtFJ,MAAM,CAACc,mBAAmB,CAAC9B,eAAe,CAACqB,KAAK,EAAE,IAAI,CAACC,OAAO,CAAC;IAC/DN,MAAM,CAACc,mBAAmB,CAAC9B,eAAe,CAACuB,OAAO,EAAE,IAAI,CAACC,SAAS,CAAC;IACnER,MAAM,CAACc,mBAAmB,CAAC9B,eAAe,CAACyB,aAAa,EAAE,IAAI,CAACC,cAAc,CAAC;IAC9EV,MAAM,CAACc,mBAAmB,CAAC9B,eAAe,CAAC2B,UAAU,EAAE,IAAI,CAACC,WAAW,CAAC;EAC1E;EA0BQpB,yBAAyBA,CAACuB,WAAoB,EAAE;IACtD,MAAM;MAAErB;IAAM,CAAC,GAAG,IAAI,CAACG,KAAK;IAC5B;IACA,MAAMG,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjD,IAAI,CAACL,QAAQ,CAAC;MAAEqB,oBAAoB,EAAED,WAAW,IAAI,CAACrB,KAAK,IAAI,CAACM,MAAM,CAACiB;IAAO,CAAC,CAAC;EAClF;EAEAC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEF;IAAqB,CAAC,GAAG,IAAI,CAACnB,KAAK;IAC3C,MAAMG,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjD,OACEgB,oBAAoB,IACpB,CAAChB,MAAM,CAACiB,MAAM,iBACZrC,KAAA,CAAAuC,aAAA,CAAClC,aAAa,CAACmC,QAAQ,QACnBnB,OAAkB,iBAClBrB,KAAA,CAAAuC,aAAA,CAACpC,IAAI;MAACsC,KAAK,EAAEnC;IAAwB,gBACnCN,KAAA,CAAAuC,aAAA,CAACrC,wBAAwB,EAAAwC,QAAA;MAACC,KAAK,EAAEtB,OAAO,CAACoB,KAAK,CAACG,MAAM,CAACC;IAAK,GAAK,IAAI,CAACpC,KAAK,EAAI,CAEjF,CAEJ;EAEL;AACF;AAACC,eAAA,CA5EYH,gCAAgC,kBAC0B;EACnE6B,oBAAoB,EAAE,KAAK;EAC3BtB,KAAK,EAAEE;AACT,CAAC;AA0EHT,gCAAgC,CAACuC,WAAW,GAAGzC,aAAa"}

package/lib/module/ui/components/activityindicator/DelayedActivityIndicator.js

@@ -0,0 +1,26 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import { ActivityIndicator } from 'react-native';
+import React, { useEffect, useState } from 'react';
+const DEFAULT_DELAY = 200;
+
+/**
+ * The DelayedActivityIndicator renders a native ActivityIndicator after a certain delay.
+ */
+export const DelayedActivityIndicator = props => {
+  const [showing, setShowing] = useState(false);
+  useEffect(() => {
+    const {
+      delay
+    } = props;
+    const timer = setTimeout(() => {
+      setShowing(true);
+    }, delay || DEFAULT_DELAY);
+    return () => clearTimeout(timer);
+  });
+  return /*#__PURE__*/React.createElement(ActivityIndicator, _extends({
+    style: {
+      opacity: showing ? 1.0 : 0.0
+    }
+  }, props));
+};
+//# sourceMappingURL=DelayedActivityIndicator.js.map

package/lib/module/ui/components/activityindicator/DelayedActivityIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ActivityIndicator","React","useEffect","useState","DEFAULT_DELAY","DelayedActivityIndicator","props","showing","setShowing","delay","timer","setTimeout","clearTimeout","createElement","_extends","style","opacity"],"sources":["DelayedActivityIndicator.tsx"],"sourcesContent":["import { ActivityIndicator, ActivityIndicatorProps } from 'react-native';\nimport React, { useEffect, useState } from 'react';\n\nexport interface DelayedActivityIndicatorProps extends ActivityIndicatorProps {\n  delay?: number;\n}\n\nconst DEFAULT_DELAY = 200;\n\n/**\n * The DelayedActivityIndicator renders a native ActivityIndicator after a certain delay.\n */\nexport const DelayedActivityIndicator = (props: DelayedActivityIndicatorProps) => {\n  const [showing, setShowing] = useState(false);\n\n  useEffect(() => {\n    const { delay } = props;\n    const timer = setTimeout(() => {\n      setShowing(true);\n    }, delay || DEFAULT_DELAY);\n    return () => clearTimeout(timer);\n  });\n\n  return (\n    <ActivityIndicator\n      style={{\n        opacity: showing ? 1.0 : 0.0,\n      }}\n      {...props}\n    />\n  );\n};\n"],"mappings":";AAAA,SAASA,iBAAiB,QAAgC,cAAc;AACxE,OAAOC,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAMlD,MAAMC,aAAa,GAAG,GAAG;;AAEzB;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAIC,KAAoC,IAAK;EAChF,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGL,QAAQ,CAAC,KAAK,CAAC;EAE7CD,SAAS,CAAC,MAAM;IACd,MAAM;MAAEO;IAAM,CAAC,GAAGH,KAAK;IACvB,MAAMI,KAAK,GAAGC,UAAU,CAAC,MAAM;MAC7BH,UAAU,CAAC,IAAI,CAAC;IAClB,CAAC,EAAEC,KAAK,IAAIL,aAAa,CAAC;IAC1B,OAAO,MAAMQ,YAAY,CAACF,KAAK,CAAC;EAClC,CAAC,CAAC;EAEF,oBACET,KAAA,CAAAY,aAAA,CAACb,iBAAiB,EAAAc,QAAA;IAChBC,KAAK,EAAE;MACLC,OAAO,EAAET,OAAO,GAAG,GAAG,GAAG;IAC3B;EAAE,GACED,KAAK,EACT;AAEN,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './CenteredDelayedActivityIndicator';
+export * from './DelayedActivityIndicator';
+//# sourceMappingURL=barrel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["barrel.ts"],"sourcesContent":["export * from './CenteredDelayedActivityIndicator';\nexport * from './DelayedActivityIndicator';\n"],"mappings":"AAAA,cAAc,oCAAoC;AAClD,cAAc,4BAA4B"}

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

@@ -0,0 +1,10 @@
+export * from './activityindicator/barrel';
+export * from './button/barrel';
+export * from './controlbar/barrel';
+export * from './menu/barrel';
+export * from './message/barrel';
+export * from './seekbar/barrel';
+export * from './timelabel/barrel';
+export * from './uicontroller/barrel';
+export * from './util/barrel';
+//# sourceMappingURL=barrel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["barrel.ts"],"sourcesContent":["export * from './activityindicator/barrel';\nexport * from './button/barrel';\nexport * from './controlbar/barrel';\nexport * from './menu/barrel';\nexport * from './message/barrel';\nexport * from './seekbar/barrel';\nexport * from './timelabel/barrel';\nexport * from './uicontroller/barrel';\nexport * from './util/barrel';\n"],"mappings":"AAAA,cAAc,4BAA4B;AAC1C,cAAc,iBAAiB;AAC/B,cAAc,qBAAqB;AACnC,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,oBAAoB;AAClC,cAAc,uBAAuB;AACrC,cAAc,eAAe"}

package/lib/module/ui/components/button/AirplayButton.js

@@ -0,0 +1,72 @@
+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 { Platform } from 'react-native';
+import { PlayerContext } from '../util/PlayerContext';
+import { isConnected } from './ChromecastButton';
+import { ActionButton } from './actionbutton/ActionButton';
+import { AirplaySvg } from './svg/AirplaySvg';
+import { CastEventType, CastState, PlayerEventType } from './../../../api/barrel';
+/**
+ * The default button to enable Airplay for the `react-native-theoplayer` UI.
+ */
+export class AirplayButton extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onCastStateChangeEvent", event => {
+      if (event.subType != CastEventType.AIRPLAY_STATE_CHANGE) {
+        return;
+      }
+      this.setState({
+        castState: event.state
+      });
+    });
+    _defineProperty(this, "onUIAirplayToggled", () => {
+      var _player$cast$airplay;
+      const player = this.context.player;
+      if (((_player$cast$airplay = player.cast.airplay) === null || _player$cast$airplay === void 0 ? void 0 : _player$cast$airplay.state) !== CastState.unavailable) {
+        var _player$cast$airplay2;
+        if (isConnected((_player$cast$airplay2 = player.cast.airplay) === null || _player$cast$airplay2 === void 0 ? void 0 : _player$cast$airplay2.state)) {
+          var _player$cast$airplay3;
+          (_player$cast$airplay3 = player.cast.airplay) === null || _player$cast$airplay3 === void 0 ? void 0 : _player$cast$airplay3.stop();
+        } else {
+          var _player$cast$airplay4;
+          (_player$cast$airplay4 = player.cast.airplay) === null || _player$cast$airplay4 === void 0 ? void 0 : _player$cast$airplay4.start();
+        }
+      }
+    });
+    this.state = AirplayButton.initialState;
+  }
+  componentDidMount() {
+    var _player$cast$airplay5;
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
+    this.setState({
+      castState: ((_player$cast$airplay5 = player.cast.airplay) === null || _player$cast$airplay5 === void 0 ? void 0 : _player$cast$airplay5.state) ?? CastState.unavailable
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
+  }
+  render() {
+    const {
+      castState
+    } = this.state;
+    if (castState === CastState.unavailable || Platform.isTV) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(ActionButton, {
+      svg: /*#__PURE__*/React.createElement(AirplaySvg, null),
+      touchable: true,
+      onPress: this.onUIAirplayToggled,
+      highlighted: isConnected(castState)
+    });
+  }
+}
+_defineProperty(AirplayButton, "initialState", {
+  castState: CastState.unavailable
+});
+AirplayButton.contextType = PlayerContext;
+//# sourceMappingURL=AirplayButton.js.map

package/lib/module/ui/components/button/AirplayButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PureComponent","Platform","PlayerContext","isConnected","ActionButton","AirplaySvg","CastEventType","CastState","PlayerEventType","AirplayButton","constructor","props","_defineProperty","event","subType","AIRPLAY_STATE_CHANGE","setState","castState","state","_player$cast$airplay","player","context","cast","airplay","unavailable","_player$cast$airplay2","_player$cast$airplay3","stop","_player$cast$airplay4","start","initialState","componentDidMount","_player$cast$airplay5","addEventListener","CAST_EVENT","onCastStateChangeEvent","componentWillUnmount","removeEventListener","render","isTV","createElement","Fragment","svg","touchable","onPress","onUIAirplayToggled","highlighted","contextType"],"sources":["AirplayButton.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { Platform } from 'react-native';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { isConnected } from './ChromecastButton';\nimport { ActionButton } from './actionbutton/ActionButton';\nimport { AirplaySvg } from './svg/AirplaySvg';\nimport { CastEvent, CastEventType, CastState, PlayerEventType } from './../../../api/barrel';\n\ninterface CastButtonState {\n  castState: CastState;\n}\n\n/**\n * The default button to enable Airplay for the `react-native-theoplayer` UI.\n */\nexport class AirplayButton extends PureComponent<unknown, CastButtonState> {\n  private static initialState: CastButtonState = {\n    castState: CastState.unavailable,\n  };\n\n  constructor(props: unknown) {\n    super(props);\n    this.state = AirplayButton.initialState;\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);\n    this.setState({ castState: player.cast.airplay?.state ?? CastState.unavailable });\n  }\n\n  componentWillUnmount() {\n    const player = (this.context as UiContext).player;\n    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);\n  }\n\n  private onCastStateChangeEvent = (event: CastEvent) => {\n    if (event.subType != CastEventType.AIRPLAY_STATE_CHANGE) {\n      return;\n    }\n    this.setState({ castState: event.state });\n  };\n\n  private onUIAirplayToggled = () => {\n    const player = (this.context as UiContext).player;\n    if (player.cast.airplay?.state !== CastState.unavailable) {\n      if (isConnected(player.cast.airplay?.state)) {\n        player.cast.airplay?.stop();\n      } else {\n        player.cast.airplay?.start();\n      }\n    }\n  };\n\n  render() {\n    const { castState } = this.state;\n    if (castState === CastState.unavailable || Platform.isTV) {\n      return <></>;\n    }\n    return <ActionButton svg={<AirplaySvg />} touchable={true} onPress={this.onUIAirplayToggled} highlighted={isConnected(castState)} />;\n  }\n}\n\nAirplayButton.contextType = PlayerContext;\n"],"mappings":"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"}

package/lib/module/ui/components/button/ChromecastButton.js

@@ -0,0 +1,56 @@
+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 { CastButton } from 'react-native-google-cast';
+import { CastEventType, PlayerEventType } from 'react-native-theoplayer';
+import { PlayerContext } from '../util/PlayerContext';
+import { DEFAULT_ACTION_BUTTON_STYLE } from './actionbutton/ActionButton';
+export function isConnected(state) {
+  return state === 'connecting' || state === 'connected';
+}
+
+/**
+ * The native button to enable Chromecast for the `react-native-theoplayer` UI.
+ * This component uses the button from `react-native-google-cast` and is not supported on web.
+ */
+export class ChromecastButton extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onCastStateChangeEvent", event => {
+      if (event.subType != CastEventType.CHROMECAST_STATE_CHANGE) {
+        return;
+      }
+      this.setState({
+        connected: isConnected(event.state)
+      });
+    });
+    this.state = ChromecastButton.initialState;
+  }
+  componentDidMount() {
+    var _player$cast;
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
+    this.setState({
+      connected: (_player$cast = player.cast) === null || _player$cast === void 0 ? void 0 : _player$cast.casting
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
+  }
+  render() {
+    const {
+      connected
+    } = this.state;
+    return /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(CastButton, {
+      style: DEFAULT_ACTION_BUTTON_STYLE,
+      tintColor: connected ? context.style.colors.iconSelected : context.style.colors.icon
+    }));
+  }
+}
+_defineProperty(ChromecastButton, "initialState", {
+  connected: false
+});
+ChromecastButton.contextType = PlayerContext;
+//# sourceMappingURL=ChromecastButton.js.map

package/lib/module/ui/components/button/ChromecastButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PureComponent","CastButton","CastEventType","PlayerEventType","PlayerContext","DEFAULT_ACTION_BUTTON_STYLE","isConnected","state","ChromecastButton","constructor","props","_defineProperty","event","subType","CHROMECAST_STATE_CHANGE","setState","connected","initialState","componentDidMount","_player$cast","player","context","addEventListener","CAST_EVENT","onCastStateChangeEvent","cast","casting","componentWillUnmount","removeEventListener","render","createElement","Consumer","style","tintColor","colors","iconSelected","icon","contextType"],"sources":["ChromecastButton.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { CastButton } from 'react-native-google-cast';\nimport type { CastEvent } from 'react-native-theoplayer';\nimport { CastEventType, CastState, PlayerEventType } from 'react-native-theoplayer';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { DEFAULT_ACTION_BUTTON_STYLE } from './actionbutton/ActionButton';\n\ninterface CastButtonState {\n  connected: boolean;\n}\n\nexport function isConnected(state: CastState | undefined): boolean {\n  return state === 'connecting' || state === 'connected';\n}\n\n/**\n * The native button to enable Chromecast for the `react-native-theoplayer` UI.\n * This component uses the button from `react-native-google-cast` and is not supported on web.\n */\nexport class ChromecastButton extends PureComponent<unknown, CastButtonState> {\n  private static initialState: CastButtonState = {\n    connected: false,\n  };\n\n  constructor(props: unknown) {\n    super(props);\n    this.state = ChromecastButton.initialState;\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);\n    this.setState({ connected: player.cast?.casting });\n  }\n\n  componentWillUnmount() {\n    const player = (this.context as UiContext).player;\n    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);\n  }\n\n  private onCastStateChangeEvent = (event: CastEvent) => {\n    if (event.subType != CastEventType.CHROMECAST_STATE_CHANGE) {\n      return;\n    }\n    this.setState({ connected: isConnected(event.state) });\n  };\n\n  render() {\n    const { connected } = this.state;\n    return (\n      <PlayerContext.Consumer>\n        {(context: UiContext) => (\n          <CastButton style={DEFAULT_ACTION_BUTTON_STYLE} tintColor={connected ? context.style.colors.iconSelected : context.style.colors.icon} />\n        )}\n      </PlayerContext.Consumer>\n    );\n  }\n}\n\nChromecastButton.contextType = PlayerContext;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,aAAa,EAAaC,eAAe,QAAQ,yBAAyB;AACnF,SAASC,aAAa,QAAmB,uBAAuB;AAChE,SAASC,2BAA2B,QAAQ,6BAA6B;AAMzE,OAAO,SAASC,WAAWA,CAACC,KAA4B,EAAW;EACjE,OAAOA,KAAK,KAAK,YAAY,IAAIA,KAAK,KAAK,WAAW;AACxD;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,SAASR,aAAa,CAA2B;EAK5ES,WAAWA,CAACC,KAAc,EAAE;IAC1B,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,iCAemBC,KAAgB,IAAK;MACrD,IAAIA,KAAK,CAACC,OAAO,IAAIX,aAAa,CAACY,uBAAuB,EAAE;QAC1D;MACF;MACA,IAAI,CAACC,QAAQ,CAAC;QAAEC,SAAS,EAAEV,WAAW,CAACM,KAAK,CAACL,KAAK;MAAE,CAAC,CAAC;IACxD,CAAC;IAnBC,IAAI,CAACA,KAAK,GAAGC,gBAAgB,CAACS,YAAY;EAC5C;EAEAC,iBAAiBA,CAAA,EAAG;IAAA,IAAAC,YAAA;IAClB,MAAMC,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACE,gBAAgB,CAACnB,eAAe,CAACoB,UAAU,EAAE,IAAI,CAACC,sBAAsB,CAAC;IAChF,IAAI,CAACT,QAAQ,CAAC;MAAEC,SAAS,GAAAG,YAAA,GAAEC,MAAM,CAACK,IAAI,cAAAN,YAAA,uBAAXA,YAAA,CAAaO;IAAQ,CAAC,CAAC;EACpD;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,MAAMP,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACQ,mBAAmB,CAACzB,eAAe,CAACoB,UAAU,EAAE,IAAI,CAACC,sBAAsB,CAAC;EACrF;EASAK,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEb;IAAU,CAAC,GAAG,IAAI,CAACT,KAAK;IAChC,oBACER,KAAA,CAAA+B,aAAA,CAAC1B,aAAa,CAAC2B,QAAQ,QACnBV,OAAkB,iBAClBtB,KAAA,CAAA+B,aAAA,CAAC7B,UAAU;MAAC+B,KAAK,EAAE3B,2BAA4B;MAAC4B,SAAS,EAAEjB,SAAS,GAAGK,OAAO,CAACW,KAAK,CAACE,MAAM,CAACC,YAAY,GAAGd,OAAO,CAACW,KAAK,CAACE,MAAM,CAACE;IAAK,EACtI,CACsB;EAE7B;AACF;AAACzB,eAAA,CAtCYH,gBAAgB,kBACoB;EAC7CQ,SAAS,EAAE;AACb,CAAC;AAqCHR,gBAAgB,CAAC6B,WAAW,GAAGjC,aAAa"}

package/lib/module/ui/components/button/ChromecastButton.web.js

@@ -0,0 +1,72 @@
+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 { CastEventType, CastState, PlayerEventType } from './../../../api/barrel';
+import React, { PureComponent } from 'react';
+import { PlayerContext } from '../util/PlayerContext';
+import { ChromecastSvg } from './svg/ChromecastSvg';
+import { Platform } from 'react-native';
+import { ActionButton } from 'react-native-theoplayer';
+export function isConnected(state) {
+  return state === 'connecting' || state === 'connected';
+}
+
+/**
+ * The button to enable Chromecast for web for the `react-native-theoplayer` UI
+ */
+export class ChromecastButton extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onCastStateChangeEvent", event => {
+      if (event.subType != CastEventType.CHROMECAST_STATE_CHANGE) {
+        return;
+      }
+      this.setState({
+        castState: event.state
+      });
+    });
+    _defineProperty(this, "onPress", () => {
+      const player = this.context.player;
+      if (isConnected(this.state.castState)) {
+        var _player$cast$chromeca;
+        (_player$cast$chromeca = player.cast.chromecast) === null || _player$cast$chromeca === void 0 ? void 0 : _player$cast$chromeca.stop();
+      } else {
+        var _player$cast$chromeca2;
+        (_player$cast$chromeca2 = player.cast.chromecast) === null || _player$cast$chromeca2 === void 0 ? void 0 : _player$cast$chromeca2.start();
+      }
+    });
+    this.state = ChromecastButton.initialState;
+  }
+  componentDidMount() {
+    var _player$cast$chromeca3;
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
+    this.setState({
+      castState: ((_player$cast$chromeca3 = player.cast.chromecast) === null || _player$cast$chromeca3 === void 0 ? void 0 : _player$cast$chromeca3.state) ?? CastState.unavailable
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);
+  }
+  render() {
+    const {
+      castState
+    } = this.state;
+    // TODO: state is reported as unavailable by Android bridge when it is available.
+    if (Platform.OS === 'web' && castState === CastState.unavailable) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(ActionButton, {
+      svg: /*#__PURE__*/React.createElement(ChromecastSvg, null),
+      touchable: true,
+      onPress: this.onPress,
+      highlighted: isConnected(castState)
+    });
+  }
+}
+_defineProperty(ChromecastButton, "initialState", {
+  castState: CastState.unavailable
+});
+ChromecastButton.contextType = PlayerContext;
+//# sourceMappingURL=ChromecastButton.web.js.map

package/lib/module/ui/components/button/ChromecastButton.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["CastEventType","CastState","PlayerEventType","React","PureComponent","PlayerContext","ChromecastSvg","Platform","ActionButton","isConnected","state","ChromecastButton","constructor","props","_defineProperty","event","subType","CHROMECAST_STATE_CHANGE","setState","castState","player","context","_player$cast$chromeca","cast","chromecast","stop","_player$cast$chromeca2","start","initialState","componentDidMount","_player$cast$chromeca3","addEventListener","CAST_EVENT","onCastStateChangeEvent","unavailable","componentWillUnmount","removeEventListener","render","OS","createElement","Fragment","svg","touchable","onPress","highlighted","contextType"],"sources":["ChromecastButton.web.tsx"],"sourcesContent":["import { CastEvent, CastEventType, CastState, PlayerEventType } from './../../../api/barrel';\nimport React, { PureComponent } from 'react';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { ChromecastSvg } from './svg/ChromecastSvg';\nimport { Platform } from 'react-native';\nimport { ActionButton } from 'react-native-theoplayer';\n\ninterface CastButtonState {\n  castState: CastState;\n}\n\nexport function isConnected(state: CastState | undefined): boolean {\n  return state === 'connecting' || state === 'connected';\n}\n\n/**\n * The button to enable Chromecast for web for the `react-native-theoplayer` UI\n */\nexport class ChromecastButton extends PureComponent<unknown, CastButtonState> {\n  private static initialState: CastButtonState = {\n    castState: CastState.unavailable,\n  };\n\n  constructor(props: unknown) {\n    super(props);\n    this.state = ChromecastButton.initialState;\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);\n    this.setState({ castState: player.cast.chromecast?.state ?? CastState.unavailable });\n  }\n\n  componentWillUnmount() {\n    const player = (this.context as UiContext).player;\n    player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastStateChangeEvent);\n  }\n\n  private onCastStateChangeEvent = (event: CastEvent) => {\n    if (event.subType != CastEventType.CHROMECAST_STATE_CHANGE) {\n      return;\n    }\n    this.setState({ castState: event.state });\n  };\n\n  private onPress = () => {\n    const player = (this.context as UiContext).player;\n    if (isConnected(this.state.castState)) {\n      player.cast.chromecast?.stop();\n    } else {\n      player.cast.chromecast?.start();\n    }\n  };\n\n  render() {\n    const { castState } = this.state;\n    // TODO: state is reported as unavailable by Android bridge when it is available.\n    if (Platform.OS === 'web' && castState === CastState.unavailable) {\n      return <></>;\n    }\n    return <ActionButton svg={<ChromecastSvg />} touchable={true} onPress={this.onPress} highlighted={isConnected(castState)} />;\n  }\n}\n\nChromecastButton.contextType = PlayerContext;\n"],"mappings":";;;AAAA,SAAoBA,aAAa,EAAEC,SAAS,EAAEC,eAAe,QAAQ,uBAAuB;AAC5F,OAAOC,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,SAASC,aAAa,QAAmB,uBAAuB;AAChE,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAASC,YAAY,QAAQ,yBAAyB;AAMtD,OAAO,SAASC,WAAWA,CAACC,KAA4B,EAAW;EACjE,OAAOA,KAAK,KAAK,YAAY,IAAIA,KAAK,KAAK,WAAW;AACxD;;AAEA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,SAASP,aAAa,CAA2B;EAK5EQ,WAAWA,CAACC,KAAc,EAAE;IAC1B,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,iCAemBC,KAAgB,IAAK;MACrD,IAAIA,KAAK,CAACC,OAAO,IAAIhB,aAAa,CAACiB,uBAAuB,EAAE;QAC1D;MACF;MACA,IAAI,CAACC,QAAQ,CAAC;QAAEC,SAAS,EAAEJ,KAAK,CAACL;MAAM,CAAC,CAAC;IAC3C,CAAC;IAAAI,eAAA,kBAEiB,MAAM;MACtB,MAAMM,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;MACjD,IAAIX,WAAW,CAAC,IAAI,CAACC,KAAK,CAACS,SAAS,CAAC,EAAE;QAAA,IAAAG,qBAAA;QACrC,CAAAA,qBAAA,GAAAF,MAAM,CAACG,IAAI,CAACC,UAAU,cAAAF,qBAAA,uBAAtBA,qBAAA,CAAwBG,IAAI,EAAE;MAChC,CAAC,MAAM;QAAA,IAAAC,sBAAA;QACL,CAAAA,sBAAA,GAAAN,MAAM,CAACG,IAAI,CAACC,UAAU,cAAAE,sBAAA,uBAAtBA,sBAAA,CAAwBC,KAAK,EAAE;MACjC;IACF,CAAC;IA5BC,IAAI,CAACjB,KAAK,GAAGC,gBAAgB,CAACiB,YAAY;EAC5C;EAEAC,iBAAiBA,CAAA,EAAG;IAAA,IAAAC,sBAAA;IAClB,MAAMV,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACW,gBAAgB,CAAC7B,eAAe,CAAC8B,UAAU,EAAE,IAAI,CAACC,sBAAsB,CAAC;IAChF,IAAI,CAACf,QAAQ,CAAC;MAAEC,SAAS,EAAE,EAAAW,sBAAA,GAAAV,MAAM,CAACG,IAAI,CAACC,UAAU,cAAAM,sBAAA,uBAAtBA,sBAAA,CAAwBpB,KAAK,KAAIT,SAAS,CAACiC;IAAY,CAAC,CAAC;EACtF;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,MAAMf,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACgB,mBAAmB,CAAClC,eAAe,CAAC8B,UAAU,EAAE,IAAI,CAACC,sBAAsB,CAAC;EACrF;EAkBAI,MAAMA,CAAA,EAAG;IACP,MAAM;MAAElB;IAAU,CAAC,GAAG,IAAI,CAACT,KAAK;IAChC;IACA,IAAIH,QAAQ,CAAC+B,EAAE,KAAK,KAAK,IAAInB,SAAS,KAAKlB,SAAS,CAACiC,WAAW,EAAE;MAChE,oBAAO/B,KAAA,CAAAoC,aAAA,CAAApC,KAAA,CAAAqC,QAAA,OAAK;IACd;IACA,oBAAOrC,KAAA,CAAAoC,aAAA,CAAC/B,YAAY;MAACiC,GAAG,eAAEtC,KAAA,CAAAoC,aAAA,CAACjC,aAAa,OAAI;MAACoC,SAAS,EAAE,IAAK;MAACC,OAAO,EAAE,IAAI,CAACA,OAAQ;MAACC,WAAW,EAAEnC,WAAW,CAACU,SAAS;IAAE,EAAG;EAC9H;AACF;AAACL,eAAA,CA7CYH,gBAAgB,kBACoB;EAC7CQ,SAAS,EAAElB,SAAS,CAACiC;AACvB,CAAC;AA4CHvB,gBAAgB,CAACkC,WAAW,GAAGxC,aAAa"}

package/lib/module/ui/components/button/FullscreenButton.js

@@ -0,0 +1,63 @@
+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, PresentationMode } from 'react-native-theoplayer';
+import { Platform } from 'react-native';
+import { ActionButton } from './actionbutton/ActionButton';
+import { PlayerContext } from '../util/PlayerContext';
+import { FullscreenExitSvg } from './svg/FullscreenExitSvg';
+import { FullscreenEnterSvg } from './svg/FullscreenEnterSvg';
+/**
+ * The button to enable/disable fullscreen for the `react-native-theoplayer` UI.
+ */
+export class FullscreenButton extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onPresentationModeChange", event => {
+      this.setState({
+        presentationMode: event.presentationMode
+      });
+    });
+    _defineProperty(this, "toggleFullScreen", () => {
+      const player = this.context.player;
+      switch (player.presentationMode) {
+        case 'picture-in-picture':
+        case 'inline':
+          player.presentationMode = PresentationMode.fullscreen;
+          break;
+        case 'fullscreen':
+          player.presentationMode = PresentationMode.inline;
+          break;
+      }
+    });
+    this.state = {
+      presentationMode: PresentationMode.inline
+    };
+  }
+  componentDidMount() {
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+    this.setState({
+      presentationMode: player.presentationMode
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+  }
+  render() {
+    const {
+      presentationMode
+    } = this.state;
+    if (Platform.isTV) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(ActionButton, {
+      svg: presentationMode === 'fullscreen' ? /*#__PURE__*/React.createElement(FullscreenExitSvg, null) : /*#__PURE__*/React.createElement(FullscreenEnterSvg, null),
+      onPress: this.toggleFullScreen
+    });
+  }
+}
+FullscreenButton.contextType = PlayerContext;
+//# sourceMappingURL=FullscreenButton.js.map

package/lib/module/ui/components/button/FullscreenButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PureComponent","PlayerEventType","PresentationMode","Platform","ActionButton","PlayerContext","FullscreenExitSvg","FullscreenEnterSvg","FullscreenButton","constructor","props","_defineProperty","event","setState","presentationMode","player","context","fullscreen","inline","state","componentDidMount","addEventListener","PRESENTATIONMODE_CHANGE","onPresentationModeChange","componentWillUnmount","removeEventListener","render","isTV","createElement","Fragment","svg","onPress","toggleFullScreen","contextType"],"sources":["FullscreenButton.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport type { PresentationModeChangeEvent } from 'react-native-theoplayer';\nimport { PlayerEventType, PresentationMode } from 'react-native-theoplayer';\nimport { Platform } from 'react-native';\nimport { ActionButton } from './actionbutton/ActionButton';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { FullscreenExitSvg } from './svg/FullscreenExitSvg';\nimport { FullscreenEnterSvg } from './svg/FullscreenEnterSvg';\n\ninterface FullscreenButtonState {\n  presentationMode: PresentationMode;\n}\n\n/**\n * The button to enable/disable fullscreen for the `react-native-theoplayer` UI.\n */\nexport class FullscreenButton extends PureComponent<unknown, FullscreenButtonState> {\n  constructor(props: unknown) {\n    super(props);\n    this.state = { presentationMode: PresentationMode.inline };\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);\n    this.setState({ presentationMode: player.presentationMode });\n  }\n\n  componentWillUnmount() {\n    const player = (this.context as UiContext).player;\n    player.removeEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);\n  }\n\n  private readonly onPresentationModeChange = (event: PresentationModeChangeEvent) => {\n    this.setState({ presentationMode: event.presentationMode });\n  };\n\n  private toggleFullScreen = () => {\n    const player = (this.context as UiContext).player;\n    switch (player.presentationMode) {\n      case 'picture-in-picture':\n      case 'inline':\n        player.presentationMode = PresentationMode.fullscreen;\n        break;\n      case 'fullscreen':\n        player.presentationMode = PresentationMode.inline;\n        break;\n    }\n  };\n\n  render() {\n    const { presentationMode } = this.state;\n    if (Platform.isTV) {\n      return <></>;\n    }\n    return <ActionButton svg={presentationMode === 'fullscreen' ? <FullscreenExitSvg /> : <FullscreenEnterSvg />} onPress={this.toggleFullScreen} />;\n  }\n}\n\nFullscreenButton.contextType = PlayerContext;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAE5C,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,yBAAyB;AAC3E,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,aAAa,QAAmB,uBAAuB;AAChE,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,kBAAkB,QAAQ,0BAA0B;AAM7D;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,SAASR,aAAa,CAAiC;EAClFS,WAAWA,CAACC,KAAc,EAAE;IAC1B,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,mCAe8BC,KAAkC,IAAK;MAClF,IAAI,CAACC,QAAQ,CAAC;QAAEC,gBAAgB,EAAEF,KAAK,CAACE;MAAiB,CAAC,CAAC;IAC7D,CAAC;IAAAH,eAAA,2BAE0B,MAAM;MAC/B,MAAMI,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;MACjD,QAAQA,MAAM,CAACD,gBAAgB;QAC7B,KAAK,oBAAoB;QACzB,KAAK,QAAQ;UACXC,MAAM,CAACD,gBAAgB,GAAGZ,gBAAgB,CAACe,UAAU;UACrD;QACF,KAAK,YAAY;UACfF,MAAM,CAACD,gBAAgB,GAAGZ,gBAAgB,CAACgB,MAAM;UACjD;MAAM;IAEZ,CAAC;IA7BC,IAAI,CAACC,KAAK,GAAG;MAAEL,gBAAgB,EAAEZ,gBAAgB,CAACgB;IAAO,CAAC;EAC5D;EAEAE,iBAAiBA,CAAA,EAAG;IAClB,MAAML,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACM,gBAAgB,CAACpB,eAAe,CAACqB,uBAAuB,EAAE,IAAI,CAACC,wBAAwB,CAAC;IAC/F,IAAI,CAACV,QAAQ,CAAC;MAAEC,gBAAgB,EAAEC,MAAM,CAACD;IAAiB,CAAC,CAAC;EAC9D;EAEAU,oBAAoBA,CAAA,EAAG;IACrB,MAAMT,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACU,mBAAmB,CAACxB,eAAe,CAACqB,uBAAuB,EAAE,IAAI,CAACC,wBAAwB,CAAC;EACpG;EAmBAG,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEZ;IAAiB,CAAC,GAAG,IAAI,CAACK,KAAK;IACvC,IAAIhB,QAAQ,CAACwB,IAAI,EAAE;MACjB,oBAAO5B,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAA8B,QAAA,OAAK;IACd;IACA,oBAAO9B,KAAA,CAAA6B,aAAA,CAACxB,YAAY;MAAC0B,GAAG,EAAEhB,gBAAgB,KAAK,YAAY,gBAAGf,KAAA,CAAA6B,aAAA,CAACtB,iBAAiB,OAAG,gBAAGP,KAAA,CAAA6B,aAAA,CAACrB,kBAAkB,OAAI;MAACwB,OAAO,EAAE,IAAI,CAACC;IAAiB,EAAG;EAClJ;AACF;AAEAxB,gBAAgB,CAACyB,WAAW,GAAG5B,aAAa"}

package/lib/module/ui/components/button/MuteButton.js

@@ -0,0 +1,57 @@
+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 { ActionButton } from './actionbutton/ActionButton';
+import React, { PureComponent } from 'react';
+import { PlayerContext } from '../util/PlayerContext';
+import { PlayerEventType } from 'react-native-theoplayer';
+import { Platform } from 'react-native';
+import { VolumeOffSvg } from './svg/VolumeOffSvg';
+import { VolumeUpSvg } from './svg/VolumeUpSvg';
+/**
+ * The default mute button for the `react-native-theoplayer` UI.
+ */
+export class MuteButton extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onVolumeChange", _ => {
+      const player = this.context.player;
+      this.setState({
+        muted: player.muted
+      });
+    });
+    _defineProperty(this, "toggleMuted", () => {
+      const player = this.context.player;
+      player.muted = !player.muted;
+    });
+    this.state = {
+      muted: false
+    };
+  }
+  componentDidMount() {
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);
+    this.setState({
+      muted: player.muted
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);
+  }
+  render() {
+    const {
+      muted
+    } = this.state;
+    if (Platform.isTV) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(ActionButton, {
+      svg: muted ? /*#__PURE__*/React.createElement(VolumeOffSvg, null) : /*#__PURE__*/React.createElement(VolumeUpSvg, null),
+      onPress: this.toggleMuted,
+      touchable: true
+    });
+  }
+}
+MuteButton.contextType = PlayerContext;
+//# sourceMappingURL=MuteButton.js.map

package/lib/module/ui/components/button/MuteButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ActionButton","React","PureComponent","PlayerContext","PlayerEventType","Platform","VolumeOffSvg","VolumeUpSvg","MuteButton","constructor","props","_defineProperty","_","player","context","setState","muted","state","componentDidMount","addEventListener","VOLUME_CHANGE","onVolumeChange","componentWillUnmount","removeEventListener","render","isTV","createElement","Fragment","svg","onPress","toggleMuted","touchable","contextType"],"sources":["MuteButton.tsx"],"sourcesContent":["import { ActionButton } from './actionbutton/ActionButton';\nimport React, { PureComponent } from 'react';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { PlayerEventType, VolumeChangeEvent } from 'react-native-theoplayer';\nimport { Platform } from 'react-native';\nimport { VolumeOffSvg } from './svg/VolumeOffSvg';\nimport { VolumeUpSvg } from './svg/VolumeUpSvg';\n\ninterface MuteButtonState {\n  muted: boolean;\n}\n\n/**\n * The default mute button for the `react-native-theoplayer` UI.\n */\nexport class MuteButton extends PureComponent<unknown, MuteButtonState> {\n  constructor(props: unknown) {\n    super(props);\n    this.state = { muted: false };\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);\n    this.setState({ muted: player.muted });\n  }\n\n  componentWillUnmount() {\n    const player = (this.context as UiContext).player;\n    player.removeEventListener(PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);\n  }\n\n  private onVolumeChange = (_: VolumeChangeEvent) => {\n    const player = (this.context as UiContext).player;\n    this.setState({ muted: player.muted });\n  };\n\n  private toggleMuted = () => {\n    const player = (this.context as UiContext).player;\n    player.muted = !player.muted;\n  };\n\n  render() {\n    const { muted } = this.state;\n    if (Platform.isTV) {\n      return <></>;\n    }\n    return <ActionButton svg={muted ? <VolumeOffSvg /> : <VolumeUpSvg />} onPress={this.toggleMuted} touchable={true} />;\n  }\n}\n\nMuteButton.contextType = PlayerContext;\n"],"mappings":";;;AAAA,SAASA,YAAY,QAAQ,6BAA6B;AAC1D,OAAOC,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAC5C,SAASC,aAAa,QAAmB,uBAAuB;AAChE,SAASC,eAAe,QAA2B,yBAAyB;AAC5E,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,WAAW,QAAQ,mBAAmB;AAM/C;AACA;AACA;AACA,OAAO,MAAMC,UAAU,SAASN,aAAa,CAA2B;EACtEO,WAAWA,CAACC,KAAc,EAAE;IAC1B,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,yBAeWC,CAAoB,IAAK;MACjD,MAAMC,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;MACjD,IAAI,CAACE,QAAQ,CAAC;QAAEC,KAAK,EAAEH,MAAM,CAACG;MAAM,CAAC,CAAC;IACxC,CAAC;IAAAL,eAAA,sBAEqB,MAAM;MAC1B,MAAME,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;MACjDA,MAAM,CAACG,KAAK,GAAG,CAACH,MAAM,CAACG,KAAK;IAC9B,CAAC;IAtBC,IAAI,CAACC,KAAK,GAAG;MAAED,KAAK,EAAE;IAAM,CAAC;EAC/B;EAEAE,iBAAiBA,CAAA,EAAG;IAClB,MAAML,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACM,gBAAgB,CAACf,eAAe,CAACgB,aAAa,EAAE,IAAI,CAACC,cAAc,CAAC;IAC3E,IAAI,CAACN,QAAQ,CAAC;MAAEC,KAAK,EAAEH,MAAM,CAACG;IAAM,CAAC,CAAC;EACxC;EAEAM,oBAAoBA,CAAA,EAAG;IACrB,MAAMT,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACU,mBAAmB,CAACnB,eAAe,CAACgB,aAAa,EAAE,IAAI,CAACC,cAAc,CAAC;EAChF;EAYAG,MAAMA,CAAA,EAAG;IACP,MAAM;MAAER;IAAM,CAAC,GAAG,IAAI,CAACC,KAAK;IAC5B,IAAIZ,QAAQ,CAACoB,IAAI,EAAE;MACjB,oBAAOxB,KAAA,CAAAyB,aAAA,CAAAzB,KAAA,CAAA0B,QAAA,OAAK;IACd;IACA,oBAAO1B,KAAA,CAAAyB,aAAA,CAAC1B,YAAY;MAAC4B,GAAG,EAAEZ,KAAK,gBAAGf,KAAA,CAAAyB,aAAA,CAACpB,YAAY,OAAG,gBAAGL,KAAA,CAAAyB,aAAA,CAACnB,WAAW,OAAI;MAACsB,OAAO,EAAE,IAAI,CAACC,WAAY;MAACC,SAAS,EAAE;IAAK,EAAG;EACtH;AACF;AAEAvB,UAAU,CAACwB,WAAW,GAAG7B,aAAa"}

package/lib/module/ui/components/button/PipButton.js

@@ -0,0 +1,63 @@
+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, PresentationMode } from 'react-native-theoplayer';
+import { Platform } from 'react-native';
+import { ActionButton } from './actionbutton/ActionButton';
+import { PlayerContext } from '../util/PlayerContext';
+import { PipExitSvg } from './svg/PipExitSvg';
+import { PipEnterSvg } from './svg/PipEnterSvg';
+/**
+ * The default button to enable picture-in-picture for the `react-native-theoplayer` UI.
+ */
+export class PipButton extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onPresentationModeChange", event => {
+      this.setState({
+        presentationMode: event.presentationMode
+      });
+    });
+    _defineProperty(this, "togglePip", () => {
+      const player = this.context.player;
+      switch (player.presentationMode) {
+        case 'inline':
+        case 'fullscreen':
+          player.presentationMode = PresentationMode.pip;
+          break;
+        case 'picture-in-picture':
+          player.presentationMode = PresentationMode.inline;
+          break;
+      }
+    });
+    this.state = {
+      presentationMode: PresentationMode.inline
+    };
+  }
+  componentDidMount() {
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+    this.setState({
+      presentationMode: player.presentationMode
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+  }
+  render() {
+    if (Platform.isTV) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    const {
+      presentationMode
+    } = this.state;
+    return /*#__PURE__*/React.createElement(ActionButton, {
+      svg: presentationMode === 'picture-in-picture' ? /*#__PURE__*/React.createElement(PipExitSvg, null) : /*#__PURE__*/React.createElement(PipEnterSvg, null),
+      onPress: this.togglePip
+    });
+  }
+}
+PipButton.contextType = PlayerContext;
+//# sourceMappingURL=PipButton.js.map

package/lib/module/ui/components/button/PipButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PureComponent","PlayerEventType","PresentationMode","Platform","ActionButton","PlayerContext","PipExitSvg","PipEnterSvg","PipButton","constructor","props","_defineProperty","event","setState","presentationMode","player","context","pip","inline","state","componentDidMount","addEventListener","PRESENTATIONMODE_CHANGE","onPresentationModeChange","componentWillUnmount","removeEventListener","render","isTV","createElement","Fragment","svg","onPress","togglePip","contextType"],"sources":["PipButton.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport type { PresentationModeChangeEvent } from 'react-native-theoplayer';\nimport { PlayerEventType, PresentationMode } from 'react-native-theoplayer';\nimport { Platform } from 'react-native';\nimport { ActionButton } from './actionbutton/ActionButton';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { PipExitSvg } from './svg/PipExitSvg';\nimport { PipEnterSvg } from './svg/PipEnterSvg';\n\ninterface PipButtonState {\n  presentationMode: PresentationMode;\n}\n\n/**\n * The default button to enable picture-in-picture for the `react-native-theoplayer` UI.\n */\nexport class PipButton extends PureComponent<unknown, PipButtonState> {\n  constructor(props: unknown) {\n    super(props);\n    this.state = { presentationMode: PresentationMode.inline };\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);\n    this.setState({ presentationMode: player.presentationMode });\n  }\n\n  componentWillUnmount() {\n    const player = (this.context as UiContext).player;\n    player.removeEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);\n  }\n\n  private readonly onPresentationModeChange = (event: PresentationModeChangeEvent) => {\n    this.setState({ presentationMode: event.presentationMode });\n  };\n\n  private togglePip = () => {\n    const player = (this.context as UiContext).player;\n    switch (player.presentationMode) {\n      case 'inline':\n      case 'fullscreen':\n        player.presentationMode = PresentationMode.pip;\n        break;\n      case 'picture-in-picture':\n        player.presentationMode = PresentationMode.inline;\n        break;\n    }\n  };\n\n  render() {\n    if (Platform.isTV) {\n      return <></>;\n    }\n    const { presentationMode } = this.state;\n\n    return <ActionButton svg={presentationMode === 'picture-in-picture' ? <PipExitSvg /> : <PipEnterSvg />} onPress={this.togglePip} />;\n  }\n}\n\nPipButton.contextType = PlayerContext;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAE5C,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,yBAAyB;AAC3E,SAASC,QAAQ,QAAQ,cAAc;AACvC,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,aAAa,QAAmB,uBAAuB;AAChE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,mBAAmB;AAM/C;AACA;AACA;AACA,OAAO,MAAMC,SAAS,SAASR,aAAa,CAA0B;EACpES,WAAWA,CAACC,KAAc,EAAE;IAC1B,KAAK,CAACA,KAAK,CAAC;IAACC,eAAA,mCAe8BC,KAAkC,IAAK;MAClF,IAAI,CAACC,QAAQ,CAAC;QAAEC,gBAAgB,EAAEF,KAAK,CAACE;MAAiB,CAAC,CAAC;IAC7D,CAAC;IAAAH,eAAA,oBAEmB,MAAM;MACxB,MAAMI,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;MACjD,QAAQA,MAAM,CAACD,gBAAgB;QAC7B,KAAK,QAAQ;QACb,KAAK,YAAY;UACfC,MAAM,CAACD,gBAAgB,GAAGZ,gBAAgB,CAACe,GAAG;UAC9C;QACF,KAAK,oBAAoB;UACvBF,MAAM,CAACD,gBAAgB,GAAGZ,gBAAgB,CAACgB,MAAM;UACjD;MAAM;IAEZ,CAAC;IA7BC,IAAI,CAACC,KAAK,GAAG;MAAEL,gBAAgB,EAAEZ,gBAAgB,CAACgB;IAAO,CAAC;EAC5D;EAEAE,iBAAiBA,CAAA,EAAG;IAClB,MAAML,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACM,gBAAgB,CAACpB,eAAe,CAACqB,uBAAuB,EAAE,IAAI,CAACC,wBAAwB,CAAC;IAC/F,IAAI,CAACV,QAAQ,CAAC;MAAEC,gBAAgB,EAAEC,MAAM,CAACD;IAAiB,CAAC,CAAC;EAC9D;EAEAU,oBAAoBA,CAAA,EAAG;IACrB,MAAMT,MAAM,GAAI,IAAI,CAACC,OAAO,CAAeD,MAAM;IACjDA,MAAM,CAACU,mBAAmB,CAACxB,eAAe,CAACqB,uBAAuB,EAAE,IAAI,CAACC,wBAAwB,CAAC;EACpG;EAmBAG,MAAMA,CAAA,EAAG;IACP,IAAIvB,QAAQ,CAACwB,IAAI,EAAE;MACjB,oBAAO5B,KAAA,CAAA6B,aAAA,CAAA7B,KAAA,CAAA8B,QAAA,OAAK;IACd;IACA,MAAM;MAAEf;IAAiB,CAAC,GAAG,IAAI,CAACK,KAAK;IAEvC,oBAAOpB,KAAA,CAAA6B,aAAA,CAACxB,YAAY;MAAC0B,GAAG,EAAEhB,gBAAgB,KAAK,oBAAoB,gBAAGf,KAAA,CAAA6B,aAAA,CAACtB,UAAU,OAAG,gBAAGP,KAAA,CAAA6B,aAAA,CAACrB,WAAW,OAAI;MAACwB,OAAO,EAAE,IAAI,CAACC;IAAU,EAAG;EACrI;AACF;AAEAxB,SAAS,CAACyB,WAAW,GAAG5B,aAAa"}