100 lines
3.0 KiB
JavaScript
100 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import { withTracker } from 'meteor/react-meteor-data';
|
|
import VideoService from '/imports/ui/components/video-provider/service';
|
|
import { useSubscription } from '@apollo/client';
|
|
import {
|
|
layoutSelect,
|
|
layoutSelectInput,
|
|
layoutSelectOutput,
|
|
layoutDispatch,
|
|
} from '../layout/context';
|
|
import WebcamComponent from '/imports/ui/components/webcam/component';
|
|
import { LAYOUT_TYPE } from '../layout/enums';
|
|
import { sortVideoStreams } from '/imports/ui/components/video-provider/stream-sorting';
|
|
import {
|
|
CURRENT_PRESENTATION_PAGE_SUBSCRIPTION,
|
|
} from '/imports/ui/components/whiteboard/queries';
|
|
import useCurrentUser from '/imports/ui/core/hooks/useCurrentUser';
|
|
import WebcamContainerGraphql from './webcam-graphql/component';
|
|
|
|
const WebcamContainer = ({
|
|
audioModalIsOpen,
|
|
usersVideo,
|
|
layoutType,
|
|
isLayoutSwapped,
|
|
}) => {
|
|
const fullscreen = layoutSelect((i) => i.fullscreen);
|
|
const isRTL = layoutSelect((i) => i.isRTL);
|
|
const cameraDockInput = layoutSelectInput((i) => i.cameraDock);
|
|
const focusedId = layoutSelectInput((i) => i.focusedId);
|
|
const presentation = layoutSelectOutput((i) => i.presentation);
|
|
const cameraDock = layoutSelectOutput((i) => 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;
|
|
|
|
return !audioModalIsOpen
|
|
&& (usersVideo.length > 0 || isGridEnabled)
|
|
? (
|
|
<WebcamComponent
|
|
{...{
|
|
swapLayout,
|
|
usersVideo,
|
|
focusedId: cameraDock.focusedId,
|
|
cameraDock,
|
|
cameraOptimalGridSize,
|
|
layoutContextDispatch,
|
|
fullscreen,
|
|
isPresenter: currentUserData?.presenter,
|
|
displayPresentation,
|
|
isRTL,
|
|
isGridEnabled,
|
|
floatingOverlay,
|
|
hideOverlay,
|
|
}}
|
|
/>
|
|
)
|
|
: null;
|
|
};
|
|
|
|
withTracker(() => {
|
|
const data = {
|
|
audioModalIsOpen: Session.get('audioModalIsOpen'),
|
|
isMeteorConnected: Meteor.status().connected,
|
|
};
|
|
|
|
const { streams: usersVideo, gridUsers } = VideoService.getVideoStreams();
|
|
const { defaultSorting: DEFAULT_SORTING } = window.meetingClientSettings.public.kurento.cameraSortingModes;
|
|
|
|
if (gridUsers.length > 0) {
|
|
const items = usersVideo.concat(gridUsers);
|
|
data.usersVideo = sortVideoStreams(items, DEFAULT_SORTING);
|
|
} else {
|
|
data.usersVideo = usersVideo;
|
|
}
|
|
|
|
return data;
|
|
})(WebcamContainer);
|
|
|
|
export default WebcamContainerGraphql;
|