@stream-io/video-react-native-sdk 0.1.9 → 0.1.11

package/dist/module/components/Livestream/LivestreamControls/LivestreamMediaControls.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","useTheme","LivestreamAudioControlButton","LivestreamVideoControlButton","LivestreamMediaControls","_ref","theme","livestreamMediaControls","createElement","style","styles","container","create","flexDirection","alignItems"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/LivestreamMediaControls.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,4BAA4B,QAAQ,gCAAgC;AAC7E,SAASC,4BAA4B,QAAQ,gCAAgC;;AAE7E;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAO,MAAMC,uBAAuB,GAAGC,IAAA,IAAsC;EAAA,IAArC,CAA+B,CAAC,GAAAA,IAAA;EACtE,MAAM;IACJC,KAAK,EAAE;MAAEC;IAAwB;EACnC,CAAC,GAAGN,QAAQ,CAAC,CAAC;EACd,oBACEH,KAAA,CAAAU,aAAA,CAACR,IAAI;IAACS,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEJ,uBAAuB,CAACI,SAAS;EAAE,gBACjEb,KAAA,CAAAU,aAAA,CAACN,4BAA4B,MAAE,CAAC,eAChCJ,KAAA,CAAAU,aAAA,CAACL,4BAA4B,MAAE,CAC3B,CAAC;AAEX,CAAC;AAED,MAAMO,MAAM,GAAGX,UAAU,CAACa,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

package/dist/module/components/Livestream/LivestreamControls/LivestreamVideoControlButton.js

@@ -0,0 +1,63 @@
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import React from 'react';
+import { useTheme } from '../../../contexts';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { Video, VideoSlash } from '../../../icons';
+
+/**
+ * The LivestreamVideoControlButton controls the video stream publish/unpublish while in the livestream for the host.
+ */
+export const LivestreamVideoControlButton = () => {
+  const call = useCall();
+  const {
+    useCameraState
+  } = useCallStateHooks();
+  const {
+    status
+  } = useCameraState();
+  const {
+    theme: {
+      colors,
+      variants: {
+        iconSizes,
+        buttonSizes
+      },
+      livestreamVideoControlButton
+    }
+  } = useTheme();
+  const onPress = async () => {
+    await (call === null || call === void 0 ? void 0 : call.camera.toggle());
+  };
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    style: [styles.container, {
+      backgroundColor: colors.dark_gray,
+      height: buttonSizes.xs,
+      width: buttonSizes.xs
+    }, livestreamVideoControlButton.container]
+  }, status === 'enabled' ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon, {
+      height: iconSizes.sm,
+      width: iconSizes.sm
+    }, livestreamVideoControlButton.icon]
+  }, /*#__PURE__*/React.createElement(Video, {
+    color: colors.static_white
+  })) : /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon, {
+      height: iconSizes.sm,
+      width: iconSizes.sm
+    }, livestreamVideoControlButton.icon]
+  }, /*#__PURE__*/React.createElement(VideoSlash, {
+    color: colors.static_white
+  })));
+};
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 4,
+    borderRadius: 4
+  },
+  icon: {}
+});
+//# sourceMappingURL=LivestreamVideoControlButton.js.map

