Set pip boundaries upon window size changes
This commit is contained in:
parent
02e3553130
commit
226de61be3
3 changed files with 44 additions and 7 deletions
|
@ -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 (
|
||||
<Draggable disabled={isJitsiRoom}>
|
||||
<Draggable
|
||||
disabled={isJitsiRoom}
|
||||
bounds={{
|
||||
left: -windowDimensions.width * 0.5 + 90,
|
||||
top: -windowDimensions.height * 0.5 + 170,
|
||||
right: windowDimensions.width * 0.5 - 250,
|
||||
bottom: windowDimensions.height * 0.5 - 40,
|
||||
}}
|
||||
key={key}
|
||||
>
|
||||
<div className={isJitsiRoom ? 'call reset_pip' : 'pip'}>
|
||||
<div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'}>
|
||||
<div className='call_room_title'>
|
||||
<div className="call_room_title">
|
||||
{roomName} ({spaceName || sn})
|
||||
</div>
|
||||
<div className="call_buttons">
|
||||
|
|
26
src/app/organisms/room/windowDimensions.jsx
Normal file
26
src/app/organisms/room/windowDimensions.jsx
Normal file
|
@ -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};
|
||||
}
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue