react-native-theoplayer 1.8.2 → 2.0.0

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

@@ -0,0 +1,65 @@
+import React, { useContext } from 'react';
+import { PlayerContext } from '../../util/PlayerContext';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ControlBar } from '../../controlbar/ControlBar';
+import { TOP_UI_CONTAINER_STYLE } from '../../uicontroller/UiContainer';
+import { BackSvg } from '../../button/svg/BackSvg';
+import { ActionButton } from '../../button/actionbutton/ActionButton';
+/**
+ * The default style for the menu view.
+ */
+export const DEFAULT_MENU_VIEW_STYLE = {
+  flex: 1,
+  flexDirection: 'row',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  paddingVertical: 20,
+  paddingLeft: 50,
+  paddingRight: 40
+};
+
+/**
+ * A component to render a fullscreen menu with a title and back button for the `react-native-theoplayer` UI.
+ */
+export const MenuView = props => {
+  const {
+    menu,
+    style
+  } = props;
+  const context = useContext(PlayerContext);
+  const onClose = () => {
+    context.ui.closeCurrentMenu_();
+  };
+  return /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(View, {
+    style: StyleSheet.absoluteFill
+  }, /*#__PURE__*/React.createElement(ControlBar, {
+    style: TOP_UI_CONTAINER_STYLE
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: {
+      flexDirection: 'row'
+    },
+    onPress: onClose
+  }, /*#__PURE__*/React.createElement(ActionButton, {
+    touchable: false,
+    svg: /*#__PURE__*/React.createElement(BackSvg, null)
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: {
+      color: context.style.colors.text,
+      fontSize: 16,
+      lineHeight: 30
+    }
+  }, "Back"))), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexGrow: 1
+    }
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [DEFAULT_MENU_VIEW_STYLE, style]
+  }, menu)));
+};
+//# sourceMappingURL=MenuView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useContext","PlayerContext","StyleSheet","Text","TouchableOpacity","View","ControlBar","TOP_UI_CONTAINER_STYLE","BackSvg","ActionButton","DEFAULT_MENU_VIEW_STYLE","flex","flexDirection","left","right","top","bottom","paddingVertical","paddingLeft","paddingRight","MenuView","props","menu","style","context","onClose","ui","closeCurrentMenu_","createElement","Consumer","absoluteFill","onPress","touchable","svg","color","colors","text","fontSize","lineHeight","flexGrow"],"sources":["MenuView.tsx"],"sourcesContent":["import React, { ReactNode, useContext } from 'react';\nimport { PlayerContext, UiContext } from '../../util/PlayerContext';\nimport { StyleProp, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';\nimport { ControlBar } from '../../controlbar/ControlBar';\nimport { TOP_UI_CONTAINER_STYLE } from '../../uicontroller/UiContainer';\nimport { BackSvg } from '../../button/svg/BackSvg';\nimport { ActionButton } from '../../button/actionbutton/ActionButton';\n\ninterface MenuViewProps {\n  /**\n   * The menu to render inside the menu view.\n   */\n  menu: ReactNode;\n  /**\n   * The style overrides for the menu view.\n   */\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * The default style for the menu view.\n */\nexport const DEFAULT_MENU_VIEW_STYLE: ViewStyle = {\n  flex: 1,\n  flexDirection: 'row',\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  paddingVertical: 20,\n  paddingLeft: 50,\n  paddingRight: 40,\n};\n\n/**\n * A component to render a fullscreen menu with a title and back button for the `react-native-theoplayer` UI.\n */\nexport const MenuView = (props: MenuViewProps) => {\n  const { menu, style } = props;\n  const context = useContext(PlayerContext);\n  const onClose = () => {\n    context.ui.closeCurrentMenu_();\n  };\n  return (\n    <PlayerContext.Consumer>\n      {(context: UiContext) => (\n        <View style={StyleSheet.absoluteFill}>\n          <ControlBar style={TOP_UI_CONTAINER_STYLE}>\n            <View style={{ flexDirection: 'row' }}>\n              <TouchableOpacity style={{ flexDirection: 'row' }} onPress={onClose}>\n                <ActionButton touchable={false} svg={<BackSvg />} />\n                <Text style={{ color: context.style.colors.text, fontSize: 16, lineHeight: 30 }}>Back</Text>\n              </TouchableOpacity>\n            </View>\n            <View style={{ flexGrow: 1 }} />\n          </ControlBar>\n          <View style={[DEFAULT_MENU_VIEW_STYLE, style]}>{menu}</View>\n        </View>\n      )}\n    </PlayerContext.Consumer>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAeC,UAAU,QAAQ,OAAO;AACpD,SAASC,aAAa,QAAmB,0BAA0B;AACnE,SAAoBC,UAAU,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,IAAI,QAAmB,cAAc;AAC7F,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,sBAAsB,QAAQ,gCAAgC;AACvE,SAASC,OAAO,QAAQ,0BAA0B;AAClD,SAASC,YAAY,QAAQ,wCAAwC;AAarE;AACA;AACA;AACA,OAAO,MAAMC,uBAAkC,GAAG;EAChDC,IAAI,EAAE,CAAC;EACPC,aAAa,EAAE,KAAK;EACpBC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,GAAG,EAAE,CAAC;EACNC,MAAM,EAAE,CAAC;EACTC,eAAe,EAAE,EAAE;EACnBC,WAAW,EAAE,EAAE;EACfC,YAAY,EAAE;AAChB,CAAC;;AAED;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;EAChD,MAAM;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAC7B,MAAMG,OAAO,GAAGxB,UAAU,CAACC,aAAa,CAAC;EACzC,MAAMwB,OAAO,GAAGA,CAAA,KAAM;IACpBD,OAAO,CAACE,EAAE,CAACC,iBAAiB,EAAE;EAChC,CAAC;EACD,oBACE5B,KAAA,CAAA6B,aAAA,CAAC3B,aAAa,CAAC4B,QAAQ,QACnBL,OAAkB,iBAClBzB,KAAA,CAAA6B,aAAA,CAACvB,IAAI;IAACkB,KAAK,EAAErB,UAAU,CAAC4B;EAAa,gBACnC/B,KAAA,CAAA6B,aAAA,CAACtB,UAAU;IAACiB,KAAK,EAAEhB;EAAuB,gBACxCR,KAAA,CAAA6B,aAAA,CAACvB,IAAI;IAACkB,KAAK,EAAE;MAAEX,aAAa,EAAE;IAAM;EAAE,gBACpCb,KAAA,CAAA6B,aAAA,CAACxB,gBAAgB;IAACmB,KAAK,EAAE;MAAEX,aAAa,EAAE;IAAM,CAAE;IAACmB,OAAO,EAAEN;EAAQ,gBAClE1B,KAAA,CAAA6B,aAAA,CAACnB,YAAY;IAACuB,SAAS,EAAE,KAAM;IAACC,GAAG,eAAElC,KAAA,CAAA6B,aAAA,CAACpB,OAAO;EAAI,EAAG,eACpDT,KAAA,CAAA6B,aAAA,CAACzB,IAAI;IAACoB,KAAK,EAAE;MAAEW,KAAK,EAAEV,OAAO,CAACD,KAAK,CAACY,MAAM,CAACC,IAAI;MAAEC,QAAQ,EAAE,EAAE;MAAEC,UAAU,EAAE;IAAG;EAAE,GAAC,MAAI,CAAO,CAC3E,CACd,eACPvC,KAAA,CAAA6B,aAAA,CAACvB,IAAI;IAACkB,KAAK,EAAE;MAAEgB,QAAQ,EAAE;IAAE;EAAE,EAAG,CACrB,eACbxC,KAAA,CAAA6B,aAAA,CAACvB,IAAI;IAACkB,KAAK,EAAE,CAACb,uBAAuB,EAAEa,KAAK;EAAE,GAAED,IAAI,CAAQ,CAE/D,CACsB;AAE7B,CAAC"}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { SafeAreaView, ScrollView, View } from 'react-native';
+import { MenuTitle } from './MenuTitle';
+/**
+ * The default style for the scrollable menu.
+ */
+export const DEFAULT_SCROLLABLE_MENU_STYLE = {
+  flex: 1,
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  paddingRight: 10
+};
+
+/**
+ * A menu component that provides a ScrollView for menu items for the `react-native-theoplayer` UI.
+ * @param props
+ * @constructor
+ */
+export const ScrollableMenu = props => {
+  const {
+    title,
+    items
+  } = props;
+  return /*#__PURE__*/React.createElement(SafeAreaView, {
+    style: DEFAULT_SCROLLABLE_MENU_STYLE
+  }, /*#__PURE__*/React.createElement(MenuTitle, {
+    label: title
+  }), /*#__PURE__*/React.createElement(ScrollView, null, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'column'
+    }
+  }, items)));
+};
+//# sourceMappingURL=ScrollableMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","SafeAreaView","ScrollView","View","MenuTitle","DEFAULT_SCROLLABLE_MENU_STYLE","flex","left","right","top","bottom","paddingRight","ScrollableMenu","props","title","items","createElement","style","label","flexDirection"],"sources":["ScrollableMenu.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { SafeAreaView, ScrollView, View, ViewStyle } from 'react-native';\nimport { MenuTitle } from './MenuTitle';\n\ninterface ScrollableMenuProps {\n  /**\n   * The title of the scrollable menu.\n   */\n  title: string;\n  /**\n   * The items to be put in the scrollable menu.\n   */\n  items?: ReactNode;\n}\n\n/**\n * The default style for the scrollable menu.\n */\nexport const DEFAULT_SCROLLABLE_MENU_STYLE: ViewStyle = {\n  flex: 1,\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  paddingRight: 10,\n};\n\n/**\n * A menu component that provides a ScrollView for menu items for the `react-native-theoplayer` UI.\n * @param props\n * @constructor\n */\nexport const ScrollableMenu = (props: ScrollableMenuProps) => {\n  const { title, items } = props;\n  return (\n    <SafeAreaView style={DEFAULT_SCROLLABLE_MENU_STYLE}>\n      <MenuTitle label={title} />\n      <ScrollView>\n        <View style={{ flexDirection: 'column' }}>{items}</View>\n      </ScrollView>\n    </SafeAreaView>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAqB,OAAO;AACxC,SAASC,YAAY,EAAEC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AACxE,SAASC,SAAS,QAAQ,aAAa;AAavC;AACA;AACA;AACA,OAAO,MAAMC,6BAAwC,GAAG;EACtDC,IAAI,EAAE,CAAC;EACPC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,GAAG,EAAE,CAAC;EACNC,MAAM,EAAE,CAAC;EACTC,YAAY,EAAE;AAChB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAIC,KAA0B,IAAK;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAC9B,oBACEb,KAAA,CAAAgB,aAAA,CAACf,YAAY;IAACgB,KAAK,EAAEZ;EAA8B,gBACjDL,KAAA,CAAAgB,aAAA,CAACZ,SAAS;IAACc,KAAK,EAAEJ;EAAM,EAAG,eAC3Bd,KAAA,CAAAgB,aAAA,CAACd,UAAU,qBACTF,KAAA,CAAAgB,aAAA,CAACb,IAAI;IAACc,KAAK,EAAE;MAAEE,aAAa,EAAE;IAAS;EAAE,GAAEJ,KAAK,CAAQ,CAC7C,CACA;AAEnB,CAAC"}

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

