87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
|
import React, { useContext, useRef } from 'react';
|
||
|
|
import * as PluginSdk from 'bigbluebutton-html-plugin-sdk';
|
||
|
|
|
||
|
|
import {
|
||
|
|
layoutDispatch,
|
||
|
|
layoutSelectInput,
|
||
|
|
layoutSelectOutput,
|
||
|
|
} from '/imports/ui/components/layout/context';
|
||
|
|
import {
|
||
|
|
DispatcherFunction,
|
||
|
|
GenericMainContent as GenericContentFromLayout,
|
||
|
|
Input,
|
||
|
|
Output,
|
||
|
|
} from '/imports/ui/components/layout/layoutTypes';
|
||
|
|
import { PluginsContext } from '/imports/ui/components/components-data/plugin-context/context';
|
||
|
|
import GenericMainContent from './component';
|
||
|
|
import { ACTIONS, PRESENTATION_AREA } from '/imports/ui/components/layout/enums';
|
||
|
|
import getDifferenceBetweenLists from '../utils';
|
||
|
|
import { GenericMainContentContainerProps } from '../types';
|
||
|
|
import { GenericContentType } from 'bigbluebutton-html-plugin-sdk/dist/cjs/extensible-areas/generic-content/enums';
|
||
|
|
|
||
|
|
const GenericMainContentContainer: React.FC<GenericMainContentContainerProps> = (props: GenericMainContentContainerProps) => {
|
||
|
|
const { genericMainContentId } = props;
|
||
|
|
|
||
|
|
const previousPluginGenericContainerContents = useRef<PluginSdk.GenericMainContent[]>([]);
|
||
|
|
const {
|
||
|
|
pluginsExtensibleAreasAggregatedState,
|
||
|
|
} = useContext(PluginsContext);
|
||
|
|
const layoutContextDispatch: DispatcherFunction = layoutDispatch();
|
||
|
|
let genericContainerContentExtensibleArea = [] as PluginSdk.GenericMainContent[];
|
||
|
|
|
||
|
|
if (pluginsExtensibleAreasAggregatedState.genericContents) {
|
||
|
|
const genericContainerContent = pluginsExtensibleAreasAggregatedState.genericContents.filter((g) => g.type === GenericContentType.MAIN_CONTENT) as PluginSdk.GenericMainContent[];
|
||
|
|
genericContainerContentExtensibleArea = [
|
||
|
|
...genericContainerContent,
|
||
|
|
];
|
||
|
|
const [
|
||
|
|
genericContentsAdded,
|
||
|
|
genericContentsRemoved,
|
||
|
|
] = getDifferenceBetweenLists(previousPluginGenericContainerContents.current, genericContainerContentExtensibleArea);
|
||
|
|
if (genericContentsAdded.length > 0 || genericContentsRemoved.length > 0) {
|
||
|
|
previousPluginGenericContainerContents.current = [...genericContainerContentExtensibleArea];
|
||
|
|
genericContentsAdded.forEach((g) => {
|
||
|
|
layoutContextDispatch({
|
||
|
|
type: ACTIONS.SET_PILE_CONTENT_FOR_PRESENTATION_AREA,
|
||
|
|
value: {
|
||
|
|
content: PRESENTATION_AREA.GENERIC_CONTENT,
|
||
|
|
open: true,
|
||
|
|
genericContentId: g.id,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
genericContentsRemoved.forEach((g) => {
|
||
|
|
layoutContextDispatch({
|
||
|
|
type: ACTIONS.SET_PILE_CONTENT_FOR_PRESENTATION_AREA,
|
||
|
|
value: {
|
||
|
|
content: PRESENTATION_AREA.GENERIC_CONTENT,
|
||
|
|
open: false,
|
||
|
|
genericContentId: g.id,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const genericContentLayoutInformation: GenericContentFromLayout = layoutSelectOutput(
|
||
|
|
(i: Output) => i.genericMainContent,
|
||
|
|
);
|
||
|
|
|
||
|
|
const cameraDock = layoutSelectInput((i: Input) => i.cameraDock);
|
||
|
|
const { isResizing } = cameraDock;
|
||
|
|
|
||
|
|
if (!genericContainerContentExtensibleArea
|
||
|
|
|| genericContainerContentExtensibleArea.length === 0
|
||
|
|
|| !genericMainContentId) return null;
|
||
|
|
return (
|
||
|
|
<GenericMainContent
|
||
|
|
genericContentId={genericMainContentId}
|
||
|
|
renderFunctionComponents={genericContainerContentExtensibleArea}
|
||
|
|
isResizing={isResizing}
|
||
|
|
genericContentLayoutInformation={genericContentLayoutInformation}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default GenericMainContentContainer;
|