403 lines
14 KiB
TypeScript
403 lines
14 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import Resizable from 're-resizable';
|
|
import Draggable, { DraggableEvent } from 'react-draggable';
|
|
import { Session } from 'meteor/session';
|
|
import { withTracker } from 'meteor/react-meteor-data';
|
|
import { useSubscription } from '@apollo/client';
|
|
import { useVideoStreams } from '/imports/ui/components/video-provider/video-provider-graphql/hooks';
|
|
import {
|
|
layoutSelect,
|
|
layoutSelectInput,
|
|
layoutSelectOutput,
|
|
layoutDispatch,
|
|
} from '/imports/ui/components/layout/context';
|
|
import Settings from '/imports/ui/services/settings';
|
|
import { LAYOUT_TYPE, ACTIONS, CAMERADOCK_POSITION } from '/imports/ui/components/layout/enums';
|
|
import { CURRENT_PRESENTATION_PAGE_SUBSCRIPTION } from '/imports/ui/components/whiteboard/queries';
|
|
import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
|
|
import DropAreaContainer from './drop-areas/container';
|
|
import VideoProviderContainer from '/imports/ui/components/video-provider/video-provider-graphql/container';
|
|
import Storage from '/imports/ui/services/storage/session';
|
|
import Styled from './styles';
|
|
import { Input, Layout, Output } from '/imports/ui/components/layout/layoutTypes';
|
|
import { VideoItem } from '/imports/ui/components/video-provider/video-provider-graphql/types';
|
|
|
|
interface WebcamComponentGraphqlProps {
|
|
cameraDock: Output['cameraDock'];
|
|
swapLayout: boolean;
|
|
focusedId: string;
|
|
layoutContextDispatch: (...args: unknown[]) => void;
|
|
fullscreen: Layout['fullscreen'];
|
|
isPresenter: boolean;
|
|
displayPresentation: boolean;
|
|
cameraOptimalGridSize: Input['cameraDock']['cameraOptimalGridSize'];
|
|
isRTL: boolean;
|
|
isGridEnabled: boolean;
|
|
}
|
|
|
|
const WebcamComponentGraphql: React.FC<WebcamComponentGraphqlProps> = ({
|
|
cameraDock,
|
|
swapLayout,
|
|
focusedId,
|
|
layoutContextDispatch,
|
|
fullscreen,
|
|
isPresenter,
|
|
displayPresentation,
|
|
cameraOptimalGridSize: cameraSize,
|
|
isRTL,
|
|
isGridEnabled,
|
|
}) => {
|
|
const [isResizing, setIsResizing] = useState(false);
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [isFullscreen, setIsFullScreen] = useState(false);
|
|
const [resizeStart, setResizeStart] = useState({ width: 0, height: 0 });
|
|
const [cameraMaxWidth, setCameraMaxWidth] = useState(0);
|
|
const [draggedAtLeastOneTime, setDraggedAtLeastOneTime] = useState(false);
|
|
|
|
const lastSize = Storage.getItem('webcamSize') || { width: 0, height: 0 };
|
|
const { height: lastHeight } = lastSize as { width: number, height: number };
|
|
|
|
const isCameraTopOrBottom = cameraDock.position === CAMERADOCK_POSITION.CONTENT_TOP
|
|
|| cameraDock.position === CAMERADOCK_POSITION.CONTENT_BOTTOM;
|
|
const isCameraLeftOrRight = cameraDock.position === CAMERADOCK_POSITION.CONTENT_LEFT
|
|
|| cameraDock.position === CAMERADOCK_POSITION.CONTENT_RIGHT;
|
|
const isCameraSidebar = cameraDock.position === CAMERADOCK_POSITION.SIDEBAR_CONTENT_BOTTOM;
|
|
|
|
useEffect(() => {
|
|
const handleVisibility = () => {
|
|
if (document.hidden) {
|
|
document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true }));
|
|
}
|
|
};
|
|
|
|
document.addEventListener('visibilitychange', handleVisibility);
|
|
|
|
return () => {
|
|
document.removeEventListener('visibilitychange', handleVisibility);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setIsFullScreen(fullscreen.group === 'webcams');
|
|
}, [fullscreen]);
|
|
|
|
useEffect(() => {
|
|
const newCameraMaxWidth = (isPresenter && cameraDock.presenterMaxWidth)
|
|
? cameraDock.presenterMaxWidth
|
|
: cameraDock.maxWidth;
|
|
setCameraMaxWidth(newCameraMaxWidth);
|
|
|
|
if (isCameraLeftOrRight && cameraDock.width > newCameraMaxWidth) {
|
|
layoutContextDispatch(
|
|
{
|
|
type: ACTIONS.SET_CAMERA_DOCK_SIZE,
|
|
value: {
|
|
width: newCameraMaxWidth,
|
|
height: cameraDock.height,
|
|
browserWidth: window.innerWidth,
|
|
browserHeight: window.innerHeight,
|
|
},
|
|
},
|
|
);
|
|
Storage.setItem('webcamSize', { width: newCameraMaxWidth, height: lastHeight });
|
|
}
|
|
|
|
const cams = document.getElementById('cameraDock');
|
|
cams?.setAttribute('data-position', cameraDock.position);
|
|
}, [cameraDock.position, cameraDock.maxWidth, isPresenter, displayPresentation]);
|
|
|
|
const handleVideoFocus = (id: string) => {
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_FOCUSED_CAMERA_ID,
|
|
value: focusedId !== id ? id : false,
|
|
});
|
|
};
|
|
|
|
const onResizeHandle = (deltaWidth: number, deltaHeight: number) => {
|
|
if (cameraDock.resizableEdge?.top || cameraDock.resizableEdge?.bottom) {
|
|
layoutContextDispatch(
|
|
{
|
|
type: ACTIONS.SET_CAMERA_DOCK_SIZE,
|
|
value: {
|
|
width: cameraDock.width,
|
|
height: resizeStart.height + deltaHeight,
|
|
browserWidth: window.innerWidth,
|
|
browserHeight: window.innerHeight,
|
|
},
|
|
},
|
|
);
|
|
}
|
|
if (cameraDock.resizableEdge?.left || cameraDock.resizableEdge?.right) {
|
|
layoutContextDispatch(
|
|
{
|
|
type: ACTIONS.SET_CAMERA_DOCK_SIZE,
|
|
value: {
|
|
width: resizeStart.width + deltaWidth,
|
|
height: cameraDock.height,
|
|
browserWidth: window.innerWidth,
|
|
browserHeight: window.innerHeight,
|
|
},
|
|
},
|
|
);
|
|
}
|
|
};
|
|
|
|
const handleWebcamDragStart = () => {
|
|
setIsDragging(true);
|
|
document.body.style.overflow = 'hidden';
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_CAMERA_DOCK_IS_DRAGGING,
|
|
value: true,
|
|
});
|
|
};
|
|
|
|
const handleWebcamDragStop = (e: DraggableEvent) => {
|
|
setIsDragging(false);
|
|
setDraggedAtLeastOneTime(false);
|
|
document.body.style.overflow = 'auto';
|
|
const dropAreaId = (e.target as HTMLDivElement).id;
|
|
|
|
if (Object.values(CAMERADOCK_POSITION).includes(dropAreaId) && draggedAtLeastOneTime) {
|
|
const layout = document.getElementById('layout');
|
|
layout?.setAttribute('data-cam-position', dropAreaId);
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_CAMERA_DOCK_POSITION,
|
|
value: dropAreaId,
|
|
});
|
|
}
|
|
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_CAMERA_DOCK_IS_DRAGGING,
|
|
value: false,
|
|
});
|
|
};
|
|
|
|
const draggableOffset = {
|
|
left: isDragging && (isCameraTopOrBottom || isCameraSidebar)
|
|
? ((cameraDock.width - (cameraSize?.width ?? 0)) / 2)
|
|
: 0,
|
|
top: isDragging && isCameraLeftOrRight
|
|
? ((cameraDock.height - (cameraSize?.height ?? 0)) / 2)
|
|
: 0,
|
|
};
|
|
|
|
if (isRTL) {
|
|
draggableOffset.left *= -1;
|
|
}
|
|
|
|
const isIphone = !!(navigator.userAgent.match(/iPhone/i));
|
|
const mobileWidth = `${isDragging ? cameraSize?.width : cameraDock.width}pt`;
|
|
const mobileHeight = `${isDragging ? cameraSize?.height : cameraDock.height}pt`;
|
|
const isDesktopWidth = isDragging ? cameraSize?.width : cameraDock.width;
|
|
const isDesktopHeight = isDragging ? cameraSize?.height : cameraDock.height;
|
|
const camOpacity = isDragging ? 0.5 : undefined;
|
|
|
|
return (
|
|
<>
|
|
{isDragging ? <DropAreaContainer /> : null}
|
|
<Styled.ResizableWrapper
|
|
$horizontal={cameraDock.position === CAMERADOCK_POSITION.CONTENT_TOP
|
|
|| cameraDock.position === CAMERADOCK_POSITION.CONTENT_BOTTOM}
|
|
$vertical={cameraDock.position === CAMERADOCK_POSITION.CONTENT_LEFT
|
|
|| cameraDock.position === CAMERADOCK_POSITION.CONTENT_RIGHT}
|
|
>
|
|
<Draggable
|
|
handle="video"
|
|
bounds="html"
|
|
onStart={handleWebcamDragStart}
|
|
onDrag={() => {
|
|
if (!draggedAtLeastOneTime) {
|
|
setDraggedAtLeastOneTime(true);
|
|
}
|
|
}}
|
|
onStop={handleWebcamDragStop}
|
|
onMouseDown={
|
|
cameraDock.isDraggable ? (e) => e.preventDefault() : undefined
|
|
}
|
|
disabled={!cameraDock.isDraggable || isResizing || isFullscreen}
|
|
position={
|
|
{
|
|
x: cameraDock.left - cameraDock.right + draggableOffset.left,
|
|
y: cameraDock.top + draggableOffset.top,
|
|
}
|
|
}
|
|
>
|
|
<Resizable
|
|
minWidth={isDragging ? cameraSize?.width : cameraDock.minWidth}
|
|
minHeight={isDragging ? cameraSize?.height : cameraDock.minHeight}
|
|
maxWidth={isDragging ? cameraSize?.width : cameraMaxWidth}
|
|
maxHeight={isDragging ? cameraSize?.height : cameraDock.maxHeight}
|
|
size={{
|
|
width: isDragging ? cameraSize?.width : cameraDock.width,
|
|
height: isDragging ? cameraSize?.height : cameraDock.height,
|
|
}}
|
|
onResizeStart={() => {
|
|
setIsResizing(true);
|
|
setResizeStart({ width: cameraDock.width, height: cameraDock.height });
|
|
onResizeHandle(cameraDock.width, cameraDock.height);
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_CAMERA_DOCK_IS_RESIZING,
|
|
value: true,
|
|
});
|
|
}}
|
|
onResize={(_, __, ___, d) => {
|
|
onResizeHandle(d.width, d.height);
|
|
}}
|
|
onResizeStop={() => {
|
|
setResizeStart({ width: 0, height: 0 });
|
|
setTimeout(() => setIsResizing(false), 500);
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_CAMERA_DOCK_IS_RESIZING,
|
|
value: false,
|
|
});
|
|
}}
|
|
enable={{
|
|
top: !isFullscreen && !isDragging && !swapLayout && cameraDock?.resizableEdge?.top,
|
|
bottom: !isFullscreen && !isDragging && !swapLayout
|
|
&& cameraDock?.resizableEdge?.bottom,
|
|
left: !isFullscreen && !isDragging && !swapLayout && cameraDock?.resizableEdge?.left,
|
|
right: !isFullscreen && !isDragging && !swapLayout && cameraDock?.resizableEdge?.right,
|
|
topLeft: false,
|
|
topRight: false,
|
|
bottomLeft: false,
|
|
bottomRight: false,
|
|
}}
|
|
style={{
|
|
position: 'absolute',
|
|
zIndex: isCameraSidebar && !isDragging ? 0 : cameraDock?.zIndex,
|
|
}}
|
|
>
|
|
<Styled.Draggable
|
|
$isDraggable={!!cameraDock.isDraggable && !isFullscreen && !isDragging}
|
|
$isDragging={isDragging}
|
|
id="cameraDock"
|
|
role="region"
|
|
draggable={cameraDock.isDraggable && !isFullscreen ? 'true' : undefined}
|
|
style={{
|
|
width: isIphone ? mobileWidth : isDesktopWidth,
|
|
height: isIphone ? mobileHeight : isDesktopHeight,
|
|
opacity: camOpacity,
|
|
background: 'none',
|
|
}}
|
|
>
|
|
<VideoProviderContainer
|
|
{...{
|
|
swapLayout,
|
|
cameraDock,
|
|
focusedId,
|
|
handleVideoFocus,
|
|
isGridEnabled,
|
|
}}
|
|
/>
|
|
</Styled.Draggable>
|
|
</Resizable>
|
|
</Draggable>
|
|
</Styled.ResizableWrapper>
|
|
</>
|
|
);
|
|
};
|
|
|
|
interface WebcamContainerGraphqlProps {
|
|
audioModalIsOpen: boolean;
|
|
isLayoutSwapped: boolean;
|
|
layoutType: string;
|
|
paginationEnabled: boolean;
|
|
viewParticipantsWebcams: boolean;
|
|
}
|
|
|
|
const WebcamContainerGraphql: React.FC<WebcamContainerGraphqlProps> = ({
|
|
audioModalIsOpen,
|
|
isLayoutSwapped,
|
|
layoutType,
|
|
paginationEnabled,
|
|
viewParticipantsWebcams,
|
|
}) => {
|
|
const fullscreen = layoutSelect((i: Layout) => i.fullscreen);
|
|
const isRTL = layoutSelect((i: Layout) => i.isRTL);
|
|
const cameraDockInput = layoutSelectInput((i: Input) => i.cameraDock);
|
|
const presentation = layoutSelectOutput((i: Output) => i.presentation);
|
|
const cameraDock = layoutSelectOutput((i: Output) => i.cameraDock);
|
|
const layoutContextDispatch = layoutDispatch();
|
|
const { data: presentationPageData } = useSubscription(CURRENT_PRESENTATION_PAGE_SUBSCRIPTION);
|
|
const presentationPage = presentationPageData?.pres_page_curr[0] || {};
|
|
const hasPresentation = !!presentationPage?.presentationId;
|
|
|
|
const swapLayout = !hasPresentation || isLayoutSwapped;
|
|
|
|
let floatingOverlay = false;
|
|
let hideOverlay = false;
|
|
|
|
if (swapLayout) {
|
|
floatingOverlay = true;
|
|
hideOverlay = true;
|
|
}
|
|
|
|
const { cameraOptimalGridSize } = cameraDockInput;
|
|
const { display: displayPresentation } = presentation;
|
|
|
|
const { data: currentUserData } = useCurrentUser((user) => ({
|
|
presenter: user.presenter,
|
|
}));
|
|
|
|
const isGridEnabled = layoutType === LAYOUT_TYPE.VIDEO_FOCUS;
|
|
|
|
const { streams: videoUsers, gridUsers } = useVideoStreams(isGridEnabled, paginationEnabled, viewParticipantsWebcams);
|
|
|
|
let usersVideo: VideoItem[];
|
|
if (gridUsers.length > 0) {
|
|
usersVideo = [
|
|
...videoUsers,
|
|
...gridUsers,
|
|
];
|
|
} else {
|
|
usersVideo = videoUsers;
|
|
}
|
|
|
|
return !audioModalIsOpen && (usersVideo.length > 0 || isGridEnabled)
|
|
? (
|
|
<WebcamComponentGraphql
|
|
{...{
|
|
swapLayout,
|
|
usersVideo,
|
|
focusedId: cameraDock.focusedId,
|
|
cameraDock,
|
|
cameraOptimalGridSize,
|
|
layoutContextDispatch,
|
|
fullscreen,
|
|
isPresenter: currentUserData?.presenter ?? false,
|
|
displayPresentation,
|
|
isRTL,
|
|
isGridEnabled,
|
|
floatingOverlay,
|
|
hideOverlay,
|
|
}}
|
|
/>
|
|
)
|
|
: null;
|
|
};
|
|
|
|
type TrackerData = {
|
|
audioModalIsOpen: boolean;
|
|
paginationEnabled: boolean;
|
|
viewParticipantsWebcams: boolean;
|
|
};
|
|
|
|
type TrackerProps = {
|
|
isLayoutSwapped: boolean;
|
|
layoutType: string;
|
|
};
|
|
|
|
export default withTracker<TrackerData, TrackerProps>(() => {
|
|
const audioModalIsOpen = Session.get('audioModalIsOpen');
|
|
// @ts-expect-error -> Untyped object.
|
|
const { paginationEnabled } = Settings.application;
|
|
// @ts-expect-error -> Untyped object.
|
|
const { viewParticipantsWebcams } = Settings.dataSaving;
|
|
return {
|
|
audioModalIsOpen,
|
|
paginationEnabled,
|
|
viewParticipantsWebcams,
|
|
};
|
|
})(WebcamContainerGraphql);
|