2024-06-24 19:56:27 +08:00
|
|
|
import React, { useEffect, useRef, useState } from 'react';
|
2024-04-24 05:17:32 +08:00
|
|
|
import { DocumentNode } from 'graphql';
|
|
|
|
|
2024-06-24 19:56:27 +08:00
|
|
|
import {
|
|
|
|
GraphqlResponseWrapper, HookEventWrapper, SubscribedEventDetails, UpdatedEventDetails,
|
|
|
|
} from 'bigbluebutton-html-plugin-sdk/dist/cjs/core/types';
|
2024-04-24 05:17:32 +08:00
|
|
|
import { DataChannelHooks, DataChannelTypes } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/enums';
|
|
|
|
|
|
|
|
import createUseSubscription from '/imports/ui/core/hooks/createUseSubscription';
|
2024-06-24 19:56:27 +08:00
|
|
|
import { HookEvents } from 'bigbluebutton-html-plugin-sdk/dist/cjs/core/enum';
|
|
|
|
import { DataChannelArguments } from 'bigbluebutton-html-plugin-sdk/dist/cjs/data-channel/types';
|
|
|
|
import { PLUGIN_DATA_CHANNEL_LATEST_ITEM, PLUGIN_DATA_CHANNEL_NEW_ITEMS, PLUGIN_DATA_CHANNEL_All_ITEMS } from '../subscriptions';
|
2024-04-24 05:17:32 +08:00
|
|
|
|
|
|
|
export interface DataChannelItemManagerReaderProps {
|
|
|
|
pluginName: string;
|
|
|
|
channelName: string;
|
|
|
|
subChannelName: string;
|
|
|
|
dataChannelType: DataChannelTypes;
|
|
|
|
dataChannelIdentifier: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface SubscriptionVariables {
|
|
|
|
subChannelName: string;
|
|
|
|
pluginName: string;
|
|
|
|
channelName: string;
|
|
|
|
createdAt?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const DataChannelItemManagerReader: React.ElementType<DataChannelItemManagerReaderProps> = (
|
|
|
|
props: DataChannelItemManagerReaderProps,
|
|
|
|
) => {
|
|
|
|
const {
|
|
|
|
pluginName,
|
|
|
|
channelName,
|
|
|
|
dataChannelType,
|
|
|
|
subChannelName,
|
|
|
|
dataChannelIdentifier,
|
|
|
|
} = props;
|
2024-06-24 19:56:27 +08:00
|
|
|
const [sendSignal, setSendSignal] = useState<boolean>(false);
|
2024-04-24 05:17:32 +08:00
|
|
|
const cursor = useRef(new Date());
|
|
|
|
let subscription: DocumentNode;
|
|
|
|
const variables: SubscriptionVariables = {
|
|
|
|
subChannelName,
|
|
|
|
pluginName,
|
|
|
|
channelName,
|
|
|
|
};
|
|
|
|
let usePatchedSubscription = true;
|
|
|
|
switch (dataChannelType) {
|
|
|
|
case DataChannelTypes.LATEST_ITEM:
|
|
|
|
subscription = PLUGIN_DATA_CHANNEL_LATEST_ITEM;
|
|
|
|
usePatchedSubscription = false;
|
|
|
|
break;
|
|
|
|
case DataChannelTypes.NEW_ITEMS:
|
|
|
|
subscription = PLUGIN_DATA_CHANNEL_NEW_ITEMS;
|
|
|
|
variables.createdAt = cursor.current.toISOString();
|
|
|
|
usePatchedSubscription = false;
|
|
|
|
break;
|
|
|
|
case DataChannelTypes.All_ITEMS:
|
|
|
|
subscription = PLUGIN_DATA_CHANNEL_All_ITEMS;
|
|
|
|
break;
|
|
|
|
default:
|
|
|
|
subscription = PLUGIN_DATA_CHANNEL_All_ITEMS;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
|
|
|
|
const dataResultFromSubscription = createUseSubscription<object>(subscription,
|
|
|
|
variables, usePatchedSubscription)((obj) => obj);
|
|
|
|
|
2024-06-24 19:56:27 +08:00
|
|
|
useEffect(() => {
|
|
|
|
const subscribeHandler: EventListener = (
|
|
|
|
(event: HookEventWrapper<void>) => {
|
|
|
|
if (event.detail.hook === DataChannelHooks.DATA_CHANNEL_BUILDER) {
|
|
|
|
const eventDetails = event.detail as SubscribedEventDetails;
|
|
|
|
const hookArguments = eventDetails?.hookArguments as DataChannelArguments;
|
|
|
|
const dataChannelTypeFromEvent = hookArguments.dataChannelType!;
|
|
|
|
if (hookArguments?.channelName && hookArguments?.pluginName
|
|
|
|
&& hookArguments.subChannelName === subChannelName
|
|
|
|
&& hookArguments.pluginName === pluginName
|
|
|
|
&& hookArguments.channelName === channelName
|
|
|
|
&& dataChannelTypeFromEvent === dataChannelType
|
|
|
|
) {
|
|
|
|
setSendSignal((signal) => !signal);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}) as EventListener;
|
|
|
|
|
|
|
|
window.addEventListener(HookEvents.SUBSCRIBED, subscribeHandler);
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener(HookEvents.SUBSCRIBED, subscribeHandler);
|
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
2024-04-24 05:17:32 +08:00
|
|
|
useEffect(() => {
|
|
|
|
const dataResult = {
|
|
|
|
data: dataResultFromSubscription.data,
|
|
|
|
loading: dataResultFromSubscription.loading,
|
|
|
|
} as GraphqlResponseWrapper<object>;
|
|
|
|
window.dispatchEvent(
|
|
|
|
new CustomEvent<UpdatedEventDetails<
|
|
|
|
GraphqlResponseWrapper<object>
|
|
|
|
>>(dataChannelIdentifier, {
|
|
|
|
detail: {
|
|
|
|
hook: DataChannelHooks.DATA_CHANNEL_BUILDER,
|
|
|
|
data: dataResult,
|
|
|
|
hookArguments: {
|
|
|
|
dataChannelType,
|
|
|
|
pluginName,
|
|
|
|
channelName,
|
|
|
|
subChannelName,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
2024-06-24 19:56:27 +08:00
|
|
|
}, [dataResultFromSubscription, sendSignal]);
|
2024-04-24 05:17:32 +08:00
|
|
|
|
|
|
|
return null;
|
|
|
|
};
|