react-native-theoplayer 1.8.2 → 2.0.0

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullscreenButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNativeTheoplayer = require("react-native-theoplayer");
+var _reactNative = require("react-native");
+var _ActionButton = require("./actionbutton/ActionButton");
+var _PlayerContext = require("../util/PlayerContext");
+var _FullscreenExitSvg = require("./svg/FullscreenExitSvg");
+var _FullscreenEnterSvg = require("./svg/FullscreenEnterSvg");
+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); }
+/**
+ * The button to enable/disable fullscreen for the `react-native-theoplayer` UI.
+ */
+class FullscreenButton extends _react.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 = _reactNativeTheoplayer.PresentationMode.fullscreen;
+          break;
+        case 'fullscreen':
+          player.presentationMode = _reactNativeTheoplayer.PresentationMode.inline;
+          break;
+      }
+    });
+    this.state = {
+      presentationMode: _reactNativeTheoplayer.PresentationMode.inline
+    };
+  }
+  componentDidMount() {
+    const player = this.context.player;
+    player.addEventListener(_reactNativeTheoplayer.PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+    this.setState({
+      presentationMode: player.presentationMode
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+  }
+  render() {
+    const {
+      presentationMode
+    } = this.state;
+    if (_reactNative.Platform.isTV) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    }
+    return /*#__PURE__*/_react.default.createElement(_ActionButton.ActionButton, {
+      svg: presentationMode === 'fullscreen' ? /*#__PURE__*/_react.default.createElement(_FullscreenExitSvg.FullscreenExitSvg, null) : /*#__PURE__*/_react.default.createElement(_FullscreenEnterSvg.FullscreenEnterSvg, null),
+      onPress: this.toggleFullScreen
+    });
+  }
+}
+exports.FullscreenButton = FullscreenButton;
+FullscreenButton.contextType = _PlayerContext.PlayerContext;
+//# sourceMappingURL=FullscreenButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeTheoplayer","_reactNative","_ActionButton","_PlayerContext","_FullscreenExitSvg","_FullscreenEnterSvg","_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","FullscreenButton","PureComponent","constructor","props","event","setState","presentationMode","player","context","PresentationMode","fullscreen","inline","state","componentDidMount","addEventListener","PlayerEventType","PRESENTATIONMODE_CHANGE","onPresentationModeChange","componentWillUnmount","removeEventListener","render","Platform","isTV","createElement","Fragment","ActionButton","svg","FullscreenExitSvg","FullscreenEnterSvg","onPress","toggleFullScreen","exports","contextType","PlayerContext"],"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":"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"}

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MuteButton = void 0;
+var _ActionButton = require("./actionbutton/ActionButton");
+var _react = _interopRequireWildcard(require("react"));
+var _PlayerContext = require("../util/PlayerContext");
+var _reactNativeTheoplayer = require("react-native-theoplayer");
+var _reactNative = require("react-native");
+var _VolumeOffSvg = require("./svg/VolumeOffSvg");
+var _VolumeUpSvg = require("./svg/VolumeUpSvg");
+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); }
+/**
+ * The default mute button for the `react-native-theoplayer` UI.
+ */
+class MuteButton extends _react.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(_reactNativeTheoplayer.PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);
+    this.setState({
+      muted: player.muted
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);
+  }
+  render() {
+    const {
+      muted
+    } = this.state;
+    if (_reactNative.Platform.isTV) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    }
+    return /*#__PURE__*/_react.default.createElement(_ActionButton.ActionButton, {
+      svg: muted ? /*#__PURE__*/_react.default.createElement(_VolumeOffSvg.VolumeOffSvg, null) : /*#__PURE__*/_react.default.createElement(_VolumeUpSvg.VolumeUpSvg, null),
+      onPress: this.toggleMuted,
+      touchable: true
+    });
+  }
+}
+exports.MuteButton = MuteButton;
+MuteButton.contextType = _PlayerContext.PlayerContext;
+//# sourceMappingURL=MuteButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_ActionButton","require","_react","_interopRequireWildcard","_PlayerContext","_reactNativeTheoplayer","_reactNative","_VolumeOffSvg","_VolumeUpSvg","_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","MuteButton","PureComponent","constructor","props","_","player","context","setState","muted","state","componentDidMount","addEventListener","PlayerEventType","VOLUME_CHANGE","onVolumeChange","componentWillUnmount","removeEventListener","render","Platform","isTV","createElement","Fragment","ActionButton","svg","VolumeOffSvg","VolumeUpSvg","onPress","toggleMuted","touchable","exports","contextType","PlayerContext"],"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":"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"}

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PipButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNativeTheoplayer = require("react-native-theoplayer");
+var _reactNative = require("react-native");
+var _ActionButton = require("./actionbutton/ActionButton");
+var _PlayerContext = require("../util/PlayerContext");
+var _PipExitSvg = require("./svg/PipExitSvg");
+var _PipEnterSvg = require("./svg/PipEnterSvg");
+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); }
+/**
+ * The default button to enable picture-in-picture for the `react-native-theoplayer` UI.
+ */
+class PipButton extends _react.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 = _reactNativeTheoplayer.PresentationMode.pip;
+          break;
+        case 'picture-in-picture':
+          player.presentationMode = _reactNativeTheoplayer.PresentationMode.inline;
+          break;
+      }
+    });
+    this.state = {
+      presentationMode: _reactNativeTheoplayer.PresentationMode.inline
+    };
+  }
+  componentDidMount() {
+    const player = this.context.player;
+    player.addEventListener(_reactNativeTheoplayer.PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+    this.setState({
+      presentationMode: player.presentationMode
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
+  }
+  render() {
+    if (_reactNative.Platform.isTV) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    }
+    const {
+      presentationMode
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement(_ActionButton.ActionButton, {
+      svg: presentationMode === 'picture-in-picture' ? /*#__PURE__*/_react.default.createElement(_PipExitSvg.PipExitSvg, null) : /*#__PURE__*/_react.default.createElement(_PipEnterSvg.PipEnterSvg, null),
+      onPress: this.togglePip
+    });
+  }
+}
+exports.PipButton = PipButton;
+PipButton.contextType = _PlayerContext.PlayerContext;
+//# sourceMappingURL=PipButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNativeTheoplayer","_reactNative","_ActionButton","_PlayerContext","_PipExitSvg","_PipEnterSvg","_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","PipButton","PureComponent","constructor","props","event","setState","presentationMode","player","context","PresentationMode","pip","inline","state","componentDidMount","addEventListener","PlayerEventType","PRESENTATIONMODE_CHANGE","onPresentationModeChange","componentWillUnmount","removeEventListener","render","Platform","isTV","createElement","Fragment","ActionButton","svg","PipExitSvg","PipEnterSvg","onPress","togglePip","exports","contextType","PlayerContext"],"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":"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"}

package/lib/commonjs/ui/components/button/PlayButton.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PlayButton = void 0;
+var _ActionButton = require("./actionbutton/ActionButton");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNativeTheoplayer = require("react-native-theoplayer");
+var _PlayerContext = require("../util/PlayerContext");
+var _PlaySvg = require("./svg/PlaySvg");
+var _PauseSvg = require("./svg/PauseSvg");
+var _ReplaySvg = require("./svg/ReplaySvg");
+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); }
+/**
+ * The default play/pause button for the `react-native-theoplayer` UI.
+ */
+class PlayButton extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onPlay", () => {
+      const player = this.context.player;
+      if (player.seeking) {
+        return;
+      }
+      this.setState({
+        paused: false,
+        ended: false
+      });
+    });
+    _defineProperty(this, "onPause", () => {
+      const player = this.context.player;
+      if (player.seeking) {
+        return;
+      }
+      this.setState({
+        paused: true
+      });
+    });
+    _defineProperty(this, "onSourceChange", () => {
+      const player = this.context.player;
+      this.setState({
+        paused: player.paused
+      });
+    });
+    _defineProperty(this, "onEnded", () => {
+      this.setState({
+        ended: true
+      });
+    });
+    _defineProperty(this, "onSeeking", () => {
+      this.setState({
+        ended: false
+      });
+    });
+    _defineProperty(this, "togglePlayPause", () => {
+      const player = this.context.player;
+      if (player.paused) {
+        player.play();
+      } else {
+        player.pause();
+      }
+    });
+    this.state = {
+      paused: true,
+      ended: false
+    };
+  }
+  componentDidMount() {
+    const context = this.context;
+    context.player.addEventListener(_reactNativeTheoplayer.PlayerEventType.PLAY, this.onPlay);
+    context.player.addEventListener(_reactNativeTheoplayer.PlayerEventType.PLAYING, this.onPlay);
+    context.player.addEventListener(_reactNativeTheoplayer.PlayerEventType.PAUSE, this.onPause);
+    context.player.addEventListener(_reactNativeTheoplayer.PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
+    context.player.addEventListener(_reactNativeTheoplayer.PlayerEventType.ENDED, this.onEnded);
+    context.player.addEventListener(_reactNativeTheoplayer.PlayerEventType.SEEKING, this.onSeeking);
+    this.setState({
+      paused: context.player.paused,
+      ended: context.player.currentTime === context.player.duration
+    });
+  }
+  componentWillUnmount() {
+    const context = this.context;
+    context.player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.PLAY, this.onPlay);
+    context.player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.PLAYING, this.onPlay);
+    context.player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.PAUSE, this.onPause);
+    context.player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
+    context.player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.ENDED, this.onEnded);
+    context.player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.SEEKING, this.onSeeking);
+  }
+  render() {
+    const {
+      paused,
+      ended
+    } = this.state;
+    const {
+      style
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_ActionButton.ActionButton, {
+      style: style,
+      touchable: true,
+      svg: ended ? /*#__PURE__*/_react.default.createElement(_ReplaySvg.ReplaySvg, null) : paused ? /*#__PURE__*/_react.default.createElement(_PlaySvg.PlaySvg, null) : /*#__PURE__*/_react.default.createElement(_PauseSvg.PauseSvg, null),
+      onPress: this.togglePlayPause
+    });
+  }
+}
+exports.PlayButton = PlayButton;
+PlayButton.contextType = _PlayerContext.PlayerContext;
+//# sourceMappingURL=PlayButton.js.map

