@100mslive/react-native-room-kit 1.1.5 → 1.1.7

package/lib/module/components/HLSPlayerContainer.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { Easing, cancelAnimation, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import { useHLSViewsConstraints } from '../hooks-util';
+import { HLSPlayer } from './HLSPlayer';
+import { HLSPlayerControls } from './HLSPlayerControls';
+export const _HLSPlayerContainer = () => {
+  const hlsPlayerRef = React.useRef(null);
+  const {
+    playerWrapperConstraints
+  } = useHLSViewsConstraints();
+  const animatedValue = useSharedValue(1);
+  const cancelCurrentControlAnimation = React.useCallback(() => {
+    'worklet';
+
+    cancelAnimation(animatedValue);
+  }, []);
+  const hideControlsAfterDelay = React.useCallback((duration = 500) => {
+    'worklet';
+
+    animatedValue.value = withDelay(5000, withTiming(0, {
+      duration,
+      easing: Easing.ease
+    }));
+  }, []);
+  const resetHideControlAnimation = React.useCallback(() => {
+    cancelCurrentControlAnimation();
+    hideControlsAfterDelay();
+  }, [cancelCurrentControlAnimation, hideControlsAfterDelay]);
+  const hideControls = React.useCallback((duration = 500) => {
+    'worklet';
+
+    animatedValue.value = withTiming(0, {
+      duration,
+      easing: Easing.ease
+    });
+  }, []);
+  React.useEffect(() => {
+    resetHideControlAnimation();
+  }, [resetHideControlAnimation]);
+  const tapGesture = React.useMemo(() => {
+    return Gesture.Tap().onStart(() => {
+      cancelCurrentControlAnimation();
+      if (animatedValue.value < 1) {
+        animatedValue.value = withTiming(1, {
+          duration: 200,
+          easing: Easing.ease
+        }, finished => {
+          if (finished) {
+            hideControlsAfterDelay();
+          }
+        });
+      } else {
+        hideControls(200);
+      }
+    });
+  }, [cancelCurrentControlAnimation, hideControls, hideControlsAfterDelay]);
+  return /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: tapGesture
+  }, /*#__PURE__*/React.createElement(View, {
+    collapsable: false,
+    style: [styles.hlsPlayerContainer, {
+      backgroundColor: 'black',
+      width: playerWrapperConstraints.width,
+      height: playerWrapperConstraints.height
+    }]
+  }, /*#__PURE__*/React.createElement(HLSPlayer, {
+    ref: hlsPlayerRef
+  }), /*#__PURE__*/React.createElement(HLSPlayerControls, {
+    playerRef: hlsPlayerRef,
+    animatedValue: animatedValue,
+    cancelCurrentControlAnimation: cancelCurrentControlAnimation,
+    hideControlsAfterDelay: hideControlsAfterDelay,
+    resetHideControlAnimation: resetHideControlAnimation
+  })));
+};
+export const HLSPlayerContainer = /*#__PURE__*/React.memo(_HLSPlayerContainer);
+const styles = StyleSheet.create({
+  hlsView: {
+    flex: 1
+  },
+  hlsPlayerContainer: {
+    // flex: 1,
+    position: 'relative'
+  },
+  textContainer: {
+    flex: 1,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  warningSubtitle: {
+    fontSize: 16,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    textAlign: 'center'
+  },
+  playbackFailedContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute'
+  },
+  playbackFailed: {
+    fontSize: 24,
+    lineHeight: 32,
+    letterSpacing: 0.5,
+    textAlign: 'center',
+    marginTop: 8
+  }
+});
+//# sourceMappingURL=HLSPlayerContainer.js.map

package/lib/module/components/HLSPlayerContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","Gesture","GestureDetector","Easing","cancelAnimation","useSharedValue","withDelay","withTiming","useHLSViewsConstraints","HLSPlayer","HLSPlayerControls","_HLSPlayerContainer","hlsPlayerRef","useRef","playerWrapperConstraints","animatedValue","cancelCurrentControlAnimation","useCallback","hideControlsAfterDelay","duration","value","easing","ease","resetHideControlAnimation","hideControls","useEffect","tapGesture","useMemo","Tap","onStart","finished","createElement","gesture","collapsable","style","styles","hlsPlayerContainer","backgroundColor","width","height","ref","playerRef","HLSPlayerContainer","memo","create","hlsView","flex","position","textContainer","paddingHorizontal","alignItems","justifyContent","warningSubtitle","fontSize","lineHeight","letterSpacing","textAlign","playbackFailedContainer","playbackFailed","marginTop"],"sourceRoot":"../../../src","sources":["components/HLSPlayerContainer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/HLSPlayerControls.js

