@100mslive/react-native-room-kit 1.1.7 → 1.1.9-beta.0

package/lib/module/components/Whiteboard.js

@@ -0,0 +1,64 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { WebView } from 'react-native-webview';
+import { PipModes } from '../utils/types';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import { WhiteboardFullScreenButton } from './WhiteboardFullScreenButton';
+export const _Whiteboard = /*#__PURE__*/React.forwardRef((_props, webviewRef) => {
+  const localWebviewRef = React.useRef(null);
+  React.useImperativeHandle(webviewRef, () => localWebviewRef, []);
+  const whiteboardUrl = useSelector(state => {
+    var _state$hmsStates$whit;
+    return (_state$hmsStates$whit = state.hmsStates.whiteboard) === null || _state$hmsStates$whit === void 0 ? void 0 : _state$hmsStates$whit.url;
+  });
+
+  //#region reconnection handling
+  let webviewError = React.useRef(null);
+  const webviewErrorHandler = React.useCallback(e => {
+    webviewError.current = e.nativeEvent;
+  }, []);
+  if (Platform.OS === 'ios') {
+    const prevReconnecting = React.useRef(null);
+    const reconnecting = useSelector(state => state.hmsStates.reconnecting);
+    if (whiteboardUrl && localWebviewRef.current !== null && webviewError.current !== null && prevReconnecting.current === true && reconnecting === false) {
+      localWebviewRef.current.reload();
+    }
+    prevReconnecting.current = reconnecting;
+  }
+  //#endregion reconnection handling
+
+  const isPipModeActive = useSelector(state => state.app.pipModeStatus === PipModes.ACTIVE);
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  if (!whiteboardUrl) return null;
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(HMSWebView, {
+    ref: localWebviewRef,
+    url: whiteboardUrl,
+    onError: webviewErrorHandler
+  }), isPipModeActive || isLandscapeOrientation ? null : /*#__PURE__*/React.createElement(WhiteboardFullScreenButton, null));
+});
+export const Whiteboard = /*#__PURE__*/React.memo(_Whiteboard);
+
+//# Memoized Webview
+
+const _HMSWebView = /*#__PURE__*/React.forwardRef((props, webviewRef) => {
+  return /*#__PURE__*/React.createElement(WebView, _extends({
+    ref: webviewRef,
+    source: {
+      uri: props.url
+    },
+    style: {
+      flex: 1
+    },
+    javaScriptEnabled: true,
+    domStorageEnabled: true
+  }, props));
+});
+const HMSWebView = /*#__PURE__*/React.memo(_HMSWebView);
+//# sourceMappingURL=Whiteboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","View","useSelector","WebView","PipModes","useIsLandscapeOrientation","WhiteboardFullScreenButton","_Whiteboard","forwardRef","_props","webviewRef","localWebviewRef","useRef","useImperativeHandle","whiteboardUrl","state","_state$hmsStates$whit","hmsStates","whiteboard","url","webviewError","webviewErrorHandler","useCallback","e","current","nativeEvent","OS","prevReconnecting","reconnecting","reload","isPipModeActive","app","pipModeStatus","ACTIVE","isLandscapeOrientation","createElement","style","flex","position","HMSWebView","ref","onError","Whiteboard","memo","_HMSWebView","props","_extends","source","uri","javaScriptEnabled","domStorageEnabled"],"sourceRoot":"../../../src","sources":["components/Whiteboard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/WhiteboardContainer.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import { Whiteboard } from './Whiteboard';
+export const _WhiteboardContainer = /*#__PURE__*/React.forwardRef((_props, webviewRef) => {
+  const fullScreenWhiteboard = useSelector(state => state.app.fullScreenWhiteboard);
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flex: 1,
+      marginBottom: 4
+    }
+  }, fullScreenWhiteboard ? null : Platform.OS === 'ios' ? /*#__PURE__*/React.createElement(GestureDetector, {
+    gesture: Gesture.Tap()
+  }, /*#__PURE__*/React.createElement(View, {
+    collapsable: false,
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Whiteboard, {
+    ref: webviewRef
+  }))) : /*#__PURE__*/React.createElement(Whiteboard, {
+    ref: webviewRef
+  }));
+});
+export const WhiteboardContainer = /*#__PURE__*/React.memo(_WhiteboardContainer);
+//# sourceMappingURL=WhiteboardContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","View","useSelector","GestureDetector","Gesture","Whiteboard","_WhiteboardContainer","forwardRef","_props","webviewRef","fullScreenWhiteboard","state","app","createElement","style","flex","marginBottom","OS","gesture","Tap","collapsable","ref","WhiteboardContainer","memo"],"sourceRoot":"../../../src","sources":["components/WhiteboardContainer.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,EAAEC,IAAI,QAAQ,cAAc;AAC7C,SAASC,WAAW,QAAQ,aAAa;AAEzC,SAASC,eAAe,EAAEC,OAAO,QAAQ,8BAA8B;AAGvE,SAASC,UAAU,QAAQ,cAAc;AAIzC,OAAO,MAAMC,oBAAoB,gBAAGP,KAAK,CAACQ,UAAU,CAGlD,CAACC,MAAM,EAAEC,UAAU,KAAK;EACxB,MAAMC,oBAAoB,GAAGR,WAAW,CACrCS,KAAgB,IAAKA,KAAK,CAACC,GAAG,CAACF,oBAClC,CAAC;EAED,oBACEX,KAAA,CAAAc,aAAA,CAACZ,IAAI;IAACa,KAAK,EAAE;MAAEC,IAAI,EAAE,CAAC;MAAEC,YAAY,EAAE;IAAE;EAAE,GACvCN,oBAAoB,GAAG,IAAI,GAAGV,QAAQ,CAACiB,EAAE,KAAK,KAAK,gBAClDlB,KAAA,CAAAc,aAAA,CAACV,eAAe;IAACe,OAAO,EAAEd,OAAO,CAACe,GAAG,CAAC;EAAE,gBACtCpB,KAAA,CAAAc,aAAA,CAACZ,IAAI;IAACmB,WAAW,EAAE,KAAM;IAACN,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE;EAAE,gBAC3ChB,KAAA,CAAAc,aAAA,CAACR,UAAU;IAACgB,GAAG,EAAEZ;EAAW,CAAE,CAC1B,CACS,CAAC,gBAElBV,KAAA,CAAAc,aAAA,CAACR,UAAU;IAACgB,GAAG,EAAEZ;EAAW,CAAE,CAE5B,CAAC;AAEX,CAAC,CAAC;AAEF,OAAO,MAAMa,mBAAmB,gBAAGvB,KAAK,CAACwB,IAAI,CAACjB,oBAAoB,CAAC","ignoreList":[]}