@@ -0,0 +1,56 @@
+import { PlayerContext } from '../../util/PlayerContext';
+import { Text, TouchableOpacity, View } from 'react-native';
+import React, { useContext } from 'react';
+import { ArrowForwardSvg } from '../../button/svg/ArrowForwardSvg';
+import { DEFAULT_MENU_BUTTON_STYLE } from './MenuRadioButton';
+import { ActionButton } from '../../button/actionbutton/ActionButton';
+/**
+ * A component that can be put inside a SettingsMenuButton to create a sub menu.
+ */
+export const SubMenuWithButton = props => {
+  const {
+    style,
+    textStyle,
+    menuConstructor,
+    label,
+    preview
+  } = props;
+  const context = useContext(PlayerContext);
+  const onTouch = () => {
+    if (menuConstructor) {
+      context.ui.openMenu_(menuConstructor);
+    }
+  };
+  return /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(View, {
+    style: [{
+      height: 44,
+      flexDirection: 'row',
+      width: '100%',
+      justifyContent: 'center'
+    }, style]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [DEFAULT_MENU_BUTTON_STYLE, {
+      color: context.style.colors.text,
+      width: '30%'
+    }, textStyle]
+  }, label), /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row',
+      width: '40%',
+      justifyContent: 'flex-end'
+    }
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: {
+      flexDirection: 'row'
+    },
+    onPress: onTouch
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [DEFAULT_MENU_BUTTON_STYLE, {
+      color: context.style.colors.text
+    }, textStyle]
+  }, preview), /*#__PURE__*/React.createElement(ActionButton, {
+    touchable: false,
+    svg: /*#__PURE__*/React.createElement(ArrowForwardSvg, null)
+  })))));
+};
+//# sourceMappingURL=SubMenuWithButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["PlayerContext","Text","TouchableOpacity","View","React","useContext","ArrowForwardSvg","DEFAULT_MENU_BUTTON_STYLE","ActionButton","SubMenuWithButton","props","style","textStyle","menuConstructor","label","preview","context","onTouch","ui","openMenu_","createElement","Consumer","height","flexDirection","width","justifyContent","color","colors","text","onPress","touchable","svg"],"sources":["SubMenuWithButton.tsx"],"sourcesContent":["import { PlayerContext, UiContext } from '../../util/PlayerContext';\nimport { StyleProp, Text, TextStyle, TouchableOpacity, View, ViewStyle } from 'react-native';\nimport React, { useContext } from 'react';\nimport { ArrowForwardSvg } from '../../button/svg/ArrowForwardSvg';\nimport type { MenuConstructor } from '../../uicontroller/UiControls';\nimport { DEFAULT_MENU_BUTTON_STYLE } from './MenuRadioButton';\nimport { ActionButton } from '../../button/actionbutton/ActionButton';\n\nexport interface SubMenuButtonProps {\n  /**\n   * The style overrides.\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * The style overrides for the text components.\n   */\n  textStyle?: StyleProp<TextStyle>;\n  /**\n   * The sub menu that will be opened.\n   */\n  menuConstructor: MenuConstructor;\n  /**\n   * The label for the sub menu button.\n   */\n  label: string;\n  /**\n   * A preview for the currently selected value before opening the sub menu.\n   */\n  preview: string;\n}\n\n/**\n * A component that can be put inside a SettingsMenuButton to create a sub menu.\n */\nexport const SubMenuWithButton = (props: SubMenuButtonProps) => {\n  const { style, textStyle, menuConstructor, label, preview } = props;\n  const context = useContext(PlayerContext);\n  const onTouch = () => {\n    if (menuConstructor) {\n      context.ui.openMenu_(menuConstructor);\n    }\n  };\n  return (\n    <PlayerContext.Consumer>\n      {(context: UiContext) => (\n        <View style={[{ height: 44, flexDirection: 'row', width: '100%', justifyContent: 'center' }, style]}>\n          <Text style={[DEFAULT_MENU_BUTTON_STYLE, { color: context.style.colors.text, width: '30%' }, textStyle]}>{label}</Text>\n          <View style={{ flexDirection: 'row', width: '40%', justifyContent: 'flex-end' }}>\n            <TouchableOpacity style={{ flexDirection: 'row' }} onPress={onTouch}>\n              <Text style={[DEFAULT_MENU_BUTTON_STYLE, { color: context.style.colors.text }, textStyle]}>{preview}</Text>\n              <ActionButton touchable={false} svg={<ArrowForwardSvg />} />\n            </TouchableOpacity>\n          </View>\n        </View>\n      )}\n    </PlayerContext.Consumer>\n  );\n};\n"],"mappings":"AAAA,SAASA,aAAa,QAAmB,0BAA0B;AACnE,SAAoBC,IAAI,EAAaC,gBAAgB,EAAEC,IAAI,QAAmB,cAAc;AAC5F,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,yBAAyB,QAAQ,mBAAmB;AAC7D,SAASC,YAAY,QAAQ,wCAAwC;AAyBrE;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAIC,KAAyB,IAAK;EAC9D,MAAM;IAAEC,KAAK;IAAEC,SAAS;IAAEC,eAAe;IAAEC,KAAK;IAAEC;EAAQ,CAAC,GAAGL,KAAK;EACnE,MAAMM,OAAO,GAAGX,UAAU,CAACL,aAAa,CAAC;EACzC,MAAMiB,OAAO,GAAGA,CAAA,KAAM;IACpB,IAAIJ,eAAe,EAAE;MACnBG,OAAO,CAACE,EAAE,CAACC,SAAS,CAACN,eAAe,CAAC;IACvC;EACF,CAAC;EACD,oBACET,KAAA,CAAAgB,aAAA,CAACpB,aAAa,CAACqB,QAAQ,QACnBL,OAAkB,iBAClBZ,KAAA,CAAAgB,aAAA,CAACjB,IAAI;IAACQ,KAAK,EAAE,CAAC;MAAEW,MAAM,EAAE,EAAE;MAAEC,aAAa,EAAE,KAAK;MAAEC,KAAK,EAAE,MAAM;MAAEC,cAAc,EAAE;IAAS,CAAC,EAAEd,KAAK;EAAE,gBAClGP,KAAA,CAAAgB,aAAA,CAACnB,IAAI;IAACU,KAAK,EAAE,CAACJ,yBAAyB,EAAE;MAAEmB,KAAK,EAAEV,OAAO,CAACL,KAAK,CAACgB,MAAM,CAACC,IAAI;MAAEJ,KAAK,EAAE;IAAM,CAAC,EAAEZ,SAAS;EAAE,GAAEE,KAAK,CAAQ,eACvHV,KAAA,CAAAgB,aAAA,CAACjB,IAAI;IAACQ,KAAK,EAAE;MAAEY,aAAa,EAAE,KAAK;MAAEC,KAAK,EAAE,KAAK;MAAEC,cAAc,EAAE;IAAW;EAAE,gBAC9ErB,KAAA,CAAAgB,aAAA,CAAClB,gBAAgB;IAACS,KAAK,EAAE;MAAEY,aAAa,EAAE;IAAM,CAAE;IAACM,OAAO,EAAEZ;EAAQ,gBAClEb,KAAA,CAAAgB,aAAA,CAACnB,IAAI;IAACU,KAAK,EAAE,CAACJ,yBAAyB,EAAE;MAAEmB,KAAK,EAAEV,OAAO,CAACL,KAAK,CAACgB,MAAM,CAACC;IAAK,CAAC,EAAEhB,SAAS;EAAE,GAAEG,OAAO,CAAQ,eAC3GX,KAAA,CAAAgB,aAAA,CAACZ,YAAY;IAACsB,SAAS,EAAE,KAAM;IAACC,GAAG,eAAE3B,KAAA,CAAAgB,aAAA,CAACd,eAAe;EAAI,EAAG,CAC3C,CACd,CAEV,CACsB;AAE7B,CAAC"}

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

