diff --git a/src/app/organisms/room/JitsiRoom.jsx b/src/app/organisms/room/JitsiRoom.jsx index 3b54b1ff..46e5d8b7 100644 --- a/src/app/organisms/room/JitsiRoom.jsx +++ b/src/app/organisms/room/JitsiRoom.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import './JitsiRoom.scss'; import { JitsiMeeting } from '@jitsi/react-sdk'; import Draggable from 'react-draggable'; +import useWindowDimensions from './windowDimensions'; import SearchIC from '../../../../public/res/ic/filled/hangup_call.svg'; import { openNavigation } from '../../../client/action/navigation'; @@ -24,6 +25,8 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId }) const [spaceName, setSpaceName] = useState(null); const [counter, setCounter] = useState(0); + const { windowDimensions, key } = useWindowDimensions(); + const mx = initMatrix.matrixClient; const sn = mx.getRoom(useSelectedSpace())?.name; @@ -73,10 +76,19 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId }) if (jitsiCallId) { return ( - +
-
+
{roomName} ({spaceName || sn})
diff --git a/src/app/organisms/room/windowDimensions.jsx b/src/app/organisms/room/windowDimensions.jsx new file mode 100644 index 00000000..c4484f8d --- /dev/null +++ b/src/app/organisms/room/windowDimensions.jsx @@ -0,0 +1,26 @@ +import { useState, useEffect } from 'react'; + +function getWindowDimensions() { + const { innerWidth: width, innerHeight: height } = window; + return { + width, + height, + }; +} + +export default function useWindowDimensions() { + const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()); + const [key, setKey] = useState(0); + + useEffect(() => { + function handleResize() { + setWindowDimensions(getWindowDimensions()); + setKey(key + 1); + } + + window.addEventListener('resize', handleResize); + return () => window.removeEventListener('resize', handleResize); + }, []); + + return {windowDimensions, key}; +} diff --git a/src/app/templates/client/Client.scss b/src/app/templates/client/Client.scss index be6afdb1..d741f108 100644 --- a/src/app/templates/client/Client.scss +++ b/src/app/templates/client/Client.scss @@ -20,13 +20,12 @@ } .jitsi_pip { - display: grid; position: absolute; - top: 20rem; - left: 55rem; z-index: 2000; - height: 25rem; - width: 25rem; + top: 50%; + left: 50%; + margin-left: -5rem; + margin-top: -10rem; } @include screen.smallerThan(mobileBreakpoint) {