2023-11-30 19:08:16 +08:00
|
|
|
import React from 'react';
|
2021-06-22 04:16:59 +08:00
|
|
|
import { withTracker } from 'meteor/react-meteor-data';
|
|
|
|
import VideoService from '/imports/ui/components/video-provider/service';
|
2023-11-17 04:08:13 +08:00
|
|
|
import { useSubscription } from '@apollo/client';
|
2021-09-11 04:48:52 +08:00
|
|
|
import {
|
|
|
|
layoutSelect,
|
|
|
|
layoutSelectInput,
|
|
|
|
layoutSelectOutput,
|
|
|
|
layoutDispatch,
|
|
|
|
} from '../layout/context';
|
2021-07-13 03:47:06 +08:00
|
|
|
import WebcamComponent from '/imports/ui/components/webcam/component';
|
2023-05-12 04:20:26 +08:00
|
|
|
import { LAYOUT_TYPE } from '../layout/enums';
|
2023-08-09 00:05:54 +08:00
|
|
|
import { sortVideoStreams } from '/imports/ui/components/video-provider/stream-sorting';
|
2023-11-17 04:08:13 +08:00
|
|
|
import {
|
|
|
|
CURRENT_PRESENTATION_PAGE_SUBSCRIPTION,
|
|
|
|
} from '/imports/ui/components/whiteboard/queries';
|
2024-03-07 01:28:18 +08:00
|
|
|
const { defaultSorting: DEFAULT_SORTING } = window.meetingClientSettings.public.kurento.cameraSortingModes;
|
2023-11-30 19:08:16 +08:00
|
|
|
import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
|
2024-04-20 04:34:43 +08:00
|
|
|
import WebcamContainerGraphql from './webcam-graphql/component';
|
2021-05-25 01:05:39 +08:00
|
|
|
|
2021-06-22 04:16:59 +08:00
|
|
|
const WebcamContainer = ({
|
|
|
|
audioModalIsOpen,
|
|
|
|
usersVideo,
|
2023-05-12 04:20:26 +08:00
|
|
|
layoutType,
|
2023-11-17 04:08:13 +08:00
|
|
|
isLayoutSwapped,
|
2021-06-22 04:16:59 +08:00
|
|
|
}) => {
|
2021-09-11 04:48:52 +08:00
|
|
|
const fullscreen = layoutSelect((i) => i.fullscreen);
|
|
|
|
const isRTL = layoutSelect((i) => i.isRTL);
|
|
|
|
const cameraDockInput = layoutSelectInput((i) => i.cameraDock);
|
2022-02-05 02:08:19 +08:00
|
|
|
const focusedId = layoutSelectInput((i) => i.focusedId);
|
2021-09-11 04:48:52 +08:00
|
|
|
const presentation = layoutSelectOutput((i) => i.presentation);
|
|
|
|
const cameraDock = layoutSelectOutput((i) => i.cameraDock);
|
|
|
|
const layoutContextDispatch = layoutDispatch();
|
2023-11-17 04:08:13 +08:00
|
|
|
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;
|
|
|
|
}
|
2021-09-10 21:16:44 +08:00
|
|
|
|
2021-08-07 01:23:46 +08:00
|
|
|
const { cameraOptimalGridSize } = cameraDockInput;
|
2021-08-10 20:05:34 +08:00
|
|
|
const { display: displayPresentation } = presentation;
|
2021-06-22 04:16:59 +08:00
|
|
|
|
2023-11-30 19:08:16 +08:00
|
|
|
const { data: currentUserData } = useCurrentUser((user) => ({
|
|
|
|
presenter: user.presenter,
|
|
|
|
}));
|
2021-08-04 22:38:20 +08:00
|
|
|
|
2023-05-12 04:20:26 +08:00
|
|
|
const isGridEnabled = layoutType === LAYOUT_TYPE.VIDEO_FOCUS;
|
|
|
|
|
2021-10-13 20:30:08 +08:00
|
|
|
return !audioModalIsOpen
|
2023-05-12 04:20:26 +08:00
|
|
|
&& (usersVideo.length > 0 || isGridEnabled)
|
2021-06-22 04:16:59 +08:00
|
|
|
? (
|
|
|
|
<WebcamComponent
|
|
|
|
{...{
|
|
|
|
swapLayout,
|
|
|
|
usersVideo,
|
2022-02-11 22:30:35 +08:00
|
|
|
focusedId: cameraDock.focusedId,
|
2021-07-13 03:47:06 +08:00
|
|
|
cameraDock,
|
|
|
|
cameraOptimalGridSize,
|
2021-08-05 19:03:24 +08:00
|
|
|
layoutContextDispatch,
|
2021-07-13 03:47:06 +08:00
|
|
|
fullscreen,
|
2023-11-30 19:08:16 +08:00
|
|
|
isPresenter: currentUserData?.presenter,
|
2021-08-12 03:28:36 +08:00
|
|
|
displayPresentation,
|
2021-08-07 01:23:46 +08:00
|
|
|
isRTL,
|
2023-05-12 04:20:26 +08:00
|
|
|
isGridEnabled,
|
2023-11-17 04:08:13 +08:00
|
|
|
floatingOverlay,
|
|
|
|
hideOverlay,
|
2021-06-22 04:16:59 +08:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
: null;
|
2021-05-25 01:05:39 +08:00
|
|
|
};
|
|
|
|
|
2024-04-20 04:34:43 +08:00
|
|
|
withTracker(() => {
|
2021-06-22 04:16:59 +08:00
|
|
|
const data = {
|
|
|
|
audioModalIsOpen: Session.get('audioModalIsOpen'),
|
|
|
|
isMeteorConnected: Meteor.status().connected,
|
|
|
|
};
|
|
|
|
|
2023-08-09 00:05:54 +08:00
|
|
|
const { streams: usersVideo, gridUsers } = VideoService.getVideoStreams();
|
|
|
|
|
2023-11-30 19:08:16 +08:00
|
|
|
if (gridUsers.length > 0) {
|
2023-08-09 00:05:54 +08:00
|
|
|
const items = usersVideo.concat(gridUsers);
|
|
|
|
data.usersVideo = sortVideoStreams(items, DEFAULT_SORTING);
|
|
|
|
} else {
|
|
|
|
data.usersVideo = usersVideo;
|
|
|
|
}
|
2021-06-22 04:16:59 +08:00
|
|
|
|
|
|
|
return data;
|
2023-03-27 23:36:25 +08:00
|
|
|
})(WebcamContainer);
|
2024-04-20 04:34:43 +08:00
|
|
|
|
|
|
|
export default WebcamContainerGraphql;
|