@@ -0,0 +1,7 @@
+export * from './MenuButton';
+export * from './MenuTitle';
+export * from './MenuView';
+export * from './MenuRadioButton';
+export * from './ScrollableMenu';
+export * from './SubMenuWithButton';
+//# sourceMappingURL=barrel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["barrel.ts"],"sourcesContent":["export * from './MenuButton';\nexport * from './MenuTitle';\nexport * from './MenuView';\nexport * from './MenuRadioButton';\nexport * from './ScrollableMenu';\nexport * from './SubMenuWithButton';\n"],"mappings":"AAAA,cAAc,cAAc;AAC5B,cAAc,aAAa;AAC3B,cAAc,YAAY;AAC1B,cAAc,mBAAmB;AACjC,cAAc,kBAAkB;AAChC,cAAc,qBAAqB"}

package/lib/module/ui/components/message/CastMessage.js

@@ -0,0 +1,70 @@
+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 { CastEventType, PlayerEventType } from 'react-native-theoplayer';
+import { Text } from 'react-native';
+import { PlayerContext } from '../util/PlayerContext';
+/**
+ * A simple cast message showing the current state of casting for the `react-native-theoplayer` UI.
+ */
+export class CastMessage extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "_processCastState", (state, target) => {
+      let message;
+      switch (state) {
+        case 'connecting':
+          message = `Connecting to ${target} ...`;
+          break;
+        case 'connected':
+          message = `Playing on ${target}`;
+          break;
+      }
+      this.setState({
+        message
+      });
+    });
+    _defineProperty(this, "onCastEvent", event => {
+      if (event.subType !== CastEventType.CHROMECAST_STATE_CHANGE && event.subType !== CastEventType.AIRPLAY_STATE_CHANGE) {
+        return;
+      }
+      const castTarget = event.subType === CastEventType.CHROMECAST_STATE_CHANGE ? 'Chromecast' : 'Airplay';
+      this._processCastState(event.state, castTarget);
+    });
+    this.state = {
+      message: undefined
+    };
+  }
+  componentDidMount() {
+    var _player$cast$chromeca, _player$cast$airplay;
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);
+    const chromecastState = (_player$cast$chromeca = player.cast.chromecast) === null || _player$cast$chromeca === void 0 ? void 0 : _player$cast$chromeca.state;
+    const airplayState = (_player$cast$airplay = player.cast.airplay) === null || _player$cast$airplay === void 0 ? void 0 : _player$cast$airplay.state;
+    if (chromecastState === 'connecting' || chromecastState === 'connected') {
+      this._processCastState(chromecastState, 'Chromecast');
+    } else if (airplayState === 'connecting' || airplayState === 'connected') {
+      this._processCastState(airplayState, 'Airplay');
+    }
+  }
+  componentWillUnmount() {
+    const context = this.context;
+    context.player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);
+  }
+  render() {
+    const {
+      message
+    } = this.state;
+    if (!message) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+    }
+    return /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(Text, {
+      style: [context.style.text, {
+        color: context.style.colors.text
+      }]
+    }, message));
+  }
+}
+CastMessage.contextType = PlayerContext;
+//# sourceMappingURL=CastMessage.js.map

