[fix-dom-element-manipulation] Changes in review

This commit is contained in:
Guilherme Leme 2024-09-10 08:46:27 -03:00
parent 22453dafd4
commit 09f280f4d3
4 changed files with 22 additions and 19 deletions

View File

@ -1,8 +1,8 @@
import { UserCameraHelperInterface } from 'bigbluebutton-html-plugin-sdk/dist/cjs/extensible-areas/user-camera-helper-item/types';
import { UserCameraHelperButton } from 'bigbluebutton-html-plugin-sdk';
export interface UserCameraHelperAreas {
userCameraHelperTopLeft: UserCameraHelperInterface[];
userCameraHelperTopRight: UserCameraHelperInterface[];
userCameraHelperBottomLeft: UserCameraHelperInterface[];
userCameraHelperBottomRight: UserCameraHelperInterface[];
userCameraHelperTopLeft: UserCameraHelperButton[];
userCameraHelperTopRight: UserCameraHelperButton[];
userCameraHelperBottomLeft: UserCameraHelperButton[];
userCameraHelperBottomRight: UserCameraHelperButton[];
}

View File

@ -54,7 +54,7 @@ const renderPluginItems = (pluginItems, bottom, right) => {
right={right}
icon={pluginItem.icon}
label={pluginItem.label}
onClick={(e) => pluginItem.onClick({ browserClickEvent: e })}
onClick={pluginItem.onClick}
/>
);
return returnComponent;

View File

@ -3,7 +3,7 @@ import React, {
useEffect,
useState,
} from 'react';
import { UserCameraHelperInterface, UserCameraHelperItemPosition } from 'bigbluebutton-html-plugin-sdk';
import { UserCameraHelperButton, UserCameraHelperInterface, UserCameraHelperItemPosition } from 'bigbluebutton-html-plugin-sdk';
import VideoList from '/imports/ui/components/video-provider/video-list/component';
import { layoutSelect, layoutDispatch } from '/imports/ui/components/layout/context';
import { useNumberOfPages } from '/imports/ui/components/video-provider/hooks';
@ -70,28 +70,29 @@ const VideoListContainer: React.FC<VideoListContainerProps> = (props) => {
...pluginsExtensibleAreasAggregatedState.userCameraHelperItems,
].reduce((acc, current: UserCameraHelperInterface) => {
const state = { ...acc };
const currentButton = current as UserCameraHelperButton;
switch (current.position) {
case UserCameraHelperItemPosition.TOP_LEFT:
state.userCameraHelperTopLeft.push(current);
state.userCameraHelperTopLeft.push(currentButton);
break;
case UserCameraHelperItemPosition.BOTTOM_LEFT:
state.userCameraHelperBottomLeft.push(current);
state.userCameraHelperBottomLeft.push(currentButton);
break;
case UserCameraHelperItemPosition.TOP_RIGHT:
state.userCameraHelperTopRight.push(current);
state.userCameraHelperTopRight.push(currentButton);
break;
case UserCameraHelperItemPosition.BOTTOM_RIGHT:
state.userCameraHelperBottomRight.push(current);
state.userCameraHelperBottomRight.push(currentButton);
break;
default:
break;
}
return state;
}, {
userCameraHelperTopLeft: [] as UserCameraHelperInterface[],
userCameraHelperTopRight: [] as UserCameraHelperInterface[],
userCameraHelperBottomLeft: [] as UserCameraHelperInterface[],
userCameraHelperBottomRight: [] as UserCameraHelperInterface[],
userCameraHelperTopLeft: [] as UserCameraHelperButton[],
userCameraHelperTopRight: [] as UserCameraHelperButton[],
userCameraHelperBottomLeft: [] as UserCameraHelperButton[],
userCameraHelperBottomRight: [] as UserCameraHelperButton[],
});
}

View File

@ -1,6 +1,6 @@
import React, { useEffect, useRef, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { UserCameraHelperButton, UserCameraHelperInterface } from 'bigbluebutton-html-plugin-sdk';
import { UserCameraHelperButton } from 'bigbluebutton-html-plugin-sdk';
import { UpdatedDataForUserCameraDomElement } from 'bigbluebutton-html-plugin-sdk/dist/cjs/dom-element-manipulation/user-camera/types';
import Session from '/imports/ui/services/storage/in-memory';
import UserActions from '/imports/ui/components/video-provider/video-list/video-list-item/user-actions/component';
@ -66,15 +66,17 @@ interface VideoListItemProps {
const renderPluginItems = (
streamId: string, userId: string,
pluginItems: UserCameraHelperInterface[],
pluginItems: UserCameraHelperButton[],
bottom: boolean, right: boolean,
) => {
if (pluginItems !== undefined) {
return (
<>
{
pluginItems.map((pluginItem) => {
const pluginButton = pluginItem as UserCameraHelperButton;
pluginItems.filter(
(pluginItem) => (pluginItem.displayFunction?.({ userId, streamId }) ?? true),
).map((pluginItem) => {
const pluginButton = pluginItem;
const returnComponent = (
<PluginButtonContainer
key={`${pluginButton.type}-${pluginButton.id}-${pluginButton.label}`}