Briq
/
multiparty-meeting
7
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix styling of peer screensharing if sharing is muted.

master
Håvar Aambø Fosstveit 2020-03-20 12:58:15 +01:00
parent 368b0d7a92
commit beab510f46
1 changed files with 97 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
app/src/components/Containers/Peer.js
View File

@ -373,127 +373,124 @@ const Peer = (props) =>
}} }}
style={rootStyle} style={rootStyle}
> >
{ !screenVisible && <div className={classnames(classes.viewContainer)}>
<div className={classes.videoInfo}> { !screenVisible &&
<p> <div className={classes.videoInfo}>
<FormattedMessage <p>
id='room.videoPaused' <FormattedMessage
defaultMessage='This video is paused' id='room.videoPaused'
/> defaultMessage='This video is paused'
</p> />
</div> </p>
} </div>
}
<div
className={classnames(classes.controls, hover && 'hover')}
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
onTouchStart={() =>
{
if (touchTimeout)
clearTimeout(touchTimeout);
setHover(true);
}}
onTouchEnd={() =>
{
{ screenVisible && if (touchTimeout)
<div className={classnames(classes.viewContainer)}> clearTimeout(touchTimeout);
<div
className={classnames(classes.controls, hover && 'hover')} touchTimeout = setTimeout(() =>
onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)}
onTouchStart={() =>
{ {
if (touchTimeout) setHover(false);
clearTimeout(touchTimeout); }, 2000);
}}
setHover(true); >
}} { !smallScreen &&
onTouchEnd={() =>
{
if (touchTimeout)
clearTimeout(touchTimeout);
touchTimeout = setTimeout(() =>
{
setHover(false);
}, 2000);
}}
>
{ !smallScreen &&
<Tooltip
title={intl.formatMessage({
id : 'label.newWindow',
defaultMessage : 'New window'
})}
placement={smallScreen ? 'top' : 'left'}
>
<div>
<Fab
aria-label={intl.formatMessage({
id : 'label.newWindow',
defaultMessage : 'New window'
})}
className={classes.fab}
disabled={
!screenVisible ||
(windowConsumer === screenConsumer.id)
}
size={smallButtons ? 'small' : 'large'}
onClick={() =>
{
toggleConsumerWindow(screenConsumer);
}}
>
<NewWindowIcon />
</Fab>
</div>
</Tooltip>
}
<Tooltip <Tooltip
title={intl.formatMessage({ title={intl.formatMessage({
id : 'label.fullscreen', id : 'label.newWindow',
defaultMessage : 'Fullscreen' defaultMessage : 'New window'
})} })}
placement={smallScreen ? 'top' : 'left'} placement={smallScreen ? 'top' : 'left'}
> >
<div> <div>
<Fab <Fab
aria-label={intl.formatMessage({ aria-label={intl.formatMessage({
id : 'label.fullscreen', id : 'label.newWindow',
defaultMessage : 'Fullscreen' defaultMessage : 'New window'
})} })}
className={classes.fab} className={classes.fab}
disabled={!screenVisible} disabled={
!screenVisible ||
(windowConsumer === screenConsumer.id)
}
size={smallButtons ? 'small' : 'large'} size={smallButtons ? 'small' : 'large'}
onClick={() => onClick={() =>
{ {
toggleConsumerFullscreen(screenConsumer); toggleConsumerWindow(screenConsumer);
}} }}
> >
<FullScreenIcon /> <NewWindowIcon />
</Fab> </Fab>
</div> </div>
</Tooltip> </Tooltip>
</div> }
<VideoView
advancedMode={advancedMode} <Tooltip
videoContain title={intl.formatMessage({
consumerSpatialLayers={ id : 'label.fullscreen',
screenConsumer ? screenConsumer.spatialLayers : null defaultMessage : 'Fullscreen'
} })}
consumerTemporalLayers={ placement={smallScreen ? 'top' : 'left'}
screenConsumer ? screenConsumer.temporalLayers : null >
} <div>
consumerCurrentSpatialLayer={ <Fab
screenConsumer ? screenConsumer.currentSpatialLayer : null aria-label={intl.formatMessage({
} id : 'label.fullscreen',
consumerCurrentTemporalLayer={ defaultMessage : 'Fullscreen'
screenConsumer ? screenConsumer.currentTemporalLayer : null })}
} className={classes.fab}
consumerPreferredSpatialLayer={ disabled={!screenVisible}
screenConsumer ? screenConsumer.preferredSpatialLayer : null size={smallButtons ? 'small' : 'large'}
} onClick={() =>
consumerPreferredTemporalLayer={ {
screenConsumer ? screenConsumer.preferredTemporalLayer : null toggleConsumerFullscreen(screenConsumer);
} }}
videoMultiLayer={screenConsumer && screenConsumer.type !== 'simple'} >
videoTrack={screenConsumer && screenConsumer.track} <FullScreenIcon />
videoVisible={screenVisible} </Fab>
videoCodec={screenConsumer && screenConsumer.codec} </div>
/> </Tooltip>
</div> </div>
} <VideoView
advancedMode={advancedMode}
videoContain
consumerSpatialLayers={
screenConsumer ? screenConsumer.spatialLayers : null
}
consumerTemporalLayers={
screenConsumer ? screenConsumer.temporalLayers : null
}
consumerCurrentSpatialLayer={
screenConsumer ? screenConsumer.currentSpatialLayer : null
}
consumerCurrentTemporalLayer={
screenConsumer ? screenConsumer.currentTemporalLayer : null
}
consumerPreferredSpatialLayer={
screenConsumer ? screenConsumer.preferredSpatialLayer : null
}
consumerPreferredTemporalLayer={
screenConsumer ? screenConsumer.preferredTemporalLayer : null
}
videoMultiLayer={screenConsumer && screenConsumer.type !== 'simple'}
videoTrack={screenConsumer && screenConsumer.track}
videoVisible={screenVisible}
videoCodec={screenConsumer && screenConsumer.codec}
/>
</div>
</div> </div>
} }
</React.Fragment> </React.Fragment>