package/lib/commonjs/ui/components/button/PlayButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ActionButton","require","_react","_interopRequireWildcard","_reactNativeTheoplayer","_PlayerContext","_PlaySvg","_PauseSvg","_ReplaySvg","_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","PlayButton","PureComponent","constructor","props","player","context","seeking","setState","paused","ended","play","pause","state","componentDidMount","addEventListener","PlayerEventType","PLAY","onPlay","PLAYING","PAUSE","onPause","SOURCE_CHANGE","onSourceChange","ENDED","onEnded","SEEKING","onSeeking","currentTime","duration","componentWillUnmount","removeEventListener","render","style","createElement","ActionButton","touchable","svg","ReplaySvg","PlaySvg","PauseSvg","onPress","togglePlayPause","exports","contextType","PlayerContext"],"sources":["PlayButton.tsx"],"sourcesContent":["import { ActionButton } from './actionbutton/ActionButton';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport React, { PureComponent } from 'react';\nimport { PlayerEventType } from 'react-native-theoplayer';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { PlaySvg } from './svg/PlaySvg';\n\nimport { PauseSvg } from './svg/PauseSvg';\nimport { ReplaySvg } from './svg/ReplaySvg';\n\ninterface PlayButtonProps {\n  /**\n   * The style overrides for the play/pause button.\n   */\n  style?: StyleProp<ViewStyle>;\n}\n\ninterface PlayButtonState {\n  paused: boolean;\n  ended: boolean;\n}\n\n/**\n * The default play/pause button for the `react-native-theoplayer` UI.\n */\nexport class PlayButton extends PureComponent<PlayButtonProps, PlayButtonState> {\n  constructor(props: PlayButtonProps) {\n    super(props);\n    this.state = {\n      paused: true,\n      ended: false,\n    };\n  }\n\n  componentDidMount() {\n    const context = this.context as UiContext;\n    context.player.addEventListener(PlayerEventType.PLAY, this.onPlay);\n    context.player.addEventListener(PlayerEventType.PLAYING, this.onPlay);\n    context.player.addEventListener(PlayerEventType.PAUSE, this.onPause);\n    context.player.addEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);\n    context.player.addEventListener(PlayerEventType.ENDED, this.onEnded);\n    context.player.addEventListener(PlayerEventType.SEEKING, this.onSeeking);\n    this.setState({\n      paused: context.player.paused,\n      ended: context.player.currentTime === context.player.duration,\n    });\n  }\n\n  componentWillUnmount() {\n    const context = this.context as UiContext;\n    context.player.removeEventListener(PlayerEventType.PLAY, this.onPlay);\n    context.player.removeEventListener(PlayerEventType.PLAYING, this.onPlay);\n    context.player.removeEventListener(PlayerEventType.PAUSE, this.onPause);\n    context.player.removeEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);\n    context.player.removeEventListener(PlayerEventType.ENDED, this.onEnded);\n    context.player.removeEventListener(PlayerEventType.SEEKING, this.onSeeking);\n  }\n\n  private onPlay = () => {\n    const player = (this.context as UiContext).player;\n    if (player.seeking) {\n      return;\n    }\n    this.setState({ paused: false, ended: false });\n  };\n\n  private onPause = () => {\n    const player = (this.context as UiContext).player;\n    if (player.seeking) {\n      return;\n    }\n    this.setState({ paused: true });\n  };\n\n  private onSourceChange = () => {\n    const player = (this.context as UiContext).player;\n    this.setState({ paused: player.paused });\n  };\n\n  private onEnded = () => {\n    this.setState({ ended: true });\n  };\n\n  private onSeeking = () => {\n    this.setState({ ended: false });\n  };\n\n  private togglePlayPause = () => {\n    const player = (this.context as UiContext).player;\n    if (player.paused) {\n      player.play();\n    } else {\n      player.pause();\n    }\n  };\n\n  render() {\n    const { paused, ended } = this.state;\n    const { style } = this.props;\n\n    return (\n      <ActionButton style={style} touchable={true} svg={ended ? <ReplaySvg /> : paused ? <PlaySvg /> : <PauseSvg />} onPress={this.togglePlayPause} />\n    );\n  }\n}\n\nPlayButton.contextType = PlayerContext;\n"],"mappings":"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"}