package/lib/module/ui/components/message/CastMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PureComponent","CastEventType","PlayerEventType","Text","PlayerContext","CastMessage","constructor","props","_defineProperty","state","target","message","setState","event","subType","CHROMECAST_STATE_CHANGE","AIRPLAY_STATE_CHANGE","castTarget","_processCastState","undefined","componentDidMount","_player$cast$chromeca","_player$cast$airplay","player","context","addEventListener","CAST_EVENT","onCastEvent","chromecastState","cast","chromecast","airplayState","airplay","componentWillUnmount","removeEventListener","render","createElement","Fragment","Consumer","style","text","color","colors","contextType"],"sources":["CastMessage.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { CastEvent, CastEventType, CastState, PlayerEventType } from 'react-native-theoplayer';\nimport { Text } from 'react-native';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\n\ninterface CastMessageState {\n  message: string | undefined;\n}\n\n/**\n * A simple cast message showing the current state of casting for the `react-native-theoplayer` UI.\n */\nexport class CastMessage extends PureComponent<unknown, CastMessageState> {\n  constructor(props: unknown) {\n    super(props);\n    this.state = { message: undefined };\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);\n    const chromecastState = player.cast.chromecast?.state;\n    const airplayState = player.cast.airplay?.state;\n    if (chromecastState === 'connecting' || chromecastState === 'connected') {\n      this._processCastState(chromecastState, 'Chromecast');\n    } else if (airplayState === 'connecting' || airplayState === 'connected') {\n      this._processCastState(airplayState, 'Airplay');\n    }\n  }\n\n  componentWillUnmount() {\n    const context = this.context as UiContext;\n    context.player.removeEventListener(PlayerEventType.CAST_EVENT, this.onCastEvent);\n  }\n\n  private _processCastState = (state: CastState, target: 'Chromecast' | 'Airplay') => {\n    let message: string | undefined;\n    switch (state) {\n      case 'connecting':\n        message = `Connecting to ${target} ...`;\n        break;\n      case 'connected':\n        message = `Playing on ${target}`;\n        break;\n    }\n    this.setState({\n      message,\n    });\n  };\n\n  private onCastEvent = (event: CastEvent) => {\n    if (event.subType !== CastEventType.CHROMECAST_STATE_CHANGE && event.subType !== CastEventType.AIRPLAY_STATE_CHANGE) {\n      return;\n    }\n    const castTarget = event.subType === CastEventType.CHROMECAST_STATE_CHANGE ? 'Chromecast' : 'Airplay';\n    this._processCastState(event.state, castTarget);\n  };\n\n  render() {\n    const { message } = this.state;\n\n    if (!message) {\n      return <></>;\n    }\n\n    return (\n      <PlayerContext.Consumer>\n        {(context: UiContext) => <Text style={[context.style.text, { color: context.style.colors.text }]}>{message}</Text>}\n      </PlayerContext.Consumer>\n    );\n  }\n}\n\nCastMessage.contextType = PlayerContext;\n"],"mappings":"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"}

package/lib/module/ui/components/message/ErrorDisplay.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { PlayerContext } from '../util/PlayerContext';
+import { SvgContext } from '../button/svg/SvgUtils';
+import { ErrorSvg } from '../button/svg/ErrorSvg';
+import { FULLSCREEN_CENTER_STYLE } from '../uicontroller/UiContainer';
+/**
+ * A fullscreen error component for the `react-native-theoplayer` UI.
+ */
+export function ErrorDisplay(props) {
+  const {
+    error
+  } = props;
+  return /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(View, {
+    style: [FULLSCREEN_CENTER_STYLE, {
+      backgroundColor: context.style.colors.errorBackground
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/React.createElement(SvgContext.Provider, {
+    value: {
+      fill: context.style.colors.icon,
+      height: '100%',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: context.style.dimensions.controlBarHeight,
+      aspectRatio: 1,
+      padding: 5
+    }
+  }, /*#__PURE__*/React.createElement(ErrorSvg, null))), /*#__PURE__*/React.createElement(Text, {
+    style: [context.style.text, {
+      color: context.style.colors.text,
+      alignSelf: 'center',
+      paddingLeft: 5
+    }]
+  }, "Error:")), /*#__PURE__*/React.createElement(Text, {
+    style: [context.style.text, {
+      color: context.style.colors.text
+    }]
+  }, error.errorMessage)));
+}
+//# sourceMappingURL=ErrorDisplay.js.map

