scaling video calls

net/web/src/constants/Colors.js

@@ -40,6 +40,8 @@ export const Colors = {
 };
 
 export const LightTheme = {
+  remoteArea: '#080808',
+  localArea: '#888888',
   splashArea: '#8fbea7',
   baseArea: '#8fbea7',
   frameArea: '#e4e4e4',
@@ -77,6 +79,8 @@ export const LightTheme = {
 };
 
 export const DarkTheme = {
+  remoteArea: '#080808',
+  localArea: '#888888',
   splashArea: '#4c4c4c',
   baseArea: '#080808',
   frameArea: '#0a0a0a',

net/web/src/session/Session.jsx

@@ -21,14 +21,18 @@ import { SettingsContext } from 'context/SettingsContext';
 
 import avatar from 'images/avatar.png';
 
+function getDim() {
+  if (window.innerWidth > window.innerHeight) {
+    return window.innerHeight / 2;
+  }
+  return window.innerWidth / 2;
+}
+
 export function Session() {
 
   const { state, actions } = useSession();
   const settings = useContext(SettingsContext);
   const [ringing, setRinging] = useState([]);
-  const [callWidth, setCallWidth] = useState(256);
-  const [callHeight, setCallHeight] = useState(256);
-  const [callModal, setCallModal] = useState({ width: 256, height: 256, offset: 0 });
   const remote = useRef();
   const local = useRef();
 
@@ -61,48 +65,8 @@ export function Session() {
     // eslint-disable-next-line
   }, [state.ringing]);
 
-  useEffect(() => {
-    if (!state.remoteVideo) {
-      setCallModal({ width: 256 + 12, height: 256 + 12, offset: 0 });
-    }
-    else {
-      setCallModal({ width: callWidth + 12, height: callHeight + 12, offset: ((268 - callHeight) / 2) });
-    }
-
-  }, [callWidth, callHeight, state.remoteVideo])
-
   useEffect(() => {
     if (remote.current) {
-      remote.current.onloadedmetadata = (ev) => {
-
-        const { videoWidth, videoHeight } = ev.target || { videoWidth: 256, videoHeight: 256 }
-        if ((window.innerWidth * 8) / 10 < videoWidth) {
-          const scaledWidth = window.innerWidth * 8 / 10;
-          const scaledHeight = videoHeight * (scaledWidth / videoWidth)
-          if ((window.innerHeight * 8) / 10 < scaledHeight) {
-            const height = (window.innerHeight * 8) / 10;
-            setCallHeight(height);
-            setCallWidth(videoWidth * (height / videoHeight));
-          }
-          else {
-            setCallHeight(scaledHeight);
-            setCallWidth(scaledWidth);
-          }
-        }
-        else if ((window.innerHeight * 8) / 10 < videoHeight) {
-          const height = (window.innerHeight * 8) / 10;
-          setCallHeight(height);
-          setCallWidth(videoWidth * (height / videoHeight));
-        }
-        else if (videoHeight < 72 || videoWidth < 72) {
-          setCallHeight(72);
-          setCallWidth(72);
-        }
-        else {
-          setCallHeight(videoHeight);
-          setCallWidth(videoWidth);
-        }
-      };
       remote.current.srcObject = state.remoteStream;
       remote.current.load();
       remote.current.play();
@@ -119,10 +83,6 @@ export function Session() {
     }
   }, [state.localStream]);
 
-  useEffect(() => {
-    console.log("DIM: ", callWidth, callHeight);
-  }, [callWidth, callHeight]);
-
   const closeAccount = () => {
     actions.closeProfile();
     actions.closeAccount();
@@ -347,7 +307,7 @@ export function Session() {
             </div>
           </RingingWrapper>
         </Modal>
-        <Modal centered visible={state.callStatus} footer={null} closable={false} width={callModal.width} height={callModal.height} bodyStyle={{ padding: 6 }}>
+        <Modal centered visible={state.callStatus} footer={null} closable={false} width={getDim() + 12} height={getDim()} bodyStyle={{ padding: 6 }}>
           <CallingWrapper>
             <div className={ state.fullscreen ? 'fullscreen' : 'modal' }>
               <div className="window">
@@ -362,14 +322,18 @@ export function Session() {
                   </div>
                 )}
                 { state.remoteStream && (
-                  <video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: '100%', height: '100%' }}
+                  <video ref={remote} disablepictureinpicture playsInline autoPlay style={{ display: state.remoteVideo ? 'block' : 'none', width: state.fullscreen ? '100%' : getDim(), height: state.fullscreen ? '100%' : getDim() }}
           complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
                 )}
                 { state.localStream && (
                   <div className="calling-local">
-                    <video ref={local} disablepictureinpicture playsInline autoPlay muted style={{ width: '100%', height: '100%', display: 'block' }}
+                    <div className="local-position">
+                      <div className="local-frame">
+                        <video ref={local} disablepictureinpicture playsInline autoPlay muted style={{ maxWidth: '100%', maxHeight: '100%', display: 'block' }}
               complete={() => console.log("VIDEO COMPLETE")} progress={() => console.log("VIDEO PROGRESS")} error={() => console.log("VIDEO ERROR")} waiting={() => console.log("VIDEO WAITING")} />
                       </div>
+                    </div>
+                  </div>
                 )}
                 <div className="calling-options calling-hovered">
                   { state.localVideo && (

net/web/src/session/Session.styled.js

@@ -80,11 +80,11 @@ export const CallingWrapper = styled.div`
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: ${props => props.theme.frameArea};
+    background-color: ${props => props.theme.remoteArea};
   }
 
   .modal {
-    background-color: ${props => props.theme.frameArea};
+    background-color: ${props => props.theme.remoteArea};
   }
 
   .window {
@@ -110,10 +110,27 @@ export const CallingWrapper = styled.div`
     } 
 
     .calling-local {
-      width: 33%;
       bottom: 16px;
       left: 16px;
       position: absolute;
+      border-radius: 4px;
+      width: 33%;
+      height: 33%;
+
+      .local-position {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+
+        .local-frame {
+          padding: 4px;
+          border-radius: 2px;
+          background-color: ${props => props.theme.localArea};
+        }
+      }
     }
 
     .calling-logo {
@@ -128,7 +145,7 @@ export const CallingWrapper = styled.div`
     .calling-options {
       display: none;
       position: absolute;
-      bottom: 16px;
+      top: 16px;
       flex-direction: row;
     }