fix(plugins): add svg icon support to media area button +

Also adds missing tooltip support to the button.

Author: germanocaumo

bigbluebutton-html5/imports/ui/components/actions-bar/media-area/media-sharing/component.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
-import { colorPrimary } from '/imports/ui/stylesheets/styled-components/palette';
+import SvgIcon from '@mui/material/SvgIcon';
+import { btnDefaultColor, colorPrimary } from '/imports/ui/stylesheets/styled-components/palette';
 import CoPresentIcon from '@mui/icons-material/CoPresent';
 import KEYS from '/imports/utils/keys';
 import { useIsScreenGloballyBroadcasting, screenshareHasEnded } from '/imports/ui/components/screenshare/service';
@@ -214,6 +215,7 @@ const MediaSharingModal: React.FC<MediaSharingModalProps> = ({
               color={hasCameraAsContent ? 'primary' : 'default'}
               text={intl.formatMessage(intlMessages.shareCameraAsContent)}
               icon={<Icon iconName="video" />}
+              tooltip={intl.formatMessage(intlMessages.shareCameraAsContent)}
               onClick={handleCameraAsContentClick}
             />
           )}
@@ -225,7 +227,15 @@ const MediaSharingModal: React.FC<MediaSharingModalProps> = ({
                 dataTest={item.dataTest}
                 color="default"
                 text={item.label || ''}
-                icon={item.icon ? <Icon iconName={item.icon} /> : undefined}
+                icon={item?.icon && 'iconName' in item.icon ? (
+                  <Icon iconName={item.icon.iconName} />
+                ) : (
+                  <SvgIcon fontSize="large" sx={{ color: btnDefaultColor }}>
+                    {/* @ts-ignore */}
+                    {item.icon?.svgContent}
+                  </SvgIcon>
+                )}
+                tooltip={item.tooltip}
                 onClick={() => {
                   if (item.onClick) item.onClick();
                   handleClose();

bigbluebutton-html5/imports/ui/components/actions-bar/media-area/media-sharing/media-button/component.tsx

@@ -3,6 +3,7 @@ import { IconButton } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import Styled from './styles';
 import { colorPrimary, colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
+import TooltipContainer from '/imports/ui/components/common/tooltip/container';
 
 export interface MediaButtonProps {
   color: string;
@@ -12,6 +13,7 @@ export interface MediaButtonProps {
   onClick?: () => void;
   /** The main icon to be rendered in the button */
   icon?: React.ReactElement;
+  tooltip?: string;
 }
 
 export const MediaButton: FunctionComponent<MediaButtonProps> = ({
@@ -21,6 +23,7 @@ export const MediaButton: FunctionComponent<MediaButtonProps> = ({
   dataTest,
   onClick,
   icon,
+  tooltip,
 }) => {
   let settingsIconColor = 'inherit';
   if (color === 'active') {
@@ -29,7 +32,7 @@ export const MediaButton: FunctionComponent<MediaButtonProps> = ({
     settingsIconColor = colorWhite;
   }
 
-  return (
+  const buttonContent = (
     <Styled.MediaButtonContainer data-test={dataTest}>
       <Styled.ButtonFrame color={color} onClick={onClick}>
         {showSettingsIcon && (
@@ -52,6 +55,16 @@ export const MediaButton: FunctionComponent<MediaButtonProps> = ({
       <Styled.ButtonText>{text}</Styled.ButtonText>
     </Styled.MediaButtonContainer>
   );
+
+  if (tooltip && tooltip !== '') {
+    return (
+      <TooltipContainer position="top" title={tooltip}>
+        {buttonContent}
+      </TooltipContainer>
+    );
+  }
+
+  return buttonContent;
 };
 
 export default MediaButton;

bigbluebutton-html5/imports/ui/components/actions-bar/media-area/types.ts

@@ -1,10 +1,12 @@
 import { IntlShape } from 'react-intl';
 import { MediaAreaItemType } from 'bigbluebutton-html-plugin-sdk/dist/cjs/extensible-areas/media-area-item/enums';
+import { MediaAreaIconType } from 'bigbluebutton-html-plugin-sdk/dist/cjs/extensible-areas/media-area-item/types';
 
 export interface MediaButtonPluginItem {
   type: MediaAreaItemType;
   id: string;
-  icon?: string;
+  icon?: MediaAreaIconType;
+  tooltip?: string;
   label?: string;
   onClick?: () => void;
   allowed: boolean;