package/lib/module/ui/components/message/ErrorDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","View","PlayerContext","SvgContext","ErrorSvg","FULLSCREEN_CENTER_STYLE","ErrorDisplay","props","error","createElement","Consumer","context","style","backgroundColor","colors","errorBackground","flexDirection","Provider","value","fill","icon","height","width","dimensions","controlBarHeight","aspectRatio","padding","text","color","alignSelf","paddingLeft","errorMessage"],"sources":["ErrorDisplay.tsx"],"sourcesContent":["import React from 'react';\nimport { Text, View } from 'react-native';\nimport type { PlayerError } from 'react-native-theoplayer';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport { SvgContext } from '../button/svg/SvgUtils';\nimport { ErrorSvg } from '../button/svg/ErrorSvg';\nimport { FULLSCREEN_CENTER_STYLE } from '../uicontroller/UiContainer';\n\nexport interface ErrorDisplayProps {\n  /**\n   * The error that will be displayed.\n   */\n  error: PlayerError;\n}\n\n/**\n * A fullscreen error component for the `react-native-theoplayer` UI.\n */\nexport function ErrorDisplay(props: ErrorDisplayProps) {\n  const { error } = props;\n  return (\n    <PlayerContext.Consumer>\n      {(context: UiContext) => (\n        <View style={[FULLSCREEN_CENTER_STYLE, { backgroundColor: context.style.colors.errorBackground }]}>\n          <View style={{ flexDirection: 'row' }}>\n            <SvgContext.Provider\n              value={{\n                fill: context.style.colors.icon,\n                height: '100%',\n                width: '100%',\n              }}>\n              <View style={{ height: context.style.dimensions.controlBarHeight, aspectRatio: 1, padding: 5 }}>\n                <ErrorSvg />\n              </View>\n            </SvgContext.Provider>\n            <Text style={[context.style.text, { color: context.style.colors.text, alignSelf: 'center', paddingLeft: 5 }]}>Error:</Text>\n          </View>\n          <Text style={[context.style.text, { color: context.style.colors.text }]}>{error.errorMessage}</Text>\n        </View>\n      )}\n    </PlayerContext.Consumer>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AAEzC,SAASC,aAAa,QAAmB,uBAAuB;AAChE,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,uBAAuB,QAAQ,6BAA6B;AASrE;AACA;AACA;AACA,OAAO,SAASC,YAAYA,CAACC,KAAwB,EAAE;EACrD,MAAM;IAAEC;EAAM,CAAC,GAAGD,KAAK;EACvB,oBACER,KAAA,CAAAU,aAAA,CAACP,aAAa,CAACQ,QAAQ,QACnBC,OAAkB,iBAClBZ,KAAA,CAAAU,aAAA,CAACR,IAAI;IAACW,KAAK,EAAE,CAACP,uBAAuB,EAAE;MAAEQ,eAAe,EAAEF,OAAO,CAACC,KAAK,CAACE,MAAM,CAACC;IAAgB,CAAC;EAAE,gBAChGhB,KAAA,CAAAU,aAAA,CAACR,IAAI;IAACW,KAAK,EAAE;MAAEI,aAAa,EAAE;IAAM;EAAE,gBACpCjB,KAAA,CAAAU,aAAA,CAACN,UAAU,CAACc,QAAQ;IAClBC,KAAK,EAAE;MACLC,IAAI,EAAER,OAAO,CAACC,KAAK,CAACE,MAAM,CAACM,IAAI;MAC/BC,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE;IACT;EAAE,gBACFvB,KAAA,CAAAU,aAAA,CAACR,IAAI;IAACW,KAAK,EAAE;MAAES,MAAM,EAAEV,OAAO,CAACC,KAAK,CAACW,UAAU,CAACC,gBAAgB;MAAEC,WAAW,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE;EAAE,gBAC7F3B,KAAA,CAAAU,aAAA,CAACL,QAAQ,OAAG,CACP,CACa,eACtBL,KAAA,CAAAU,aAAA,CAACT,IAAI;IAACY,KAAK,EAAE,CAACD,OAAO,CAACC,KAAK,CAACe,IAAI,EAAE;MAAEC,KAAK,EAAEjB,OAAO,CAACC,KAAK,CAACE,MAAM,CAACa,IAAI;MAAEE,SAAS,EAAE,QAAQ;MAAEC,WAAW,EAAE;IAAE,CAAC;EAAE,GAAC,QAAM,CAAO,CACtH,eACP/B,KAAA,CAAAU,aAAA,CAACT,IAAI;IAACY,KAAK,EAAE,CAACD,OAAO,CAACC,KAAK,CAACe,IAAI,EAAE;MAAEC,KAAK,EAAEjB,OAAO,CAACC,KAAK,CAACE,MAAM,CAACa;IAAK,CAAC;EAAE,GAAEnB,KAAK,CAACuB,YAAY,CAAQ,CAEvG,CACsB;AAE7B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["barrel.ts"],"sourcesContent":["export * from './CastMessage';\nexport * from './ErrorDisplay';\n"],"mappings":"AAAA,cAAc,eAAe;AAC7B,cAAc,gBAAgB"}

package/lib/module/ui/components/seekbar/SeekBar.js

@@ -0,0 +1,184 @@
+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 { StyleSheet, View } from 'react-native';
+import { PlayerEventType } from 'react-native-theoplayer';
+import { PlayerContext } from '../util/PlayerContext';
+import Slider from '@react-native-community/slider';
+import { SingleThumbnailView } from './thumbnail/SingleThumbnailView';
+/**
+ * The default seek bar component for the `react-native-theoplayer` UI.
+ */
+export class SeekBar extends PureComponent {
+  constructor(props) {
+    var _this;
+    super(props);
+    _this = this;
+    _defineProperty(this, "_seekBlockingTimeout", void 0);
+    _defineProperty(this, "_clearIsScrubbingTimout", void 0);
+    _defineProperty(this, "_onTimeUpdate", event => {
+      if (!this.state.ignoreTimeupdate) {
+        this.setState({
+          sliderTime: event.currentTime
+        });
+      }
+    });
+    _defineProperty(this, "_onLoadedMetadata", event => this.setState({
+      duration: event.duration
+    }));
+    _defineProperty(this, "_onDurationChange", event => this.setState({
+      duration: event.duration
+    }));
+    _defineProperty(this, "_onProgress", event => this.setState({
+      seekable: event.seekable
+    }));
+    _defineProperty(this, "_onSlidingStart", value => {
+      this.setState({
+        sliderTime: value
+      });
+      this._prepareSeekStart();
+      const player = this.context.player;
+      if (!player.paused) {
+        this.debounceSeek(value);
+        player.pause();
+        this.setState({
+          pausedDueToScrubbing: true
+        });
+      }
+    });
+    _defineProperty(this, "_onValueChange", value => {
+      this.setState({
+        sliderTime: value
+      });
+      if (this.state.ignoreTimeupdate) {
+        this.debounceSeek(value);
+      }
+    });
+    _defineProperty(this, "_onSlidingComplete", value => {
+      this.setState({
+        sliderTime: value
+      });
+      this.debounceSeek(value, true);
+      const player = this.context.player;
+      const isEnded = player.currentTime === player.duration;
+      if (this.state.pausedDueToScrubbing && !isEnded) {
+        player.play();
+        this.setState({
+          pausedDueToScrubbing: false
+        });
+      }
+      this._finishSeek();
+    });
+    _defineProperty(this, "_prepareSeekStart", () => {
+      this.setState({
+        isSeeking: true,
+        ignoreTimeupdate: true
+      });
+      clearTimeout(this._clearIsScrubbingTimout);
+    });
+    _defineProperty(this, "_finishSeek", () => {
+      this.setState({
+        isSeeking: false
+      });
+      // Wait for timeupdate events to settle after seeking, so the Slider does not jump back and forth.
+      this._clearIsScrubbingTimout = setTimeout(() => {
+        this.setState({
+          ignoreTimeupdate: false
+        });
+      }, 1000);
+    });
+    _defineProperty(this, "debounceSeek", function (value) {
+      let force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      // Don't bombard the player with seeks when seeking. Allow only one seek ever X milliseconds:
+      const MAX_SEEK_INTERVAL = 200;
+      if (force || _this._seekBlockingTimeout === undefined) {
+        if (force) {
+          clearTimeout(_this._seekBlockingTimeout);
+          _this._seekBlockingTimeout = undefined;
+        }
+        _this._seekBlockingTimeout = setTimeout(() => {
+          _this._seekBlockingTimeout = undefined;
+        }, MAX_SEEK_INTERVAL);
+        // Do seek
+        const player = _this.context.player;
+        player.currentTime = value;
+      }
+    });
+    this.state = SeekBar.initialState;
+  }
+  componentDidMount() {
+    const player = this.context.player;
+    player.addEventListener(PlayerEventType.LOADED_METADATA, this._onLoadedMetadata);
+    player.addEventListener(PlayerEventType.DURATION_CHANGE, this._onDurationChange);
+    player.addEventListener(PlayerEventType.TIME_UPDATE, this._onTimeUpdate);
+    player.addEventListener(PlayerEventType.PROGRESS, this._onProgress);
+    this.setState({
+      ...SeekBar.initialState,
+      sliderTime: player.currentTime,
+      duration: player.duration,
+      seekable: player.seekable
+    });
+  }
+  componentWillUnmount() {
+    const context = this.context;
+    context.player.removeEventListener(PlayerEventType.LOADED_METADATA, this._onLoadedMetadata);
+    context.player.removeEventListener(PlayerEventType.DURATION_CHANGE, this._onDurationChange);
+    context.player.removeEventListener(PlayerEventType.TIME_UPDATE, this._onTimeUpdate);
+    context.player.removeEventListener(PlayerEventType.PROGRESS, this._onProgress);
+    clearTimeout(this._seekBlockingTimeout);
+    clearTimeout(this._clearIsScrubbingTimout);
+  }
+  render() {
+    const {
+      seekable,
+      sliderTime,
+      duration,
+      isSeeking,
+      width
+    } = this.state;
+    const {
+      style
+    } = this.props;
+    const seekableStart = seekable.length > 0 ? seekable[0].start : 0;
+    const seekableEnd = seekable.length > 0 ? seekable[0].end : 0;
+    return /*#__PURE__*/React.createElement(PlayerContext.Consumer, null, context => /*#__PURE__*/React.createElement(View, {
+      style: [StyleSheet.absoluteFill, style],
+      onLayout: event => {
+        this.setState({
+          width: event.nativeEvent.layout.width
+        });
+      }
+    }, isSeeking && /*#__PURE__*/React.createElement(SingleThumbnailView, {
+      seekableStart: seekableStart,
+      seekableEnd: seekableEnd,
+      currentTime: sliderTime,
+      seekBarWidth: width
+    }), /*#__PURE__*/React.createElement(Slider, {
+      disabled: !(duration > 0) && seekable.length > 0,
+      style: [StyleSheet.absoluteFill, style],
+      minimumValue: seekableStart,
+      maximumValue: seekableEnd,
+      step: 1000,
+      onSlidingStart: this._onSlidingStart,
+      onValueChange: this._onValueChange,
+      onSlidingComplete: this._onSlidingComplete,
+      value: sliderTime,
+      focusable: true,
+      minimumTrackTintColor: context.style.colors.seekBarMinimum,
+      maximumTrackTintColor: context.style.colors.seekBarMaximum,
+      thumbTintColor: context.style.colors.seekBarDot
+    })));
+  }
+}
+_defineProperty(SeekBar, "initialState", {
+  ignoreTimeupdate: false,
+  isSeeking: false,
+  sliderTime: 0,
+  duration: 0,
+  seekable: [],
+  pausedDueToScrubbing: false,
+  width: 0
+});
+SeekBar.contextType = PlayerContext;
+//# sourceMappingURL=SeekBar.js.map

package/lib/module/ui/components/seekbar/SeekBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","PureComponent","StyleSheet","View","PlayerEventType","PlayerContext","Slider","SingleThumbnailView","SeekBar","constructor","props","_this","this","_defineProperty","event","state","ignoreTimeupdate","setState","sliderTime","currentTime","duration","seekable","value","_prepareSeekStart","player","context","paused","debounceSeek","pause","pausedDueToScrubbing","isEnded","play","_finishSeek","isSeeking","clearTimeout","_clearIsScrubbingTimout","setTimeout","force","arguments","length","undefined","MAX_SEEK_INTERVAL","_seekBlockingTimeout","initialState","componentDidMount","addEventListener","LOADED_METADATA","_onLoadedMetadata","DURATION_CHANGE","_onDurationChange","TIME_UPDATE","_onTimeUpdate","PROGRESS","_onProgress","componentWillUnmount","removeEventListener","render","width","style","seekableStart","start","seekableEnd","end","createElement","Consumer","absoluteFill","onLayout","nativeEvent","layout","seekBarWidth","disabled","minimumValue","maximumValue","step","onSlidingStart","_onSlidingStart","onValueChange","_onValueChange","onSlidingComplete","_onSlidingComplete","focusable","minimumTrackTintColor","colors","seekBarMinimum","maximumTrackTintColor","seekBarMaximum","thumbTintColor","seekBarDot","contextType"],"sources":["SeekBar.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport { DurationChangeEvent, LoadedMetadataEvent, PlayerEventType, ProgressEvent, TimeRange, TimeUpdateEvent } from 'react-native-theoplayer';\nimport { PlayerContext, UiContext } from '../util/PlayerContext';\nimport Slider from '@react-native-community/slider';\nimport { SingleThumbnailView } from './thumbnail/SingleThumbnailView';\n\nexport interface SeekBarProps {\n  /**\n   * Optional style applied to the SeekBar.\n   */\n  style?: StyleProp<ViewStyle>;\n}\n\ninterface SeekBarState {\n  ignoreTimeupdate: boolean;\n  isSeeking: boolean;\n  pausedDueToScrubbing: boolean;\n  seekable: TimeRange[];\n  duration: number;\n  sliderTime: number;\n  width: number;\n}\n\n/**\n * The default seek bar component for the `react-native-theoplayer` UI.\n */\nexport class SeekBar extends PureComponent<SeekBarProps, SeekBarState> {\n  private static initialState: SeekBarState = {\n    ignoreTimeupdate: false,\n    isSeeking: false,\n    sliderTime: 0,\n    duration: 0,\n    seekable: [],\n    pausedDueToScrubbing: false,\n    width: 0,\n  };\n\n  private _seekBlockingTimeout: NodeJS.Timeout | undefined;\n  private _clearIsScrubbingTimout: NodeJS.Timeout | undefined;\n\n  constructor(props: SeekBarProps) {\n    super(props);\n    this.state = SeekBar.initialState;\n  }\n\n  componentDidMount() {\n    const player = (this.context as UiContext).player;\n    player.addEventListener(PlayerEventType.LOADED_METADATA, this._onLoadedMetadata);\n    player.addEventListener(PlayerEventType.DURATION_CHANGE, this._onDurationChange);\n    player.addEventListener(PlayerEventType.TIME_UPDATE, this._onTimeUpdate);\n    player.addEventListener(PlayerEventType.PROGRESS, this._onProgress);\n    this.setState({\n      ...SeekBar.initialState,\n      sliderTime: player.currentTime,\n      duration: player.duration,\n      seekable: player.seekable,\n    });\n  }\n\n  componentWillUnmount() {\n    const context = this.context as UiContext;\n    context.player.removeEventListener(PlayerEventType.LOADED_METADATA, this._onLoadedMetadata);\n    context.player.removeEventListener(PlayerEventType.DURATION_CHANGE, this._onDurationChange);\n    context.player.removeEventListener(PlayerEventType.TIME_UPDATE, this._onTimeUpdate);\n    context.player.removeEventListener(PlayerEventType.PROGRESS, this._onProgress);\n    clearTimeout(this._seekBlockingTimeout);\n    clearTimeout(this._clearIsScrubbingTimout);\n  }\n\n  private _onTimeUpdate = (event: TimeUpdateEvent) => {\n    if (!this.state.ignoreTimeupdate) {\n      this.setState({ sliderTime: event.currentTime });\n    }\n  };\n  private _onLoadedMetadata = (event: LoadedMetadataEvent) => this.setState({ duration: event.duration });\n  private _onDurationChange = (event: DurationChangeEvent) => this.setState({ duration: event.duration });\n  private _onProgress = (event: ProgressEvent) => this.setState({ seekable: event.seekable });\n\n  private _onSlidingStart = (value: number) => {\n    this.setState({ sliderTime: value });\n    this._prepareSeekStart();\n    const player = (this.context as UiContext).player;\n    if (!player.paused) {\n      this.debounceSeek(value);\n      player.pause();\n      this.setState({ pausedDueToScrubbing: true });\n    }\n  };\n\n  private _onValueChange = (value: number) => {\n    this.setState({ sliderTime: value });\n    if (this.state.ignoreTimeupdate) {\n      this.debounceSeek(value);\n    }\n  };\n\n  private _onSlidingComplete = (value: number) => {\n    this.setState({ sliderTime: value });\n    this.debounceSeek(value, true);\n    const player = (this.context as UiContext).player;\n    const isEnded = player.currentTime === player.duration;\n    if (this.state.pausedDueToScrubbing && !isEnded) {\n      player.play();\n      this.setState({ pausedDueToScrubbing: false });\n    }\n    this._finishSeek();\n  };\n\n  private readonly _prepareSeekStart = () => {\n    this.setState({ isSeeking: true, ignoreTimeupdate: true });\n    clearTimeout(this._clearIsScrubbingTimout);\n  };\n\n  private readonly _finishSeek = () => {\n    this.setState({ isSeeking: false });\n    // Wait for timeupdate events to settle after seeking, so the Slider does not jump back and forth.\n    this._clearIsScrubbingTimout = setTimeout(() => {\n      this.setState({ ignoreTimeupdate: false });\n    }, 1000);\n  };\n\n  private debounceSeek = (value: number, force = false) => {\n    // Don't bombard the player with seeks when seeking. Allow only one seek ever X milliseconds:\n    const MAX_SEEK_INTERVAL = 200;\n    if (force || this._seekBlockingTimeout === undefined) {\n      if (force) {\n        clearTimeout(this._seekBlockingTimeout);\n        this._seekBlockingTimeout = undefined;\n      }\n      this._seekBlockingTimeout = setTimeout(() => {\n        this._seekBlockingTimeout = undefined;\n      }, MAX_SEEK_INTERVAL);\n      // Do seek\n      const player = (this.context as UiContext).player;\n      player.currentTime = value;\n    }\n  };\n\n  render() {\n    const { seekable, sliderTime, duration, isSeeking, width } = this.state;\n    const { style } = this.props;\n    const seekableStart = seekable.length > 0 ? seekable[0].start : 0;\n    const seekableEnd = seekable.length > 0 ? seekable[0].end : 0;\n    return (\n      <PlayerContext.Consumer>\n        {(context: UiContext) => (\n          <View\n            style={[StyleSheet.absoluteFill, style]}\n            onLayout={(event: LayoutChangeEvent) => {\n              this.setState({ width: event.nativeEvent.layout.width });\n            }}>\n            {isSeeking && (\n              <SingleThumbnailView seekableStart={seekableStart} seekableEnd={seekableEnd} currentTime={sliderTime} seekBarWidth={width} />\n            )}\n            <Slider\n              disabled={!(duration > 0) && seekable.length > 0}\n              style={[StyleSheet.absoluteFill, style]}\n              minimumValue={seekableStart}\n              maximumValue={seekableEnd}\n              step={1000}\n              onSlidingStart={this._onSlidingStart}\n              onValueChange={this._onValueChange}\n              onSlidingComplete={this._onSlidingComplete}\n              value={sliderTime}\n              focusable={true}\n              minimumTrackTintColor={context.style.colors.seekBarMinimum}\n              maximumTrackTintColor={context.style.colors.seekBarMaximum}\n              thumbTintColor={context.style.colors.seekBarDot}\n            />\n          </View>\n        )}\n      </PlayerContext.Consumer>\n    );\n  }\n}\n\nSeekBar.contextType = PlayerContext;\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["barrel.ts"],"sourcesContent":["export * from './SeekBar';\nexport * from './thumbnail/barrel';\n"],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,oBAAoB"}

package/lib/module/ui/components/seekbar/thumbnail/SingleThumbnailView.js

@@ -0,0 +1,37 @@
+import { Dimensions, View } from 'react-native';
+import { filterThumbnailTracks } from 'react-native-theoplayer';
+import { PlayerContext } from '../../util/PlayerContext';
+import { ThumbnailView } from './ThumbnailView';
+import React, { useContext } from 'react';
+export function SingleThumbnailView(props) {
+  const player = useContext(PlayerContext).player;
+  const thumbnailTrack = filterThumbnailTracks(player.textTracks);
+  if (!thumbnailTrack) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  const window = Dimensions.get('window');
+  const thumbnailSize = 0.35 * Math.min(window.height, window.width);
+  const {
+    seekableStart,
+    seekableEnd,
+    currentTime,
+    seekBarWidth
+  } = props;
+  const percentageOffset = (currentTime - seekableStart) / (seekableEnd - seekableStart);
+  const marginHorizontal = 10;
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      position: 'absolute',
+      top: -(thumbnailSize * 0.6),
+      left: Math.max(0, Math.min(seekBarWidth - thumbnailSize - marginHorizontal, percentageOffset * seekBarWidth - 0.5 * thumbnailSize)),
+      marginHorizontal
+    }
+  }, /*#__PURE__*/React.createElement(ThumbnailView, {
+    thumbnailTrack: thumbnailTrack,
+    duration: player.duration,
+    time: currentTime,
+    size: thumbnailSize,
+    showTimeLabel: false
+  }));
+}
+//# sourceMappingURL=SingleThumbnailView.js.map

