haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

* feat(large-video/web) new ScreenSharePlaceholder component
This commit is contained in:
apetrus20 2022-08-05 12:11:09 +03:00 committed by GitHub
parent bdff92397b
commit 52ce9a86ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 209 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lang/main.json
View File

@ -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",

29
modules/UI/videolayout/VideoContainer.js
View File

@ -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();
const flipX = stream.isLocal() && this.localFlipX && !this.isScreenSharing();
this.$video.css({
transform: flipX ? 'scaleX(-1)' : 'none'
});
this._updateBackground();
this.$video.css({
transform: flipX ? 'scaleX(-1)' : 'none'
});
this._updateBackground();
}
}
/**

8
modules/UI/videolayout/VideoLayout.js
View File

@ -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);
}
},

11
react/features/large-video/actionTypes.ts
View File

@ -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';

18
react/features/large-video/actions.web.js
View File

@ -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
};
}

51
react/features/large-video/components/LargeVideo.web.js
View File

@ -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),

99
react/features/large-video/components/ScreenSharePlaceholder.web.tsx Normal file
View File

@ -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);

10
react/features/large-video/reducer.js
View File

@ -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;