@stream-io/video-react-native-sdk 0.6.2 → 0.6.3

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

@@ -1,15 +1,22 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, SafeAreaView } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
 import { useTheme } from '../../../contexts';
 import { HostLivestreamTopView as DefaultHostLivestreamTopView } from '../LivestreamTopView/HostLivestreamTopView';
 import { HostLivestreamControls as DefaultHostLivestreamControls } from '../LivestreamControls/HostLivestreamControls';
 import { LivestreamLayout as DefaultLivestreamLayout } from '../LivestreamLayout';
+import { Z_INDEX } from '../../../constants';
+import { FloatingParticipantView as DefaultFloatingParticipantView } from '../../Participant/FloatingParticipantView';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { SfuModels } from '@stream-io/video-client';
+import { ScreenShareOverlay as DefaultScreenShaerOverlay } from '../../utility/ScreenShareOverlay';
 
 /**
  * Props for the HostLivestream component.
  */
 
+const hasVideoTrack = p => p === null || p === void 0 ? void 0 : p.publishedTracks.includes(SfuModels.TrackType.VIDEO);
+
 /**
  * The HostLivestream component displays the UI for the Host's live stream.
  */
@@ -17,6 +24,8 @@ export const HostLivestream = ({
   HostLivestreamTopView = DefaultHostLivestreamTopView,
   HostLivestreamControls = DefaultHostLivestreamControls,
   LivestreamLayout = DefaultLivestreamLayout,
+  FloatingParticipantView = DefaultFloatingParticipantView,
+  ScreenShareOverlay = DefaultScreenShaerOverlay,
   LiveIndicator,
   FollowerCount,
   DurationBadge,
@@ -24,7 +33,8 @@ export const HostLivestream = ({
   LivestreamMediaControls,
   onEndStreamHandler,
   onStartStreamHandler,
-  hls = false
+  hls = false,
+  stopPublishedStreamsOnEndStream = true
 }) => {
   const {
     theme: {
@@ -32,6 +42,13 @@ export const HostLivestream = ({
       hostLivestream
     }
   } = useTheme();
+  const {
+    useParticipants,
+    useHasOngoingScreenShare
+  } = useCallStateHooks();
+  const [currentSpeaker] = useParticipants();
+  const hasOngoingScreenShare = useHasOngoingScreenShare();
+  const floatingParticipant = hasOngoingScreenShare && hasVideoTrack(currentSpeaker) && currentSpeaker;
 
   // Automatically route audio to speaker devices as relevant for watching videos.
   useEffect(() => {
@@ -40,26 +57,62 @@ export const HostLivestream = ({
     });
     return () => InCallManager.stop();
   }, []);
+  const [topViewHeight, setTopViewHeight] = React.useState();
+  const [controlsHeight, setControlsHeight] = React.useState();
   const topViewProps = {
     LiveIndicator,
     FollowerCount,
-    DurationBadge
+    DurationBadge,
+    onLayout: event => {
+      setTopViewHeight(event.nativeEvent.layout.height);
+    }
   };
-  return /*#__PURE__*/React.createElement(SafeAreaView, {
+  return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
-      backgroundColor: colors.static_grey
+      backgroundColor: colors.dark_gray
     }, hostLivestream.container]
-  }, HostLivestreamTopView && /*#__PURE__*/React.createElement(HostLivestreamTopView, topViewProps), LivestreamLayout && /*#__PURE__*/React.createElement(LivestreamLayout, null), HostLivestreamControls && /*#__PURE__*/React.createElement(HostLivestreamControls, {
+  }, HostLivestreamTopView && /*#__PURE__*/React.createElement(View, {
+    style: styles.topViewContainer,
+    onLayout: event => {
+      setTopViewHeight(event.nativeEvent.layout.height);
+    }
+  }, /*#__PURE__*/React.createElement(HostLivestreamTopView, topViewProps)), FloatingParticipantView && floatingParticipant && topViewHeight && controlsHeight && /*#__PURE__*/React.createElement(FloatingParticipantView, {
+    participant: floatingParticipant,
+    draggableContainerStyle: [StyleSheet.absoluteFill, {
+      top: topViewHeight,
+      bottom: controlsHeight
+    }]
+  }), LivestreamLayout && /*#__PURE__*/React.createElement(LivestreamLayout, {
+    ScreenShareOverlay: ScreenShareOverlay
+  }), HostLivestreamControls && /*#__PURE__*/React.createElement(HostLivestreamControls, {
     onEndStreamHandler: onEndStreamHandler,
     onStartStreamHandler: onStartStreamHandler,
     HostStartStreamButton: HostStartStreamButton,
     LivestreamMediaControls: LivestreamMediaControls,
-    hls: hls
+    hls: hls,
+    onLayout: event => {
+      setControlsHeight(event.nativeEvent.layout.height);
+    },
+    stopPublishedStreamsOnEndStream: stopPublishedStreamsOnEndStream
   }));
 };
 const styles = StyleSheet.create({
   container: {
     flex: 1
+  },
+  topViewContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: Z_INDEX.IN_FRONT
+  },
+  controlsViewContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: Z_INDEX.IN_FRONT
   }
 });
 //# sourceMappingURL=HostLivestream.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","StyleSheet","SafeAreaView","InCallManager","useTheme","HostLivestreamTopView","DefaultHostLivestreamTopView","HostLivestreamControls","DefaultHostLivestreamControls","LivestreamLayout","DefaultLivestreamLayout","HostLivestream","LiveIndicator","FollowerCount","DurationBadge","HostStartStreamButton","LivestreamMediaControls","onEndStreamHandler","onStartStreamHandler","hls","theme","colors","hostLivestream","start","media","stop","topViewProps","createElement","style","styles","container","backgroundColor","static_grey","create","flex"],"sourceRoot":"../../../../../src","sources":["components/Livestream/HostLivestream/HostLivestream.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,UAAU,EAAEC,YAAY,QAAQ,cAAc;AACvD,OAAOC,aAAa,MAAM,6BAA6B;AAEvD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SACEC,qBAAqB,IAAIC,4BAA4B,QAEhD,4CAA4C;AACnD,SACEC,sBAAsB,IAAIC,6BAA6B,QAElD,8CAA8C;AACrD,SACEC,gBAAgB,IAAIC,uBAAuB,QAEtC,qBAAqB;;AAE5B;AACA;AACA;;AAqBA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAC7BN,qBAAqB,GAAGC,4BAA4B;EACpDC,sBAAsB,GAAGC,6BAA6B;EACtDC,gBAAgB,GAAGC,uBAAuB;EAC1CE,aAAa;EACbC,aAAa;EACbC,aAAa;EACbC,qBAAqB;EACrBC,uBAAuB;EACvBC,kBAAkB;EAClBC,oBAAoB;EACpBC,GAAG,GAAG;AACa,CAAC,KAAK;EACzB,MAAM;IACJC,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAe;EAClC,CAAC,GAAGlB,QAAQ,CAAC,CAAC;;EAEd;EACAJ,SAAS,CAAC,MAAM;IACdG,aAAa,CAACoB,KAAK,CAAC;MAAEC,KAAK,EAAE;IAAQ,CAAC,CAAC;IACvC,OAAO,MAAMrB,aAAa,CAACsB,IAAI,CAAC,CAAC;EACnC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,YAAwC,GAAG;IAC/Cd,aAAa;IACbC,aAAa;IACbC;EACF,CAAC;EAED,oBACEf,KAAA,CAAA4B,aAAA,CAACzB,YAAY;IACX0B,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEV,MAAM,CAACW;IAC1B,CAAC,EACDV,cAAc,CAACQ,SAAS;EACxB,GAEDzB,qBAAqB,iBAAIN,KAAA,CAAA4B,aAAA,CAACtB,qBAAqB,EAAKqB,YAAe,CAAC,EACpEjB,gBAAgB,iBAAIV,KAAA,CAAA4B,aAAA,CAAClB,gBAAgB,MAAE,CAAC,EACxCF,sBAAsB,iBACrBR,KAAA,CAAA4B,aAAA,CAACpB,sBAAsB;IACrBU,kBAAkB,EAAEA,kBAAmB;IACvCC,oBAAoB,EAAEA,oBAAqB;IAC3CH,qBAAqB,EAAEA,qBAAsB;IAC7CC,uBAAuB,EAAEA,uBAAwB;IACjDG,GAAG,EAAEA;EAAI,CACV,CAES,CAAC;AAEnB,CAAC;AAED,MAAMU,MAAM,GAAG5B,UAAU,CAACgC,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,IAAI,EAAE;EACR;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","useEffect","StyleSheet","View","InCallManager","useTheme","HostLivestreamTopView","DefaultHostLivestreamTopView","HostLivestreamControls","DefaultHostLivestreamControls","LivestreamLayout","DefaultLivestreamLayout","Z_INDEX","FloatingParticipantView","DefaultFloatingParticipantView","useCallStateHooks","SfuModels","ScreenShareOverlay","DefaultScreenShaerOverlay","hasVideoTrack","p","publishedTracks","includes","TrackType","VIDEO","HostLivestream","LiveIndicator","FollowerCount","DurationBadge","HostStartStreamButton","LivestreamMediaControls","onEndStreamHandler","onStartStreamHandler","hls","stopPublishedStreamsOnEndStream","theme","colors","hostLivestream","useParticipants","useHasOngoingScreenShare","currentSpeaker","hasOngoingScreenShare","floatingParticipant","start","media","stop","topViewHeight","setTopViewHeight","useState","controlsHeight","setControlsHeight","topViewProps","onLayout","event","nativeEvent","layout","height","createElement","style","styles","container","backgroundColor","dark_gray","topViewContainer","participant","draggableContainerStyle","absoluteFill","top","bottom","create","flex","position","left","right","zIndex","IN_FRONT","controlsViewContainer"],"sourceRoot":"../../../../../src","sources":["components/Livestream/HostLivestream/HostLivestream.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,OAAOC,aAAa,MAAM,6BAA6B;AAEvD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SACEC,qBAAqB,IAAIC,4BAA4B,QAEhD,4CAA4C;AACnD,SACEC,sBAAsB,IAAIC,6BAA6B,QAElD,8CAA8C;AACrD,SACEC,gBAAgB,IAAIC,uBAAuB,QAEtC,qBAAqB;AAC5B,SAASC,OAAO,QAAQ,oBAAoB;AAC5C,SACEC,uBAAuB,IAAIC,8BAA8B,QAEpD,2CAA2C;AAClD,SAASC,iBAAiB,QAAQ,iCAAiC;AACnE,SAASC,SAAS,QAAgC,yBAAyB;AAC3E,SACEC,kBAAkB,IAAIC,yBAAyB,QAE1C,kCAAkC;;AAEzC;AACA;AACA;;AAkCA,MAAMC,aAAa,GAAIC,CAA0B,IAC/CA,CAAC,aAADA,CAAC,uBAADA,CAAC,CAAEC,eAAe,CAACC,QAAQ,CAACN,SAAS,CAACO,SAAS,CAACC,KAAK,CAAC;;AAExD;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAC;EAC7BnB,qBAAqB,GAAGC,4BAA4B;EACpDC,sBAAsB,GAAGC,6BAA6B;EACtDC,gBAAgB,GAAGC,uBAAuB;EAC1CE,uBAAuB,GAAGC,8BAA8B;EACxDG,kBAAkB,GAAGC,yBAAyB;EAC9CQ,aAAa;EACbC,aAAa;EACbC,aAAa;EACbC,qBAAqB;EACrBC,uBAAuB;EACvBC,kBAAkB;EAClBC,oBAAoB;EACpBC,GAAG,GAAG,KAAK;EACXC,+BAA+B,GAAG;AACf,CAAC,KAAK;EACzB,MAAM;IACJC,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAe;EAClC,CAAC,GAAGhC,QAAQ,CAAC,CAAC;EAEd,MAAM;IAAEiC,eAAe;IAAEC;EAAyB,CAAC,GAAGxB,iBAAiB,CAAC,CAAC;EACzE,MAAM,CAACyB,cAAc,CAAC,GAAGF,eAAe,CAAC,CAAC;EAC1C,MAAMG,qBAAqB,GAAGF,wBAAwB,CAAC,CAAC;EACxD,MAAMG,mBAAmB,GACvBD,qBAAqB,IAAItB,aAAa,CAACqB,cAAc,CAAC,IAAIA,cAAc;;EAE1E;EACAvC,SAAS,CAAC,MAAM;IACdG,aAAa,CAACuC,KAAK,CAAC;MAAEC,KAAK,EAAE;IAAQ,CAAC,CAAC;IACvC,OAAO,MAAMxC,aAAa,CAACyC,IAAI,CAAC,CAAC;EACnC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAG/C,KAAK,CAACgD,QAAQ,CAAS,CAAC;EAClE,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGlD,KAAK,CAACgD,QAAQ,CAAS,CAAC;EAEpE,MAAMG,YAAwC,GAAG;IAC/CzB,aAAa;IACbC,aAAa;IACbC,aAAa;IACbwB,QAAQ,EAAGC,KAAK,IAAK;MACnBN,gBAAgB,CAACM,KAAK,CAACC,WAAW,CAACC,MAAM,CAACC,MAAM,CAAC;IACnD;EACF,CAAC;EAED,oBACExD,KAAA,CAAAyD,aAAA,CAACtD,IAAI;IACHuD,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEzB,MAAM,CAAC0B;IAC1B,CAAC,EACDzB,cAAc,CAACuB,SAAS;EACxB,GAEDtD,qBAAqB,iBACpBN,KAAA,CAAAyD,aAAA,CAACtD,IAAI;IACHuD,KAAK,EAAEC,MAAM,CAACI,gBAAiB;IAC/BX,QAAQ,EAAGC,KAAK,IAAK;MACnBN,gBAAgB,CAACM,KAAK,CAACC,WAAW,CAACC,MAAM,CAACC,MAAM,CAAC;IACnD;EAAE,gBAEFxD,KAAA,CAAAyD,aAAA,CAACnD,qBAAqB,EAAK6C,YAAe,CACtC,CACP,EACAtC,uBAAuB,IACtB6B,mBAAmB,IACnBI,aAAa,IACbG,cAAc,iBACZjD,KAAA,CAAAyD,aAAA,CAAC5C,uBAAuB;IACtBmD,WAAW,EAAEtB,mBAAoB;IACjCuB,uBAAuB,EAAE,CACvB/D,UAAU,CAACgE,YAAY,EACvB;MACEC,GAAG,EAAErB,aAAa;MAClBsB,MAAM,EAAEnB;IACV,CAAC;EACD,CACH,CACF,EACFvC,gBAAgB,iBACfV,KAAA,CAAAyD,aAAA,CAAC/C,gBAAgB;IAACO,kBAAkB,EAAEA;EAAmB,CAAE,CAC5D,EACAT,sBAAsB,iBACrBR,KAAA,CAAAyD,aAAA,CAACjD,sBAAsB;IACrBuB,kBAAkB,EAAEA,kBAAmB;IACvCC,oBAAoB,EAAEA,oBAAqB;IAC3CH,qBAAqB,EAAEA,qBAAsB;IAC7CC,uBAAuB,EAAEA,uBAAwB;IACjDG,GAAG,EAAEA,GAAI;IACTmB,QAAQ,EAAGC,KAAK,IAAK;MACnBH,iBAAiB,CAACG,KAAK,CAACC,WAAW,CAACC,MAAM,CAACC,MAAM,CAAC;IACpD,CAAE;IACFtB,+BAA+B,EAAEA;EAAgC,CAClE,CAEC,CAAC;AAEX,CAAC;AAED,MAAMyB,MAAM,GAAGzD,UAAU,CAACmE,MAAM,CAAC;EAC/BT,SAAS,EAAE;IACTU,IAAI,EAAE;EACR,CAAC;EACDP,gBAAgB,EAAE;IAChBQ,QAAQ,EAAE,UAAU;IACpBJ,GAAG,EAAE,CAAC;IACNK,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE9D,OAAO,CAAC+D;EAClB,CAAC;EACDC,qBAAqB,EAAE;IACrBL,QAAQ,EAAE,UAAU;IACpBH,MAAM,EAAE,CAAC;IACTI,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE9D,OAAO,CAAC+D;EAClB;AACF,CAAC,CAAC"}

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

@@ -17,7 +17,9 @@ export const HostLivestreamControls = ({
   LivestreamMediaControls = DefaultLivestreamMediaControls,
   onEndStreamHandler,
   onStartStreamHandler,
-  hls = false
+  hls = false,
+  stopPublishedStreamsOnEndStream,
+  onLayout
 }) => {
   const {
     theme: {
@@ -28,13 +30,15 @@ export const HostLivestreamControls = ({
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       backgroundColor: colors.static_overlay
-    }, hostLivestreamControls.container]
+    }, hostLivestreamControls.container],
+    onLayout: onLayout
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.leftElement, hostLivestreamControls.leftElement]
   }, HostStartStreamButton && /*#__PURE__*/React.createElement(HostStartStreamButton, {
     onEndStreamHandler: onEndStreamHandler,
     onStartStreamHandler: onStartStreamHandler,
-    hls: hls
+    hls: hls,
+    stopPublishedStreamsOnEndStream: stopPublishedStreamsOnEndStream
   })), /*#__PURE__*/React.createElement(View, {
     style: [styles.rightElement, hostLivestreamControls.rightElement]
   }, LivestreamMediaControls && /*#__PURE__*/React.createElement(LivestreamMediaControls, null)));

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","HostStartStreamButton","DefaultHostStartStreamButton","LivestreamMediaControls","DefaultLivestreamMediaControls","useTheme","Z_INDEX","HostLivestreamControls","onEndStreamHandler","onStartStreamHandler","hls","theme","colors","hostLivestreamControls","createElement","style","styles","container","backgroundColor","static_overlay","leftElement","rightElement","create","position","bottom","flexDirection","alignItems","paddingVertical","paddingHorizontal","zIndex","IN_FRONT","flex"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/HostLivestreamControls.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SACEC,qBAAqB,IAAIC,4BAA4B,QAEhD,yBAAyB;AAChC,SACEC,uBAAuB,IAAIC,8BAA8B,QAEpD,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAgBA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACrCN,qBAAqB,GAAGC,4BAA4B;EACpDC,uBAAuB,GAAGC,8BAA8B;EACxDI,kBAAkB;EAClBC,oBAAoB;EACpBC,GAAG,GAAG;AACqB,CAAC,KAAK;EACjC,MAAM;IACJC,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAuB;EAC1C,CAAC,GAAGR,QAAQ,CAAC,CAAC;EACd,oBACEP,KAAA,CAAAgB,aAAA,CAACd,IAAI;IACHe,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAEN,MAAM,CAACO;IAAe,CAAC,EAC1CN,sBAAsB,CAACI,SAAS;EAChC,gBAEFnB,KAAA,CAAAgB,aAAA,CAACd,IAAI;IAACe,KAAK,EAAE,CAACC,MAAM,CAACI,WAAW,EAAEP,sBAAsB,CAACO,WAAW;EAAE,GACnEnB,qBAAqB,iBACpBH,KAAA,CAAAgB,aAAA,CAACb,qBAAqB;IACpBO,kBAAkB,EAAEA,kBAAmB;IACvCC,oBAAoB,EAAEA,oBAAqB;IAC3CC,GAAG,EAAEA;EAAI,CACV,CAEC,CAAC,eACPZ,KAAA,CAAAgB,aAAA,CAACd,IAAI;IAACe,KAAK,EAAE,CAACC,MAAM,CAACK,YAAY,EAAER,sBAAsB,CAACQ,YAAY;EAAE,GACrElB,uBAAuB,iBAAIL,KAAA,CAAAgB,aAAA,CAACX,uBAAuB,MAAE,CAClD,CACF,CAAC;AAEX,CAAC;AAED,MAAMa,MAAM,GAAGjB,UAAU,CAACuB,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,EAAEvB,OAAO,CAACwB;EAClB,CAAC;EACDV,WAAW,EAAE;IACXW,IAAI,EAAE,CAAC;IACPL,UAAU,EAAE;EACd,CAAC;EACDL,YAAY,EAAE;IACZU,IAAI,EAAE,CAAC;IACPL,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","StyleSheet","View","HostStartStreamButton","DefaultHostStartStreamButton","LivestreamMediaControls","DefaultLivestreamMediaControls","useTheme","Z_INDEX","HostLivestreamControls","onEndStreamHandler","onStartStreamHandler","hls","stopPublishedStreamsOnEndStream","onLayout","theme","colors","hostLivestreamControls","createElement","style","styles","container","backgroundColor","static_overlay","leftElement","rightElement","create","position","bottom","flexDirection","alignItems","paddingVertical","paddingHorizontal","zIndex","IN_FRONT","flex"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/HostLivestreamControls.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAC1D,SACEC,qBAAqB,IAAIC,4BAA4B,QAEhD,yBAAyB;AAChC,SACEC,uBAAuB,IAAIC,8BAA8B,QAEpD,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AAqBA;AACA;AACA;AACA,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACrCN,qBAAqB,GAAGC,4BAA4B;EACpDC,uBAAuB,GAAGC,8BAA8B;EACxDI,kBAAkB;EAClBC,oBAAoB;EACpBC,GAAG,GAAG,KAAK;EACXC,+BAA+B;EAC/BC;AAC2B,CAAC,KAAK;EACjC,MAAM;IACJC,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAuB;EAC1C,CAAC,GAAGV,QAAQ,CAAC,CAAC;EACd,oBACEP,KAAA,CAAAkB,aAAA,CAAChB,IAAI;IACHiB,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MAAEC,eAAe,EAAEN,MAAM,CAACO;IAAe,CAAC,EAC1CN,sBAAsB,CAACI,SAAS,CAChC;IACFP,QAAQ,EAAEA;EAAS,gBAEnBd,KAAA,CAAAkB,aAAA,CAAChB,IAAI;IAACiB,KAAK,EAAE,CAACC,MAAM,CAACI,WAAW,EAAEP,sBAAsB,CAACO,WAAW;EAAE,GACnErB,qBAAqB,iBACpBH,KAAA,CAAAkB,aAAA,CAACf,qBAAqB;IACpBO,kBAAkB,EAAEA,kBAAmB;IACvCC,oBAAoB,EAAEA,oBAAqB;IAC3CC,GAAG,EAAEA,GAAI;IACTC,+BAA+B,EAAEA;EAAgC,CAClE,CAEC,CAAC,eACPb,KAAA,CAAAkB,aAAA,CAAChB,IAAI;IAACiB,KAAK,EAAE,CAACC,MAAM,CAACK,YAAY,EAAER,sBAAsB,CAACQ,YAAY;EAAE,GACrEpB,uBAAuB,iBAAIL,KAAA,CAAAkB,aAAA,CAACb,uBAAuB,MAAE,CAClD,CACF,CAAC;AAEX,CAAC;AAED,MAAMe,MAAM,GAAGnB,UAAU,CAACyB,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,EAAEzB,OAAO,CAAC0B;EAClB,CAAC;EACDV,WAAW,EAAE;IACXW,IAAI,EAAE,CAAC;IACPL,UAAU,EAAE;EACd,CAAC;EACDL,YAAY,EAAE;IACZU,IAAI,EAAE,CAAC;IACPL,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

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

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '../../../contexts';
 import { EndBroadcastIcon, StartStreamIcon } from '../../../icons';