package/dist/module/components/Livestream/LivestreamControls/LivestreamVideoControlButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCall","useCallStateHooks","React","useTheme","Pressable","StyleSheet","View","Video","VideoSlash","LivestreamVideoControlButton","call","useCameraState","status","theme","colors","variants","iconSizes","buttonSizes","livestreamVideoControlButton","onPress","camera","toggle","createElement","style","styles","container","backgroundColor","dark_gray","height","xs","width","icon","sm","color","static_white","create","justifyContent","alignItems","marginHorizontal","borderRadius"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/LivestreamVideoControlButton.tsx"],"mappings":"AAAA,SAASA,OAAO,EAAEC,iBAAiB,QAAQ,iCAAiC;AAC5E,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC1D,SAASC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;;AAElD;AACA;AACA;AACA,OAAO,MAAMC,4BAA4B,GAAGA,CAAA,KAAM;EAChD,MAAMC,IAAI,GAAGV,OAAO,CAAC,CAAC;EACtB,MAAM;IAAEW;EAAe,CAAC,GAAGV,iBAAiB,CAAC,CAAC;EAC9C,MAAM;IAAEW;EAAO,CAAC,GAAGD,cAAc,CAAC,CAAC;EACnC,MAAM;IACJE,KAAK,EAAE;MACLC,MAAM;MACNC,QAAQ,EAAE;QAAEC,SAAS;QAAEC;MAAY,CAAC;MACpCC;IACF;EACF,CAAC,GAAGf,QAAQ,CAAC,CAAC;EAEd,MAAMgB,OAAO,GAAG,MAAAA,CAAA,KAAY;IAC1B,OAAMT,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEU,MAAM,CAACC,MAAM,CAAC,CAAC;EAC7B,CAAC;EAED,oBACEnB,KAAA,CAAAoB,aAAA,CAAClB,SAAS;IACRe,OAAO,EAAEA,OAAQ;IACjBI,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEZ,MAAM,CAACa,SAAS;MACjCC,MAAM,EAAEX,WAAW,CAACY,EAAE;MACtBC,KAAK,EAAEb,WAAW,CAACY;IACrB,CAAC,EACDX,4BAA4B,CAACO,SAAS;EACtC,GAEDb,MAAM,KAAK,SAAS,gBACnBV,KAAA,CAAAoB,aAAA,CAAChB,IAAI;IACHiB,KAAK,EAAE,CACLC,MAAM,CAACO,IAAI,EACX;MACEH,MAAM,EAAEZ,SAAS,CAACgB,EAAE;MACpBF,KAAK,EAAEd,SAAS,CAACgB;IACnB,CAAC,EACDd,4BAA4B,CAACa,IAAI;EACjC,gBAEF7B,KAAA,CAAAoB,aAAA,CAACf,KAAK;IAAC0B,KAAK,EAAEnB,MAAM,CAACoB;EAAa,CAAE,CAChC,CAAC,gBAEPhC,KAAA,CAAAoB,aAAA,CAAChB,IAAI;IACHiB,KAAK,EAAE,CACLC,MAAM,CAACO,IAAI,EACX;MACEH,MAAM,EAAEZ,SAAS,CAACgB,EAAE;MACpBF,KAAK,EAAEd,SAAS,CAACgB;IACnB,CAAC,EACDd,4BAA4B,CAACa,IAAI;EACjC,gBAEF7B,KAAA,CAAAoB,aAAA,CAACd,UAAU;IAACyB,KAAK,EAAEnB,MAAM,CAACoB;EAAa,CAAE,CACrC,CAEC,CAAC;AAEhB,CAAC;AAED,MAAMV,MAAM,GAAGnB,UAAU,CAAC8B,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,gBAAgB,EAAE,CAAC;IACnBC,YAAY,EAAE;EAChB,CAAC;EACDR,IAAI,EAAE,CAAC;AACT,CAAC,CAAC"}

package/dist/module/components/Livestream/LivestreamControls/ViewerLeaveStreamButton.js

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../../contexts';
+import { LeaveStreamIcon } from '../../../icons';
+import { useCall, useI18n } from '@stream-io/video-react-bindings';
+
+/**
+ * Props for the ViewerLeaveStreamButton component.
+ */
+
+/**
+ * The ViewerLeaveStreamButton component displays and controls the leave stream logic of the viewer's live stream.
+ */
+export const ViewerLeaveStreamButton = _ref => {
+  let {
+    onLeaveStreamHandler
+  } = _ref;
+  const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
+  const call = useCall();
+  const {
+    t
+  } = useI18n();
+  const {
+    theme: {
+      colors,
+      variants: {
+        iconSizes
+      },
+      typefaces,
+      viewerLeaveStreamButton
+    }
+  } = useTheme();
+  const onLeaveStreamButtonPress = async () => {
+    if (onLeaveStreamHandler) {
+      onLeaveStreamHandler();
+      return;
+    }
+    try {
+      setIsAwaitingResponse(true);
+      await (call === null || call === void 0 ? void 0 : call.leave());
+      setIsAwaitingResponse(false);
+    } catch (error) {
+      console.error('Error stopping livestream', error);
+    }
+  };
+  return /*#__PURE__*/React.createElement(Pressable, {
+    style: [styles.container, {
+      backgroundColor: colors.dark_gray
+    }, viewerLeaveStreamButton.container],
+    onPress: onLeaveStreamButtonPress
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon, {
+      height: iconSizes.xs,
+      width: iconSizes.xs
+    }, viewerLeaveStreamButton.icon]
+  }, isAwaitingResponse ? /*#__PURE__*/React.createElement(ActivityIndicator, null) : /*#__PURE__*/React.createElement(LeaveStreamIcon, null)), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.text, typefaces.subtitleBold, {
+      color: colors.static_white
+    }, viewerLeaveStreamButton.text]
+  }, isAwaitingResponse ? t('Loading...') : t('Leave Stream')));
+};
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+    borderRadius: 4
+  },
+  icon: {},
+  text: {
+    marginLeft: 8,
+    includeFontPadding: false
+  }
+});
+//# sourceMappingURL=ViewerLeaveStreamButton.js.map

