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 './JitsiRoom.scss';
|
||||||
import { JitsiMeeting } from '@jitsi/react-sdk';
|
import { JitsiMeeting } from '@jitsi/react-sdk';
|
||||||
import Draggable from 'react-draggable';
|
import Draggable from 'react-draggable';
|
||||||
|
import useWindowDimensions from './windowDimensions';
|
||||||
import SearchIC from '../../../../public/res/ic/filled/hangup_call.svg';
|
import SearchIC from '../../../../public/res/ic/filled/hangup_call.svg';
|
||||||
import { openNavigation } from '../../../client/action/navigation';
|
import { openNavigation } from '../../../client/action/navigation';
|
||||||
|
|
||||||
|
@ -24,6 +25,8 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId })
|
||||||
const [spaceName, setSpaceName] = useState(null);
|
const [spaceName, setSpaceName] = useState(null);
|
||||||
const [counter, setCounter] = useState(0);
|
const [counter, setCounter] = useState(0);
|
||||||
|
|
||||||
|
const { windowDimensions, key } = useWindowDimensions();
|
||||||
|
|
||||||
const mx = initMatrix.matrixClient;
|
const mx = initMatrix.matrixClient;
|
||||||
const sn = mx.getRoom(useSelectedSpace())?.name;
|
const sn = mx.getRoom(useSelectedSpace())?.name;
|
||||||
|
|
||||||
|
@ -73,10 +76,19 @@ function JitsiRoom({ isJitsiRoom, setIsJitsiRoom, jitsiCallId, setJitsiCallId })
|
||||||
|
|
||||||
if (jitsiCallId) {
|
if (jitsiCallId) {
|
||||||
return (
|
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 reset_pip' : 'pip'}>
|
||||||
<div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'}>
|
<div className={isJitsiRoom ? 'call_header' : 'call_header pip_header'}>
|
||||||
<div className='call_room_title'>
|
<div className="call_room_title">
|
||||||
{roomName} ({spaceName || sn})
|
{roomName} ({spaceName || sn})
|
||||||
</div>
|
</div>
|
||||||
<div className="call_buttons">
|
<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 {
|
.jitsi_pip {
|
||||||
display: grid;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 20rem;
|
|
||||||
left: 55rem;
|
|
||||||
z-index: 2000;
|
z-index: 2000;
|
||||||
height: 25rem;
|
top: 50%;
|
||||||
width: 25rem;
|
left: 50%;
|
||||||
|
margin-left: -5rem;
|
||||||
|
margin-top: -10rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include screen.smallerThan(mobileBreakpoint) {
|
@include screen.smallerThan(mobileBreakpoint) {
|
||||||
|
|
Loading…
Reference in a new issue