package/lib/module/components/WhiteboardFullScreenButton.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { PressableIcon } from './PressableIcon';
+import { MaximizeIcon, MinimizeIcon } from '../Icons';
+import { useHMSRoomStyle } from '../hooks-util';
+import { hexToRgbA } from '../utils/theme';
+import { setFullScreenWhiteboard } from '../redux/actions';
+export const WhiteboardFullScreenButton = () => {
+  const dispatch = useDispatch();
+  const fullScreenWhiteboard = useSelector(state => state.app.fullScreenWhiteboard);
+  const buttonStyles = useHMSRoomStyle(theme => ({
+    backgroundColor: theme.palette.background_dim && hexToRgbA(theme.palette.background_dim, 0.64)
+  }));
+  const maximizeAction = !fullScreenWhiteboard;
+  const handleFullScreenPress = () => {
+    dispatch(setFullScreenWhiteboard(!fullScreenWhiteboard));
+  };
+  return /*#__PURE__*/React.createElement(PressableIcon, {
+    border: false,
+    onPress: handleFullScreenPress,
+    style: [styles.container, buttonStyles]
+  }, maximizeAction ? /*#__PURE__*/React.createElement(MaximizeIcon, null) : /*#__PURE__*/React.createElement(MinimizeIcon, null));
+};
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    padding: 8
+  }
+});
+//# sourceMappingURL=WhiteboardFullScreenButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","StyleSheet","useDispatch","useSelector","PressableIcon","MaximizeIcon","MinimizeIcon","useHMSRoomStyle","hexToRgbA","setFullScreenWhiteboard","WhiteboardFullScreenButton","dispatch","fullScreenWhiteboard","state","app","buttonStyles","theme","backgroundColor","palette","background_dim","maximizeAction","handleFullScreenPress","createElement","border","onPress","style","styles","container","create","position","top","right","padding"],"sourceRoot":"../../../src","sources":["components/WhiteboardFullScreenButton.tsx"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,WAAW,EAAEC,WAAW,QAAQ,aAAa;AAEtD,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,YAAY,EAAEC,YAAY,QAAQ,UAAU;AACrD,SAASC,eAAe,QAAQ,eAAe;AAC/C,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SAASC,uBAAuB,QAAQ,kBAAkB;AAI1D,OAAO,MAAMC,0BAEZ,GAAGA,CAAA,KAAM;EACR,MAAMC,QAAQ,GAAGT,WAAW,CAAC,CAAC;EAC9B,MAAMU,oBAAoB,GAAGT,WAAW,CACrCU,KAAgB,IAAKA,KAAK,CAACC,GAAG,CAACF,oBAClC,CAAC;EAED,MAAMG,YAAY,GAAGR,eAAe,CAAES,KAAK,KAAM;IAC/CC,eAAe,EACbD,KAAK,CAACE,OAAO,CAACC,cAAc,IAC5BX,SAAS,CAACQ,KAAK,CAACE,OAAO,CAACC,cAAc,EAAE,IAAI;EAChD,CAAC,CAAC,CAAC;EAEH,MAAMC,cAAc,GAAG,CAACR,oBAAoB;EAE5C,MAAMS,qBAAqB,GAAGA,CAAA,KAAM;IAClCV,QAAQ,CAACF,uBAAuB,CAAC,CAACG,oBAAoB,CAAC,CAAC;EAC1D,CAAC;EAED,oBACEZ,KAAA,CAAAsB,aAAA,CAAClB,aAAa;IACZmB,MAAM,EAAE,KAAM;IACdC,OAAO,EAAEH,qBAAsB;IAC/BI,KAAK,EAAE,CAACC,MAAM,CAACC,SAAS,EAAEZ,YAAY;EAAE,GAEvCK,cAAc,gBAAGpB,KAAA,CAAAsB,aAAA,CAACjB,YAAY,MAAE,CAAC,gBAAGL,KAAA,CAAAsB,aAAA,CAAChB,YAAY,MAAE,CACvC,CAAC;AAEpB,CAAC;AAED,MAAMoB,MAAM,GAAGzB,UAAU,CAAC2B,MAAM,CAAC;EAC/BD,SAAS,EAAE;IACTE,QAAQ,EAAE,UAAU;IACpBC,GAAG,EAAE,CAAC;IACNC,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACX;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/hooks-util.js

