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 @@ + \ 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 }) { - - - + { - // 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%'; + }} + /> + +
+ +
); } 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;