85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
import React, { useContext, useRef } from 'react';
|
|
import * as PluginSdk from 'bigbluebutton-html-plugin-sdk';
|
|
|
|
import {
|
|
layoutDispatch,
|
|
layoutSelectInput,
|
|
layoutSelectOutput,
|
|
} from '../layout/context';
|
|
import {
|
|
DispatcherFunction,
|
|
GenericComponent as GenericComponentFromLayout,
|
|
Input,
|
|
Output,
|
|
} from '../layout/layoutTypes';
|
|
import { PluginsContext } from '../components-data/plugin-context/context';
|
|
import GenericComponentContent from './component';
|
|
import { ACTIONS, PRESENTATION_AREA } from '../layout/enums';
|
|
import getDifferenceBetweenLists from './utils';
|
|
import { GenericComponentContainerProps } from './types';
|
|
|
|
const GenericComponentContainer: React.FC<GenericComponentContainerProps> = (props: GenericComponentContainerProps) => {
|
|
const { genericComponentId } = props;
|
|
|
|
const previousPluginGenericComponents = useRef<PluginSdk.GenericComponent[]>([]);
|
|
const {
|
|
pluginsExtensibleAreasAggregatedState,
|
|
} = useContext(PluginsContext);
|
|
const layoutContextDispatch: DispatcherFunction = layoutDispatch();
|
|
let genericComponentExtensibleArea = [] as PluginSdk.GenericComponent[];
|
|
|
|
if (pluginsExtensibleAreasAggregatedState.genericComponents) {
|
|
genericComponentExtensibleArea = [
|
|
...pluginsExtensibleAreasAggregatedState.genericComponents as PluginSdk.GenericComponent[],
|
|
];
|
|
const [
|
|
genericComponentsAdded,
|
|
genericComponentsRemoved,
|
|
] = getDifferenceBetweenLists(previousPluginGenericComponents.current, genericComponentExtensibleArea);
|
|
if (genericComponentsAdded.length > 0 || genericComponentsRemoved.length > 0) {
|
|
previousPluginGenericComponents.current = [...genericComponentExtensibleArea];
|
|
genericComponentsAdded.forEach((g) => {
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_PILE_CONTENT_FOR_PRESENTATION_AREA,
|
|
value: {
|
|
content: PRESENTATION_AREA.GENERIC_COMPONENT,
|
|
open: true,
|
|
genericComponentId: g.id,
|
|
},
|
|
});
|
|
});
|
|
genericComponentsRemoved.forEach((g) => {
|
|
layoutContextDispatch({
|
|
type: ACTIONS.SET_PILE_CONTENT_FOR_PRESENTATION_AREA,
|
|
value: {
|
|
content: PRESENTATION_AREA.GENERIC_COMPONENT,
|
|
open: false,
|
|
genericComponentId: g.id,
|
|
},
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
const genericComponentLayoutInformation: GenericComponentFromLayout = layoutSelectOutput(
|
|
(i: Output) => i.genericComponent,
|
|
);
|
|
|
|
const cameraDock = layoutSelectInput((i: Input) => i.cameraDock);
|
|
const { isResizing } = cameraDock;
|
|
|
|
if (!genericComponentExtensibleArea
|
|
|| genericComponentExtensibleArea.length === 0
|
|
|| !genericComponentId) return null;
|
|
return (
|
|
<GenericComponentContent
|
|
genericComponentId={genericComponentId}
|
|
renderFunctionComponents={genericComponentExtensibleArea}
|
|
isResizing={isResizing}
|
|
genericComponentLayoutInformation={genericComponentLayoutInformation}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default GenericComponentContainer;
|