@@ -0,0 +1,120 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+import Animated, { useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { HLSGoLiveControl } from './HLSGoLiveControl';
+import { HLSSeekbar } from './HLSSeekbar';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import { HLSCloseMeetingControl } from './HLSCloseMeetingControl';
+import { HLSClosedCaptionControl } from './HLSClosedCaptionControl';
+import { HLSFullScreenControl } from './HLSFullScreenControl';
+import { HLSDistanceFromLive } from './HLSDistanceFromLive';
+import { HLSPlayPauseControl } from './HLSPlayPauseControl';
+import { HLSSeekbackwardControl } from './HLSSeekbackwardControl';
+import { HLSSeekforwardControl } from './HLSSeekforwardControl';
+export const _HLSPlayerControls = ({
+  playerRef,
+  cancelCurrentControlAnimation,
+  hideControlsAfterDelay,
+  animatedValue,
+  resetHideControlAnimation
+}) => {
+  const {
+    bottom: bottomSafeInset
+  } = useSafeAreaInsets();
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const hlsFullScreen = useSelector(state => state.app.hlsFullScreen);
+  const hideControlsStyles = useAnimatedStyle(() => ({
+    opacity: animatedValue.value
+  }), []);
+  const hideControlsProps = useAnimatedProps(() => ({
+    pointerEvents: animatedValue.value < 0.8 ? 'none' : 'auto'
+  }), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Animated.View, {
+    animatedProps: hideControlsProps,
+    style: [{
+      height: '100%'
+    }, styles.floatingContainer, hideControlsStyles]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(HLSSeekbackwardControl, {
+    playerRef: playerRef,
+    onPress: resetHideControlAnimation
+  }), /*#__PURE__*/React.createElement(HLSPlayPauseControl, {
+    playerRef: playerRef,
+    onPress: resetHideControlAnimation
+  }), /*#__PURE__*/React.createElement(HLSSeekforwardControl, {
+    playerRef: playerRef,
+    onPress: resetHideControlAnimation
+  }))), /*#__PURE__*/React.createElement(Animated.View, {
+    animatedProps: hideControlsProps,
+    style: [{
+      top: 0
+    }, styles.floatingContainer, hideControlsStyles]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.controlsRow
+  }, /*#__PURE__*/React.createElement(HLSCloseMeetingControl, {
+    onPress: resetHideControlAnimation
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.normalRow, styles.gap]
+  }, /*#__PURE__*/React.createElement(HLSClosedCaptionControl, {
+    playerRef: playerRef,
+    onPress: resetHideControlAnimation
+  })))), /*#__PURE__*/React.createElement(Animated.View, {
+    animatedProps: hideControlsProps,
+    style: [{
+      bottom: isLandscapeOrientation ? bottomSafeInset : 0
+    }, styles.floatingContainer, hideControlsStyles]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: isLandscapeOrientation || hlsFullScreen ? 'column-reverse' : 'column'
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.controlsRow
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.normalRow
+  }, /*#__PURE__*/React.createElement(HLSGoLiveControl, {
+    playerRef: playerRef,
+    onPress: resetHideControlAnimation
+  }), /*#__PURE__*/React.createElement(HLSDistanceFromLive, null)), /*#__PURE__*/React.createElement(View, {
+    style: [styles.normalRow, styles.gap]
+  }, /*#__PURE__*/React.createElement(HLSFullScreenControl, {
+    onPress: resetHideControlAnimation
+  }))), /*#__PURE__*/React.createElement(HLSSeekbar, {
+    playerRef: playerRef,
+    onStart: cancelCurrentControlAnimation,
+    onEnd: hideControlsAfterDelay
+  }))));
+};
+export const HLSPlayerControls = /*#__PURE__*/React.memo(_HLSPlayerControls);
+const styles = StyleSheet.create({
+  floatingContainer: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 5
+  },
+  controlsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginHorizontal: 8
+  },
+  normalRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  icon: {
+    padding: 4,
+    alignSelf: 'flex-start'
+  },
+  gap: {
+    marginLeft: 16
+  }
+});
+//# sourceMappingURL=HLSPlayerControls.js.map

