PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix feed sizing issues

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-07-21 18:14:21 +02:00
parent dc7f6d8286
commit 3fac4adfc7
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
5 changed files with 53 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
res/css/views/voip/_CallView.scss
View file

@ -69,6 +69,24 @@ limitations under the License.
display: flex;
justify-content: center;
border-radius: 8px;
> .mx_VideoFeed {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&.mx_VideoFeed_voice {
// We don't want to collide with the call controls that have 52px of height
padding-bottom: 52px;
background-color: $inverted-bg-color;
}
&.mx_VideoFeed_video {
background-color: #000;
}
}
}
.mx_CallView_voice {

31
res/css/views/voip/_CallViewSidebar.scss
View file

@ -19,13 +19,40 @@ limitations under the License.
right: 16px;
bottom: 16px;
z-index: 100; // To be above the primary feed
max-width: 20%;
min-width: 160px; // To match .mx_VideoFeed_voice
width: 20%;
min-width: 160px;
display: flex;
flex-direction: column-reverse;
.mx_VideoFeed {
border-radius: 4px;
width: 100%;
margin-bottom: 12px;
&.mx_VideoFeed_voice {
background-color: $inverted-bg-color;
display: flex;
align-items: center;
justify-content: center;
min-width: 160px;
min-height: 90px;
}
&.mx_VideoFeed_video {
background-color: transparent;
}
}
&.mx_CallViewSidebar_pipMode {
top: 16px;
bottom: unset;
min-width: unset;
.mx_VideoFeed_voice {
min-width: 64px;
min-height: 36px;
}
}
}

39
res/css/views/voip/_VideoFeed.scss
View file

@ -14,45 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_VideoFeed_primary {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
&.mx_VideoFeed_voice {
// We don't want to collide with the call controls that have 52px of height
padding-bottom: 52px;
background-color: $inverted-bg-color;
}
&.mx_VideoFeed_video {
background-color: #000;
}
}
.mx_VideoFeed_secondary {
border-radius: 4px;
width: 100%;
margin-bottom: 12px;
&.mx_VideoFeed_voice {
background-color: $inverted-bg-color;
display: flex;
align-items: center;
justify-content: center;
min-width: 160px;
min-height: 90px;
}
&.mx_VideoFeed_video {
background-color: transparent;
}
}
.mx_VideoFeed_mirror {
transform: scale(-1, 1);
}

7
src/components/views/voip/CallView.tsx
View file

@ -590,6 +590,9 @@ export default class CallView extends React.Component<IProps, IState> {
const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
const isScreensharing = this.props.call.isScreensharing();
const sidebarShown = this.state.sidebarShown;
const someoneIsScreensharing = this.props.call.getFeeds().some((feed) => {
return feed.purpose === SDPStreamMetadataPurpose.Screenshare;
});
let contentView: React.ReactNode;
let holdTransferContent;
@ -642,7 +645,7 @@ export default class CallView extends React.Component<IProps, IState> {
let sidebar;
if (
(!isOnHold && !transfereeCall) &&
((sidebarShown && this.props.call.type === CallType.Video) || isScreensharing)
((sidebarShown && this.props.call.type === CallType.Video) || someoneIsScreensharing)
) {
sidebar = (
<CallViewSidebar
@ -745,7 +748,7 @@ export default class CallView extends React.Component<IProps, IState> {
});
let presenting;
if (this.props.call.getFeeds().some((feed) => feed.purpose === SDPStreamMetadataPurpose.Screenshare)) {
if (someoneIsScreensharing) {
const presentingClasses = classNames({
mx_CallView_presenting: true,
mx_CallView_presenting_hidden: !this.state.controlsVisible,

4
src/components/views/voip/VideoFeed.tsx
View file

@ -146,8 +146,6 @@ export default class VideoFeed extends React.Component<IProps, IState> {
render() {
const videoClasses = {
mx_VideoFeed: true,
mx_VideoFeed_primary: this.props.primary,
mx_VideoFeed_secondary: !this.props.primary,
mx_VideoFeed_voice: this.state.videoMuted,
mx_VideoFeed_video: !this.state.videoMuted,
mx_VideoFeed_mirror: (
@ -160,7 +158,7 @@ export default class VideoFeed extends React.Component<IProps, IState> {
const member = this.props.feed.getMember();
let avatarSize;
if (this.props.pipMode) avatarSize = 76;
else if (!this.props.primary) avatarSize = 34;
else if (!this.props.primary) avatarSize = 16;
else avatarSize = 160;
return (