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

package/lib/commonjs/components/WhiteboardFullScreenButton.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WhiteboardFullScreenButton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactRedux = require("react-redux");
+var _PressableIcon = require("./PressableIcon");
+var _Icons = require("../Icons");
+var _hooksUtil = require("../hooks-util");
+var _theme = require("../utils/theme");
+var _actions = require("../redux/actions");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const WhiteboardFullScreenButton = () => {
+  const dispatch = (0, _reactRedux.useDispatch)();
+  const fullScreenWhiteboard = (0, _reactRedux.useSelector)(state => state.app.fullScreenWhiteboard);
+  const buttonStyles = (0, _hooksUtil.useHMSRoomStyle)(theme => ({
+    backgroundColor: theme.palette.background_dim && (0, _theme.hexToRgbA)(theme.palette.background_dim, 0.64)
+  }));
+  const maximizeAction = !fullScreenWhiteboard;
+  const handleFullScreenPress = () => {
+    dispatch((0, _actions.setFullScreenWhiteboard)(!fullScreenWhiteboard));
+  };
+  return /*#__PURE__*/React.createElement(_PressableIcon.PressableIcon, {
+    border: false,
+    onPress: handleFullScreenPress,
+    style: [styles.container, buttonStyles]
+  }, maximizeAction ? /*#__PURE__*/React.createElement(_Icons.MaximizeIcon, null) : /*#__PURE__*/React.createElement(_Icons.MinimizeIcon, null));
+};
+exports.WhiteboardFullScreenButton = WhiteboardFullScreenButton;
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    padding: 8
+  }
+});
+//# sourceMappingURL=WhiteboardFullScreenButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_reactRedux","_PressableIcon","_Icons","_hooksUtil","_theme","_actions","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","WhiteboardFullScreenButton","dispatch","useDispatch","fullScreenWhiteboard","useSelector","state","app","buttonStyles","useHMSRoomStyle","theme","backgroundColor","palette","background_dim","hexToRgbA","maximizeAction","handleFullScreenPress","setFullScreenWhiteboard","createElement","PressableIcon","border","onPress","style","styles","container","MaximizeIcon","MinimizeIcon","exports","StyleSheet","create","position","top","right","padding"],"sourceRoot":"../../../src","sources":["components/WhiteboardFullScreenButton.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/hooks-util.js

@@ -329,7 +329,8 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
       const fullScreenPeerTrackNode = reduxState.app.fullScreenPeerTrackNode;
       const miniviewPeerTrackNode = reduxState.app.miniviewPeerTrackNode;
       const localPeerTrackNode = reduxState.app.localPeerTrackNode;
-      const currentLayoutConfig = (0, _hooksUtilSelectors.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 = (0, _hooksUtilSelectors.selectLayoutConfigForRole)(reduxState.hmsStates.layoutConfig, localPeerRole);
       const localTileInsetEnabled = (_selectVideoTileLayou2 = (0, _hooksUtilSelectors.selectVideoTileLayoutConfig)(currentLayoutConfig)) === null || _selectVideoTileLayou2 === void 0 || (_selectVideoTileLayou2 = _selectVideoTileLayou2.grid) === null || _selectVideoTileLayou2 === void 0 ? void 0 : _selectVideoTileLayou2.enable_local_tile_inset;
       if (type === _reactNativeHms.HMSTrackUpdate.TRACK_ADDED) {
         const newPeerTrackNode = (0, _functions.createPeerTrackNode)(peer, track);
@@ -337,6 +338,22 @@ const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
           if (!peer.isLocal && track.type === _reactNativeHms.HMSTrackType.VIDEO) {
             dispatch((0, _actions.addScreenshareTile)(newPeerTrackNode));
           }
+          if (track.type === _reactNativeHms.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 ((0, _peerTrackNodeUtils.peerTrackNodeExistForPeerAndTrack)(prevPeerTrackNodes, peer, track)) {
@@ -2188,16 +2205,25 @@ 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 = (0, _reactRedux.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;
 };
 exports.useCanShowRoomOptionsButton = useCanShowRoomOptionsButton;
 const useHLSViewsConstraints = () => {
-  const hlsFullScreen = (0, _reactRedux.useSelector)(state => state.app.hlsFullScreen);
+  const fullScreenMode = (0, _reactRedux.useSelector)(state => {
+    const hlsFullScreen = state.app.hlsFullScreen;
+    const isPipModeActive = state.app.pipModeStatus === _types.PipModes.ACTIVE;
+    return hlsFullScreen || isPipModeActive;
+  });
   const isLandscapeOrientation = (0, _dimension.useIsLandscapeOrientation)();
   const {
     width: safeAreaWidthFrame,
@@ -2209,7 +2235,7 @@ const useHLSViewsConstraints = () => {
     left: leftInset,
     right: rightInset
   } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const playerWrapperConstraints = hlsFullScreen ? {
+  const playerWrapperConstraints = fullScreenMode ? {
     width: safeAreaWidthFrame - leftInset - rightInset,
     height: isLandscapeOrientation ? safeAreaHeightFrame : safeAreaHeightFrame - topInset - bottomInset
   } : {
@@ -2229,7 +2255,11 @@ const useHLSViewsConstraints = () => {
 };
 exports.useHLSViewsConstraints = useHLSViewsConstraints;
 const useHLSPlayerConstraints = () => {
-  const hlsFullScreen = (0, _reactRedux.useSelector)(state => state.app.hlsFullScreen);
+  const fullScreenMode = (0, _reactRedux.useSelector)(state => {
+    const hlsFullScreen = state.app.hlsFullScreen;
+    const isPipModeActive = state.app.pipModeStatus === _types.PipModes.ACTIVE;
+    return hlsFullScreen || isPipModeActive;
+  });
   const isLandscapeOrientation = (0, _dimension.useIsLandscapeOrientation)();
   const resolution = (0, _reactNativeHms.useHMSHLSPlayerResolution)();
   const {
@@ -2262,7 +2292,7 @@ const useHLSPlayerConstraints = () => {
   /**
    * Handling Portrait Orientation
    */
-  if (hlsFullScreen) {
+  if (fullScreenMode) {
     return {
       width: sr > wr ? wrapperWidth : wrapperHeight * sr,
       height: sr > wr ? wrapperWidth / sr : wrapperHeight