package/lib/module/components/HLSPlayerControls.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","StyleSheet","useSelector","Animated","useAnimatedProps","useAnimatedStyle","useSafeAreaInsets","HLSGoLiveControl","HLSSeekbar","useIsLandscapeOrientation","HLSCloseMeetingControl","HLSClosedCaptionControl","HLSFullScreenControl","HLSDistanceFromLive","HLSPlayPauseControl","HLSSeekbackwardControl","HLSSeekforwardControl","_HLSPlayerControls","playerRef","cancelCurrentControlAnimation","hideControlsAfterDelay","animatedValue","resetHideControlAnimation","bottom","bottomSafeInset","isLandscapeOrientation","hlsFullScreen","state","app","hideControlsStyles","opacity","value","hideControlsProps","pointerEvents","createElement","Fragment","animatedProps","style","height","styles","floatingContainer","flex","flexDirection","alignItems","justifyContent","onPress","top","controlsRow","normalRow","gap","onStart","onEnd","HLSPlayerControls","memo","create","position","width","zIndex","marginHorizontal","icon","padding","alignSelf","marginLeft"],"sourceRoot":"../../../src","sources":["components/HLSPlayerControls.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAE/C,SAASC,WAAW,QAAQ,aAAa;AACzC,OAAOC,QAAQ,IACbC,gBAAgB,EAChBC,gBAAgB,QACX,yBAAyB;AAEhC,SAASC,iBAAiB,QAAQ,gCAAgC;AAIlE,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,sBAAsB,QAAQ,0BAA0B;AACjE,SAASC,uBAAuB,QAAQ,2BAA2B;AACnE,SAASC,oBAAoB,QAAQ,wBAAwB;AAC7D,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,mBAAmB,QAAQ,uBAAuB;AAC3D,SAASC,sBAAsB,QAAQ,0BAA0B;AACjE,SAASC,qBAAqB,QAAQ,yBAAyB;AAU/D,OAAO,MAAMC,kBAAoD,GAAGA,CAAC;EACnEC,SAAS;EACTC,6BAA6B;EAC7BC,sBAAsB;EACtBC,aAAa;EACbC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC,MAAM,EAAEC;EAAgB,CAAC,GAAGlB,iBAAiB,CAAC,CAAC;EACvD,MAAMmB,sBAAsB,GAAGhB,yBAAyB,CAAC,CAAC;EAC1D,MAAMiB,aAAa,GAAGxB,WAAW,CAC9ByB,KAAgB,IAAKA,KAAK,CAACC,GAAG,CAACF,aAClC,CAAC;EAED,MAAMG,kBAA6B,GAAGxB,gBAAgB,CACpD,OAAO;IACLyB,OAAO,EAAET,aAAa,CAACU;EACzB,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMC,iBAA4B,GAAG5B,gBAAgB,CACnD,OAAO;IACL6B,aAAa,EAAEZ,aAAa,CAACU,KAAK,GAAG,GAAG,GAAG,MAAM,GAAG;EACtD,CAAC,CAAC,EACF,EACF,CAAC;EAED,oBACEhC,KAAA,CAAAmC,aAAA,CAACnC,KAAK,CAACoC,QAAQ,qBAEbpC,KAAA,CAAAmC,aAAA,CAAC/B,QAAQ,CAACH,IAAI;IACZoC,aAAa,EAAEJ,iBAAkB;IACjCK,KAAK,EAAE,CACL;MAAEC,MAAM,EAAE;IAAO,CAAC,EAClBC,MAAM,CAACC,iBAAiB,EACxBX,kBAAkB;EAClB,gBAEF9B,KAAA,CAAAmC,aAAA,CAAClC,IAAI;IACHqC,KAAK,EAAE;MACLI,IAAI,EAAE,CAAC;MACPC,aAAa,EAAE,KAAK;MACpBC,UAAU,EAAE,QAAQ;MACpBC,cAAc,EAAE;IAClB;EAAE,gBAEF7C,KAAA,CAAAmC,aAAA,CAACnB,sBAAsB;IACrBG,SAAS,EAAEA,SAAU;IACrB2B,OAAO,EAAEvB;EAA0B,CACpC,CAAC,eAEFvB,KAAA,CAAAmC,aAAA,CAACpB,mBAAmB;IAClBI,SAAS,EAAEA,SAAU;IACrB2B,OAAO,EAAEvB;EAA0B,CACpC,CAAC,eAEFvB,KAAA,CAAAmC,aAAA,CAAClB,qBAAqB;IACpBE,SAAS,EAAEA,SAAU;IACrB2B,OAAO,EAAEvB;EAA0B,CACpC,CACG,CACO,CAAC,eAGhBvB,KAAA,CAAAmC,aAAA,CAAC/B,QAAQ,CAACH,IAAI;IACZoC,aAAa,EAAEJ,iBAAkB;IACjCK,KAAK,EAAE,CAAC;MAAES,GAAG,EAAE;IAAE,CAAC,EAAEP,MAAM,CAACC,iBAAiB,EAAEX,kBAAkB;EAAE,gBAElE9B,KAAA,CAAAmC,aAAA,CAAClC,IAAI;IAACqC,KAAK,EAAEE,MAAM,CAACQ;EAAY,gBAC9BhD,KAAA,CAAAmC,aAAA,CAACxB,sBAAsB;IAACmC,OAAO,EAAEvB;EAA0B,CAAE,CAAC,eAE9DvB,KAAA,CAAAmC,aAAA,CAAClC,IAAI;IAACqC,KAAK,EAAE,CAACE,MAAM,CAACS,SAAS,EAAET,MAAM,CAACU,GAAG;EAAE,gBAC1ClD,KAAA,CAAAmC,aAAA,CAACvB,uBAAuB;IACtBO,SAAS,EAAEA,SAAU;IACrB2B,OAAO,EAAEvB;EAA0B,CACpC,CACG,CACF,CACO,CAAC,eAGhBvB,KAAA,CAAAmC,aAAA,CAAC/B,QAAQ,CAACH,IAAI;IACZoC,aAAa,EAAEJ,iBAAkB;IACjCK,KAAK,EAAE,CACL;MAAEd,MAAM,EAAEE,sBAAsB,GAAGD,eAAe,GAAG;IAAE,CAAC,EACxDe,MAAM,CAACC,iBAAiB,EACxBX,kBAAkB;EAClB,gBAEF9B,KAAA,CAAAmC,aAAA,CAAClC,IAAI;IACHqC,KAAK,EAAE;MACLK,aAAa,EACXjB,sBAAsB,IAAIC,aAAa,GACnC,gBAAgB,GAChB;IACR;EAAE,gBAEF3B,KAAA,CAAAmC,aAAA,CAAClC,IAAI;IAACqC,KAAK,EAAEE,MAAM,CAACQ;EAAY,gBAC9BhD,KAAA,CAAAmC,aAAA,CAAClC,IAAI;IAACqC,KAAK,EAAEE,MAAM,CAACS;EAAU,gBAC5BjD,KAAA,CAAAmC,aAAA,CAAC3B,gBAAgB;IACfW,SAAS,EAAEA,SAAU;IACrB2B,OAAO,EAAEvB;EAA0B,CACpC,CAAC,eACFvB,KAAA,CAAAmC,aAAA,CAACrB,mBAAmB,MAAE,CAClB,CAAC,eAEPd,KAAA,CAAAmC,aAAA,CAAClC,IAAI;IAACqC,KAAK,EAAE,CAACE,MAAM,CAACS,SAAS,EAAET,MAAM,CAACU,GAAG;EAAE,gBAC1ClD,KAAA,CAAAmC,aAAA,CAACtB,oBAAoB;IAACiC,OAAO,EAAEvB;EAA0B,CAAE,CACvD,CACF,CAAC,eAEPvB,KAAA,CAAAmC,aAAA,CAAC1B,UAAU;IACTU,SAAS,EAAEA,SAAU;IACrBgC,OAAO,EAAE/B,6BAA8B;IACvCgC,KAAK,EAAE/B;EAAuB,CAC/B,CACG,CACO,CACD,CAAC;AAErB,CAAC;AAED,OAAO,MAAMgC,iBAAiB,gBAAGrD,KAAK,CAACsD,IAAI,CAACpC,kBAAkB,CAAC;AAE/D,MAAMsB,MAAM,GAAGtC,UAAU,CAACqD,MAAM,CAAC;EAC/Bd,iBAAiB,EAAE;IACjBe,QAAQ,EAAE,UAAU;IACpBC,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE;EACV,CAAC;EACDV,WAAW,EAAE;IACXL,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,eAAe;IAC/Bc,gBAAgB,EAAE;EACpB,CAAC;EACDV,SAAS,EAAE;IACTN,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EACDgB,IAAI,EAAE;IACJC,OAAO,EAAE,CAAC;IACVC,SAAS,EAAE;EACb,CAAC;EACDZ,GAAG,EAAE;IACHa,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/HLSRecordingStatusText.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
+import { useIsAnyRecordingOn, useIsAnyRecordingPaused } from '../hooks-sdk';
+export const HLSRecordingStatusText = ({
+  prefix,
+  suffix,
+  ...restProps
+}) => {
+  const isRecordingOn = useIsAnyRecordingOn();
+  const isRecordingPaused = useIsAnyRecordingPaused();
+  const startingOrStoppingRecording = useSelector(state => {
+    var _state$hmsStates$room, _state$hmsStates$room2, _state$hmsStates$room3;
+    return state.app.startingOrStoppingRecording || ((_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.browserRecordingState.state) === HMSRecordingState.STARTING || ((_state$hmsStates$room2 = state.hmsStates.room) === null || _state$hmsStates$room2 === void 0 ? void 0 : _state$hmsStates$room2.serverRecordingState.state) === HMSRecordingState.STARTING || ((_state$hmsStates$room3 = state.hmsStates.room) === null || _state$hmsStates$room3 === void 0 || (_state$hmsStates$room3 = _state$hmsStates$room3.hlsRecordingState) === null || _state$hmsStates$room3 === void 0 ? void 0 : _state$hmsStates$room3.state) === HMSRecordingState.STARTING;
+  });
+  if (startingOrStoppingRecording || !(isRecordingPaused && isRecordingOn)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, prefix, /*#__PURE__*/React.createElement(Text, restProps, isRecordingPaused ? 'Recording Paused' : isRecordingOn ? 'Recording' : ''), suffix);
+};
+//# sourceMappingURL=HLSRecordingStatusText.js.map

package/lib/module/components/HLSRecordingStatusText.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Text","useSelector","HMSRecordingState","useIsAnyRecordingOn","useIsAnyRecordingPaused","HLSRecordingStatusText","prefix","suffix","restProps","isRecordingOn","isRecordingPaused","startingOrStoppingRecording","state","_state$hmsStates$room","_state$hmsStates$room2","_state$hmsStates$room3","app","hmsStates","room","browserRecordingState","STARTING","serverRecordingState","hlsRecordingState","createElement","Fragment"],"sourceRoot":"../../../src","sources":["components/HLSRecordingStatusText.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,WAAW,QAAQ,aAAa;AACzC,SAASC,iBAAiB,QAAQ,6BAA6B;AAG/D,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,cAAc;AAO3E,OAAO,MAAMC,sBAA6D,GAAGA,CAAC;EAC5EC,MAAM;EACNC,MAAM;EACN,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,aAAa,GAAGN,mBAAmB,CAAC,CAAC;EAC3C,MAAMO,iBAAiB,GAAGN,uBAAuB,CAAC,CAAC;EACnD,MAAMO,2BAA2B,GAAGV,WAAW,CAC5CW,KAAgB;IAAA,IAAAC,qBAAA,EAAAC,sBAAA,EAAAC,sBAAA;IAAA,OACfH,KAAK,CAACI,GAAG,CAACL,2BAA2B,IACrC,EAAAE,qBAAA,GAAAD,KAAK,CAACK,SAAS,CAACC,IAAI,cAAAL,qBAAA,uBAApBA,qBAAA,CAAsBM,qBAAqB,CAACP,KAAK,MAC/CV,iBAAiB,CAACkB,QAAQ,IAC5B,EAAAN,sBAAA,GAAAF,KAAK,CAACK,SAAS,CAACC,IAAI,cAAAJ,sBAAA,uBAApBA,sBAAA,CAAsBO,oBAAoB,CAACT,KAAK,MAC9CV,iBAAiB,CAACkB,QAAQ,IAC5B,EAAAL,sBAAA,GAAAH,KAAK,CAACK,SAAS,CAACC,IAAI,cAAAH,sBAAA,gBAAAA,sBAAA,GAApBA,sBAAA,CAAsBO,iBAAiB,cAAAP,sBAAA,uBAAvCA,sBAAA,CAAyCH,KAAK,MAC5CV,iBAAiB,CAACkB,QAAQ;EAAA,CAChC,CAAC;EAED,IAAIT,2BAA2B,IAAI,EAAED,iBAAiB,IAAID,aAAa,CAAC,EAAE;IACxE,OAAO,IAAI;EACb;EAEA,oBACEV,KAAA,CAAAwB,aAAA,CAAAxB,KAAA,CAAAyB,QAAA,QACGlB,MAAM,eACPP,KAAA,CAAAwB,aAAA,CAACvB,IAAI,EAAKQ,SAAS,EAChBE,iBAAiB,GACd,kBAAkB,GAClBD,aAAa,GACX,WAAW,GACX,EACF,CAAC,EACNF,MACD,CAAC;AAEP,CAAC","ignoreList":[]}

package/lib/module/components/HLSRoomOptionsButton.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { useCanShowRoomOptionsButton } from '../hooks-util';
+import { HMSRoomOptions } from './HMSRoomOptions';
+export const HLSRoomOptionsButton = () => {
+  const canShowOptions = useCanShowRoomOptionsButton();
+  if (!canShowOptions) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginLeft: 12
+    }
+  }, /*#__PURE__*/React.createElement(HMSRoomOptions, null));
+};
+//# sourceMappingURL=HLSRoomOptionsButton.js.map

