feat(large-video/web) Add screen share placeholder (#11971)

* feat(large-video/web) new ScreenSharePlaceholder component

lang/main.json

@@ -518,6 +518,10 @@
         "toggleShortcuts": "Show or hide keyboard shortcuts",
         "videoMute": "Start or stop your camera"
     },
+    "largeVideo": {
+        "screenIsShared": "You are sharing your screen",
+        "showMeWhatImSharing": "Show me what I'm sharing"
+    },
     "liveStreaming": {
         "busy": "We're working on freeing streaming resources. Please try again in a few minutes.",
         "busyTitle": "All streamers are currently busy",

modules/UI/videolayout/VideoContainer.js

@@ -480,7 +480,7 @@ export class VideoContainer extends LargeContainer {
      */
     setStream(userID, stream, videoType) {
         this.userId = userID;
-        if (this.stream === stream) {
+        if (this.stream === stream && !stream?.forceStreamToReattach) {
             // Handles the use case for the remote participants when the
             // videoType is received with delay after turning on/off the
             // desktop sharing.
@@ -492,8 +492,12 @@ export class VideoContainer extends LargeContainer {
             return;
         }
 
+        if (stream?.forceStreamToReattach) {
+            delete stream.forceStreamToReattach;
+        }
+
         // detach old stream
-        if (this.stream) {
+        if (this.stream && this.$video[0]) {
             this.stream.detach(this.$video[0]);
         }
 
@@ -504,19 +508,20 @@ export class VideoContainer extends LargeContainer {
             return;
         }
 
-        stream.attach(this.$video[0]);
+        if (this.$video[0]) {
+            stream.attach(this.$video[0]);
 
-        // Ensure large video gets play() called on it when a new stream is attached to it. This is necessary in the
-        // case of Safari as autoplay doesn't kick-in automatically on Safari 15 and newer versions.
-        browser.isWebKitBased() && this.$video[0].play();
+            // Ensure large video gets play() called on it when a new stream is attached to it. This is necessary in the
+            // case of Safari as autoplay doesn't kick-in automatically on Safari 15 and newer versions.
+            browser.isWebKitBased() && this.$video[0].play();
 
-        const flipX = stream.isLocal() && this.localFlipX && !this.isScreenSharing();
-
-        this.$video.css({
-            transform: flipX ? 'scaleX(-1)' : 'none'
-        });
+            const flipX = stream.isLocal() && this.localFlipX && !this.isScreenSharing();
 
-        this._updateBackground();
+            this.$video.css({
+                transform: flipX ? 'scaleX(-1)' : 'none'
+            });
+            this._updateBackground();
+        }
     }
 
     /**

modules/UI/videolayout/VideoLayout.js

@@ -177,7 +177,7 @@ const VideoLayout = {
         return largeVideo && largeVideo.id === id;
     },
 
-    updateLargeVideo(id, forceUpdate) {
+    updateLargeVideo(id, forceUpdate, forceStreamToReattach = false) {
         if (!largeVideo) {
             return;
         }
@@ -198,6 +198,10 @@ const VideoLayout = {
 
         const videoStream = videoTrack?.jitsiTrack;
 
+        if (videoStream && forceStreamToReattach) {
+            videoStream.forceStreamToReattach = forceStreamToReattach;
+        }
+
         if (isOnLarge && !forceUpdate
                 && LargeVideoManager.isVideoContainer(currentContainerType)
                 && videoStream) {
@@ -330,7 +334,7 @@ const VideoLayout = {
      */
     _updateLargeVideoIfDisplayed(participantId, force = false) {
         if (this.isCurrentlyOnLarge(participantId)) {
-            this.updateLargeVideo(participantId, force);
+            this.updateLargeVideo(participantId, force, false);
         }
     },
 

react/features/large-video/actionTypes.ts

@@ -30,3 +30,14 @@ export const UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION
  */
 export const UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT
     = 'UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT';
+
+/**
+ * Action to set the redux store of the current show me what I'm sharing flag value.
+ *
+ * @returns {{
+ *     type: SET_SEE_WHAT_IS_BEING_SHARED,
+ *     seeWhatIsBeingShared: boolean
+ * }}
+ */
+export const SET_SEE_WHAT_IS_BEING_SHARED
+        = 'SET_SEE_WHAT_IS_BEING_SHARED';

react/features/large-video/actions.web.js

@@ -6,7 +6,7 @@ import VideoLayout from '../../../modules/UI/videolayout/VideoLayout';
 import { MEDIA_TYPE } from '../base/media';
 import { getTrackByMediaTypeAndParticipant } from '../base/tracks';
 
-import { UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT } from './actionTypes';
+import { UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT, SET_SEE_WHAT_IS_BEING_SHARED } from './actionTypes';
 
 export * from './actions.any';
 
@@ -101,3 +101,19 @@ export function updateLastLargeVideoMediaEvent(name: String) {
         name
     };
 }
+
+/**
+ * Updates the value used to display what is being shared.
+ *
+ * @param {boolean} seeWhatIsBeingShared - The current value.
+ * @returns {{
+ *     type: SET_SEE_WHAT_IS_BEING_SHARED,
+ *     seeWhatIsBeingShared: boolean
+ * }}
+ */
+export function setSeeWhatIsBeingShared(seeWhatIsBeingShared: boolean) {
+    return {
+        type: SET_SEE_WHAT_IS_BEING_SHARED,
+        seeWhatIsBeingShared
+    };
+}

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

@@ -3,15 +3,22 @@
 import React, { Component } from 'react';
 
 import VideoLayout from '../../../../modules/UI/videolayout/VideoLayout';
+import { getLocalParticipant } from '../../base/participants';
 import { Watermarks } from '../../base/react';
 import { connect } from '../../base/redux';
+import { getVideoTrackByParticipant } from '../../base/tracks';
 import { setColorAlpha } from '../../base/util';
 import { StageParticipantNameLabel } from '../../display-name';
 import { FILMSTRIP_BREAKPOINT, isFilmstripResizable } from '../../filmstrip';
 import { getVerticalViewMaxWidth } from '../../filmstrip/functions.web';
+import { getLargeVideoParticipant } from '../../large-video/functions';
 import { SharedVideo } from '../../shared-video/components/web';
 import { Captions } from '../../subtitles/';
 import { setTileView } from '../../video-layout/actions';
+import { setSeeWhatIsBeingShared } from '../actions.web';
+
+import ScreenSharePlaceholder from './ScreenSharePlaceholder.web';
+
 
 declare var interfaceConfig: Object;
 
@@ -68,6 +75,21 @@ type Props = {
      */
     _visibleFilmstrip: boolean,
 
+    /**
+     * The large video participant id.
+     */
+     _largeVideoParticipantId: string,
+
+        /**
+     * Whether or not the screen sharing is on.
+     */
+        _isScreenSharing: boolean,
+
+    /**
+     * Whether or not the screen sharing is visible.
+     */
+     _seeWhatIsBeingShared: boolean,
+
     /**
      * The Redux dispatch function.
      */
@@ -109,11 +131,19 @@ class LargeVideo extends Component<Props> {
      * @inheritdoc
      */
     componentDidUpdate(prevProps: Props) {
-        const { _visibleFilmstrip } = this.props;
+        const { _visibleFilmstrip, _isScreenSharing, _seeWhatIsBeingShared, _largeVideoParticipantId } = this.props;
 
         if (prevProps._visibleFilmstrip !== _visibleFilmstrip) {
             this._updateLayout();
         }
+
+        if (prevProps._isScreenSharing !== _isScreenSharing && !_isScreenSharing) {
+            this.props.dispatch(setSeeWhatIsBeingShared(false));
+        }
+
+        if (_isScreenSharing && _seeWhatIsBeingShared) {
+            VideoLayout.updateLargeVideo(_largeVideoParticipantId, true, true);
+        }
     }
 
     /**
@@ -126,7 +156,9 @@ class LargeVideo extends Component<Props> {
         const {
             _isChatOpen,
             _noAutoPlayVideo,
-            _showDominantSpeakerBadge
+            _showDominantSpeakerBadge,
+            _isScreenSharing,
+            _seeWhatIsBeingShared
         } = this.props;
         const style = this._getCustomSyles();
         const className = `videocontainer${_isChatOpen ? ' shift-right' : ''}`;
@@ -152,7 +184,6 @@ class LargeVideo extends Component<Props> {
                 <span id = 'remoteConnectionMessage' />
                 <div id = 'largeVideoElementsContainer'>
                     <div id = 'largeVideoBackgroundContainer' />
-
                     {/*
                       * FIXME: the architecture of elements related to the large
                       * video and the naming. The background is not part of
@@ -166,11 +197,11 @@ class LargeVideo extends Component<Props> {
                         onTouchEnd = { this._onDoubleTap }
                         ref = { this._wrapperRef }
                         role = 'figure' >
-                        <video
+                        {_isScreenSharing && !_seeWhatIsBeingShared ? <ScreenSharePlaceholder /> : <video
                             autoPlay = { !_noAutoPlayVideo }
                             id = 'largeVideo'
                             muted = { true }
-                            playsInline = { true } /* for Safari on iOS to work */ />
+                            playsInline = { true } /* for Safari on iOS to work */ />}
                     </div>
                 </div>
                 { interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES
@@ -292,13 +323,23 @@ function _mapStateToProps(state) {
     const { width: verticalFilmstripWidth, visible } = state['features/filmstrip'];
     const { hideDominantSpeakerBadge } = state['features/base/config'];
 
+    const tracks = state['features/base/tracks'];
+    const localParticipantId = getLocalParticipant(state)?.id;
+    const largeVideoParticipant = getLargeVideoParticipant(state);
+    const videoTrack = getVideoTrackByParticipant(tracks, largeVideoParticipant);
+    const localParticipantisSharingTheScreen = largeVideoParticipant?.id?.includes(localParticipantId);
+    const isScreenSharing = localParticipantisSharingTheScreen && videoTrack?.videoType === 'desktop';
+
     return {
         _backgroundAlpha: state['features/base/config'].backgroundAlpha,
         _customBackgroundColor: backgroundColor,
         _customBackgroundImageUrl: backgroundImageUrl,
         _isChatOpen: isChatOpen,
+        _isScreenSharing: isScreenSharing,
+        _largeVideoParticipantId: largeVideoParticipant?.id,
         _noAutoPlayVideo: testingConfig?.noAutoPlayVideo,
         _resizableFilmstrip: isFilmstripResizable(state),
+        _seeWhatIsBeingShared: state['features/large-video'].seeWhatIsBeingShared,
         _showDominantSpeakerBadge: !hideDominantSpeakerBadge,
         _verticalFilmstripWidth: verticalFilmstripWidth.current,
         _verticalViewMaxWidth: getVerticalViewMaxWidth(state),

react/features/large-video/components/ScreenSharePlaceholder.web.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable lines-around-comment */
+import { makeStyles, createStyles } from '@material-ui/core';
+import React, { useCallback } from 'react';
+import { useStore } from 'react-redux';
+
+// @ts-ignore
+import { translate } from '../../base/i18n';
+import { Theme } from '../../base/ui/types';
+// @ts-ignore
+import { setSeeWhatIsBeingShared } from '../actions.web';
+
+const useStyles = makeStyles((theme: Theme) => createStyles({
+    overlayContainer: {
+        width: '100%',
+        height: '100%',
+        backgroundColor: theme.palette.ui02,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute'
+    },
+    content: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    laptop: {
+        width: '88px',
+        height: '56px',
+        boxSizing: 'border-box',
+        border: '3px solid',
+        borderColor: theme.palette.text01,
+        borderRadius: '6px'
+    },
+    laptopStand: {
+        width: '40px',
+        height: '4px',
+        backgroundColor: theme.palette.text01,
+        boxSizing: 'border-box',
+        borderRadius: '6px',
+        marginTop: '4px'
+    },
+    sharingMessage: {
+        fontStyle: 'normal',
+        fontWeight: 600,
+        fontSize: '20px',
+        lineHeight: '28px',
+        marginTop: '24px',
+        letterSpacing: '-0.012em',
+        color: theme.palette.text01
+    },
+    showSharing: {
+        fontStyle: 'normal',
+        fontWeight: 600,
+        fontSize: '14px',
+        lineHeight: '20px',
+        height: '20px',
+        marginTop: '16px',
+        color: theme.palette.link01,
+        cursor: 'pointer',
+
+        '&:hover': {
+            color: theme.palette.link01Hover
+        }
+    }
+}));
+
+/**
+ * Component that displays a placehoder for when the screen is shared.
+ * * @param {Function} t - Function which translate strings.
+ *
+ * @returns {ReactElement}
+ */
+const ScreenSharePlaceholder: React.FC<{ t: Function }> = ({ t }) => {
+    const classes = useStyles();
+    const store = useStore();
+
+
+    const updateShowMeWhatImSharing = useCallback(() => {
+        store.dispatch(setSeeWhatIsBeingShared(true));
+    }, []);
+
+    return (
+        <div className = { classes.overlayContainer }>
+            <div className = { classes.content }>
+                <div className = { classes.laptop } />
+                <div className = { classes.laptopStand } />
+                <span className = { classes.sharingMessage }>{ t('largeVideo.screenIsShared') }</span>
+                <span
+                    className = { classes.showSharing }
+                    onClick = { updateShowMeWhatImSharing }
+                    role = 'button'>{ t('largeVideo.showMeWhatImSharing') }</span>
+            </div>
+        </div>
+    );
+};
+
+export default translate(ScreenSharePlaceholder);

react/features/large-video/reducer.js

@@ -5,7 +5,9 @@ import { ReducerRegistry } from '../base/redux';
 
 import {
     SELECT_LARGE_VIDEO_PARTICIPANT,
-    UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION, UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT
+    UPDATE_KNOWN_LARGE_VIDEO_RESOLUTION,
+    UPDATE_LAST_LARGE_VIDEO_MEDIA_EVENT,
+    SET_SEE_WHAT_IS_BEING_SHARED
 } from './actionTypes';
 
 ReducerRegistry.register('features/large-video', (state = {}, action) => {
@@ -43,6 +45,12 @@ ReducerRegistry.register('features/large-video', (state = {}, action) => {
             lastMediaEvent: action.name
         };
 
+    case SET_SEE_WHAT_IS_BEING_SHARED:
+        return {
+            ...state,
+            seeWhatIsBeingShared: action.seeWhatIsBeingShared
+        };
+
     }
 
     return state;