package/lib/commonjs/ui/components/button/SkipButton.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SkipButton = void 0;
+var _ActionButton = require("./actionbutton/ActionButton");
+var _react = _interopRequireWildcard(require("react"));
+var _PlayerContext = require("../util/PlayerContext");
+var _ForwardSvg = require("./svg/ForwardSvg");
+var _reactNative = require("react-native");
+var _BackwardSvg = require("./svg/BackwardSvg");
+var _reactNativeTheoplayer = require("react-native-theoplayer");
+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); }
+/**
+ * The default skip button for the `react-native-theoplayer` UI.
+ */
+class SkipButton extends _react.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "onTimeupdate", event => {
+      this.setState({
+        enabled: event.seekable.length > 0
+      });
+    });
+    _defineProperty(this, "onPress", () => {
+      const {
+        skip,
+        rotate
+      } = this.props;
+      const {
+        spinValue
+      } = this.state;
+      const player = this.context.player;
+      player.currentTime = player.currentTime + skip * 1e3;
+      if (rotate === true) {
+        _reactNative.Animated.timing(spinValue, {
+          toValue: 0.1,
+          duration: 100,
+          easing: _reactNative.Easing.linear,
+          useNativeDriver: true
+        }).start(() => {
+          _reactNative.Animated.timing(spinValue, {
+            toValue: 0,
+            duration: 100,
+            easing: _reactNative.Easing.linear,
+            useNativeDriver: true
+          }).start();
+        });
+      }
+    });
+    this.state = {
+      enabled: false,
+      spinValue: new _reactNative.Animated.Value(0)
+    };
+  }
+  componentDidMount() {
+    const player = this.context.player;
+    player.addEventListener(_reactNativeTheoplayer.PlayerEventType.PROGRESS, this.onTimeupdate);
+    this.setState({
+      enabled: player.seekable.length > 0
+    });
+  }
+  componentWillUnmount() {
+    const player = this.context.player;
+    player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.PROGRESS, this.onTimeupdate);
+  }
+  render() {
+    const {
+      style,
+      skip,
+      rotate
+    } = this.props;
+    const {
+      enabled,
+      spinValue
+    } = this.state;
+    if (!enabled) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+    }
+    const spin = spinValue.interpolate({
+      inputRange: [0, 1],
+      outputRange: skip >= 0 ? ['0deg', '360deg'] : ['360deg', '0deg']
+    });
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PlayerContext.PlayerContext.Consumer, null, context => /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
+      style: [{
+        height: '100%',
+        aspectRatio: 1
+      }, style, {
+        transform: [{
+          rotate: spin
+        }]
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+      activeOpacity: rotate === true ? 1 : 0.2,
+      style: [{
+        height: '100%',
+        aspectRatio: 1,
+        justifyContent: 'center'
+      }, style],
+      onPress: this.onPress
+    }, /*#__PURE__*/_react.default.createElement(_ActionButton.ActionButton, {
+      touchable: false,
+      svg: skip < 0 ? /*#__PURE__*/_react.default.createElement(_BackwardSvg.BackwardSvg, null) : /*#__PURE__*/_react.default.createElement(_ForwardSvg.ForwardSvg, null)
+    }), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        justifyContent: 'center'
+      }]
+    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+      style: [context.style.text, {
+        color: context.style.colors.text
+      }]
+    }, Math.abs(skip)))))));
+  }
+}
+exports.SkipButton = SkipButton;
+SkipButton.contextType = _PlayerContext.PlayerContext;
+//# sourceMappingURL=SkipButton.js.map