package/lib/module/components/HLSRoomOptionsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","useCanShowRoomOptionsButton","HMSRoomOptions","HLSRoomOptionsButton","canShowOptions","createElement","style","marginLeft"],"sourceRoot":"../../../src","sources":["components/HLSRoomOptionsButton.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,2BAA2B,QAAQ,eAAe;AAC3D,SAASC,cAAc,QAAQ,kBAAkB;AAEjD,OAAO,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,cAAc,GAAGH,2BAA2B,CAAC,CAAC;EAEpD,IAAI,CAACG,cAAc,EAAE;IACnB,OAAO,IAAI;EACb;EAEA,oBACEL,KAAA,CAAAM,aAAA,CAACL,IAAI;IAACM,KAAK,EAAE;MAAEC,UAAU,EAAE;IAAG;EAAE,gBAC9BR,KAAA,CAAAM,aAAA,CAACH,cAAc,MAAE,CACb,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/components/HLSSeekbackwardControl.js

@@ -0,0 +1,59 @@
+import { HMSHLSPlaylistType } from '@100mslive/react-native-hms';
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+import { SeekArrowIcon } from '../Icons';
+import Animated, { Easing, cancelAnimation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+const _HLSSeekbackwardControl = ({
+  playerRef,
+  onPress
+}) => {
+  const animatedValue = useSharedValue(0);
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isDVRStream = useSelector(state => {
+    var _state$hmsStates$room;
+    return ((_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 || (_state$hmsStates$room = _state$hmsStates$room.hlsStreamingState.variants) === null || _state$hmsStates$room === void 0 || (_state$hmsStates$room = _state$hmsStates$room[0]) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.playlistType) === HMSHLSPlaylistType.DVR;
+  });
+  const handdleSeekBackward = () => {
+    var _playerRef$current;
+    onPress === null || onPress === void 0 || onPress();
+    (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 || _playerRef$current.seekBackward(10);
+  };
+  const tapGestureHandler = React.useMemo(() => {
+    return Gesture.Tap().onStart(() => {
+      cancelAnimation(animatedValue);
+      animatedValue.value = withTiming(1, {
+        duration: 200,
+        easing: Easing.ease
+      }, finished => {
+        if (finished) {
+          animatedValue.value = withTiming(0, {
+            duration: 100,
+            easing: Easing.ease
+          });
+        }
+      });
+      runOnJS(handdleSeekBackward)();
+    });
+  }, []);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(animatedValue.value, [0, 1], [1, 0.8]),
+    transform: [{
+      rotateZ: `${interpolate(animatedValue.value, [0, 1], [0, -17])} deg`
+    }]
+  }), []);
+  if (!isHLSStreamingOn || !isDVRStream) return null;
+  return /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: tapGestureHandler
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    collapsable: false,
+    style: [{
+      marginRight: 24
+    }, animatedStyle]
+  }, /*#__PURE__*/React.createElement(SeekArrowIcon, {
+    type: "backward"
+  })));
+};
+export const HLSSeekbackwardControl = /*#__PURE__*/React.memo(_HLSSeekbackwardControl);
+//# sourceMappingURL=HLSSeekbackwardControl.js.map