package/dist/module/components/Livestream/LivestreamControls/ViewerLeaveStreamButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","ActivityIndicator","Pressable","StyleSheet","Text","View","useTheme","LeaveStreamIcon","useCall","useI18n","ViewerLeaveStreamButton","_ref","onLeaveStreamHandler","isAwaitingResponse","setIsAwaitingResponse","call","t","theme","colors","variants","iconSizes","typefaces","viewerLeaveStreamButton","onLeaveStreamButtonPress","leave","error","console","createElement","style","styles","container","backgroundColor","dark_gray","onPress","icon","height","xs","width","text","subtitleBold","color","static_white","create","flexDirection","alignItems","padding","borderRadius","marginLeft","includeFontPadding"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/ViewerLeaveStreamButton.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SACEC,iBAAiB,EACjBC,SAAS,EACTC,UAAU,EACVC,IAAI,EACJC,IAAI,QACC,cAAc;AACrB,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,eAAe,QAAQ,gBAAgB;AAChD,SAASC,OAAO,EAAEC,OAAO,QAAQ,iCAAiC;;AAElE;AACA;AACA;;AASA;AACA;AACA;AACA,OAAO,MAAMC,uBAAuB,GAAGC,IAAA,IAEH;EAAA,IAFI;IACtCC;EAC4B,CAAC,GAAAD,IAAA;EAC7B,MAAM,CAACE,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EACnE,MAAMe,IAAI,GAAGP,OAAO,CAAC,CAAC;EACtB,MAAM;IAAEQ;EAAE,CAAC,GAAGP,OAAO,CAAC,CAAC;EACvB,MAAM;IACJQ,KAAK,EAAE;MACLC,MAAM;MACNC,QAAQ,EAAE;QAAEC;MAAU,CAAC;MACvBC,SAAS;MACTC;IACF;EACF,CAAC,GAAGhB,QAAQ,CAAC,CAAC;EAEd,MAAMiB,wBAAwB,GAAG,MAAAA,CAAA,KAAY;IAC3C,IAAIX,oBAAoB,EAAE;MACxBA,oBAAoB,CAAC,CAAC;MACtB;IACF;IACA,IAAI;MACFE,qBAAqB,CAAC,IAAI,CAAC;MAC3B,OAAMC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAES,KAAK,CAAC,CAAC;MACnBV,qBAAqB,CAAC,KAAK,CAAC;IAC9B,CAAC,CAAC,OAAOW,KAAK,EAAE;MACdC,OAAO,CAACD,KAAK,CAAC,2BAA2B,EAAEA,KAAK,CAAC;IACnD;EACF,CAAC;EAED,oBACE1B,KAAA,CAAA4B,aAAA,CAACzB,SAAS;IACR0B,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEb,MAAM,CAACc;IAC1B,CAAC,EACDV,uBAAuB,CAACQ,SAAS,CACjC;IACFG,OAAO,EAAEV;EAAyB,gBAElCxB,KAAA,CAAA4B,aAAA,CAACtB,IAAI;IACHuB,KAAK,EAAE,CACLC,MAAM,CAACK,IAAI,EACX;MAAEC,MAAM,EAAEf,SAAS,CAACgB,EAAE;MAAEC,KAAK,EAAEjB,SAAS,CAACgB;IAAG,CAAC,EAC7Cd,uBAAuB,CAACY,IAAI;EAC5B,GAEDrB,kBAAkB,gBAAGd,KAAA,CAAA4B,aAAA,CAAC1B,iBAAiB,MAAE,CAAC,gBAAGF,KAAA,CAAA4B,aAAA,CAACpB,eAAe,MAAE,CAC5D,CAAC,eACPR,KAAA,CAAA4B,aAAA,CAACvB,IAAI;IACHwB,KAAK,EAAE,CACLC,MAAM,CAACS,IAAI,EACXjB,SAAS,CAACkB,YAAY,EACtB;MAAEC,KAAK,EAAEtB,MAAM,CAACuB;IAAa,CAAC,EAC9BnB,uBAAuB,CAACgB,IAAI;EAC5B,GAEDzB,kBAAkB,GAAGG,CAAC,CAAC,YAAY,CAAC,GAAGA,CAAC,CAAC,cAAc,CACpD,CACG,CAAC;AAEhB,CAAC;AAED,MAAMa,MAAM,GAAG1B,UAAU,CAACuC,MAAM,CAAC;EAC/BZ,SAAS,EAAE;IACTa,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE,CAAC;IACVC,YAAY,EAAE;EAChB,CAAC;EACDZ,IAAI,EAAE,CAAC,CAAC;EACRI,IAAI,EAAE;IACJS,UAAU,EAAE,CAAC;IACbC,kBAAkB,EAAE;EACtB;AACF,CAAC,CAAC"}