package/lib/commonjs/ui/components/button/SkipButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_ActionButton","require","_react","_interopRequireWildcard","_PlayerContext","_ForwardSvg","_reactNative","_BackwardSvg","_reactNativeTheoplayer","_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","SkipButton","PureComponent","constructor","props","event","setState","enabled","seekable","length","skip","rotate","spinValue","state","player","context","currentTime","Animated","timing","toValue","duration","easing","Easing","linear","useNativeDriver","start","Value","componentDidMount","addEventListener","PlayerEventType","PROGRESS","onTimeupdate","componentWillUnmount","removeEventListener","render","style","createElement","Fragment","spin","interpolate","inputRange","outputRange","PlayerContext","Consumer","View","height","aspectRatio","transform","TouchableOpacity","activeOpacity","justifyContent","onPress","ActionButton","touchable","svg","BackwardSvg","ForwardSvg","StyleSheet","absoluteFill","Text","text","color","colors","Math","abs","exports","contextType"],"sources":["SkipButton.tsx"],"sourcesContent":["import { ActionButton } from './actionbutton/ActionButton';\nimport React, { PureComponent } from 'react';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { ForwardSvg } from './svg/ForwardSvg';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { Animated, Easing, StyleSheet, Text, TouchableOpacity, View } from 'react-native';\nimport { BackwardSvg } from './svg/BackwardSvg';\nimport { PlayerEventType, ProgressEvent } from 'react-native-theoplayer';\n\ninterface SkipButtonProps {\n  /**\n   * The style overrides for the skip button.\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * The skip value for the skip button. This can be set to negative to skip backwards.\n   */\n  skip: number;\n  /**\n   * Whether the skip button should do a rotation animation when pressed instead of fading.\n   */\n  rotate?: boolean;\n}\n\ninterface SkipButtonState {\n  enabled: boolean;\n  spinValue: Animated.Value;\n}\n\n/**\n * The default skip button for the `react-native-theoplayer` UI.\n */\nexport class SkipButton extends PureComponent<SkipButtonProps, SkipButtonState> {\n  constructor(props: SkipButtonProps) {\n    super(props);\n    this.state = { enabled: false, spinValue: new Animated.Value(0) };\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.PROGRESS, this.onTimeupdate);\n    this.setState({ enabled: player.seekable.length > 0 });\n  }\n\n  componentWillUnmount() {\n    const player = (this.context as UiContext).player;\n    player.removeEventListener(PlayerEventType.PROGRESS, this.onTimeupdate);\n  }\n\n  private readonly onTimeupdate = (event: ProgressEvent) => {\n    this.setState({ enabled: event.seekable.length > 0 });\n  };\n\n  private readonly onPress = () => {\n    const { skip, rotate } = this.props;\n    const { spinValue } = this.state;\n    const player = (this.context as UiContext).player;\n    player.currentTime = player.currentTime + skip * 1e3;\n\n    if (rotate === true) {\n      Animated.timing(spinValue, {\n        toValue: 0.1,\n        duration: 100,\n        easing: Easing.linear,\n        useNativeDriver: true,\n      }).start(() => {\n        Animated.timing(spinValue, {\n          toValue: 0,\n          duration: 100,\n          easing: Easing.linear,\n          useNativeDriver: true,\n        }).start();\n      });\n    }\n  };\n\n  render() {\n    const { style, skip, rotate } = this.props;\n    const { enabled, spinValue } = this.state;\n\n    if (!enabled) {\n      return <></>;\n    }\n\n    const spin = spinValue.interpolate({\n      inputRange: [0, 1],\n      outputRange: skip >= 0 ? ['0deg', '360deg'] : ['360deg', '0deg'],\n    });\n\n    return (\n      <>\n        <PlayerContext.Consumer>\n          {(context: UiContext) => (\n            <Animated.View style={[{ height: '100%', aspectRatio: 1 }, style, { transform: [{ rotate: spin }] }]}>\n              <TouchableOpacity\n                activeOpacity={rotate === true ? 1 : 0.2}\n                style={[{ height: '100%', aspectRatio: 1, justifyContent: 'center' }, style]}\n                onPress={this.onPress}>\n                <ActionButton touchable={false} svg={skip < 0 ? <BackwardSvg /> : <ForwardSvg />} />\n                <View style={[StyleSheet.absoluteFill, { justifyContent: 'center' }]}>\n                  <Text style={[context.style.text, { color: context.style.colors.text }]}>{Math.abs(skip)}</Text>\n                </View>\n              </TouchableOpacity>\n            </Animated.View>\n          )}\n        </PlayerContext.Consumer>\n      </>\n    );\n  }\n}\n\nSkipButton.contextType = PlayerContext;\n"],"mappings":"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"}

