WIP call style

public/res/ic/filled/hangup_call.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M480 416q126 0 241 50.5T918 613q8 10 8.5 22t-8.5 21l-94 94q-8 8-23 9t-24-6l-114-85q-6-5-9-11t-3-13V505q-42-16-85.5-22.5T480 476q-42 0-85.5 6.5T309 505v139q0 7-3 13t-9 11l-114 85q-12 9-24.5 8T136 750l-94-94q-9-9-8.5-21t8.5-22q82-96 197-146.5T480 416Z"/></svg>

src/app/organisms/room/JitsiRoom.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
-import './Room.scss';
+import './JitsiRoom.scss';
 import { JitsiMeeting } from '@jitsi/react-sdk';
+import SearchIC from '../../../../public/res/ic/filled/hangup_call.svg';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -69,72 +70,79 @@ function JitsiRoom({ setIsJitsiRoom }) {
         <div className="call_header" id="header" ref={openerRef}>
           {roomName}
         </div>
-        <Button
+        <div className="call_iframe">
-          onClick={() => {
+          <JitsiMeeting
-            setJitsiCallId(null);
+            key={counter}
-            setRoomName('');
+            domain="meet.calyx.net"
-            setRoomInfo({
+            roomName={`${roomName} ${roomTimeline.roomId.replace(':matrix.org', '')}`}
-              roomTimeline: null,
+            configOverwrite={{
-              eventId: null,
+              disableReactions: true,
-            });
+              disablePolls: true,
-          }}
+              prejoinConfig: { enabled: false },
-        >
+              liveStreaming: { enabled: false },
-          X
-        </Button>
-        <Button>Return</Button>
-        <JitsiMeeting
-          key={counter}
-          domain="meet.calyx.net"
-          roomName={`${roomName} ${roomTimeline.roomId.replace(':matrix.org', '')}`}
-          configOverwrite={{
-            disableReactions: true,
-            disablePolls: true,
-            prejoinConfig: { enabled: false },
-            liveStreaming: { enabled: false },
 
-            constraints: {
+              constraints: {
-              video: {
+                video: {
-                height: {
+                  height: {
-                  ideal: 1080,
+                    ideal: 1080,
-                  max: 2160,
+                    max: 2160,
-                  min: 720,
+                    min: 720,
+                  },
                 },
               },
-            },
+              maxBitratesVideo: {
-            maxBitratesVideo: {
+                H264: {
-              H264: {
+                  low: 200000,
-                low: 200000,
+                  standard: 500000,
-                standard: 500000,
+                  high: 1500000,
-                high: 1500000,
+                },
+                VP8: {
+                  low: 200000,
+                  standard: 500000,
+                  high: 1500000,
+                },
+                VP9: {
+                  low: 100000,
+                  standard: 300000,
+                  high: 1200000,
+                },
               },
-              VP8: {
+              desktopSharingFrameRate: {
-                low: 200000,
+                min: 30,
-                standard: 500000,
+                max: 60,
-                high: 1500000,
               },
-              VP9: {
+              resolution: 1080,
-                low: 100000,
+            }}
-                standard: 300000,
+            interfaceConfigOverwrite={{
-                high: 1200000,
+              DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
-              },
+            }}
-            },
+            userInfo={{
-            desktopSharingFrameRate: {
+              displayName: getUsername(mx.getUserId()),
-              min: 30,
+            }}
-              max: 60,
+            onApiReady={(externalApi) => {
-            },
+              // here you can attach custom event listeners to the Jitsi Meet External API
-            resolution: 1080,
+              // you can also store it locally to execute commands
-          }}
+            }}
-          interfaceConfigOverwrite={{
+            getIFrameRef={(iframeRef) => {
-            DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
+              iframeRef.style.height = '96%';
-          }}
+            }}
-          userInfo={{
+          />
-            displayName: getUsername(mx.getUserId()),
+        </div>
-          }}
+        <div className="call_buttons">
-          onApiReady={(externalApi) => {
+          <Button
-            // here you can attach custom event listeners to the Jitsi Meet External API
+            onClick={() => {
-            // you can also store it locally to execute commands
+              setJitsiCallId(null);
-          }}
+              setRoomName('');
-        />
+              setRoomInfo({
+                roomTimeline: null,
+                eventId: null,
+              });
+            }}
+            className="close_button"
+          >
+            <img src={SearchIC} alt="hangup" />
+          </Button>
+        </div>
       </div>
     );
   }

src/app/organisms/room/JitsiRoom.scss

@@ -0,0 +1,34 @@
+@use '../../partials/flex';
+@use '../../partials/screen';
+
+.call_iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.call{
+  user-select: none;
+  border: 1px solid var(--bg-surface-border);
+  border-radius: var(--bo-radius);
+  color: var(--tc-surface-normal-low);
+  background-color: var(--bg-surface);
+}
+
+.call_header{
+  z-index: 2001;
+  cursor: move;
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.call_buttons {
+  position: absolute;
+  top: 0.15rem;
+  right: 0.1rem;
+}
+
+.close_button {
+  filter: invert(26%) sepia(90%) saturate(1997%) hue-rotate(345deg) brightness(113%) contrast(91%);
+  height: 3rem;
+}

src/app/templates/client/Client.jsx

@@ -162,7 +162,7 @@ function Client() {
     initMatrix.roomsInput.emit(cons.events.roomsInput.ATTACHMENT_SET, file);
   }
 
-  const JITSI_ROOM_CLASS = 'jitsi_room__wrapper'
+  const JITSI_ROOM_CLASS = 'jitsi_pip'
   const ROOM_CLASS = `room__wrapper ${classNameHidden}`
 
   return (

src/app/templates/client/Client.scss

@@ -19,7 +19,7 @@
   @extend .cp-fx__item-one;
 }
 
-.jitsi_room__wrapper {
+.jitsi_pip {
   display: grid;
   position: absolute;
   top: 20rem;
@@ -29,32 +29,12 @@
   width: 25rem;
 }
 
-.call_header{
-  z-index: 2001;
-  cursor: move;
-  text-align: center;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.call{
-  user-select: none;
-  border: 1px solid var(--bg-surface-border);
-  border-radius: var(--bo-radius);
-  color: var(--tc-surface-normal-low);
-  background-color: var(--bg-surface);
-}
-
 @include screen.smallerThan(mobileBreakpoint) {
   .client__item-hidden {
     display: none;
   }
 }
 
-.hidden {
-  display: none;
-}
-
 .loading-display {
   position: absolute;
   top: 0;