package/dist/module/components/Livestream/LivestreamControls/ViewerLivestreamControls.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ViewerLeaveStreamButton as DefaultViewerLeaveStreamButton } from './ViewerLeaveStreamButton';
+import { useTheme } from '../../../contexts';
+import { Z_INDEX } from '../../../constants';
+
+/**
+ * Props for the ViewerLivestreamControls component.
+ */
+
+/**
+ * The ViewerLivestreamControls component displays the call controls for the live stream at viewer's end.
+ */
+export const ViewerLivestreamControls = _ref => {
+  let {
+    ViewerLeaveStreamButton = DefaultViewerLeaveStreamButton,
+    onLeaveStreamHandler
+  } = _ref;
+  const {
+    theme: {
+      colors,
+      viewerLivestreamControls
+    }
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.static_overlay
+    }, viewerLivestreamControls.container]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.leftElement, viewerLivestreamControls.leftElement]
+  }, ViewerLeaveStreamButton && /*#__PURE__*/React.createElement(ViewerLeaveStreamButton, {
+    onLeaveStreamHandler: onLeaveStreamHandler
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [styles.rightElement, viewerLivestreamControls.rightElement]
+  }));
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    zIndex: Z_INDEX.IN_FRONT
+  },
+  content: {},
+  leftElement: {
+    flex: 1,
+    alignItems: 'flex-start'
+  },
+  rightElement: {
+    flex: 1,
+    alignItems: 'flex-end'
+  }
+});
+//# sourceMappingURL=ViewerLivestreamControls.js.map

package/dist/module/components/Livestream/LivestreamControls/ViewerLivestreamControls.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","ViewerLeaveStreamButton","DefaultViewerLeaveStreamButton","useTheme","Z_INDEX","ViewerLivestreamControls","_ref","onLeaveStreamHandler","theme","colors","viewerLivestreamControls","createElement","style","styles","container","backgroundColor","static_overlay","leftElement","rightElement","create","position","bottom","flexDirection","alignItems","paddingVertical","paddingHorizontal","zIndex","IN_FRONT","content","flex"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/ViewerLivestreamControls.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAE/C,SACEC,uBAAuB,IAAIC,8BAA8B,QAEpD,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAQA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAGC,IAAA,IAGH;EAAA,IAHI;IACvCL,uBAAuB,GAAGC,8BAA8B;IACxDK;EAC6B,CAAC,GAAAD,IAAA;EAC9B,MAAM;IACJE,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAyB;EAC5C,CAAC,GAAGP,QAAQ,CAAC,CAAC;EAEd,oBACEL,KAAA,CAAAa,aAAA,CAACX,IAAI;IACHY,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEN,MAAM,CAACO;IAC1B,CAAC,EACDN,wBAAwB,CAACI,SAAS;EAClC,gBAEFhB,KAAA,CAAAa,aAAA,CAACX,IAAI;IAACY,KAAK,EAAE,CAACC,MAAM,CAACI,WAAW,EAAEP,wBAAwB,CAACO,WAAW;EAAE,GACrEhB,uBAAuB,iBACtBH,KAAA,CAAAa,aAAA,CAACV,uBAAuB;IACtBM,oBAAoB,EAAEA;EAAqB,CAC5C,CAEC,CAAC,eACPT,KAAA,CAAAa,aAAA,CAACX,IAAI;IACHY,KAAK,EAAE,CAACC,MAAM,CAACK,YAAY,EAAER,wBAAwB,CAACQ,YAAY;EAAE,CACrE,CACG,CAAC;AAEX,CAAC;AAED,MAAML,MAAM,GAAGd,UAAU,CAACoB,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,QAAQ,EAAE,UAAU;IACpBC,MAAM,EAAE,CAAC;IACTC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAE,EAAE;IACnBC,iBAAiB,EAAE,CAAC;IACpBC,MAAM,EAAEtB,OAAO,CAACuB;EAClB,CAAC;EACDC,OAAO,EAAE,CAAC,CAAC;EACXX,WAAW,EAAE;IACXY,IAAI,EAAE,CAAC;IACPN,UAAU,EAAE;EACd,CAAC;EACDL,YAAY,EAAE;IACZW,IAAI,EAAE,CAAC;IACPN,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

package/dist/module/components/Livestream/LivestreamControls/index.js

@@ -0,0 +1,6 @@
+export * from './HostLivestreamControls';
+export * from './LivestreamMediaControls';
+export * from './HostStartStreamButton';
+export * from './LivestreamAudioControlButton';
+export * from './LivestreamVideoControlButton';
+//# sourceMappingURL=index.js.map