+import { SfuModels } from '@stream-io/video-client';
 
 /**
  * Props for the HostStartStreamButton component.
@@ -14,7 +15,8 @@ import { EndBroadcastIcon, StartStreamIcon } from '../../../icons';
 export const HostStartStreamButton = ({
   onEndStreamHandler,
   onStartStreamHandler,
-  hls
+  hls,
+  stopPublishedStreamsOnEndStream
 }) => {
   const [isAwaitingResponse, setIsAwaitingResponse] = useState(false);
   const {
@@ -39,10 +41,6 @@ export const HostStartStreamButton = ({
   } = useI18n();
   const liveOrBroadcasting = isCallLive || isCallBroadcasting;
   const onStartStreamButtonPress = async () => {
-    if (onStartStreamHandler) {
-      onStartStreamHandler();
-      return;
-    }
     try {
       setIsAwaitingResponse(true);
       await (call === null || call === void 0 ? void 0 : call.goLive());
@@ -50,23 +48,29 @@ export const HostStartStreamButton = ({
         await (call === null || call === void 0 ? void 0 : call.startHLS());
       }
       setIsAwaitingResponse(false);
+      if (onStartStreamHandler) {
+        onStartStreamHandler();
+      }
     } catch (error) {
       console.error('Error starting livestream', error);
     }
   };
   const onEndStreamButtonPress = async () => {
-    if (onEndStreamHandler) {
-      onEndStreamHandler();
-      return;
-    }
     try {
       setIsAwaitingResponse(true);
+      if (stopPublishedStreamsOnEndStream) {
+        await (call === null || call === void 0 ? void 0 : call.stopPublish(SfuModels.TrackType.VIDEO));
+        await (call === null || call === void 0 ? void 0 : call.stopPublish(SfuModels.TrackType.SCREEN_SHARE));
+      }
       if (hls) {
         await (call === null || call === void 0 ? void 0 : call.stopHLS());
       } else {
         await (call === null || call === void 0 ? void 0 : call.stopLive());
       }
       setIsAwaitingResponse(false);
+      if (onEndStreamHandler) {
+        onEndStreamHandler();
+      }
     } catch (error) {
       console.error('Error stopping livestream', error);
     }

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

@@ -1 +1 @@
-{"version":3,"names":["useCall","useCallStateHooks","useI18n","React","useState","ActivityIndicator","Pressable","StyleSheet","Text","View","useTheme","EndBroadcastIcon","StartStreamIcon","HostStartStreamButton","onEndStreamHandler","onStartStreamHandler","hls","isAwaitingResponse","setIsAwaitingResponse","useIsCallLive","useIsCallHLSBroadcastingInProgress","theme","colors","variants","iconSizes","typefaces","hostStartStreamButton","call","isCallLive","isCallBroadcasting","t","liveOrBroadcasting","onStartStreamButtonPress","goLive","startHLS","error","console","onEndStreamButtonPress","stopHLS","stopLive","createElement","disabled","style","styles","container","backgroundColor","dark_gray","primary","onPress","icon","height","xs","width","text","subtitleBold","color","static_white","create","flexDirection","alignItems","padding","borderRadius","marginLeft","includeFontPadding"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/HostStartStreamButton.tsx"],"mappings":"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"}
+{"version":3,"names":["useCall","useCallStateHooks","useI18n","React","useState","ActivityIndicator","Pressable","StyleSheet","Text","View","useTheme","EndBroadcastIcon","StartStreamIcon","SfuModels","HostStartStreamButton","onEndStreamHandler","onStartStreamHandler","hls","stopPublishedStreamsOnEndStream","isAwaitingResponse","setIsAwaitingResponse","useIsCallLive","useIsCallHLSBroadcastingInProgress","theme","colors","variants","iconSizes","typefaces","hostStartStreamButton","call","isCallLive","isCallBroadcasting","t","liveOrBroadcasting","onStartStreamButtonPress","goLive","startHLS","error","console","onEndStreamButtonPress","stopPublish","TrackType","VIDEO","SCREEN_SHARE","stopHLS","stopLive","createElement","disabled","style","styles","container","backgroundColor","dark_gray","primary","onPress","icon","height","xs","width","text","subtitleBold","color","static_white","create","flexDirection","alignItems","padding","borderRadius","marginLeft","includeFontPadding"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/HostStartStreamButton.tsx"],"mappings":"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"}

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

@@ -0,0 +1,117 @@
+import React, { useEffect } from 'react';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { NativeModules, Platform, Pressable, StyleSheet, View, findNodeHandle } from 'react-native';
+import { ScreenShare } from '../../../icons/ScreenShare';
+import { StopScreenShare } from '../../../icons/StopScreenShare';
+import { ScreenCapturePickerView } from '@stream-io/react-native-webrtc';
+import { SfuModels } from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useIsIosScreenshareBroadcastStarted } from '../../../hooks/useIsIosScreenshareBroadcastStarted';
+import { usePrevious } from '../../../utils/hooks/usePrevious';
+// ios >= 14.0 or android - platform restrictions
+const CanDeviceScreenShare = Platform.OS === 'ios' &&
+// @ts-ignore
+Number.parseInt(Platform.Version.split('.')[0], 10) >= 14 || Platform.OS === 'android';
+
+/**
+ * The LivestreamVideoControlButton controls the screenshare stream publish/unpublish while in the livestream for the host.
+ */
+export const LivestreamScreenShareToggleButton = () => {
+  const {
+    theme: {
+      colors,
+      variants: {
+        iconSizes,
+        buttonSizes
+      },
+      livestreamScreenShareToggleButton
+    }
+  } = useTheme();
+  const call = useCall();
+  const {
+    useLocalParticipant,
+    useCallSettings
+  } = useCallStateHooks();
+  const callSettings = useCallSettings();
+  const isScreenSharingEnabledInCall = callSettings === null || callSettings === void 0 ? void 0 : callSettings.screensharing.enabled;
+  const iosScreenShareStartedFromSystem = useIsIosScreenshareBroadcastStarted();
+  const prevIosScreenShareStartedFromSystem = usePrevious(iosScreenShareStartedFromSystem);
+  const localParticipant = useLocalParticipant();
+  const hasPublishedScreenShare = localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.publishedTracks.includes(SfuModels.TrackType.SCREEN_SHARE);
+
+  // listens to iOS screen share broadcast started event from the system
+  useEffect(() => {
+    const run = async () => {
+      if (Platform.OS !== 'ios') {
+        return;
+      }
+      if (iosScreenShareStartedFromSystem && !prevIosScreenShareStartedFromSystem) {
+        const media = await navigator.mediaDevices.getDisplayMedia({
+          // @ts-ignore
+          deviceId: 'broadcast',
+          video: true,
+          audio: true
+        });
+        await (call === null || call === void 0 ? void 0 : call.publishScreenShareStream(media));
+      } else if (!iosScreenShareStartedFromSystem && prevIosScreenShareStartedFromSystem) {
+        await (call === null || call === void 0 ? void 0 : call.stopPublish(SfuModels.TrackType.SCREEN_SHARE));
+      }
+    };
+    run();
+  }, [call, iosScreenShareStartedFromSystem, prevIosScreenShareStartedFromSystem]);
+  const screenCapturePickerViewiOSRef = React.useRef(null);
+  const onPress = async () => {
+    if (!hasPublishedScreenShare) {
+      if (Platform.OS === 'ios') {
+        const reactTag = findNodeHandle(screenCapturePickerViewiOSRef.current);
+        await NativeModules.ScreenCapturePickerViewManager.show(reactTag);
+        // After this the iOS screen share broadcast started/stopped event will be triggered
+        // and the useEffect listener will handle the rest
+      } else {
+        try {
+          const media = await navigator.mediaDevices.getDisplayMedia({
+            video: true,
+            audio: true
+          });
+          await (call === null || call === void 0 ? void 0 : call.publishScreenShareStream(media));
+        } catch (e) {
+          // ignored.. user didnt allow the screen share in the popup
+        }
+      }
+    } else if (hasPublishedScreenShare) {
+      await (call === null || call === void 0 ? void 0 : call.stopPublish(SfuModels.TrackType.SCREEN_SHARE));
+    }
+  };
+  if (!isScreenSharingEnabledInCall || !CanDeviceScreenShare) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: onPress,
+    style: [styles.container, {
+      backgroundColor: hasPublishedScreenShare ? colors.error : colors.dark_gray,
+      height: buttonSizes.xs,
+      width: buttonSizes.xs
+    }, livestreamScreenShareToggleButton.container]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.icon, {
+      height: iconSizes.sm,
+      width: iconSizes.sm
+    }, livestreamScreenShareToggleButton.icon]
+  }, hasPublishedScreenShare ? /*#__PURE__*/React.createElement(StopScreenShare, {
+    color: colors.static_white
+  }) : /*#__PURE__*/React.createElement(ScreenShare, {
+    color: colors.static_white
+  })), Platform.OS === 'ios' && /*#__PURE__*/React.createElement(ScreenCapturePickerView, {
+    ref: screenCapturePickerViewiOSRef
+  }));
+};
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 4,
+    borderRadius: 4
+  },
+  icon: {}
+});
+//# sourceMappingURL=LivestreamScreenShareToggleButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useTheme","NativeModules","Platform","Pressable","StyleSheet","View","findNodeHandle","ScreenShare","StopScreenShare","ScreenCapturePickerView","SfuModels","useCall","useCallStateHooks","useIsIosScreenshareBroadcastStarted","usePrevious","CanDeviceScreenShare","OS","Number","parseInt","Version","split","LivestreamScreenShareToggleButton","theme","colors","variants","iconSizes","buttonSizes","livestreamScreenShareToggleButton","call","useLocalParticipant","useCallSettings","callSettings","isScreenSharingEnabledInCall","screensharing","enabled","iosScreenShareStartedFromSystem","prevIosScreenShareStartedFromSystem","localParticipant","hasPublishedScreenShare","publishedTracks","includes","TrackType","SCREEN_SHARE","run","media","navigator","mediaDevices","getDisplayMedia","deviceId","video","audio","publishScreenShareStream","stopPublish","screenCapturePickerViewiOSRef","useRef","onPress","reactTag","current","ScreenCapturePickerViewManager","show","e","createElement","style","styles","container","backgroundColor","error","dark_gray","height","xs","width","icon","sm","color","static_white","ref","create","justifyContent","alignItems","marginHorizontal","borderRadius"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/LivestreamScreenShareToggleButton.tsx"],"mappings":"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"}

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