package/lib/commonjs/ui/components/button/actionbutton/ActionButton.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_ACTION_BUTTON_STYLE = exports.ActionButton = void 0;
+var _reactNative = require("react-native");
+var _react = _interopRequireWildcard(require("react"));
+var _SvgUtils = require("../svg/SvgUtils");
+var _PlayerContext = require("../../util/PlayerContext");
+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 applied to the ActionButton
+ */
+const DEFAULT_ACTION_BUTTON_STYLE = {
+  height: '100%',
+  aspectRatio: 1,
+  padding: 5
+};
+
+/**
+ * The default button component that renders an image/svg source for the `react-native-theoplayer` UI.
+ */
+exports.DEFAULT_ACTION_BUTTON_STYLE = DEFAULT_ACTION_BUTTON_STYLE;
+const ActionButton = props => {
+  const {
+    icon,
+    style,
+    touchable,
+    svg,
+    onPress,
+    highlighted
+  } = props;
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const context = (0, _react.useContext)(_PlayerContext.PlayerContext);
+  const shouldChangeTintColor = highlighted || focused && _reactNative.Platform.isTV;
+  if (!touchable) {
+    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+      style: [DEFAULT_ACTION_BUTTON_STYLE, style]
+    }, svg);
+  }
+  const onTouch = () => {
+    if (context.ui.buttonsEnabled_) {
+      onPress === null || onPress === void 0 ? void 0 : onPress();
+    }
+    context.ui.onUserAction_();
+  };
+  return /*#__PURE__*/_react.default.createElement(_PlayerContext.PlayerContext.Consumer, null, context => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    style: [DEFAULT_ACTION_BUTTON_STYLE, style],
+    tvParallaxProperties: {
+      enabled: false
+    },
+    onPress: onTouch,
+    onFocus: () => {
+      context.ui.onUserAction_();
+      setFocused(true);
+    },
+    onBlur: () => {
+      setFocused(false);
+    }
+  }, svg && /*#__PURE__*/_react.default.createElement(_SvgUtils.SvgContext.Provider, {
+    value: {
+      fill: shouldChangeTintColor ? context.style.colors.iconSelected : context.style.colors.icon,
+      height: '100%',
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, null, svg)), svg === undefined && icon && /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    style: [{
+      height: '100%',
+      width: '100%'
+    }, {
+      tintColor: shouldChangeTintColor ? context.style.colors.iconSelected : context.style.colors.icon
+    }],
+    source: icon
+  })));
+};
+exports.ActionButton = ActionButton;
+ActionButton.defaultProps = {
+  touchable: true
+};
+//# sourceMappingURL=ActionButton.js.map