diff --git a/res/css/_components.scss b/res/css/_components.scss index 215b6605a5..31bdff90bf 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -250,6 +250,7 @@ @import "./views/voice_messages/_Waveform.scss"; @import "./views/voip/_CallContainer.scss"; @import "./views/voip/_CallView.scss"; +@import "./views/voip/_CallViewForRoom.scss"; @import "./views/voip/_DialPad.scss"; @import "./views/voip/_DialPadContextMenu.scss"; @import "./views/voip/_DialPadModal.scss"; diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss index e032e4582d..d13272c8c0 100644 --- a/res/css/views/voip/_CallView.scss +++ b/res/css/views/voip/_CallView.scss @@ -27,9 +27,12 @@ limitations under the License. .mx_CallView_large { padding-bottom: 10px; margin: 5px 5px 5px 18px; + display: flex; + flex-direction: column; + flex: 1; .mx_CallView_voice { - height: 360px; + flex: 1; } } @@ -104,6 +107,7 @@ limitations under the License. .mx_CallView_video { width: 100%; + height: 100%; position: relative; z-index: 30; border-radius: 8px; @@ -177,6 +181,7 @@ limitations under the License. flex-direction: row; align-items: center; justify-content: left; + flex-shrink: 0; } .mx_CallView_header_callType { diff --git a/res/css/views/voip/_CallViewForRoom.scss b/res/css/views/voip/_CallViewForRoom.scss new file mode 100644 index 0000000000..769e00338e --- /dev/null +++ b/res/css/views/voip/_CallViewForRoom.scss @@ -0,0 +1,46 @@ +/* +Copyright 2021 Šimon Brandner + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_CallViewForRoom { + overflow: hidden; + + .mx_CallViewForRoom_ResizeWrapper { + display: flex; + margin-bottom: 8px; + + &:hover .mx_CallViewForRoom_ResizeHandle { + // Need to use important to override element style attributes + // set by re-resizable + width: 100% !important; + + display: flex; + justify-content: center; + + &::after { + content: ''; + margin-top: 3px; + + border-radius: 4px; + + height: 4px; + width: 100%; + max-width: 64px; + + background-color: $primary-fg-color; + } + } + } +} diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss index 3e473a80b2..8ead8bba3e 100644 --- a/res/css/views/voip/_VideoFeed.scss +++ b/res/css/views/voip/_VideoFeed.scss @@ -16,7 +16,7 @@ limitations under the License. .mx_VideoFeed_remote { width: 100%; - max-height: 100%; + height: 100%; background-color: #000; z-index: 50; } diff --git a/src/components/views/rooms/AuxPanel.tsx b/src/components/views/rooms/AuxPanel.tsx index 3d431f7c67..6d2ae39059 100644 --- a/src/components/views/rooms/AuxPanel.tsx +++ b/src/components/views/rooms/AuxPanel.tsx @@ -149,8 +149,8 @@ export default class AuxPanel extends React.Component { const callView = ( ); diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx index 0a5d028069..8a6ed75fee 100644 --- a/src/components/views/voip/CallView.tsx +++ b/src/components/views/voip/CallView.tsx @@ -40,9 +40,6 @@ interface IProps { // Another ongoing call to display information about secondaryCall?: MatrixCall, - // maxHeight style attribute for the video panel - maxVideoHeight?: number; - // a callback which is called when the content in the callview changes // in a way that is likely to cause a resize. onResize?: any; @@ -96,9 +93,6 @@ function exitFullscreen() { const CONTROLS_HIDE_DELAY = 1000; // Height of the header duplicated from CSS because we need to subtract it from our max // height to get the max height of the video -const HEADER_HEIGHT = 44; -const BOTTOM_PADDING = 10; -const BOTTOM_MARGIN_TOP_BOTTOM = 10; // top margin plus bottom margin const CONTEXT_MENU_VPADDING = 8; // How far the context menu sits above the button (px) @replaceableComponent("views.voip.CallView") @@ -548,20 +542,9 @@ export default class CallView extends React.Component { localVideoFeed = ; } - // if we're fullscreen, we don't want to set a maxHeight on the video element. - const maxVideoHeight = getFullScreenElement() || !this.props.maxVideoHeight ? null : ( - this.props.maxVideoHeight - (HEADER_HEIGHT + BOTTOM_PADDING + BOTTOM_MARGIN_TOP_BOTTOM) - ); - contentView =
+ contentView =
{onHoldBackground} - + {localVideoFeed} {holdTransferContent} {callControls} diff --git a/src/components/views/voip/CallViewForRoom.tsx b/src/components/views/voip/CallViewForRoom.tsx index 97960d1e0b..878b6af20f 100644 --- a/src/components/views/voip/CallViewForRoom.tsx +++ b/src/components/views/voip/CallViewForRoom.tsx @@ -19,6 +19,8 @@ import React from 'react'; import CallHandler from '../../../CallHandler'; import CallView from './CallView'; import dis from '../../../dispatcher/dispatcher'; +import {Resizable} from "re-resizable"; +import ResizeNotifier from "../../../utils/ResizeNotifier"; import {replaceableComponent} from "../../../utils/replaceableComponent"; interface IProps { @@ -28,9 +30,7 @@ interface IProps { // maxHeight style attribute for the video panel maxVideoHeight?: number; - // a callback which is called when the content in the callview changes - // in a way that is likely to cause a resize. - onResize?: any; + resizeNotifier: ResizeNotifier, } interface IState { @@ -79,11 +79,50 @@ export default class CallViewForRoom extends React.Component { return call; } + private onResizeStart = () => { + this.props.resizeNotifier.startResizing(); + }; + + private onResize = () => { + this.props.resizeNotifier.notifyTimelineHeightChanged(); + }; + + private onResizeStop = () => { + this.props.resizeNotifier.stopResizing(); + }; + public render() { if (!this.state.call) return null; + // We subtract 8 as it the margin-bottom of the mx_CallViewForRoom_ResizeWrapper + const maxHeight = this.props.maxVideoHeight - 8; - return ; + return ( +
+ + + +
+ ); } } diff --git a/src/components/views/voip/VideoFeed.tsx b/src/components/views/voip/VideoFeed.tsx index 23dbe4d46b..2981fb6c04 100644 --- a/src/components/views/voip/VideoFeed.tsx +++ b/src/components/views/voip/VideoFeed.tsx @@ -30,9 +30,6 @@ interface IProps { type: VideoFeedType, - // maxHeight style attribute for the video element - maxHeight?: number, - // a callback which is called when the video element is resized // due to a change in video metadata onResize?: (e: Event) => void, @@ -82,9 +79,6 @@ export default class VideoFeed extends React.Component { ), }; - let videoStyle = {}; - if (this.props.maxHeight) videoStyle = { maxHeight: this.props.maxHeight }; - - return