ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2026-05-19 19:07:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
8 changed files with 209 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;