Support video rotation for Firefox p2p calls

evgeny-nadymov · evgeny-nadymov · commit afd90f19b264 · 2021-04-13T18:35:47.000+03:00
diff --git a/src/Calls/P2P/P2PSdpBuilder.js b/src/Calls/P2P/P2PSdpBuilder.js
@@ -237,7 +237,7 @@ export function p2pParseSdp(sdp) {
     return info;
 }
 
-function isFirefox() {
+export function isFirefox() {
     return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
 }
 
diff --git a/src/Components/Calls/CallPanel.js b/src/Components/Calls/CallPanel.js
@@ -23,6 +23,7 @@ import MenuIcon from '../../Assets/Icons/More';
 import MicIcon from '../../Assets/Icons/Mic';
 import MicOffIcon from '../../Assets/Icons/MicOff';
 import { closeCallPanel } from '../../Actions/Call';
+import { isFirefox } from '../../Calls/P2P/P2PSdpBuilder';
 import { p2pGetCallStatus, p2pIsCallReady } from '../../Calls/Utils';
 import { getUserFullName } from '../../Utils/User';
 import { stopPropagation } from '../../Utils/Message';
@@ -31,6 +32,8 @@ import LStore from '../../Stores/LocalizationStore';
 import UserStore from '../../Stores/UserStore';
 import './CallPanel.css';
 
+const SUPPORTS_ROTATION = true;
+
 class CallPanel extends React.Component {
     constructor(props) {
         super(props);
@@ -255,6 +258,13 @@ class CallPanel extends React.Component {
 
         let screenSharing = currentCall && Boolean(currentCall.screenStream);
 
+        let outputVideoStyle = null;
+        if (SUPPORTS_ROTATION && outputMediaState && isFirefox()) {
+            outputVideoStyle = {
+                transform: `rotate(${outputMediaState.videoRotation}deg)`
+            };
+        }
+
         return (
             <div className={classNames('group-call-panel', { 'full-screen': fullScreen })} ref={this.callPanelRef}>
                 <div className='group-call-panel-header'>
@@ -330,7 +340,7 @@ class CallPanel extends React.Component {
                     </Popover>
                 </div>
                 <div className='call-panel-content scrollbars-hidden' onDoubleClick={this.handleFullScreen}>
-                    <video id='call-output-video' className={outputMediaState && outputMediaState.videoState === 'active' ? 'call-video-active' : 'call-video-inactive'} autoPlay={true} muted={false}/>
+                    <video id='call-output-video' style={outputVideoStyle} className={outputMediaState && outputMediaState.videoState === 'active' ? 'call-video-active' : 'call-video-inactive'} autoPlay={true} muted={false}/>
                     <video id='call-input-video' className={inputMediaState && inputMediaState.videoState === 'active' ? 'call-video-active' : 'call-video-inactive'} autoPlay={true} muted={true}/>
                 </div>
                 { outputMediaState && outputMediaState.muted && (

Original file line number	Diff line number	Diff line change
`@@ -237,7 +237,7 @@ export function p2pParseSdp(sdp) {`
`237`	`237`	`return info;`
`238`	`238`	`}`
`239`	`239`
`240`		`-function isFirefox() {`
	`240`	`+export function isFirefox() {`
`241`	`241`	`return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;`
`242`	`242`	`}`
`243`	`243`