@@ -323,7 +323,8 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
       const fullScreenPeerTrackNode = reduxState.app.fullScreenPeerTrackNode;
       const miniviewPeerTrackNode = reduxState.app.miniviewPeerTrackNode;
       const localPeerTrackNode = reduxState.app.localPeerTrackNode;
-      const currentLayoutConfig = selectLayoutConfigForRole(reduxState.hmsStates.layoutConfig, ((_reduxState$hmsStates2 = reduxState.hmsStates.localPeer) === null || _reduxState$hmsStates2 === void 0 ? void 0 : _reduxState$hmsStates2.role) ?? null);
+      const localPeerRole = ((_reduxState$hmsStates2 = reduxState.hmsStates.localPeer) === null || _reduxState$hmsStates2 === void 0 ? void 0 : _reduxState$hmsStates2.role) ?? null;
+      const currentLayoutConfig = selectLayoutConfigForRole(reduxState.hmsStates.layoutConfig, localPeerRole);
       const localTileInsetEnabled = (_selectVideoTileLayou2 = selectVideoTileLayoutConfig(currentLayoutConfig)) === null || _selectVideoTileLayou2 === void 0 || (_selectVideoTileLayou2 = _selectVideoTileLayou2.grid) === null || _selectVideoTileLayou2 === void 0 ? void 0 : _selectVideoTileLayou2.enable_local_tile_inset;
       if (type === HMSTrackUpdate.TRACK_ADDED) {
         const newPeerTrackNode = createPeerTrackNode(peer, track);
@@ -331,6 +332,22 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
           if (!peer.isLocal && track.type === HMSTrackType.VIDEO) {
             dispatch(addScreenshareTile(newPeerTrackNode));
           }
+          if (track.type === HMSTrackType.VIDEO) {
+            var _localPeerRole$permis;
+            const whiteboard = reduxState.hmsStates.whiteboard;
+            // If white board is open and local peer is owner, close whiteboard
+            if (whiteboard &&
+            // Is local peer has whiteboard admin permission
+            !!(localPeerRole !== null && localPeerRole !== void 0 && (_localPeerRole$permis = localPeerRole.permissions) !== null && _localPeerRole$permis !== void 0 && (_localPeerRole$permis = _localPeerRole$permis.whiteboard) !== null && _localPeerRole$permis !== void 0 && _localPeerRole$permis.admin) &&
+            // Is local peer owner of whiteboard
+            whiteboard.isOwner) {
+              hmsInstance.interactivityCenter.stopWhiteboard().then(success => {
+                console.log('StopWhiteboard on Screenshare: ', success);
+              }).catch(error => {
+                console.log('StopWhiteboard error: ', error);
+              });
+            }
+          }
         } else {
           setPeerTrackNodes(prevPeerTrackNodes => {
             if (peerTrackNodeExistForPeerAndTrack(prevPeerTrackNodes, peer, track)) {
@@ -2124,15 +2141,24 @@ export const useCanShowRoomOptionsButton = () => {
     const permissions = (_state$hmsStates$loca10 = state.hmsStates.localPeer) === null || _state$hmsStates$loca10 === void 0 || (_state$hmsStates$loca10 = _state$hmsStates$loca10.role) === null || _state$hmsStates$loca10 === void 0 ? void 0 : _state$hmsStates$loca10.permissions;
     return (permissions === null || permissions === void 0 ? void 0 : permissions.pollRead) || (permissions === null || permissions === void 0 ? void 0 : permissions.pollWrite);
   });
+  const canStartStopWhiteboard = useSelector(state => {
+    var _state$hmsStates$loca11, _permissions$whiteboa;
+    const permissions = (_state$hmsStates$loca11 = state.hmsStates.localPeer) === null || _state$hmsStates$loca11 === void 0 || (_state$hmsStates$loca11 = _state$hmsStates$loca11.role) === null || _state$hmsStates$loca11 === void 0 ? void 0 : _state$hmsStates$loca11.permissions;
+    return permissions === null || permissions === void 0 || (_permissions$whiteboa = permissions.whiteboard) === null || _permissions$whiteboa === void 0 ? void 0 : _permissions$whiteboa.admin;
+  });
   const {
     canShowParticipants
   } = useShowChatAndParticipants();
   const canEditUsernameFromRoomModal = isViewer && !editUsernameDisabled;
-  const canShowOptions = canShowParticipants || canPublishScreen || canShowBRB || canStartRecording || canEditUsernameFromRoomModal || canReadOrWritePoll || isNoiseCancellationAvailable;
+  const canShowOptions = canShowParticipants || canPublishScreen || canShowBRB || canStartRecording || canEditUsernameFromRoomModal || canReadOrWritePoll || canStartStopWhiteboard || isNoiseCancellationAvailable;
   return canShowOptions;
 };
 export const useHLSViewsConstraints = () => {
-  const hlsFullScreen = useSelector(state => state.app.hlsFullScreen);
+  const fullScreenMode = useSelector(state => {
+    const hlsFullScreen = state.app.hlsFullScreen;
+    const isPipModeActive = state.app.pipModeStatus === PipModes.ACTIVE;
+    return hlsFullScreen || isPipModeActive;
+  });
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const {
     width: safeAreaWidthFrame,
@@ -2144,7 +2170,7 @@ export const useHLSViewsConstraints = () => {
     left: leftInset,
     right: rightInset
   } = useSafeAreaInsets();
-  const playerWrapperConstraints = hlsFullScreen ? {
+  const playerWrapperConstraints = fullScreenMode ? {
     width: safeAreaWidthFrame - leftInset - rightInset,
     height: isLandscapeOrientation ? safeAreaHeightFrame : safeAreaHeightFrame - topInset - bottomInset
   } : {
@@ -2163,7 +2189,11 @@ export const useHLSViewsConstraints = () => {
   };
 };
 export const useHLSPlayerConstraints = () => {
-  const hlsFullScreen = useSelector(state => state.app.hlsFullScreen);
+  const fullScreenMode = useSelector(state => {
+    const hlsFullScreen = state.app.hlsFullScreen;
+    const isPipModeActive = state.app.pipModeStatus === PipModes.ACTIVE;
+    return hlsFullScreen || isPipModeActive;
+  });
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const resolution = useHMSHLSPlayerResolution();
   const {
@@ -2196,7 +2226,7 @@ export const useHLSPlayerConstraints = () => {
   /**
    * Handling Portrait Orientation
    */
-  if (hlsFullScreen) {
+  if (fullScreenMode) {
     return {
       width: sr > wr ? wrapperWidth : wrapperHeight * sr,
       height: sr > wr ? wrapperWidth / sr : wrapperHeight