bigbluebutton-Github/bigbluebutton-html5/imports/ui/components/video-provider/adapter.tsx

75 lines
1.9 KiB
TypeScript
Raw Normal View History

import { useEffect, useRef } from 'react';
2024-06-08 04:41:36 +08:00
import { throttle } from 'radash';
import logger from '/imports/startup/client/logger';
import { VIDEO_STREAMS_SUBSCRIPTION } from './queries';
import { VideoStreamsResponse } from './types';
2024-04-20 04:34:43 +08:00
import { setStreams } from './state';
import { AdapterProps } from '../components-data/graphqlToMakeVarAdapterManager/component';
import createUseSubscription from '/imports/ui/core/hooks/createUseSubscription';
import { VIDEO_TYPES } from './enums';
2024-04-20 04:34:43 +08:00
2024-06-08 04:41:36 +08:00
const throttledSetStreams = throttle({ interval: 500 }, setStreams);
type SubscriptionData = VideoStreamsResponse['user_camera'][number];
const useVideoStreamsSubscription = createUseSubscription(
VIDEO_STREAMS_SUBSCRIPTION,
{},
true,
);
const VideoStreamAdapter: React.FC<AdapterProps> = ({
onReady,
children,
}) => {
const ready = useRef(false);
const { data, loading, errors } = useVideoStreamsSubscription();
2024-04-20 04:34:43 +08:00
useEffect(() => {
if (loading) return;
if (errors) {
errors.forEach((error) => {
logger.error({
logCode: 'video_stream_sub_error',
extraInfo: {
errorName: error.name,
errorMessage: error.message,
},
}, 'Video streams subscription failed.');
});
}
2024-04-20 04:34:43 +08:00
if (!data) {
2024-06-08 04:41:36 +08:00
throttledSetStreams([]);
2024-04-20 04:34:43 +08:00
return;
}
const streams = (data as SubscriptionData[]).map(({ streamId, user, voice }) => ({
2024-04-20 04:34:43 +08:00
stream: streamId,
deviceId: streamId.split('_')[3],
2024-04-20 04:34:43 +08:00
name: user.name,
nameSortable: user.nameSortable,
2024-06-08 04:41:36 +08:00
userId: user.userId,
user,
floor: voice?.floor ?? false,
lastFloorTime: voice?.lastFloorTime ?? '0',
voice,
type: VIDEO_TYPES.STREAM,
2024-04-20 04:34:43 +08:00
}));
2024-06-08 04:41:36 +08:00
throttledSetStreams(streams);
2024-04-20 04:34:43 +08:00
}, [data]);
useEffect(() => {
if (!ready.current) {
ready.current = true;
onReady('VideoStreamAdapter');
}
}, [loading]);
return children;
2024-04-20 04:34:43 +08:00
};
export default VideoStreamAdapter;