package/lib/module/ui/components/seekbar/thumbnail/SingleThumbnailView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Dimensions","View","filterThumbnailTracks","PlayerContext","ThumbnailView","React","useContext","SingleThumbnailView","props","player","thumbnailTrack","textTracks","createElement","Fragment","window","get","thumbnailSize","Math","min","height","width","seekableStart","seekableEnd","currentTime","seekBarWidth","percentageOffset","marginHorizontal","style","position","top","left","max","duration","time","size","showTimeLabel"],"sources":["SingleThumbnailView.tsx"],"sourcesContent":["import { Dimensions, View } from 'react-native';\nimport { filterThumbnailTracks } from 'react-native-theoplayer';\nimport { PlayerContext } from '../../util/PlayerContext';\nimport { ThumbnailView } from './ThumbnailView';\nimport React, { useContext } from 'react';\n\nexport interface ThumbnailViewProps {\n  seekableStart: number;\n  seekableEnd: number;\n  currentTime: number;\n  seekBarWidth: number;\n}\n\nexport function SingleThumbnailView(props: ThumbnailViewProps) {\n  const player = useContext(PlayerContext).player;\n  const thumbnailTrack = filterThumbnailTracks(player.textTracks);\n  if (!thumbnailTrack) {\n    return <></>;\n  }\n  const window = Dimensions.get('window');\n  const thumbnailSize = 0.35 * Math.min(window.height, window.width);\n\n  const { seekableStart, seekableEnd, currentTime, seekBarWidth } = props;\n  const percentageOffset = (currentTime - seekableStart) / (seekableEnd - seekableStart);\n  const marginHorizontal = 10;\n\n  return (\n    <View\n      style={{\n        position: 'absolute',\n        top: -(thumbnailSize * 0.6),\n        left: Math.max(0, Math.min(seekBarWidth - thumbnailSize - marginHorizontal, percentageOffset * seekBarWidth - 0.5 * thumbnailSize)),\n        marginHorizontal,\n      }}>\n      <ThumbnailView thumbnailTrack={thumbnailTrack} duration={player.duration} time={currentTime} size={thumbnailSize} showTimeLabel={false} />\n    </View>\n  );\n}\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AASzC,OAAO,SAASC,mBAAmBA,CAACC,KAAyB,EAAE;EAC7D,MAAMC,MAAM,GAAGH,UAAU,CAACH,aAAa,CAAC,CAACM,MAAM;EAC/C,MAAMC,cAAc,GAAGR,qBAAqB,CAACO,MAAM,CAACE,UAAU,CAAC;EAC/D,IAAI,CAACD,cAAc,EAAE;IACnB,oBAAOL,KAAA,CAAAO,aAAA,CAAAP,KAAA,CAAAQ,QAAA,OAAK;EACd;EACA,MAAMC,MAAM,GAAGd,UAAU,CAACe,GAAG,CAAC,QAAQ,CAAC;EACvC,MAAMC,aAAa,GAAG,IAAI,GAAGC,IAAI,CAACC,GAAG,CAACJ,MAAM,CAACK,MAAM,EAAEL,MAAM,CAACM,KAAK,CAAC;EAElE,MAAM;IAAEC,aAAa;IAAEC,WAAW;IAAEC,WAAW;IAAEC;EAAa,CAAC,GAAGhB,KAAK;EACvE,MAAMiB,gBAAgB,GAAG,CAACF,WAAW,GAAGF,aAAa,KAAKC,WAAW,GAAGD,aAAa,CAAC;EACtF,MAAMK,gBAAgB,GAAG,EAAE;EAE3B,oBACErB,KAAA,CAAAO,aAAA,CAACX,IAAI;IACH0B,KAAK,EAAE;MACLC,QAAQ,EAAE,UAAU;MACpBC,GAAG,EAAE,EAAEb,aAAa,GAAG,GAAG,CAAC;MAC3Bc,IAAI,EAAEb,IAAI,CAACc,GAAG,CAAC,CAAC,EAAEd,IAAI,CAACC,GAAG,CAACM,YAAY,GAAGR,aAAa,GAAGU,gBAAgB,EAAED,gBAAgB,GAAGD,YAAY,GAAG,GAAG,GAAGR,aAAa,CAAC,CAAC;MACnIU;IACF;EAAE,gBACFrB,KAAA,CAAAO,aAAA,CAACR,aAAa;IAACM,cAAc,EAAEA,cAAe;IAACsB,QAAQ,EAAEvB,MAAM,CAACuB,QAAS;IAACC,IAAI,EAAEV,WAAY;IAACW,IAAI,EAAElB,aAAc;IAACmB,aAAa,EAAE;EAAM,EAAG,CACrI;AAEX"}

package/lib/module/ui/components/seekbar/thumbnail/Thumbnail.js

@@ -0,0 +1,11 @@
+export function isTileMapThumbnail(thumbnail) {
+  return thumbnail.tileX !== undefined && thumbnail.tileY !== undefined && thumbnail.tileWidth !== undefined && thumbnail.tileHeight !== undefined;
+}
+export function isImageThumbnail(thumbnail) {
+  return !isTileMapThumbnail(thumbnail);
+}
+
+/**
+ * Description of a thumbnail, which can be either a full image or part of a tile map.
+ */
+//# sourceMappingURL=Thumbnail.js.map