package/dist/module/components/Livestream/LivestreamControls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/index.ts"],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,2BAA2B;AACzC,cAAc,yBAAyB;AACvC,cAAc,gCAAgC;AAC9C,cAAc,gCAAgC"}

package/dist/module/components/Livestream/LivestreamLayout/LivestreamLayout.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { SfuModels } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { StyleSheet, View } from 'react-native';
+import { usePaginatedLayoutSortPreset } from '../../../hooks/usePaginatedLayoutSortPreset';
+import { useTheme } from '../../../contexts';
+import { VideoRenderer as DefaultVideoRenderer } from '../../Participant';
+
+/**
+ * Props for the LivestreamLayout component.
+ */
+
+const hasScreenShare = p => p === null || p === void 0 ? void 0 : p.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+
+/**
+ * The LivestreamLayout component presents the live stream video layout.
+ */
+export const LivestreamLayout = _ref => {
+  let {
+    landscape,
+    VideoRenderer = DefaultVideoRenderer
+  } = _ref;
+  const {
+    useParticipants,
+    useHasOngoingScreenShare
+  } = useCallStateHooks();
+  const call = useCall();
+  const {
+    theme: {
+      colors,
+      livestreamLayout
+    }
+  } = useTheme();
+  const [currentSpeaker, ...otherParticipants] = useParticipants();
+  const hasOngoingScreenShare = useHasOngoingScreenShare();
+  const presenter = hasOngoingScreenShare ? hasScreenShare(currentSpeaker) && currentSpeaker : otherParticipants.find(hasScreenShare);
+  usePaginatedLayoutSortPreset(call);
+  const landScapeStyles = {
+    flexDirection: landscape ? 'row' : 'column'
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, landScapeStyles, {
+      backgroundColor: colors.dark_gray
+    }, livestreamLayout.container]
+  }, VideoRenderer && hasOngoingScreenShare && presenter && /*#__PURE__*/React.createElement(VideoRenderer, {
+    trackType: "screenShareTrack",
+    participant: presenter
+  }), VideoRenderer && !hasOngoingScreenShare && currentSpeaker && /*#__PURE__*/React.createElement(VideoRenderer, {
+    participant: currentSpeaker,
+    trackType: "videoTrack"
+  }));
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+//# sourceMappingURL=LivestreamLayout.js.map

package/dist/module/components/Livestream/LivestreamLayout/LivestreamLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","SfuModels","useCall","useCallStateHooks","StyleSheet","View","usePaginatedLayoutSortPreset","useTheme","VideoRenderer","DefaultVideoRenderer","hasScreenShare","p","publishedTracks","includes","TrackType","SCREEN_SHARE","LivestreamLayout","_ref","landscape","useParticipants","useHasOngoingScreenShare","call","theme","colors","livestreamLayout","currentSpeaker","otherParticipants","hasOngoingScreenShare","presenter","find","landScapeStyles","flexDirection","createElement","style","styles","container","backgroundColor","dark_gray","trackType","participant","create","flex"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamLayout/LivestreamLayout.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAgC,yBAAyB;AAC3E,SAASC,OAAO,EAAEC,iBAAiB,QAAQ,iCAAiC;AAC5E,SAASC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAC1D,SAASC,4BAA4B,QAAQ,6CAA6C;AAC1F,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SACEC,aAAa,IAAIC,oBAAoB,QAEhC,mBAAmB;;AAE1B;AACA;AACA;;AAaA,MAAMC,cAAc,GAAIC,CAA0B,IAChDA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,eAAe,CAACC,QAAQ,CAACZ,SAAS,CAACa,SAAS,CAACC,YAAY,CAAC;;AAE/D;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,GAAGC,IAAA,IAGH;EAAA,IAHI;IAC/BC,SAAS;IACTV,aAAa,GAAGC;EACK,CAAC,GAAAQ,IAAA;EACtB,MAAM;IAAEE,eAAe;IAAEC;EAAyB,CAAC,GAAGjB,iBAAiB,CAAC,CAAC;EACzE,MAAMkB,IAAI,GAAGnB,OAAO,CAAC,CAAC;EACtB,MAAM;IACJoB,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAiB;EACpC,CAAC,GAAGjB,QAAQ,CAAC,CAAC;EACd,MAAM,CAACkB,cAAc,EAAE,GAAGC,iBAAiB,CAAC,GAAGP,eAAe,CAAC,CAAC;EAChE,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;EACxD,MAAMQ,SAAS,GAAGD,qBAAqB,GACnCjB,cAAc,CAACe,cAAc,CAAC,IAAIA,cAAc,GAChDC,iBAAiB,CAACG,IAAI,CAACnB,cAAc,CAAC;EAE1CJ,4BAA4B,CAACe,IAAI,CAAC;EAElC,MAAMS,eAA0B,GAAG;IACjCC,aAAa,EAAEb,SAAS,GAAG,KAAK,GAAG;EACrC,CAAC;EAED,oBACElB,KAAA,CAAAgC,aAAA,CAAC3B,IAAI;IACH4B,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChBL,eAAe,EACf;MAAEM,eAAe,EAAEb,MAAM,CAACc;IAAU,CAAC,EACrCb,gBAAgB,CAACW,SAAS;EAC1B,GAED3B,aAAa,IAAImB,qBAAqB,IAAIC,SAAS,iBAClD5B,KAAA,CAAAgC,aAAA,CAACxB,aAAa;IAAC8B,SAAS,EAAC,kBAAkB;IAACC,WAAW,EAAEX;EAAU,CAAE,CACtE,EACApB,aAAa,IAAI,CAACmB,qBAAqB,IAAIF,cAAc,iBACxDzB,KAAA,CAAAgC,aAAA,CAACxB,aAAa;IAAC+B,WAAW,EAAEd,cAAe;IAACa,SAAS,EAAC;EAAY,CAAE,CAElE,CAAC;AAEX,CAAC;AAED,MAAMJ,MAAM,GAAG9B,UAAU,CAACoC,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,IAAI,EAAE;EACR;AACF,CAAC,CAAC"}