package/lib/module/components/HLSSeekbackwardControl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["HMSHLSPlaylistType","React","useSelector","GestureDetector","Gesture","useIsHLSStreamingOn","SeekArrowIcon","Animated","Easing","cancelAnimation","interpolate","runOnJS","useAnimatedStyle","useSharedValue","withTiming","_HLSSeekbackwardControl","playerRef","onPress","animatedValue","isHLSStreamingOn","isDVRStream","state","_state$hmsStates$room","hmsStates","room","hlsStreamingState","variants","playlistType","DVR","handdleSeekBackward","_playerRef$current","current","seekBackward","tapGestureHandler","useMemo","Tap","onStart","value","duration","easing","ease","finished","animatedStyle","opacity","transform","rotateZ","createElement","gesture","View","collapsable","style","marginRight","type","HLSSeekbackwardControl","memo"],"sourceRoot":"../../../src","sources":["components/HLSSeekbackwardControl.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/HLSSeekbar.js

@@ -0,0 +1,276 @@
+import React, { useRef } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, { Easing, Extrapolation, interpolate, runOnJS, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import { HMSHLSPlayerPlaybackState, HMSHLSPlaylistType, useHMSHLSPlayerPlaybackState, useHMSHLSPlayerStat } from '@100mslive/react-native-hms';
+import { useSelector } from 'react-redux';
+import { useHLSStreamResumePause, useHLSViewsConstraints, useHMSRoomStyle } from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+export const _HLSSeekbar = props => {
+  const isHLSStreamingOn = useIsHLSStreamingOn();
+  const isDVRStream = useSelector(state => {
+    var _state$hmsStates$room;
+    return ((_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 || (_state$hmsStates$room = _state$hmsStates$room.hlsStreamingState.variants) === null || _state$hmsStates$room === void 0 || (_state$hmsStates$room = _state$hmsStates$room[0]) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.playlistType) === HMSHLSPlaylistType.DVR;
+  });
+  if (!isHLSStreamingOn || !isDVRStream) return null;
+  return /*#__PURE__*/React.createElement(_Seekbar, props);
+};
+const _Seekbar = /*#__PURE__*/React.memo(({
+  playerRef,
+  onStart,
+  onEnd
+}) => {
+  const {
+    playerWrapperConstraints
+  } = useHLSViewsConstraints();
+  const hlsPlayerDurationDetails = useRef(null);
+  const prevSeekbarPositionValue = useSharedValue(0);
+  const seekbarPositionValue = useSharedValue(0);
+  const seekbarHeightValue = useSharedValue(4);
+  const streamStartedAt = useSelector(state => {
+    var _state$hmsStates$room2;
+    return (_state$hmsStates$room2 = state.hmsStates.room) === null || _state$hmsStates$room2 === void 0 || (_state$hmsStates$room2 = _state$hmsStates$room2.hlsStreamingState.variants) === null || _state$hmsStates$room2 === void 0 || (_state$hmsStates$room2 = _state$hmsStates$room2[0]) === null || _state$hmsStates$room2 === void 0 ? void 0 : _state$hmsStates$room2.startedAt;
+  });
+  const distanceFromLiveEdge = useHMSHLSPlayerStat('distanceFromLive');
+  const distanceFromLiveEdgeValue = useDerivedValue(() => distanceFromLiveEdge, [distanceFromLiveEdge]);
+  const seekbarRoomStyle = useHMSRoomStyle(theme => ({
+    backgroundColor: theme.palette.primary_default
+  }));
+  const {
+    isPaused,
+    pauseStream,
+    resumeStream
+  } = useHLSStreamResumePause(playerRef);
+  const seekToBarPosition = () => {
+    var _hlsPlayerDurationDet;
+    if (!streamStartedAt) return;
+    const liveStreamDuration = Date.now() - streamStartedAt.getTime();
+    const rollingWindowTime = (_hlsPlayerDurationDet = hlsPlayerDurationDetails.current) === null || _hlsPlayerDurationDet === void 0 ? void 0 : _hlsPlayerDurationDet.rollingWindowTime;
+    const durationOfStream = rollingWindowTime && liveStreamDuration >= rollingWindowTime ? rollingWindowTime : liveStreamDuration;
+
+    // console.log(
+    //   '$$$ rolling window time > ',
+    //   hlsPlayerDurationDetails.current?.rollingWindowTime
+    // );
+    // console.log('$$$ live stream duration > ', liveStreamDuration);
+    // console.log('$$$ current stream duration > ', durationOfStream);
+
+    const prevPosition = prevSeekbarPositionValue.value;
+    const currPosition = seekbarPositionValue.value;
+    const diff = currPosition - prevPosition;
+    const seekByMillis = durationOfStream / 100 * Math.abs(diff);
+    const seekBySecs = seekByMillis / 1000;
+    if (diff >= 0) {
+      var _playerRef$current;
+      (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 || _playerRef$current.seekForward(seekBySecs);
+    } else {
+      var _playerRef$current2;
+      (_playerRef$current2 = playerRef.current) === null || _playerRef$current2 === void 0 || _playerRef$current2.seekBackward(seekBySecs);
+    }
+    resumeStream();
+  };
+  const activeSeekbarStyle = useAnimatedStyle(() => ({
+    width: interpolate(seekbarPositionValue.value, [0, 100], [0, playerWrapperConstraints.width], {
+      extrapolateLeft: Extrapolation.CLAMP,
+      extrapolateRight: Extrapolation.CLAMP
+    }),
+    height: seekbarHeightValue.value
+  }), [playerWrapperConstraints.width]);
+  const activeSeekbarThumbStyle = useAnimatedStyle(() => ({
+    width: seekbarHeightValue.value * 3,
+    height: seekbarHeightValue.value * 3,
+    borderRadius: seekbarHeightValue.value * 3 / 2,
+    bottom: -seekbarHeightValue.value,
+    left: -(seekbarHeightValue.value * 3) / 2,
+    transform: [{
+      translateX: interpolate(seekbarPositionValue.value, [0, 100], [0, playerWrapperConstraints.width], {
+        extrapolateLeft: Extrapolation.CLAMP,
+        extrapolateRight: Extrapolation.CLAMP
+      })
+    }]
+  }), [playerWrapperConstraints.width]);
+  const panGesture = Gesture.Pan().maxPointers(1).minPointers(1).hitSlop({
+    top: 12,
+    bottom: 12
+  }).onStart(e => {
+    'worklet';
+
+    onStart();
+    runOnJS(pauseStream)();
+    prevSeekbarPositionValue.value = seekbarPositionValue.value;
+    seekbarPositionValue.value = interpolate(e.x, [0, playerWrapperConstraints.width], [0, 100], {
+      extrapolateLeft: Extrapolation.CLAMP,
+      extrapolateRight: Extrapolation.CLAMP
+    });
+    seekbarHeightValue.value = withTiming(6, {
+      duration: 160,
+      easing: Easing.linear
+    });
+  }).onUpdate(e => {
+    'worklet';
+
+    seekbarPositionValue.value = interpolate(e.x, [0, playerWrapperConstraints.width], [0, 100], {
+      extrapolateLeft: Extrapolation.CLAMP,
+      extrapolateRight: Extrapolation.CLAMP
+    });
+  }).onEnd(() => {
+    'worklet';
+
+    onEnd();
+    seekbarHeightValue.value = withTiming(4, {
+      duration: 160,
+      easing: Easing.linear
+    });
+    runOnJS(seekToBarPosition)();
+  });
+  React.useEffect(() => {
+    if (streamStartedAt && !isPaused) {
+      const intervalId = setInterval(() => {
+        var _hlsPlayerDurationDet2;
+        const liveStreamDuration = Date.now() - streamStartedAt.getTime();
+        const rollingWindowTime = (_hlsPlayerDurationDet2 = hlsPlayerDurationDetails.current) === null || _hlsPlayerDurationDet2 === void 0 ? void 0 : _hlsPlayerDurationDet2.rollingWindowTime;
+        const durationOfStream = rollingWindowTime && liveStreamDuration >= rollingWindowTime ? rollingWindowTime : liveStreamDuration;
+
+        // console.log(
+        //   '$$$ rolling window time > ',
+        //   hlsPlayerDurationDetails.current?.rollingWindowTime
+        // );
+        // console.log('$$$ live stream duration > ', liveStreamDuration);
+        // console.log('$$$ current stream duration > ', durationOfStream);
+
+        const currentPosition = durationOfStream - distanceFromLiveEdgeValue.value;
+
+        // console.log('currentPosition > ', currentPosition);
+
+        seekbarPositionValue.value = interpolate(currentPosition, [0, durationOfStream], [0, 100], {
+          extrapolateLeft: Extrapolation.CLAMP,
+          extrapolateRight: Extrapolation.CLAMP
+        });
+      }, 1000);
+      return () => {
+        clearInterval(intervalId);
+      };
+    }
+  }, [isPaused, streamStartedAt]);
+  let startedPlayingFirstTime = false;
+  let prevPlaybackState = HMSHLSPlayerPlaybackState.UNKNOWN;
+  const playbackState = useHMSHLSPlayerPlaybackState();
+  if (prevPlaybackState === HMSHLSPlayerPlaybackState.UNKNOWN && playbackState === HMSHLSPlayerPlaybackState.PLAYING) {
+    prevPlaybackState = playbackState;
+    startedPlayingFirstTime = true;
+  }
+  React.useEffect(() => {
+    if (startedPlayingFirstTime && playerRef.current) {
+      let mounted = true;
+      playerRef.current.getPlayerDurationDetails().then(data => {
+        if (mounted) {
+          console.log('$$$ getPlayerDurationDetails > ', data);
+          hlsPlayerDurationDetails.current = data;
+          if (typeof data.rollingWindowTime === 'number' && data.rollingWindowTime < 300000) {
+            hlsPlayerDurationDetails.current.rollingWindowTime = 300000;
+          }
+        }
+      }).catch(() => {});
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [startedPlayingFirstTime]);
+  return /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: panGesture
+  }, /*#__PURE__*/React.createElement(View, {
+    collapsable: false,
+    hitSlop: {
+      top: 12,
+      bottom: 12
+    },
+    style: [styles.container, {
+      width: playerWrapperConstraints.width
+    }]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.inactiveSeekbar, {
+      width: playerWrapperConstraints.width
+    }]
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.seekbar, seekbarRoomStyle, activeSeekbarStyle]
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.seekbarThumb, seekbarRoomStyle, activeSeekbarThumbStyle]
+  }))));
+});
+export const HLSSeekbar = /*#__PURE__*/React.memo(_HLSSeekbar);
+const styles = StyleSheet.create({
+  container: {
+    height: 6,
+    justifyContent: 'flex-end'
+  },
+  inactiveSeekbar: {
+    position: 'relative',
+    backgroundColor: 'rgba(255, 255, 255, 0.25)'
+  },
+  seekbar: {
+    height: 4
+  },
+  seekbarThumb: {
+    position: 'absolute',
+    bottom: -4,
+    right: 0,
+    zIndex: 100
+  }
+});
+
+/**
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * 200 -> 200 * 40%
+ *
+ * 180 - 33.33% = 60;
+ *
+ * currentStreamDuration * (diff in current and prev) * 100 / prev
+ *
+ * 0 |----------| 150
+ * prev  = 135
+ *
+ * curr = 90
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * //// 2 * 30 = 60
+ * 1.5 * 30 = 45
+ *
+ * 180
+ *
+ * 120
+ *
+ * 0 |------____| 100
+ *
+ *
+ * 200 * 40% = 80
+ *
+ * 200 * 30% = 60
+ *
+ *
+ * 30*90
+ *
+ * 0 |---------_| 100
+ *             Prev = 90
+ *   |------|
+ *          Curr = 60
+ *
+ *  90 - 60 = 30
+ *
+ *  seekbackward(80)
+ */
+//# sourceMappingURL=HLSSeekbar.js.map