From 7bf7f23a5e4653cd93eeacad331992844e86a4d9 Mon Sep 17 00:00:00 2001
From: IceDBorn <github.envenomed@dralias.com>
Date: Fri, 24 Mar 2023 07:05:22 +0200
Subject: [PATCH] WIP call style

---
 public/res/ic/filled/hangup_call.svg  |   1 +
 src/app/organisms/room/JitsiRoom.jsx  | 132 ++++++++++++++------------
 src/app/organisms/room/JitsiRoom.scss |  34 +++++++
 src/app/templates/client/Client.jsx   |   2 +-
 src/app/templates/client/Client.scss  |  22 +----
 5 files changed, 107 insertions(+), 84 deletions(-)
 create mode 100644 public/res/ic/filled/hangup_call.svg
 create mode 100644 src/app/organisms/room/JitsiRoom.scss

diff --git a/public/res/ic/filled/hangup_call.svg b/public/res/ic/filled/hangup_call.svg
new file mode 100644
index 00000000..d81eaf55
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/app/organisms/room/JitsiRoom.jsx b/src/app/organisms/room/JitsiRoom.jsx
index 3a10bbb4..03ed32d8 100644
--- a/src/app/organisms/room/JitsiRoom.jsx
+++ b/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
-          onClick={() => {
-            setJitsiCallId(null);
-            setRoomName('');
-            setRoomInfo({
-              roomTimeline: null,
-              eventId: null,
-            });
-          }}
-        >
-          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 },
+        <div className="call_iframe">
+          <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: {
-              video: {
-                height: {
-                  ideal: 1080,
-                  max: 2160,
-                  min: 720,
+              constraints: {
+                video: {
+                  height: {
+                    ideal: 1080,
+                    max: 2160,
+                    min: 720,
+                  },
                 },
               },
-            },
-            maxBitratesVideo: {
-              H264: {
-                low: 200000,
-                standard: 500000,
-                high: 1500000,
+              maxBitratesVideo: {
+                H264: {
+                  low: 200000,
+                  standard: 500000,
+                  high: 1500000,
+                },
+                VP8: {
+                  low: 200000,
+                  standard: 500000,
+                  high: 1500000,
+                },
+                VP9: {
+                  low: 100000,
+                  standard: 300000,
+                  high: 1200000,
+                },
               },
-              VP8: {
-                low: 200000,
-                standard: 500000,
-                high: 1500000,
+              desktopSharingFrameRate: {
+                min: 30,
+                max: 60,
               },
-              VP9: {
-                low: 100000,
-                standard: 300000,
-                high: 1200000,
-              },
-            },
-            desktopSharingFrameRate: {
-              min: 30,
-              max: 60,
-            },
-            resolution: 1080,
-          }}
-          interfaceConfigOverwrite={{
-            DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
-          }}
-          userInfo={{
-            displayName: getUsername(mx.getUserId()),
-          }}
-          onApiReady={(externalApi) => {
-            // here you can attach custom event listeners to the Jitsi Meet External API
-            // you can also store it locally to execute commands
-          }}
-        />
+              resolution: 1080,
+            }}
+            interfaceConfigOverwrite={{
+              DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
+            }}
+            userInfo={{
+              displayName: getUsername(mx.getUserId()),
+            }}
+            onApiReady={(externalApi) => {
+              // here you can attach custom event listeners to the Jitsi Meet External API
+              // you can also store it locally to execute commands
+            }}
+            getIFrameRef={(iframeRef) => {
+              iframeRef.style.height = '96%';
+            }}
+          />
+        </div>
+        <div className="call_buttons">
+          <Button
+            onClick={() => {
+              setJitsiCallId(null);
+              setRoomName('');
+              setRoomInfo({
+                roomTimeline: null,
+                eventId: null,
+              });
+            }}
+            className="close_button"
+          >
+            <img src={SearchIC} alt="hangup" />
+          </Button>
+        </div>
       </div>
     );
   }
diff --git a/src/app/organisms/room/JitsiRoom.scss b/src/app/organisms/room/JitsiRoom.scss
new file mode 100644
index 00000000..cfadd6e1
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/templates/client/Client.jsx b/src/app/templates/client/Client.jsx
index 72d1988e..bfa8ad1e 100644
--- a/src/app/templates/client/Client.jsx
+++ b/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 (
diff --git a/src/app/templates/client/Client.scss b/src/app/templates/client/Client.scss
index e9c6ff49..be6afdb1 100644
--- a/src/app/templates/client/Client.scss
+++ b/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;