package/dist/module/components/Livestream/LivestreamLayout/index.js

@@ -0,0 +1,2 @@
+export * from './LivestreamLayout';
+//# sourceMappingURL=index.js.map

package/dist/module/components/Livestream/LivestreamLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamLayout/index.ts"],"mappings":"AAAA,cAAc,oBAAoB"}

package/dist/module/components/Livestream/LivestreamTopView/DurationBadge.js

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../../contexts';
+import { ShieldBadge } from '../../../icons';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+
+/**
+ * Props for the HostDurationBadge component.
+ */
+
+/**
+ * The HostDurationBadge component displays the duration while the live stream is active.
+ */
+export const DurationBadge = _ref => {
+  let {
+    mode
+  } = _ref;
+  const {
+    useCallSession
+  } = useCallStateHooks();
+  const session = useCallSession();
+  const [duration, setDuration] = useState(() => {
+    if (!session || !session.live_started_at) {
+      return 0;
+    }
+    const liveStartTime = new Date(session.live_started_at);
+    const now = new Date();
+    return Math.floor((now.getTime() - liveStartTime.getTime()) / 1000);
+  });
+  const call = useCall();
+  const {
+    theme: {
+      colors,
+      variants: {
+        iconSizes
+      },
+      durationBadge
+    }
+  } = useTheme();
+
+  // for host
+  useEffect(() => {
+    if (mode !== 'host') {
+      return;
+    }
+    let intervalId;
+    const handleLiveStarted = () => {
+      intervalId = setInterval(() => {
+        setDuration(d => d + 1);
+      }, 1000);
+    };
+    const handleLiveEnded = event => {
+      const callDetails = event.call.session;
+      if ((callDetails === null || callDetails === void 0 ? void 0 : callDetails.live_ended_at) !== null) {
+        clearInterval(intervalId);
+      }
+    };
+    const callLiveStartedUnsubscribe = call === null || call === void 0 ? void 0 : call.on('call.live_started', handleLiveStarted);
+    const callUpdatedUnsubscribe = call === null || call === void 0 ? void 0 : call.on('call.updated', handleLiveEnded);
+    return () => {
+      if (mode !== 'host') {
+        return;
+      }
+      if (callLiveStartedUnsubscribe && callUpdatedUnsubscribe) {
+        callLiveStartedUnsubscribe();
+        callUpdatedUnsubscribe();
+      }
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [call, mode]);
+
+  // for viewer
+  useEffect(() => {
+    if (mode !== 'viewer') {
+      return;
+    }
+    let intervalId;
+    const handleLiveStarted = () => {
+      intervalId = setInterval(() => {
+        setDuration(d => d + 1);
+      }, 1000);
+    };
+    handleLiveStarted();
+    return () => {
+      if (mode !== 'viewer') {
+        return;
+      }
+      if (intervalId) {
+        clearInterval(intervalId);
+      }
+    };
+  }, [mode]);
+  const formatDuration = durationInMs => {
+    const days = Math.floor(durationInMs / 86400);
+    const hours = Math.floor(durationInMs / 3600);
+    const minutes = Math.floor(durationInMs % 3600 / 60);
+    const seconds = durationInMs % 60;
+    return `${days ? days + ' ' : ''}${hours ? hours + ':' : ''}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.dark_gray
+    }, durationBadge.container]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon, {
+      height: iconSizes.xs,
+      width: iconSizes.xs
+    }, durationBadge.icon]
+  }, /*#__PURE__*/React.createElement(ShieldBadge, null)), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.label, {
+      color: colors.static_white
+    }, durationBadge.label]
+  }, formatDuration(duration)));
+};
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {},
+  label: {
+    textAlign: 'center',
+    fontSize: 13,
+    fontWeight: '400',
+    flexShrink: 1,
+    includeFontPadding: false,
+    paddingLeft: 4
+  }
+});
+//# sourceMappingURL=DurationBadge.js.map

package/dist/module/components/Livestream/LivestreamTopView/DurationBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useState","StyleSheet","Text","View","useTheme","ShieldBadge","useCall","useCallStateHooks","DurationBadge","_ref","mode","useCallSession","session","duration","setDuration","live_started_at","liveStartTime","Date","now","Math","floor","getTime","call","theme","colors","variants","iconSizes","durationBadge","intervalId","handleLiveStarted","setInterval","d","handleLiveEnded","event","callDetails","live_ended_at","clearInterval","callLiveStartedUnsubscribe","on","callUpdatedUnsubscribe","formatDuration","durationInMs","days","hours","minutes","seconds","createElement","style","styles","container","backgroundColor","dark_gray","icon","height","xs","width","label","color","static_white","create","paddingHorizontal","paddingVertical","borderRadius","flexDirection","alignItems","justifyContent","textAlign","fontSize","fontWeight","flexShrink","includeFontPadding","paddingLeft"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamTopView/DurationBadge.tsx"],"mappings":"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"}

package/dist/module/components/Livestream/LivestreamTopView/FollowerCount.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../../contexts';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { Eye } from '../../../icons';
+
+/**
+ * Props for the FollowerCount component.
+ */
+
+/**
+ * The FollowerCount component that displays the number of participants while in the call.
+ */
+export const FollowerCount = _ref => {
+  let {} = _ref;
+  const {
+    theme: {
+      colors,
+      variants: {
+        iconSizes
+      },
+      followerCount
+    }
+  } = useTheme();
+  const {
+    useParticipantCount
+  } = useCallStateHooks();
+  const totalParticipants = useParticipantCount();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.dark_gray
+    }, followerCount.container]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon, {
+      height: iconSizes.xs,
+      width: iconSizes.xs
+    }, followerCount.icon]
+  }, /*#__PURE__*/React.createElement(Eye, null)), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.label, {
+      color: colors.static_white
+    }, followerCount.label]
+  }, totalParticipants));
+};
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderTopRightRadius: 4,
+    borderBottomRightRadius: 4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {},
+  label: {
+    fontSize: 13,
+    fontWeight: '400',
+    flexShrink: 1,
+    textAlign: 'center',
+    includeFontPadding: false,
+    marginLeft: 4
+  }
+});
+//# sourceMappingURL=FollowerCount.js.map

package/dist/module/components/Livestream/LivestreamTopView/FollowerCount.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","Text","View","useTheme","useCallStateHooks","Eye","FollowerCount","_ref","theme","colors","variants","iconSizes","followerCount","useParticipantCount","totalParticipants","createElement","style","styles","container","backgroundColor","dark_gray","icon","height","xs","width","label","color","static_white","create","paddingHorizontal","paddingVertical","borderTopRightRadius","borderBottomRightRadius","flexDirection","alignItems","justifyContent","fontSize","fontWeight","flexShrink","textAlign","includeFontPadding","marginLeft"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamTopView/FollowerCount.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,EAAEC,IAAI,QAAQ,cAAc;AACrD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,GAAG,QAAQ,gBAAgB;;AAEpC;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAO,MAAMC,aAAa,GAAGC,IAAA,IAA4B;EAAA,IAA3B,CAAqB,CAAC,GAAAA,IAAA;EAClD,MAAM;IACJC,KAAK,EAAE;MACLC,MAAM;MACNC,QAAQ,EAAE;QAAEC;MAAU,CAAC;MACvBC;IACF;EACF,CAAC,GAAGT,QAAQ,CAAC,CAAC;EACd,MAAM;IAAEU;EAAoB,CAAC,GAAGT,iBAAiB,CAAC,CAAC;EACnD,MAAMU,iBAAiB,GAAGD,mBAAmB,CAAC,CAAC;EAC/C,oBACEd,KAAA,CAAAgB,aAAA,CAACb,IAAI;IACHc,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAEV,MAAM,CAACW;IAAU,CAAC,EACrCR,aAAa,CAACM,SAAS;EACvB,gBAEFnB,KAAA,CAAAgB,aAAA,CAACb,IAAI;IACHc,KAAK,EAAE,CACLC,MAAM,CAACI,IAAI,EACX;MAAEC,MAAM,EAAEX,SAAS,CAACY,EAAE;MAAEC,KAAK,EAAEb,SAAS,CAACY;IAAG,CAAC,EAC7CX,aAAa,CAACS,IAAI;EAClB,gBAEFtB,KAAA,CAAAgB,aAAA,CAACV,GAAG,MAAE,CACF,CAAC,eACPN,KAAA,CAAAgB,aAAA,CAACd,IAAI;IACHe,KAAK,EAAE,CACLC,MAAM,CAACQ,KAAK,EACZ;MAAEC,KAAK,EAAEjB,MAAM,CAACkB;IAAa,CAAC,EAC9Bf,aAAa,CAACa,KAAK;EACnB,GAEDX,iBACG,CACF,CAAC;AAEX,CAAC;AAED,MAAMG,MAAM,GAAGjB,UAAU,CAAC4B,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,iBAAiB,EAAE,CAAC;IACpBC,eAAe,EAAE,CAAC;IAClBC,oBAAoB,EAAE,CAAC;IACvBC,uBAAuB,EAAE,CAAC;IAC1BC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDd,IAAI,EAAE,CAAC,CAAC;EACRI,KAAK,EAAE;IACLW,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,KAAK;IACjBC,UAAU,EAAE,CAAC;IACbC,SAAS,EAAE,QAAQ;IACnBC,kBAAkB,EAAE,KAAK;IACzBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

package/dist/module/components/Livestream/LivestreamTopView/HostLivestreamTopView.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { DurationBadge as DefaultDurationBadge } from './DurationBadge';
+import { LiveIndicator as DefaultLiveIndicator } from './LiveIndicator';
+import { FollowerCount as DefaultFollowerCount } from './FollowerCount';
+import { useTheme } from '../../../contexts';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { Z_INDEX } from '../../../constants';
+
+/**
+ * Props for the HostLivestreamTopView component.
+ */
+
+/**
+ * The HostLivestreamTopView component displays the top view component of the host's live stream.
+ */
+export const HostLivestreamTopView = _ref => {
+  let {
+    DurationBadge = DefaultDurationBadge,
+    LiveIndicator = DefaultLiveIndicator,
+    FollowerCount = DefaultFollowerCount
+  } = _ref;
+  const {
+    useIsCallLive,
+    useIsCallBroadcastingInProgress
+  } = useCallStateHooks();
+  const isCallLive = useIsCallLive();
+  const isBroadcasting = useIsCallBroadcastingInProgress();
+  const liveOrBroadcasting = isCallLive || isBroadcasting;
+  const {
+    theme: {
+      colors,
+      hostLivestreamTopView
+    }
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles.container, {
+      backgroundColor: colors.static_overlay
+    }, hostLivestreamTopView.container]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.leftElement, hostLivestreamTopView.leftElement]
+  }, DurationBadge && /*#__PURE__*/React.createElement(DurationBadge, {
+    mode: "host"
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [styles.centerElement, hostLivestreamTopView.centerElement]
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.rightElement, hostLivestreamTopView.rightElement]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.liveInfo, hostLivestreamTopView.liveInfo]
+  }, liveOrBroadcasting && LiveIndicator && /*#__PURE__*/React.createElement(LiveIndicator, null), FollowerCount && /*#__PURE__*/React.createElement(FollowerCount, null))));
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    borderBottomEndRadius: 8,
+    borderBottomStartRadius: 8,
+    zIndex: Z_INDEX.IN_FRONT
+  },
+  liveInfo: {
+    flexDirection: 'row'
+  },
+  leftElement: {
+    flex: 1,
+    alignItems: 'flex-start'
+  },
+  centerElement: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  rightElement: {
+    flex: 1,
+    alignItems: 'flex-end'
+  }
+});
+//# sourceMappingURL=HostLivestreamTopView.js.map

package/dist/module/components/Livestream/LivestreamTopView/HostLivestreamTopView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","View","DurationBadge","DefaultDurationBadge","LiveIndicator","DefaultLiveIndicator","FollowerCount","DefaultFollowerCount","useTheme","useCallStateHooks","Z_INDEX","HostLivestreamTopView","_ref","useIsCallLive","useIsCallBroadcastingInProgress","isCallLive","isBroadcasting","liveOrBroadcasting","theme","colors","hostLivestreamTopView","createElement","style","styles","container","backgroundColor","static_overlay","leftElement","mode","centerElement","rightElement","liveInfo","create","position","top","flexDirection","alignItems","paddingVertical","paddingHorizontal","borderBottomEndRadius","borderBottomStartRadius","zIndex","IN_FRONT","flex"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamTopView/HostLivestreamTopView.tsx"],"mappings":"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"}