feat(whiteboard) add initial implementation (#12185)

Makefile

@@ -5,6 +5,8 @@ LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet
 OLM_DIR = node_modules/@matrix-org/olm
 TF_WASM_DIR = node_modules/@tensorflow/tfjs-backend-wasm/dist/
 RNNOISE_WASM_DIR = node_modules/@jitsi/rnnoise-wasm/dist
+EXCALIDRAW_DIR = node_modules/@jitsi/excalidraw/dist/excalidraw-assets
+EXCALIDRAW_DIR_DEV = node_modules/@jitsi/excalidraw/dist/excalidraw-assets-dev
 TFLITE_WASM = react/features/stream-effects/virtual-background/vendor/tflite
 MEET_MODELS_DIR  = react/features/stream-effects/virtual-background/vendor/models
 FACE_MODELS_DIR = node_modules/@vladmandic/human-models/models
@@ -27,7 +29,7 @@ clean:
 	rm -fr $(BUILD_DIR)
 
 .NOTPARALLEL:
-deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-olm deploy-tf-wasm deploy-css deploy-local deploy-face-landmarks
+deploy: deploy-init deploy-appbundle deploy-rnnoise-binary deploy-excalidraw deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-olm deploy-tf-wasm deploy-css deploy-local deploy-face-landmarks
 
 deploy-init:
 	rm -fr $(DEPLOY_DIR)
@@ -87,6 +89,16 @@ deploy-tflite:
 		$(TFLITE_WASM)/*.wasm \
 		$(DEPLOY_DIR)
 
+deploy-excalidraw:
+	cp -R \
+		$(EXCALIDRAW_DIR) \
+		$(DEPLOY_DIR)/
+
+deploy-excalidraw-dev:
+	cp -R \
+		$(EXCALIDRAW_DIR_DEV) \
+		$(DEPLOY_DIR)/
+
 deploy-meet-models:
 	cp \
 		$(MEET_MODELS_DIR)/*.tflite \
@@ -109,7 +121,7 @@ deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)
 
 .NOTPARALLEL:
-dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-olm deploy-tf-wasm deploy-face-landmarks
+dev: deploy-init deploy-css deploy-rnnoise-binary deploy-tflite deploy-meet-models deploy-lib-jitsi-meet deploy-olm deploy-tf-wasm deploy-excalidraw-dev deploy-face-landmarks
 	$(WEBPACK_DEV_SERVER)
 
 source-package:

config.js

@@ -1502,6 +1502,15 @@ var config = {
 
     // Application logo url
     // defaultLogoUrl: 'images/watermark.svg',
+
+    // Settings for the Excalidraw whiteboard integration.
+    // whiteboard: {
+    //     // Whether the feature is enabled or not.
+    //     enabled: true,
+    //     // The server used to support whiteboard collaboration.
+    //     // https://github.com/jitsi/excalidraw-backend
+    //     collabServerBaseUrl: 'https://excalidraw-backend.example.com',
+    // },
 };
 
 // Set the default values for JaaS customers

css/_popover.scss

@@ -45,3 +45,7 @@
     margin: -16px -24px;
     z-index: $popoverZ;
 }
+
+.excalidraw .popover {
+    margin: 0;
+}

css/filmstrip/_tile_view_overrides.scss

@@ -3,6 +3,7 @@
  * tiled thumbnail experience.
  */
 .tile-view,
+.whiteboard-container,
 .stage-filmstrip {
     /**
      * Let the avatar grow with the tile.

index.html

@@ -13,6 +13,7 @@
     <link rel="manifest" id="manifest-placeholder">
 
     <script>
+        window.EXCALIDRAW_ASSET_PATH = 'libs/';
         // Dynamically generate the manifest location URL. It must be served from the document origin, and we may have
         // the base pointing to the CDN. This way we can generate a full URL which will bypass the base.
         document.querySelector('#manifest-placeholder').setAttribute('href', window.location.origin + '/manifest.json');

lang/main.json

@@ -1115,7 +1115,8 @@
             "toggleFilmstrip": "Toggle filmstrip",
             "undock": "Undock into separate window",
             "videoblur": "Toggle video blur",
-            "videomute": "Start / Stop camera"
+            "videomute": "Start / Stop camera",
+            "whiteboard": "Show / Hide whiteboard"
         },
         "addPeople": "Add people to your call",
         "audioOnlyOff": "Disable low bandwidth mode",
@@ -1146,6 +1147,7 @@
         "giphy": "Toggle GIPHY menu",
         "hangup": "Leave the meeting",
         "help": "Help",
+        "hideWhiteboard": "Hide whiteboard",
         "invite": "Invite people",
         "joinBreakoutRoom": "Join breakout room",
         "laugh": "Laugh",
@@ -1191,6 +1193,7 @@
         "shareaudio": "Share audio",
         "sharedvideo": "Share video",
         "shortcuts": "View shortcuts",
+        "showWhiteboard": "Show whiteboard",
         "silence": "Silence",
         "speakerStats": "Speaker stats",
         "startScreenSharing": "Start screen sharing",

package-lock.json

@@ -27,6 +27,7 @@
         "@giphy/react-components": "5.6.0",
         "@giphy/react-native-sdk": "1.7.0",
         "@hapi/bourne": "2.0.0",
+        "@jitsi/excalidraw": "https://github.com/jitsi/excalidraw/releases/download/v0.0.11/jitsi-excalidraw-0.0.11.tgz",
         "@jitsi/js-utils": "2.0.4",
         "@jitsi/logger": "2.0.0",
         "@jitsi/rnnoise-wasm": "0.1.0",
@@ -3760,6 +3761,16 @@
         "eslint": ">= 8"
       }
     },
+    "node_modules/@jitsi/excalidraw": {
+      "version": "0.0.11",
+      "resolved": "https://github.com/jitsi/excalidraw/releases/download/v0.0.11/jitsi-excalidraw-0.0.11.tgz",
+      "integrity": "sha512-R0om5mYmjjozmJ6i5PXPSQy8/kiMTCqk/QVxOVryEUlHps4UeLNx+Gb/tjzNBN/C6db6ea+Vxt/l27nh9frphg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2"
+      }
+    },
     "node_modules/@jitsi/js-utils": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-2.0.4.tgz",
@@ -23076,6 +23087,10 @@
       "integrity": "sha512-7ea1H2mpU5Z0azjcAsu0dx2T0fGzpcAfMmk2pEJ1xTQMp5YCwLYRu7ify9nupEbZUwnvJqyXoSeJQwwBQoX6Wg==",
       "dev": true
     },
+    "@jitsi/excalidraw": {
+      "version": "https://github.com/jitsi/excalidraw/releases/download/v0.0.11/jitsi-excalidraw-0.0.11.tgz",
+      "integrity": "sha512-R0om5mYmjjozmJ6i5PXPSQy8/kiMTCqk/QVxOVryEUlHps4UeLNx+Gb/tjzNBN/C6db6ea+Vxt/l27nh9frphg=="
+    },
     "@jitsi/js-utils": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@jitsi/js-utils/-/js-utils-2.0.4.tgz",

package.json

@@ -32,6 +32,7 @@
     "@giphy/react-components": "5.6.0",
     "@giphy/react-native-sdk": "1.7.0",
     "@hapi/bourne": "2.0.0",
+    "@jitsi/excalidraw": "https://github.com/jitsi/excalidraw/releases/download/v0.0.11/jitsi-excalidraw-0.0.11.tgz",
     "@jitsi/js-utils": "2.0.4",
     "@jitsi/logger": "2.0.0",
     "@jitsi/rnnoise-wasm": "0.1.0",

react/features/app/middlewares.web.js

@@ -22,5 +22,6 @@ import '../talk-while-muted/middleware';
 import '../virtual-background/middleware';
 import '../face-landmarks/middleware';
 import '../gifs/middleware';
+import '../whiteboard/middleware';
 
 import './middlewares.any';

react/features/app/reducers.web.js

@@ -15,4 +15,6 @@ import '../noise-suppression/reducer';
 import '../screenshot-capture/reducer';
 import '../talk-while-muted/reducer';
 import '../virtual-background/reducer';
+import '../whiteboard/reducer';
+
 import './reducers.any';

react/features/app/types.ts

@@ -75,6 +75,7 @@ import { IVideoLayoutState } from '../video-layout/reducer';
 import { IVideoQualityPersistedState, IVideoQualityState } from '../video-quality/reducer';
 import { IVideoSipGW } from '../videosipgw/reducer';
 import { IVirtualBackground } from '../virtual-background/reducer';
+import { IWhiteboardState } from '../whiteboard/reducer';
 
 export interface IStore {
     dispatch: ThunkDispatch<IState, void, AnyAction>;
@@ -159,4 +160,5 @@ export interface IState {
     'features/video-quality-persistent-storage': IVideoQualityPersistedState;
     'features/videosipgw': IVideoSipGW;
     'features/virtual-background': IVirtualBackground;
+    'features/whiteboard': IWhiteboardState;
 }

react/features/base/config/configType.ts

@@ -492,4 +492,8 @@ export interface IConfig {
     webrtcIceUdpDisable?: boolean;
     websocket?: string;
     websocketKeepAliveUrl?: string;
+    whiteboard?: {
+        collabServerBaseUrl?: string;
+        enabled?: boolean;
+    };
 }

react/features/base/config/configWhitelist.ts

@@ -230,5 +230,6 @@ export default [
     'useTurnUdp',
     'videoQuality',
     'webrtcIceTcpDisable',
-    'webrtcIceUdpDisable'
+    'webrtcIceUdpDisable',
+    'whiteboard.enabled'
 ].concat(extraConfigWhitelist);

react/features/base/config/constants.ts

@@ -47,7 +47,8 @@ export const TOOLBAR_BUTTONS = [
     'stats',
     'tileview',
     'toggle-camera',
-    'videoquality'
+    'videoquality',
+    'whiteboard'
 ];
 
 /**

react/features/base/icons/svg/index.ts

@@ -151,3 +151,5 @@ export { default as IconWifi2Bars } from './wifi-2.svg';
 export { default as IconWifi3Bars } from './wifi-3.svg';
 export { default as IconYahoo } from './yahoo.svg';
 export { default as IconSip } from './sip.svg';
+export { default as IconShowWhiteboard } from './whiteboard-show.svg';
+export { default as IconHideWhiteboard } from './whiteboard-hide.svg';

react/features/base/icons/svg/whiteboard-hide.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 5V14H9.0011H14.9994H20V5H4ZM16.7664 16H21C21.5523 16 22 15.5523 22 15V4C22 3.44772 21.5523 3 21 3H3C2.44772 3 2 3.44772 2 4V15C2 15.5523 2.44772 16 3 16H7.23405L5.14266 19.4857C4.85851 19.9592 5.01208 20.5735 5.48566 20.8576C5.95924 21.1418 6.5735 20.9882 6.85764 20.5146L9.56643 16H14.4341L17.1428 20.5146C17.427 20.9882 18.0413 21.1418 18.5148 20.8576C18.9884 20.5735 19.142 19.9592 18.8578 19.4857L16.7664 16Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.14686 3.47869C2.43485 3.00744 3.05034 2.85887 3.52159 3.14686L21.5216 14.1469C21.9928 14.4348 22.1414 15.0503 21.8534 15.5216C21.5654 15.9928 20.9499 16.1414 20.4787 15.8534L2.47869 4.85343C2.00744 4.56544 1.85887 3.94995 2.14686 3.47869Z" fill="white"/>
+</svg>

react/features/base/icons/svg/whiteboard-show.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 5V14H9.0011H14.9994H20V5H4ZM16.7664 16H21C21.5523 16 22 15.5523 22 15V4C22 3.44772 21.5523 3 21 3H3C2.44772 3 2 3.44772 2 4V15C2 15.5523 2.44772 16 3 16H7.23405L5.14266 19.4857C4.85851 19.9592 5.01208 20.5735 5.48566 20.8576C5.95924 21.1418 6.5735 20.9882 6.85764 20.5146L9.56643 16H14.4341L17.1428 20.5146C17.427 20.9882 18.0413 21.1418 18.5148 20.8576C18.9884 20.5735 19.142 19.9592 18.8578 19.4857L16.7664 16Z" fill="white"/>
+</svg>

react/features/base/participants/actions.ts

@@ -407,6 +407,7 @@ export function participantLeft(id: string, conference: any, participantLeftProp
             id,
             isReplaced: participantLeftProps.isReplaced,
             isVirtualScreenshareParticipant: participantLeftProps.isVirtualScreenshareParticipant,
+            isWhiteboard: participantLeftProps.isWhiteboard,
             isFakeParticipant: participantLeftProps.isFakeParticipant
         }
     };

react/features/base/participants/constants.ts

@@ -1,4 +1,4 @@
-import { IconPhone } from '../icons/svg';
+import { IconPhone, IconShowWhiteboard } from '../icons/svg';
 
 /**
  * The relative path to the default/stock avatar (image) file used on both
@@ -75,3 +75,8 @@ export const PARTICIPANT_ROLE = {
  * @type {string}
  */
 export const LOWER_HAND_AUDIO_LEVEL = 0.2;
+
+/**
+ * Icon URL for the whiteboard participant.
+ */
+export const WHITEBOARD_PARTICIPANT_ICON = IconShowWhiteboard;

react/features/base/participants/functions.ts

@@ -16,7 +16,12 @@ import { toState } from '../redux/functions';
 import { getScreenShareTrack, getVideoTrackByParticipant } from '../tracks/functions';
 import { createDeferred } from '../util/helpers';
 
-import { JIGASI_PARTICIPANT_ICON, MAX_DISPLAY_NAME_LENGTH, PARTICIPANT_ROLE } from './constants';
+import {
+    JIGASI_PARTICIPANT_ICON,
+    MAX_DISPLAY_NAME_LENGTH,
+    PARTICIPANT_ROLE,
+    WHITEBOARD_PARTICIPANT_ICON
+} from './constants';
 // @ts-ignore
 import { preloadImage } from './preloadImage';
 import { Participant } from './types';
@@ -31,6 +36,9 @@ const AVATAR_CHECKER_FUNCTIONS = [
     (participant: Participant) => {
         return participant?.isJigasi ? JIGASI_PARTICIPANT_ICON : null;
     },
+    (participant: Participant) => {
+        return participant?.isWhiteboard ? WHITEBOARD_PARTICIPANT_ICON : null;
+    },
     (participant: Participant) => {
         return participant?.avatarURL ? participant.avatarURL : null;
     },

react/features/base/participants/middleware.ts

@@ -267,19 +267,19 @@ MiddlewareRegistry.register(store => next => action => {
     }
 
     case PARTICIPANT_JOINED: {
-        const { isVirtualScreenshareParticipant } = action.participant;
+        const { isVirtualScreenshareParticipant, isWhiteboard } = action.participant;
 
         // Do not play sounds when a virtual participant tile is created for screenshare.
-        !isVirtualScreenshareParticipant && _maybePlaySounds(store, action);
+        (!isVirtualScreenshareParticipant && !isWhiteboard) && _maybePlaySounds(store, action);
 
         return _participantJoinedOrUpdated(store, next, action);
     }
 
     case PARTICIPANT_LEFT: {
-        const { isVirtualScreenshareParticipant } = action.participant;
+        const { isVirtualScreenshareParticipant, isWhiteboard } = action.participant;
 
         // Do not play sounds when a tile for screenshare is removed.
-        !isVirtualScreenshareParticipant && _maybePlaySounds(store, action);
+        (!isVirtualScreenshareParticipant && !isWhiteboard) && _maybePlaySounds(store, action);
 
         break;
     }

react/features/base/participants/reducer.ts

@@ -514,6 +514,7 @@ function _participantJoined({ participant }: { participant: Participant; }) {
         isLocalScreenShare,
         isReplacing,
         isJigasi,
+        isWhiteboard,
         loadableAvatarUrl,
         local,
         name,
@@ -548,6 +549,7 @@ function _participantJoined({ participant }: { participant: Participant; }) {
         isLocalScreenShare,
         isReplacing,
         isJigasi,
+        isWhiteboard,
         loadableAvatarUrl,
         local: local || false,
         name,

react/features/base/participants/types.ts

@@ -19,6 +19,7 @@ export interface Participant {
     isReplaced?: boolean;
     isReplacing?: number;
     isVirtualScreenshareParticipant?: boolean;
+    isWhiteboard?: boolean;
     jwtId?: string;
     loadableAvatarUrl?: string;
     loadableAvatarUrlUseCORS?: boolean;

react/features/display-name/components/web/StageParticipantNameLabel.tsx

@@ -60,7 +60,12 @@ const StageParticipantNameLabel = () => {
     const toolboxVisible: boolean = useSelector(isToolboxVisible);
     const showDisplayName = useSelector(isDisplayNameVisible);
 
-    if (showDisplayName && nameToDisplay && selectedId !== localId && !isTileView) {
+    if (showDisplayName
+        && nameToDisplay
+        && selectedId !== localId
+        && !isTileView
+        && !largeVideoParticipant?.isWhiteboard
+    ) {
         return (
             <div
                 className = { cx(

react/features/external-api/middleware.js

@@ -163,10 +163,10 @@ MiddlewareRegistry.register(store => next => action => {
 
     case PARTICIPANT_LEFT: {
         const { participant } = action;
-        const { isFakeParticipant, isVirtualScreenshareParticipant } = participant;
+        const { isFakeParticipant, isVirtualScreenshareParticipant, isWhiteboard } = participant;
 
         // Skip sending participant left event for fake or virtual screenshare participants.
-        if (isFakeParticipant || isVirtualScreenshareParticipant) {
+        if (isFakeParticipant || isVirtualScreenshareParticipant || isWhiteboard) {
             break;
         }
 

react/features/filmstrip/components/web/Thumbnail.tsx

@@ -1050,6 +1050,7 @@ class Thumbnail extends Component<Props, State> {
                         _thumbnailType === THUMBNAIL_TYPE.TILE && 'tile-view-mode'
                     ) }>
                     <ThumbnailTopIndicators
+                        disableConnectionIndicator = { _participant?.isWhiteboard }
                         hidePopover = { this._hidePopover }
                         indicatorsClassName = { classes.indicatorsBackground }
                         isHovered = { isHovered }
@@ -1069,6 +1070,7 @@ class Thumbnail extends Component<Props, State> {
                         isVirtualScreenshareParticipant = { false }
                         local = { local }
                         participantId = { id }
+                        showStatusIndicators = { !_participant?.isWhiteboard }
                         thumbnailType = { _thumbnailType } />
                 </div>
                 {!_gifSrc && this._renderAvatar(styles.avatar) }
@@ -1113,13 +1115,13 @@ class Thumbnail extends Component<Props, State> {
             return null;
         }
 
-        const { isFakeParticipant, isLocalScreenShare, local } = _participant;
+        const { isFakeParticipant, isLocalScreenShare, isWhiteboard, local } = _participant;
 
         if (local) {
             return this._renderParticipant(true);
         }
 
-        if (isFakeParticipant) {
+        if (isFakeParticipant && !isWhiteboard) {
             return this._renderFakeParticipant();
         }
 

react/features/filmstrip/components/web/ThumbnailTopIndicators.tsx

@@ -26,6 +26,11 @@ declare let interfaceConfig: any;
 
 type Props = {
 
+    /**
+     * Whether to hide the connection indicator.
+     */
+    disableConnectionIndicator?: boolean;
+
     /**
      * Hide popover callback.
      */
@@ -85,6 +90,7 @@ const useStyles = makeStyles()(() => {
 });
 
 const ThumbnailTopIndicators = ({
+    disableConnectionIndicator,
     hidePopover,
     indicatorsClassName,
     isVirtualScreenshareParticipant,
@@ -102,7 +108,7 @@ const ThumbnailTopIndicators = ({
     const _indicatorIconSize = NORMAL;
     const _connectionIndicatorAutoHideEnabled = Boolean(
         useSelector((state: IState) => state['features/base/config'].connectionIndicators?.autoHide) ?? true);
-    const _connectionIndicatorDisabled = _isMobile
+    const _connectionIndicatorDisabled = _isMobile || disableConnectionIndicator
         || Boolean(useSelector((state: IState) => state['features/base/config'].connectionIndicators?.disabled));
     const _isMultiStreamEnabled = useSelector(getMultipleVideoSupportFeatureFlag);
     const showConnectionIndicator = isHovered || !_connectionIndicatorAutoHideEnabled;

react/features/large-video/components/LargeVideo.web.js

@@ -17,6 +17,8 @@ import { getLargeVideoParticipant } from '../../large-video/functions';
 import { SharedVideo } from '../../shared-video/components/web';
 import { Captions } from '../../subtitles/';
 import { setTileView } from '../../video-layout/actions';
+import Whiteboard from '../../whiteboard/components/web/Whiteboard';
+import { isWhiteboardEnabled } from '../../whiteboard/functions';
 import { setSeeWhatIsBeingShared } from '../actions.web';
 
 import ScreenSharePlaceholder from './ScreenSharePlaceholder.web';
@@ -87,7 +89,7 @@ type Props = {
     /**
      * The large video participant id.
      */
-     _largeVideoParticipantId: string,
+    _largeVideoParticipantId: string,
 
     /**
      * Whether or not the local screen share is on large-video.
@@ -97,7 +99,12 @@ type Props = {
     /**
      * Whether or not the screen sharing is visible.
      */
-     _seeWhatIsBeingShared: boolean,
+    _seeWhatIsBeingShared: boolean,
+
+    /**
+     * Whether or not the whiteboard is enabled.
+     */
+    _whiteboardEnabled: boolean;
 
     /**
      * The Redux dispatch function.
@@ -166,7 +173,8 @@ class LargeVideo extends Component<Props> {
             _displayScreenSharingPlaceholder,
             _isChatOpen,
             _noAutoPlayVideo,
-            _showDominantSpeakerBadge
+            _showDominantSpeakerBadge,
+            _whiteboardEnabled
         } = this.props;
         const style = this._getCustomStyles();
         const className = `videocontainer${_isChatOpen ? ' shift-right' : ''}`;
@@ -178,6 +186,7 @@ class LargeVideo extends Component<Props> {
                 ref = { this._containerRef }
                 style = { style }>
                 <SharedVideo />
+                {_whiteboardEnabled && <Whiteboard />}
                 <div id = 'etherpad' />
 
                 <Watermarks />
@@ -361,7 +370,8 @@ function _mapStateToProps(state) {
         _showDominantSpeakerBadge: !hideDominantSpeakerBadge,
         _verticalFilmstripWidth: verticalFilmstripWidth.current,
         _verticalViewMaxWidth: getVerticalViewMaxWidth(state),
-        _visibleFilmstrip: visible
+        _visibleFilmstrip: visible,
+        _whiteboardEnabled: isWhiteboardEnabled(state)
     };
 }
 

react/features/notifications/middleware.ts

@@ -129,10 +129,11 @@ MiddlewareRegistry.register(store => next => action => {
         const { participant: p } = action;
         const { conference } = state['features/base/conference'];
 
-        // Do not display notifications for the virtual screenshare tiles.
+        // Do not display notifications for the virtual screenshare and whiteboard tiles.
         if (conference
             && !p.local
             && !p.isVirtualScreenshareParticipant
+            && !p.isWhiteboard
             && !joinLeaveNotificationsDisabled()
             && !p.isReplacing) {
             dispatch(showParticipantJoinedNotification(
@@ -153,6 +154,7 @@ MiddlewareRegistry.register(store => next => action => {
             if (participant
                 && !participant.local
                 && !participant.isVirtualScreenshareParticipant
+                && !participant.isWhiteboard
                 && !action.participant.isReplaced) {
                 dispatch(showParticipantLeftNotification(
                     getParticipantDisplayName(state, participant.id)

react/features/participants-pane/components/web/MeetingParticipantContextMenu.js

@@ -7,6 +7,7 @@ import {
     getParticipantByIdOrUndefined
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
+import FakeParticipantContextMenu from '../../../video-menu/components/web/FakeParticipantContextMenu';
 import ParticipantContextMenu from '../../../video-menu/components/web/ParticipantContextMenu';
 
 type Props = {
@@ -90,18 +91,26 @@ class MeetingParticipantContextMenu extends Component<Props> {
             return null;
         }
 
-        return (
+        const props = {
-            <ParticipantContextMenu
+            closeDrawer,
-                closeDrawer = { closeDrawer }
+            drawerParticipant,
-                drawerParticipant = { drawerParticipant }
+            offsetTarget,
-                localVideoOwner = { _localVideoOwner }
+            onEnter,
-                offsetTarget = { offsetTarget }
+            onLeave,
-                onEnter = { onEnter }
+            onSelect,
-                onLeave = { onLeave }
+            participant: _participant,
-                onSelect = { onSelect }
+            thumbnailMenu: false
-                participant = { _participant }
+        };
-                thumbnailMenu = { false } />
+
-        );
+        if (_participant?.isFakeParticipant) {
+            return (
+                <FakeParticipantContextMenu
+                    { ...props }
+                    localVideoOwner = { _localVideoOwner } />
+            );
+        }
+
+        return <ParticipantContextMenu { ...props } />;
     }
 }
 

react/features/participants-pane/components/web/MeetingParticipantItem.js

@@ -251,7 +251,12 @@ function MeetingParticipantItem({
     return (
         <ParticipantItem
             actionsTrigger = { ACTION_TRIGGER.HOVER }
-            audioMediaState = { audioMediaState }
+            {
+                ...(_participant?.isFakeParticipant ? {} : {
+                    audioMediaState,
+                    videoMediaState: _videoMediaState
+                })
+            }
             disableModeratorIndicator = { _disableModeratorIndicator }
             displayName = { _displayName }
             isHighlighted = { isHighlighted }
@@ -262,7 +267,6 @@ function MeetingParticipantItem({
             overflowDrawer = { overflowDrawer }
             participantID = { _participantID }
             raisedHand = { _raisedHand }
-            videoMediaState = { _videoMediaState }
             youText = { youText }>
 
             {!overflowDrawer && !_participant?.isFakeParticipant
@@ -282,7 +286,7 @@ function MeetingParticipantItem({
                 </>
             }
 
-            {!overflowDrawer && _localVideoOwner && _participant?.isFakeParticipant && (
+            {!overflowDrawer && (_localVideoOwner || _participant?.isWhiteboard) && _participant?.isFakeParticipant && (
                 <ParticipantActionEllipsis
                     accessibilityLabel = { participantActionEllipsisLabel }
                     onClick = { onContextMenu } />

react/features/toolbox/components/web/Toolbox.tsx

@@ -102,6 +102,8 @@ import { VideoQualityButton, VideoQualityDialog } from '../../../video-quality/c
 // @ts-ignore
 import { VideoBackgroundButton, toggleBackgroundEffect } from '../../../virtual-background';
 import { VIRTUAL_BACKGROUND_TYPE } from '../../../virtual-background/constants';
+import WhiteboardButton from '../../../whiteboard/components/web/WhiteboardButton';
+import { isWhiteboardEnabled } from '../../../whiteboard/functions';
 import {
     setFullScreen,
     setHangupMenuVisible,
@@ -319,6 +321,11 @@ interface Props extends WithTranslation {
      */
     _visible: boolean;
 
+    /**
+     * Whether the whiteboard is visible.
+     */
+    _whiteboardEnabled: boolean;
+
     /**
      * An object containing the CSS classes.
      */
@@ -714,7 +721,8 @@ class Toolbox extends Component<Props> {
             _isMobile,
             _hasSalesforce,
             _multiStreamModeEnabled,
-            _screenSharing
+            _screenSharing,
+            _whiteboardEnabled
         } = this.props;
 
         const microphone = {
@@ -845,6 +853,12 @@ class Toolbox extends Component<Props> {
         };
 
 
+        const whiteboard = _whiteboardEnabled && {
+            key: 'whiteboard',
+            Content: WhiteboardButton,
+            group: 3
+        };
+
         const etherpad = {
             key: 'etherpad',
             Content: SharedDocumentButton,
@@ -932,6 +946,7 @@ class Toolbox extends Component<Props> {
             shareVideo,
             shareAudio,
             noiseSuppression,
+            whiteboard,
             etherpad,
             virtualBackground,
             dockIframe,
@@ -1533,7 +1548,8 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
         _tileViewEnabled: shouldDisplayTileView(state),
         _toolbarButtons: toolbarButtons,
         _virtualSource: state['features/virtual-background'].virtualSource,
-        _visible: isToolboxVisible(state)
+        _visible: isToolboxVisible(state),
+        _whiteboardEnabled: isWhiteboardEnabled(state)
     };
 }
 

react/features/toolbox/functions.web.ts

@@ -2,6 +2,7 @@ import { IState } from '../app/types';
 import { getToolbarButtons } from '../base/config/functions.web';
 import { hasAvailableDevices } from '../base/devices/functions';
 import { isScreenMediaShared } from '../screen-share/functions';
+import { isWhiteboardVisible } from '../whiteboard/functions';
 
 import { TOOLBAR_TIMEOUT } from './constants';
 
@@ -48,9 +49,17 @@ export function isToolboxVisible(state: IState) {
         visible
     } = state['features/toolbox'];
     const { audioSettingsVisible, videoSettingsVisible } = state['features/settings'];
+    const whiteboardVisible = isWhiteboardVisible(state);
 
     return Boolean(!iAmRecorder && !iAmSipGateway
-            && (timeoutID || visible || alwaysVisible || audioSettingsVisible || videoSettingsVisible));
+            && (
+                timeoutID
+                || visible
+                || alwaysVisible
+                || audioSettingsVisible
+                || videoSettingsVisible
+                || whiteboardVisible
+            ));
 }
 
 /**

react/features/video-menu/components/web/FakeParticipantContextMenu.tsx

@@ -0,0 +1,160 @@
+/* eslint-disable lines-around-comment */
+
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+// @ts-ignore
+import TogglePinToStageButton from '../../../../features/video-menu/components/web/TogglePinToStageButton';
+// @ts-ignore
+import { Avatar } from '../../../base/avatar';
+import ContextMenu from '../../../base/components/context-menu/ContextMenu';
+import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
+import { IconShareVideo } from '../../../base/icons/svg';
+import { Participant } from '../../../base/participants/types';
+// @ts-ignore
+import { stopSharedVideo } from '../../../shared-video/actions.any';
+// @ts-ignore
+import { showOverflowDrawer } from '../../../toolbox/functions.web';
+// @ts-ignore
+import { setWhiteboardOpen } from '../../../whiteboard/actions';
+import { WHITEBOARD_ID } from '../../../whiteboard/constants';
+
+type Props = {
+
+    /**
+     * Class name for the context menu.
+     */
+    className?: string;
+
+    /**
+     * Closes a drawer if open.
+     */
+    closeDrawer?: () => void;
+
+    /**
+     * The participant for which the drawer is open.
+     * It contains the displayName & participantID.
+     */
+    drawerParticipant?: {
+        displayName: string;
+        participantID: string;
+    };
+
+    /**
+     * Shared video local participant owner.
+     */
+    localVideoOwner?: boolean;
+
+    /**
+     * Target elements against which positioning calculations are made.
+     */
+    offsetTarget?: HTMLElement;
+
+    /**
+     * Callback for the mouse entering the component.
+     */
+    onEnter?: (e?: React.MouseEvent) => void;
+
+    /**
+     * Callback for the mouse leaving the component.
+     */
+    onLeave?: (e?: React.MouseEvent) => void;
+
+    /**
+     * Callback for making a selection in the menu.
+     */
+    onSelect: (value?: boolean | React.MouseEvent) => void;
+
+    /**
+     * Participant reference.
+     */
+    participant: Participant;
+
+    /**
+     * Whether or not the menu is displayed in the thumbnail remote video menu.
+     */
+    thumbnailMenu?: boolean;
+};
+
+const FakeParticipantContextMenu = ({
+    className,
+    closeDrawer,
+    drawerParticipant,
+    localVideoOwner,
+    offsetTarget,
+    onEnter,
+    onLeave,
+    onSelect,
+    participant,
+    thumbnailMenu
+}: Props) => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const _overflowDrawer: boolean = useSelector(showOverflowDrawer);
+
+    const clickHandler = useCallback(() => onSelect(true), [ onSelect ]);
+
+    const _onStopSharedVideo = useCallback(() => {
+        clickHandler();
+        dispatch(stopSharedVideo());
+    }, [ stopSharedVideo ]);
+
+    const _onHideWhiteboard = useCallback(() => {
+        clickHandler();
+        dispatch(setWhiteboardOpen(false));
+    }, [ setWhiteboardOpen ]);
+
+    const _getActions = useCallback(() => {
+        if (participant.isWhiteboard) {
+            return [ {
+                accessibilityLabel: t('toolbar.hideWhiteboard'),
+                icon: IconShareVideo,
+                onClick: _onHideWhiteboard,
+                text: t('toolbar.hideWhiteboard')
+            } ];
+        }
+
+        if (localVideoOwner) {
+            return [ {
+                accessibilityLabel: t('toolbar.stopSharedVideo'),
+                icon: IconShareVideo,
+                onClick: _onStopSharedVideo,
+                text: t('toolbar.stopSharedVideo')
+            } ];
+        }
+    }, [ localVideoOwner, participant.isWhiteboard ]);
+
+    return (
+        <ContextMenu
+            className = { className }
+            entity = { participant }
+            hidden = { thumbnailMenu ? false : undefined }
+            inDrawer = { thumbnailMenu && _overflowDrawer }
+            isDrawerOpen = { Boolean(drawerParticipant) }
+            offsetTarget = { offsetTarget }
+            onClick = { onSelect }
+            onDrawerClose = { thumbnailMenu ? onSelect : closeDrawer }
+            onMouseEnter = { onEnter }
+            onMouseLeave = { onLeave }>
+            {!thumbnailMenu && _overflowDrawer && drawerParticipant && <ContextMenuItemGroup
+                actions = { [ {
+                    accessibilityLabel: drawerParticipant.displayName,
+                    customIcon: <Avatar
+                        participantId = { drawerParticipant.participantID }
+                        size = { 20 } />,
+                    text: drawerParticipant.displayName
+                } ] } />}
+
+            <ContextMenuItemGroup
+                actions = { _getActions() }>
+                {participant.isWhiteboard && <TogglePinToStageButton
+                    key = 'pinToStage'
+                    participantID = { WHITEBOARD_ID } />}
+            </ContextMenuItemGroup>
+
+        </ContextMenu>
+    );
+};
+
+export default FakeParticipantContextMenu;

react/features/video-menu/components/web/ParticipantContextMenu.tsx

@@ -14,7 +14,6 @@ import { Avatar } from '../../../base/avatar';
 import ContextMenu from '../../../base/components/context-menu/ContextMenu';
 import ContextMenuItemGroup from '../../../base/components/context-menu/ContextMenuItemGroup';
 import { isIosMobileBrowser, isMobileBrowser } from '../../../base/environment/utils';
-import { IconShareVideo } from '../../../base/icons/svg';
 import { MEDIA_TYPE } from '../../../base/media/constants';
 import { PARTICIPANT_ROLE } from '../../../base/participants/constants';
 import { getLocalParticipant } from '../../../base/participants/functions';
@@ -31,8 +30,6 @@ import { isForceMuted } from '../../../participants-pane/functions';
 // @ts-ignore
 import { requestRemoteControl, stopController } from '../../../remote-control';
 // @ts-ignore
-import { stopSharedVideo } from '../../../shared-video/actions.any';
-// @ts-ignore
 import { showOverflowDrawer } from '../../../toolbox/functions.web';
 
 // @ts-ignore
@@ -77,11 +74,6 @@ type Props = {
         participantID: string;
     };
 
-    /**
-     * Shared video local participant owner.
-     */
-    localVideoOwner?: boolean;
-
     /**
      * Target elements against which positioning calculations are made.
      */
@@ -136,7 +128,6 @@ const ParticipantContextMenu = ({
     className,
     closeDrawer,
     drawerParticipant,
-    localVideoOwner,
     offsetTarget,
     onEnter,
     onLeave,
@@ -176,11 +167,6 @@ const ParticipantContextMenu = ({
 
     const clickHandler = useCallback(() => onSelect(true), [ onSelect ]);
 
-    const _onStopSharedVideo = useCallback(() => {
-        clickHandler();
-        dispatch(stopSharedVideo());
-    }, [ stopSharedVideo ]);
-
     const _getCurrentParticipantId = useCallback(() => {
         const drawer = _overflowDrawer && !thumbnailMenu;
 
@@ -197,13 +183,6 @@ const ParticipantContextMenu = ({
         && typeof _volume === 'number'
         && !isNaN(_volume);
 
-    const fakeParticipantActions = [ {
-        accessibilityLabel: t('toolbar.stopSharedVideo'),
-        icon: IconShareVideo,
-        onClick: _onStopSharedVideo,
-        text: t('toolbar.stopSharedVideo')
-    } ];
-
     if (_isModerator) {
         if ((thumbnailMenu || _overflowDrawer) && isModerationSupported && _isAudioMuted) {
             buttons.push(<AskToUnmuteButton
@@ -328,36 +307,29 @@ const ParticipantContextMenu = ({
                         size = { 20 } />,
                     text: drawerParticipant.displayName
                 } ] } />}
-            {participant?.isFakeParticipant ? localVideoOwner && (
+            {buttons.length > 0 && (
-                <ContextMenuItemGroup
+                <ContextMenuItemGroup>
-                    actions = { fakeParticipantActions } />
+                    {buttons}
-            ) : (
+                </ContextMenuItemGroup>
-                <>
+            )}
-                    {buttons.length > 0 && (
+            <ContextMenuItemGroup>
-                        <ContextMenuItemGroup>
+                {buttons2}
-                            {buttons}
+            </ContextMenuItemGroup>
-                        </ContextMenuItemGroup>
+            {showVolumeSlider && (
-                    )}
+                <ContextMenuItemGroup>
-                    <ContextMenuItemGroup>
+                    <VolumeSlider
-                        {buttons2}
+                        initialValue = { _volume }
-                    </ContextMenuItemGroup>
+                        key = 'volume-slider'
-                    {showVolumeSlider && (
+                        onChange = { _onVolumeChange } />
-                        <ContextMenuItemGroup>
+                </ContextMenuItemGroup>
-                            <VolumeSlider
+            )}
-                                initialValue = { _volume }
+            {breakoutRoomsButtons.length > 0 && (
-                                key = 'volume-slider'
+                <ContextMenuItemGroup>
-                                onChange = { _onVolumeChange } />
+                    <div className = { styles.text }>
-                        </ContextMenuItemGroup>
+                        {t('breakoutRooms.actions.sendToBreakoutRoom')}
-                    )}
+                    </div>
-                    {breakoutRoomsButtons.length > 0 && (
+                    {breakoutRoomsButtons}
-                        <ContextMenuItemGroup>
+                </ContextMenuItemGroup>
-                            <div className = { styles.text }>
-                                {t('breakoutRooms.actions.sendToBreakoutRoom')}
-                            </div>
-                            {breakoutRoomsButtons}
-                        </ContextMenuItemGroup>
-                    )}
-                </>
             )}
         </ContextMenu>
     );

react/features/video-menu/components/web/RemoteVideoMenuTriggerButton.tsx

@@ -9,7 +9,7 @@ import { isMobileBrowser } from '../../../base/environment/utils';
 // @ts-ignore
 import { translate } from '../../../base/i18n';
 import { IconHorizontalPoints } from '../../../base/icons/svg';
-import { getParticipantById } from '../../../base/participants/functions';
+import { getLocalParticipant, getParticipantById } from '../../../base/participants/functions';
 import { Participant } from '../../../base/participants/types';
 // @ts-ignore
 import { Popover } from '../../../base/popover';
@@ -24,7 +24,7 @@ import { THUMBNAIL_TYPE } from '../../../filmstrip/constants';
 // @ts-ignore
 import { renderConnectionStatus } from '../../actions.web';
 
-// @ts-ignore
+import FakeParticipantContextMenu from './FakeParticipantContextMenu';
 import ParticipantContextMenu from './ParticipantContextMenu';
 // @ts-ignore
 import { REMOTE_CONTROL_MENU_STATES } from './RemoteControlButton';
@@ -40,6 +40,11 @@ interface Props extends WithTranslation {
      */
     _disabled: Boolean;
 
+    /**
+     * Shared video local participant owner.
+     */
+    _localVideoOwner?: boolean;
+
     /**
      * The position relative to the trigger the remote menu should display
      * from. Valid values are those supported by AtlasKit
@@ -237,15 +242,27 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
      * @returns {ReactElement}
      */
     _renderRemoteVideoMenu() {
-        const { _participant, _remoteControlState, classes } = this.props;
+        const { _localVideoOwner, _participant, _remoteControlState, classes } = this.props;
+
+        const props = {
+            className: classes.contextMenu,
+            onSelect: this._onPopoverClose,
+            participant: _participant,
+            thumbnailMenu: true
+        };
+
+        if (_participant?.isFakeParticipant) {
+            return (
+                <FakeParticipantContextMenu
+                    { ...props }
+                    localVideoOwner = { _localVideoOwner } />
+            );
+        }
 
         return (
             <ParticipantContextMenu
-                className = { classes.contextMenu }
+                { ...props }
-                onSelect = { this._onPopoverClose }
+                remoteControlState = { _remoteControlState } />
-                participant = { _participant }
-                remoteControlState = { _remoteControlState }
-                thumbnailMenu = { true } />
         );
     }
 }
@@ -261,6 +278,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
 function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
     const { participantID, thumbnailType } = ownProps;
     let _remoteControlState = null;
+    const localParticipantId = getLocalParticipant(state)?.id;
     const participant = getParticipantById(state, participantID ?? '');
     const _participantDisplayName = participant?.name;
     const _isRemoteControlSessionActive = participant?.remoteControlSessionStatus ?? false;
@@ -271,6 +289,7 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
     const { overflowDrawer } = state['features/toolbox'];
     const { showConnectionInfo } = state['features/base/connection'];
     const { remoteVideoMenu } = state['features/base/config'];
+    const { ownerId } = state['features/shared-video'];
 
     if (_supportsRemoteControl
             && ((!active && !_isRemoteControlSessionActive) || activeParticipant === participantID)) {
@@ -301,6 +320,7 @@ function _mapStateToProps(state: IState, ownProps: Partial<Props>) {
 
     return {
         _disabled: remoteVideoMenu?.disabled,
+        _localVideoOwner: Boolean(ownerId === localParticipantId),
         _menuPosition,
         _overflowDrawer: overflowDrawer,
         _participant: participant ?? { id: '' },

react/features/whiteboard/actionTypes.ts

@@ -0,0 +1,25 @@
+/**
+ * Close the whiteboard collaboration session.
+ * {{
+ *      type: RESET_WHITEBOARD
+ * }}
+ */
+export const RESET_WHITEBOARD: string = 'RESET_WHITEBOARD';
+
+/**
+ * Configure the whiteboard collaboration details.
+ * {{
+ *      type: SETUP_WHITEBOARD,
+ *      collabDetails
+ * }}
+ */
+ export const SETUP_WHITEBOARD: string = 'SETUP_WHITEBOARD';
+
+/**
+ * Sets the whiteboard visibility state.
+ * {{
+ *      type: SET_WHITEBOARD_OPEN,
+ *      isOpen
+ * }}
+ */
+export const SET_WHITEBOARD_OPEN: string = 'SET_WHITEBOARD_OPEN';

react/features/whiteboard/actions.ts

@@ -0,0 +1,52 @@
+import {
+    RESET_WHITEBOARD,
+    SETUP_WHITEBOARD,
+    SET_WHITEBOARD_OPEN
+} from './actionTypes';
+import { WhiteboardAction } from './reducer';
+
+/**
+ * Configures the whiteboard collaboration details.
+ *
+ * @param {Object} payload - The whiteboard settings.
+ * @returns {{
+ *     type: SETUP_WHITEBOARD,
+ *     collabDetails: { roomId: string, roomKey: string }
+ * }}
+ */
+export const setupWhiteboard = ({ collabDetails }: {
+    collabDetails: { roomId: string; roomKey: string; };
+}): WhiteboardAction => {
+    return {
+        type: SETUP_WHITEBOARD,
+        collabDetails
+    };
+};
+
+/**
+ * Cleans up the whiteboard collaboration settings.
+ * To be used only on native for cleanup in between conferences.
+ *
+ * @returns {{
+ *     type: RESET_WHITEBOARD
+ * }}
+ */
+export const resetWhiteboard = (): WhiteboardAction => {
+    return { type: RESET_WHITEBOARD };
+};
+
+/**
+ * Sets the whiteboard visibility status.
+ *
+ * @param {boolean} isOpen - The whiteboard visibility flag.
+ * @returns {{
+ *      type: SET_WHITEBOARD_OPEN,
+ *      isOpen
+ * }}
+ */
+export const setWhiteboardOpen = (isOpen: boolean): WhiteboardAction => {
+    return {
+        type: SET_WHITEBOARD_OPEN,
+        isOpen
+    };
+};

react/features/whiteboard/components/web/Whiteboard.tsx

@@ -0,0 +1,142 @@
+/* eslint-disable import/order */
+/* eslint-disable lines-around-comment */
+
+import { ExcalidrawApp } from '@jitsi/excalidraw';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import clsx from 'clsx';
+
+// @ts-ignore
+import Filmstrip from '../../../../../modules/UI/videolayout/Filmstrip';
+// @ts-ignore
+import { getVerticalViewMaxWidth } from '../../../filmstrip/functions.web';
+// @ts-ignore
+import { getToolboxHeight } from '../../../toolbox/functions.web';
+import {
+    getCollabDetails,
+    getCollabServerUrl,
+    isWhiteboardOpen,
+    isWhiteboardVisible
+} from '../../functions';
+// @ts-ignore
+import { shouldDisplayTileView } from '../../../video-layout/functions.any';
+import { getLocalParticipant } from '../../../base/participants/functions';
+import { WHITEBOARD_UI_OPTIONS } from '../../constants';
+import { IState } from '../../../app/types';
+
+/**
+ * Space taken by meeting elements like the subject and the watermark.
+ */
+const HEIGHT_OFFSET = 80;
+
+declare const interfaceConfig: any;
+
+interface IDimensions {
+
+    /* The height of the component. */
+    height: string;
+
+    /* The width of the component. */
+    width: string;
+}
+
+/**
+ * The Whiteboard component.
+ *
+ * @returns {JSX.Element} - The React component.
+ */
+const Whiteboard: () => JSX.Element = () => {
+    const excalidrawRef = useRef<any>(null);
+    const collabAPIRef = useRef<any>(null);
+
+    const isOpen = useSelector(isWhiteboardOpen);
+    const isVisible = useSelector(isWhiteboardVisible);
+    const isInTileView = useSelector(shouldDisplayTileView);
+    const { clientHeight, clientWidth } = useSelector((state: IState) => state['features/base/responsive-ui']);
+    const { visible: filmstripVisible, isResizing } = useSelector((state: IState) => state['features/filmstrip']);
+    const filmstripWidth: number = useSelector(getVerticalViewMaxWidth);
+    const collabDetails = useSelector(getCollabDetails);
+    const collabServerUrl = useSelector(getCollabServerUrl);
+    const { defaultRemoteDisplayName } = useSelector((state: IState) => state['features/base/config']);
+    const localParticipantName = useSelector(getLocalParticipant)?.name || defaultRemoteDisplayName || 'Fellow Jitster';
+
+    useEffect(() => {
+        if (!collabAPIRef.current) {
+            return;
+        }
+
+        collabAPIRef.current.setUsername(localParticipantName);
+    }, [ localParticipantName ]);
+
+    /**
+    * Computes the width and the height of the component.
+    *
+    * @returns {IDimensions} - The dimensions of the component.
+    */
+    const getDimensions = (): IDimensions => {
+        let width: number;
+        let height: number;
+
+        if (interfaceConfig.VERTICAL_FILMSTRIP) {
+            if (filmstripVisible) {
+                width = clientWidth - filmstripWidth;
+            } else {
+                width = clientWidth;
+            }
+            height = clientHeight - getToolboxHeight();
+        } else {
+            if (filmstripVisible) {
+                height = clientHeight - Filmstrip.getFilmstripHeight();
+            } else {
+                height = clientHeight;
+            }
+            width = clientWidth;
+        }
+
+        return {
+            width: `${width}px`,
+            height: `${height - HEIGHT_OFFSET}px`
+        };
+    };
+
+    const getCollabAPI = useCallback(collabAPI => {
+        if (collabAPIRef.current) {
+            return;
+        }
+        collabAPIRef.current = collabAPI;
+        collabAPIRef.current.setUsername(localParticipantName);
+    }, [ localParticipantName ]);
+
+    return (
+        <div
+            className = { clsx(
+                isResizing && 'disable-pointer',
+                'whiteboard-container'
+            ) }
+            style = {{
+                ...getDimensions(),
+                marginTop: `${HEIGHT_OFFSET}px`,
+                display: `${isInTileView || !isVisible ? 'none' : 'block'}`
+            }}>
+            {
+                isOpen && (
+                    <div className = 'excalidraw-wrapper'>
+                        <ExcalidrawApp
+                            collabDetails = { collabDetails }
+                            collabServerUrl = { collabServerUrl }
+                            excalidraw = {{
+                                isCollaborating: true,
+                                // @ts-ignore
+                                ref: excalidrawRef,
+                                theme: 'light',
+                                UIOptions: WHITEBOARD_UI_OPTIONS
+                            }}
+                            getCollabAPI = { getCollabAPI } />
+                    </div>
+                )
+            }
+        </div>
+    );
+};
+
+export default Whiteboard;

react/features/whiteboard/components/web/WhiteboardButton.tsx

@@ -0,0 +1,88 @@
+/* eslint-disable import/order */
+import type { Dispatch } from 'redux';
+import { IState } from '../../../app/types';
+
+// @ts-ignore
+import { translate } from '../../../base/i18n';
+import { IconHideWhiteboard, IconShowWhiteboard } from '../../../base/icons/svg';
+
+// @ts-ignore
+import { connect } from '../../../base/redux';
+
+// @ts-ignore
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+
+// @ts-ignore
+import { setOverflowMenuVisible } from '../../../toolbox/actions.web';
+import { setWhiteboardOpen } from '../../actions';
+import { isWhiteboardVisible } from '../../functions';
+
+
+type Props = AbstractButtonProps & {
+
+    /**
+     * Whether or not the button is toggled.
+     */
+    _toggled: boolean;
+
+    /**
+     * The redux {@code dispatch} function.
+     */
+    dispatch: Dispatch<any>;
+};
+
+/**
+ * Component that renders a toolbar button for the whiteboard.
+ */
+class WhiteboardButton extends AbstractButton<Props, any, any> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.whiteboard';
+    icon = IconShowWhiteboard;
+    label = 'toolbar.showWhiteboard';
+    toggledIcon = IconHideWhiteboard;
+    toggledLabel = 'toolbar.hideWhiteboard';
+    toggledTooltip = 'toolbar.hideWhiteboard';
+    tooltip = 'toolbar.showWhiteboard';
+
+    /**
+     * Handles clicking / pressing the button, and opens / closes the whiteboard view.
+     *
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+
+        // @ts-ignore
+        const { dispatch, _toggled } = this.props;
+
+        dispatch(setWhiteboardOpen(!_toggled));
+        dispatch(setOverflowMenuVisible(false));
+    }
+
+    /**
+     * Indicates whether this button is in toggled state or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    _isToggled() {
+        // @ts-ignore
+        return this.props._toggled;
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {Props}
+ */
+function _mapStateToProps(state: IState) {
+    return {
+        _toggled: isWhiteboardVisible(state)
+    };
+}
+
+// @ts-ignore
+export default translate(connect(_mapStateToProps)(WhiteboardButton));

react/features/whiteboard/constants.ts

@@ -0,0 +1,54 @@
+/**
+ * Fixed name of the whiteboard fake participant.
+ */
+export const WHITEBOARD_PARTICIPANT_NAME = 'Whiteboard';
+
+/**
+ * Whiteboard ID.
+ */
+export const WHITEBOARD_ID = 'whiteboard';
+
+/**
+ * Whiteboard UI Options.
+ */
+export const WHITEBOARD_UI_OPTIONS = {
+    canvasActions: {
+        allowedShapes: [
+            'arrow', 'diamond', 'ellipse', 'freedraw', 'line', 'rectangle', 'selection', 'text'
+        ],
+        allowedShortcuts: [
+            'cut', 'deleteSelectedElements', 'redo', 'selectAll', 'undo'
+        ],
+        disableAlignItems: true,
+        disableFileDrop: true,
+        disableGrouping: true,
+        disableHints: true,
+        disableLink: true,
+        disableShortcuts: true,
+        disableVerticalAlignOptions: true,
+        fontSizeOptions: [ 's', 'm', 'l' ],
+        hideArrowHeadsOptions: true,
+        hideColorInput: true,
+        hideClearCanvas: true,
+        hideFontFamily: true,
+        hideHelpDialog: true,
+        hideIOActions: true,
+        hideLayers: true,
+        hideLibraries: true,
+        hideLockButton: true,
+        hideOpacityInput: true,
+        hideSharpness: true,
+        hideStrokeStyle: true,
+        hideTextAlign: true,
+        hideThemeControls: true,
+        hideUserList: true,
+        saveAsImageOptions: {
+            defaultBackgroundValue: true,
+            disableScale: true,
+            disableSelection: true,
+            disableClipboard: true,
+            disableSceneEmbed: true,
+            hideTheme: true
+        }
+    }
+};

react/features/whiteboard/functions.ts

@@ -0,0 +1,95 @@
+/* eslint-disable import/order */
+import md5 from 'js-md5';
+
+// @ts-ignore
+import { getPinnedParticipant } from '../../features/base/participants';
+import { IState } from '../app/types';
+import { getCurrentConference } from '../base/conference/functions';
+import { getRemoteParticipants, isLocalParticipantModerator } from '../base/participants/functions';
+import { appendURLParam } from '../base/util/uri';
+
+// @ts-ignore
+import { getCurrentRoomId, isInBreakoutRoom } from '../breakout-rooms/functions';
+
+import { WHITEBOARD_ID } from './constants';
+import { IWhiteboardState } from './reducer';
+
+const getWhiteboardState = (state: IState): IWhiteboardState => state['features/whiteboard'];
+
+/**
+ * Indicates whether the whiteboard is enabled in the config.
+ *
+ * @param {Object} state - The state from the Redux store.
+ * @returns {boolean}
+ */
+export const isWhiteboardEnabled = (state: IState): boolean =>
+    state['features/base/config'].whiteboard?.enabled
+    && state['features/base/config'].whiteboard?.collabServerBaseUrl
+    && getCurrentConference(state)?.getMetadataHandler()
+?.isSupported();
+
+/**
+ * Indicates whether the whiteboard is open.
+ *
+ * @param {Object} state - The state from the Redux store.
+ * @returns {boolean}
+ */
+export const isWhiteboardOpen = (state: IState): boolean => getWhiteboardState(state).isOpen;
+
+/**
+ * Indicates whether the whiteboard button is visible.
+ *
+ * @param {Object} state - The state from the Redux store.
+ * @returns {boolean}
+ */
+export const isWhiteboardButtonVisible = (state: IState): boolean =>
+    isWhiteboardEnabled(state) && (isLocalParticipantModerator(state) || isWhiteboardOpen(state));
+
+/**
+ * Indicates whether the whiteboard is present as a meeting participant.
+ *
+ * @param {Object} state - The state from the Redux store.
+ * @returns {boolean}
+ */
+export const isWhiteboardPresent = (state: IState): boolean => getRemoteParticipants(state).has(WHITEBOARD_ID);
+
+/**
+ * Returns the whiteboard collaboration link.
+ *
+ * @param {Object} state - The state from the Redux store.
+ * @returns {{ roomId: string, roomKey: string}|null}
+ */
+export const getCollabDetails = (state: IState): {
+    roomId: string; roomKey: string;
+} | undefined => getWhiteboardState(state).collabDetails;
+
+/**
+ * Returns the whiteboard collaboration server url.
+ *
+ * @param {Object} state - The state from the Redux store.
+ * @returns {string}
+ */
+export const getCollabServerUrl = (state: IState): string | undefined => {
+    const collabServerBaseUrl = state['features/base/config'].whiteboard?.collabServerBaseUrl;
+
+    if (!collabServerBaseUrl) {
+        return;
+    }
+
+    const { locationURL } = state['features/base/connection'];
+    const inBreakoutRoom = isInBreakoutRoom(state);
+    const roomId = getCurrentRoomId(state);
+    const room = md5.hex(`${locationURL?.href}${inBreakoutRoom ? `|${roomId}` : ''}`);
+
+    return appendURLParam(collabServerBaseUrl, 'room', room);
+};
+
+/**
+ * Whether the whiteboard is visible on stage.
+ *
+ * @param {Object} state - The state from the Redux store.
+ * @returns {boolean}
+ */
+export const isWhiteboardVisible = (state: IState): boolean =>
+    getPinnedParticipant(state)?.id === WHITEBOARD_ID
+    || state['features/large-video'].participantId === WHITEBOARD_ID;

react/features/whiteboard/middleware.ts

@@ -0,0 +1,127 @@
+/* eslint-disable import/order */
+import { generateCollaborationLinkData } from '@jitsi/excalidraw';
+import { IStore } from '../app/types';
+
+import { participantJoined, participantLeft, pinParticipant } from '../base/participants/actions';
+
+// @ts-ignore
+import { getCurrentConference } from '../base/conference/functions';
+
+// @ts-ignore
+import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
+import { RESET_WHITEBOARD, SET_WHITEBOARD_OPEN } from './actionTypes';
+import { getCollabDetails, getCollabServerUrl, isWhiteboardPresent } from './functions';
+import { WHITEBOARD_ID, WHITEBOARD_PARTICIPANT_NAME } from './constants';
+import { resetWhiteboard, setWhiteboardOpen, setupWhiteboard } from './actions';
+import { getCurrentRoomId } from '../breakout-rooms/functions';
+
+// @ts-ignore
+import { addStageParticipant } from '../filmstrip/actions.web';
+
+// @ts-ignore
+import { isStageFilmstripAvailable } from '../filmstrip/functions';
+import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
+
+const focusWhiteboard = (store: IStore) => {
+    const { dispatch, getState } = store;
+    const state = getState();
+    const conference = getCurrentConference(state);
+    const stageFilmstrip = isStageFilmstripAvailable(state);
+    const isPresent = isWhiteboardPresent(state);
+
+    if (!isPresent) {
+        dispatch(participantJoined({
+            conference,
+            id: WHITEBOARD_ID,
+            isFakeParticipant: true,
+            isWhiteboard: true,
+            name: WHITEBOARD_PARTICIPANT_NAME
+        }));
+    }
+    if (stageFilmstrip) {
+        dispatch(addStageParticipant(WHITEBOARD_ID, true));
+    } else {
+        dispatch(pinParticipant(WHITEBOARD_ID));
+    }
+};
+
+/**
+ * Middleware which intercepts whiteboard actions to handle changes to the related state.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register((store: IStore) => (next: Function) => async (action: any) => {
+    const { dispatch, getState } = store;
+    const state = getState();
+    const conference = getCurrentConference(state);
+
+    switch (action.type) {
+    case SET_WHITEBOARD_OPEN: {
+        const existingCollabDetails = getCollabDetails(state);
+
+        if (!existingCollabDetails) {
+            const collabDetails = await generateCollaborationLinkData();
+            const collabServerUrl = getCollabServerUrl(state);
+
+            focusWhiteboard(store);
+            dispatch(setupWhiteboard({
+                collabDetails: {
+                    roomId: getCurrentRoomId(state),
+                    roomKey: collabDetails.roomKey
+                }
+            }));
+            conference.getMetadataHandler().setMetadata(WHITEBOARD_ID, {
+                collabServerUrl,
+                roomKey: collabDetails.roomKey
+            });
+
+            return;
+        }
+
+        if (action.isOpen) {
+            focusWhiteboard(store);
+
+            return;
+        }
+
+        dispatch(participantLeft(WHITEBOARD_ID, conference, { isWhiteboard: true }));
+        break;
+    }
+    case RESET_WHITEBOARD: {
+        dispatch(participantLeft(WHITEBOARD_ID, conference, { isWhiteboard: true }));
+        break;
+    }
+    }
+
+    return next(action);
+});
+
+/**
+ * Set up state change listener to perform maintenance tasks when the conference
+ * is left or failed, e.g. Disable the whiteboard if it's left open.
+ */
+StateListenerRegistry.register(
+
+    // @ts-ignore
+    state => getCurrentConference(state),
+
+    // @ts-ignore
+    (conference, { dispatch, getState }, previousConference): void => {
+        if (conference !== previousConference) {
+            dispatch(resetWhiteboard());
+        }
+        if (conference && !previousConference) {
+            conference.on(JitsiConferenceEvents.METADATA_UPDATED, (metadata: any) => {
+                if (metadata[WHITEBOARD_ID]) {
+                    dispatch(setupWhiteboard({
+                        collabDetails: {
+                            roomId: getCurrentRoomId(getState()),
+                            roomKey: metadata[WHITEBOARD_ID].roomKey
+                        }
+                    }));
+                    dispatch(setWhiteboardOpen(true));
+                }
+            });
+        }
+    });

react/features/whiteboard/reducer.ts

@@ -0,0 +1,53 @@
+import ReducerRegistry from '../base/redux/ReducerRegistry';
+
+import { RESET_WHITEBOARD, SETUP_WHITEBOARD } from './actionTypes';
+
+export interface IWhiteboardState {
+
+    /**
+     * The whiteboard collaboration details.
+     */
+    collabDetails?: { roomId: string; roomKey: string; };
+
+    /**
+     * The indicator which determines whether the whiteboard is open.
+     *
+     * @type {boolean}
+     */
+    isOpen: boolean;
+}
+
+const DEFAULT_STATE: IWhiteboardState = {
+    isOpen: false
+};
+
+export interface WhiteboardAction extends Partial<IWhiteboardState> {
+
+    /**
+     * The whiteboard collaboration details.
+     */
+    collabDetails?: { roomId: string; roomKey: string; };
+
+    /**
+     * The action type.
+     */
+    type: string;
+}
+
+ReducerRegistry.register(
+    'features/whiteboard',
+    (state: IWhiteboardState = DEFAULT_STATE, action: WhiteboardAction) => {
+        switch (action.type) {
+        case SETUP_WHITEBOARD: {
+            return {
+                ...state,
+                isOpen: true,
+                collabDetails: action.collabDetails
+            };
+        }
+        case RESET_WHITEBOARD:
+            return DEFAULT_STATE;
+        }
+
+        return state;
+    });

webpack.config.js

@@ -306,7 +306,9 @@ module.exports = (_env, argv) => {
                     process: 'process/browser'
                 })
             ],
-            performance: getPerformanceHints(perfHintOptions, 4 * 1024 * 1024)
+
+            performance: getPerformanceHints(perfHintOptions, 5 * 1024 * 1024)
+
         }),
         Object.assign({}, config, {
             entry: {