@@ -13,7 +13,8 @@ import { Z_INDEX } from '../../../constants';
  */
 export const ViewerLivestreamControls = ({
   ViewerLeaveStreamButton = DefaultViewerLeaveStreamButton,
-  onLeaveStreamHandler
+  onLeaveStreamHandler,
+  onLayout
 }) => {
   const {
     theme: {
@@ -24,7 +25,8 @@ export const ViewerLivestreamControls = ({
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       backgroundColor: colors.static_overlay
-    }, viewerLivestreamControls.container]
+    }, viewerLivestreamControls.container],
+    onLayout: onLayout
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.leftElement, viewerLivestreamControls.leftElement]
   }, ViewerLeaveStreamButton && /*#__PURE__*/React.createElement(ViewerLeaveStreamButton, {

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","ViewerLeaveStreamButton","DefaultViewerLeaveStreamButton","useTheme","Z_INDEX","ViewerLivestreamControls","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,GAAGA,CAAC;EACvCJ,uBAAuB,GAAGC,8BAA8B;EACxDI;AAC6B,CAAC,KAAK;EACnC,MAAM;IACJC,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAyB;EAC5C,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAEd,oBACEL,KAAA,CAAAY,aAAA,CAACV,IAAI;IACHW,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChB;MACEC,eAAe,EAAEN,MAAM,CAACO;IAC1B,CAAC,EACDN,wBAAwB,CAACI,SAAS;EAClC,gBAEFf,KAAA,CAAAY,aAAA,CAACV,IAAI;IAACW,KAAK,EAAE,CAACC,MAAM,CAACI,WAAW,EAAEP,wBAAwB,CAACO,WAAW;EAAE,GACrEf,uBAAuB,iBACtBH,KAAA,CAAAY,aAAA,CAACT,uBAAuB;IACtBK,oBAAoB,EAAEA;EAAqB,CAC5C,CAEC,CAAC,eACPR,KAAA,CAAAY,aAAA,CAACV,IAAI;IACHW,KAAK,EAAE,CAACC,MAAM,CAACK,YAAY,EAAER,wBAAwB,CAACQ,YAAY;EAAE,CACrE,CACG,CAAC;AAEX,CAAC;AAED,MAAML,MAAM,GAAGb,UAAU,CAACmB,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,EAAErB,OAAO,CAACsB;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"}
+{"version":3,"names":["React","StyleSheet","View","ViewerLeaveStreamButton","DefaultViewerLeaveStreamButton","useTheme","Z_INDEX","ViewerLivestreamControls","onLeaveStreamHandler","onLayout","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,QAAmB,cAAc;AAE1D,SACEC,uBAAuB,IAAIC,8BAA8B,QAEpD,2BAA2B;AAClC,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,OAAO,QAAQ,oBAAoB;;AAE5C;AACA;AACA;;AASA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAGA,CAAC;EACvCJ,uBAAuB,GAAGC,8BAA8B;EACxDI,oBAAoB;EACpBC;AAC6B,CAAC,KAAK;EACnC,MAAM;IACJC,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,CAClC;IACFP,QAAQ,EAAEA;EAAS,gBAEnBT,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;IACtBK,oBAAoB,EAAEA;EAAqB,CAC5C,CAEC,CAAC,eACPR,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

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

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

@@ -1 +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"}
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamControls/index.ts"],"mappings":"AAAA,cAAc,0BAA0B;AACxC,cAAc,yBAAyB;AACvC,cAAc,gCAAgC;AAC9C,cAAc,2BAA2B;AACzC,cAAc,gCAAgC;AAC9C,cAAc,2BAA2B;AACzC,cAAc,4BAA4B;AAC1C,cAAc,qCAAqC"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { SfuModels } from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { StyleSheet, View } from 'react-native';
@@ -17,7 +17,8 @@ const hasScreenShare = p => p === null || p === void 0 ? void 0 : p.publishedTra
  */
 export const LivestreamLayout = ({
   landscape,
-  VideoRenderer = DefaultVideoRenderer
+  VideoRenderer = DefaultVideoRenderer,
+  ScreenShareOverlay
 }) => {
   const {
     useParticipants,
@@ -34,21 +35,58 @@ export const LivestreamLayout = ({
   const hasOngoingScreenShare = useHasOngoingScreenShare();
   const presenter = hasOngoingScreenShare ? hasScreenShare(currentSpeaker) && currentSpeaker : otherParticipants.find(hasScreenShare);
   usePaginatedLayoutSortPreset(call);
+  const [objectFit, setObjectFit] = useState();
+
+  // no need to pass object fit for local participant as the dimensions are for remote tracks
+  const objectFitToBeSet = currentSpeaker !== null && currentSpeaker !== void 0 && currentSpeaker.isLocalParticipant ? undefined : objectFit;
+  const onDimensionsChange = useCallback(d => {
+    if (d) {
+      const isWidthWide = d.width > d.height;
+      setObjectFit(isWidthWide ? 'contain' : 'cover');
+    }
+  }, []);
   const landScapeStyles = {
     flexDirection: landscape ? 'row' : 'column'
   };
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, landScapeStyles, {
-      backgroundColor: colors.dark_gray
+      backgroundColor: colors.static_grey
     }, livestreamLayout.container]
-  }, VideoRenderer && hasOngoingScreenShare && presenter && /*#__PURE__*/React.createElement(VideoRenderer, {
+  }, /*#__PURE__*/React.createElement(RemoteVideoTrackDimensionsRenderLessComponent, {
+    onDimensionsChange: onDimensionsChange
+  }), VideoRenderer && hasOngoingScreenShare && presenter && (ScreenShareOverlay ? /*#__PURE__*/React.createElement(ScreenShareOverlay, null) : /*#__PURE__*/React.createElement(VideoRenderer, {
     trackType: "screenShareTrack",
     participant: presenter
-  }), VideoRenderer && !hasOngoingScreenShare && currentSpeaker && /*#__PURE__*/React.createElement(VideoRenderer, {
+  })), VideoRenderer && !hasOngoingScreenShare && currentSpeaker && /*#__PURE__*/React.createElement(VideoRenderer, {
     participant: currentSpeaker,
+    objectFit: objectFitToBeSet,
     trackType: "videoTrack"
   }));
 };
+const RemoteVideoTrackDimensionsRenderLessComponent = ({
+  onDimensionsChange
+}) => {
+  var _statsReport$subscrib, _statsReport$subscrib2;
+  const [dimension, setDimension] = useState();
+  const {
+    useCallStatsReport
+  } = useCallStateHooks();
+  const statsReport = useCallStatsReport();
+  const highestFrameHeight = statsReport === null || statsReport === void 0 || (_statsReport$subscrib = statsReport.subscriberStats) === null || _statsReport$subscrib === void 0 ? void 0 : _statsReport$subscrib.highestFrameHeight;
+  const highestFrameWidth = statsReport === null || statsReport === void 0 || (_statsReport$subscrib2 = statsReport.subscriberStats) === null || _statsReport$subscrib2 === void 0 ? void 0 : _statsReport$subscrib2.highestFrameWidth;
+  useEffect(() => {
+    if (highestFrameHeight && highestFrameWidth) {
+      setDimension({
+        height: highestFrameHeight,
+        width: highestFrameWidth
+      });
+    }
+  }, [highestFrameHeight, highestFrameWidth]);
+  useEffect(() => {
+    onDimensionsChange(dimension);
+  }, [dimension, onDimensionsChange]);
+  return null;
+};
 const styles = StyleSheet.create({
   container: {
     flex: 1

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

@@ -1 +1 @@
-{"version":3,"names":["React","SfuModels","useCall","useCallStateHooks","StyleSheet","View","usePaginatedLayoutSortPreset","useTheme","VideoRenderer","DefaultVideoRenderer","hasScreenShare","p","publishedTracks","includes","TrackType","SCREEN_SHARE","LivestreamLayout","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,GAAGA,CAAC;EAC/BC,SAAS;EACTT,aAAa,GAAGC;AACK,CAAC,KAAK;EAC3B,MAAM;IAAES,eAAe;IAAEC;EAAyB,CAAC,GAAGhB,iBAAiB,CAAC,CAAC;EACzE,MAAMiB,IAAI,GAAGlB,OAAO,CAAC,CAAC;EACtB,MAAM;IACJmB,KAAK,EAAE;MAAEC,MAAM;MAAEC;IAAiB;EACpC,CAAC,GAAGhB,QAAQ,CAAC,CAAC;EACd,MAAM,CAACiB,cAAc,EAAE,GAAGC,iBAAiB,CAAC,GAAGP,eAAe,CAAC,CAAC;EAChE,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;EACxD,MAAMQ,SAAS,GAAGD,qBAAqB,GACnChB,cAAc,CAACc,cAAc,CAAC,IAAIA,cAAc,GAChDC,iBAAiB,CAACG,IAAI,CAAClB,cAAc,CAAC;EAE1CJ,4BAA4B,CAACc,IAAI,CAAC;EAElC,MAAMS,eAA0B,GAAG;IACjCC,aAAa,EAAEb,SAAS,GAAG,KAAK,GAAG;EACrC,CAAC;EAED,oBACEjB,KAAA,CAAA+B,aAAA,CAAC1B,IAAI;IACH2B,KAAK,EAAE,CACLC,MAAM,CAACC,SAAS,EAChBL,eAAe,EACf;MAAEM,eAAe,EAAEb,MAAM,CAACc;IAAU,CAAC,EACrCb,gBAAgB,CAACW,SAAS;EAC1B,GAED1B,aAAa,IAAIkB,qBAAqB,IAAIC,SAAS,iBAClD3B,KAAA,CAAA+B,aAAA,CAACvB,aAAa;IAAC6B,SAAS,EAAC,kBAAkB;IAACC,WAAW,EAAEX;EAAU,CAAE,CACtE,EACAnB,aAAa,IAAI,CAACkB,qBAAqB,IAAIF,cAAc,iBACxDxB,KAAA,CAAA+B,aAAA,CAACvB,aAAa;IAAC8B,WAAW,EAAEd,cAAe;IAACa,SAAS,EAAC;EAAY,CAAE,CAElE,CAAC;AAEX,CAAC;AAED,MAAMJ,MAAM,GAAG7B,UAAU,CAACmC,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,IAAI,EAAE;EACR;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","useCallback","useEffect","useState","SfuModels","useCall","useCallStateHooks","StyleSheet","View","usePaginatedLayoutSortPreset","useTheme","VideoRenderer","DefaultVideoRenderer","hasScreenShare","p","publishedTracks","includes","TrackType","SCREEN_SHARE","LivestreamLayout","landscape","ScreenShareOverlay","useParticipants","useHasOngoingScreenShare","call","theme","colors","livestreamLayout","currentSpeaker","otherParticipants","hasOngoingScreenShare","presenter","find","objectFit","setObjectFit","objectFitToBeSet","isLocalParticipant","undefined","onDimensionsChange","d","isWidthWide","width","height","landScapeStyles","flexDirection","createElement","style","styles","container","backgroundColor","static_grey","RemoteVideoTrackDimensionsRenderLessComponent","trackType","participant","_statsReport$subscrib","_statsReport$subscrib2","dimension","setDimension","useCallStatsReport","statsReport","highestFrameHeight","subscriberStats","highestFrameWidth","create","flex"],"sourceRoot":"../../../../../src","sources":["components/Livestream/LivestreamLayout/LivestreamLayout.tsx"],"mappings":"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"}

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

@@ -17,7 +17,8 @@ import { Z_INDEX } from '../../../constants';
 export const HostLivestreamTopView = ({
   DurationBadge = DefaultDurationBadge,
   LiveIndicator = DefaultLiveIndicator,
-  FollowerCount = DefaultFollowerCount
+  FollowerCount = DefaultFollowerCount,
+  onLayout
 }) => {
   const {
     useIsCallLive,
@@ -35,7 +36,8 @@ export const HostLivestreamTopView = ({
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       backgroundColor: colors.static_overlay
-    }, hostLivestreamTopView.container]
+    }, hostLivestreamTopView.container],
+    onLayout: onLayout
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.leftElement, hostLivestreamTopView.leftElement]
   }, DurationBadge && /*#__PURE__*/React.createElement(DurationBadge, {

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

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","View","DurationBadge","DefaultDurationBadge","LiveIndicator","DefaultLiveIndicator","FollowerCount","DefaultFollowerCount","useTheme","useCallStateHooks","Z_INDEX","HostLivestreamTopView","useIsCallLive","useIsCallHLSBroadcastingInProgress","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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"}
+{"version":3,"names":["React","StyleSheet","View","DurationBadge","DefaultDurationBadge","LiveIndicator","DefaultLiveIndicator","FollowerCount","DefaultFollowerCount","useTheme","useCallStateHooks","Z_INDEX","HostLivestreamTopView","onLayout","useIsCallLive","useIsCallHLSBroadcastingInProgress","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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"}

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

@@ -16,7 +16,8 @@ import { Z_INDEX } from '../../../constants';
 export const ViewerLivestreamTopView = ({
   DurationBadge = DefaultDurationBadge,
   LiveIndicator = DefaultLiveIndicator,
-  FollowerCount = DefaultFollowerCount
+  FollowerCount = DefaultFollowerCount,
+  onLayout
 }) => {
   const {
     theme: {
@@ -27,7 +28,8 @@ export const ViewerLivestreamTopView = ({
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.container, {
       backgroundColor: colors.static_overlay
-    }, viewerLivestreamTopView.container]
+    }, viewerLivestreamTopView.container],
+    onLayout: onLayout
   }, /*#__PURE__*/React.createElement(View, {
     style: [styles.leftElement, viewerLivestreamTopView.leftElement]
   }, /*#__PURE__*/React.createElement(View, {