fix(media-area): add svg icon support to media area items

samples/sample-data-channel-plugin/src/components/sample-data-channel-plugin-item/component.tsx

@@ -32,7 +32,7 @@ function SampleDataChannelPlugin(
     pluginApi.setMediaAreaItems([
       new MediaAreaOption({
         label: 'Click to increment data-channel',
-        icon: 'user',
+        icon: { iconName: 'user' },
         tooltip: 'this is a button injected by plugin',
         dataTest: 'incrementDataChannelButtonPlugin',
         allowed: true,
@@ -56,7 +56,7 @@ function SampleDataChannelPlugin(
         },
       }), new MediaAreaOption({
         label: 'Click wipe data off data-channel',
-        icon: 'user',
+        icon: { iconName: 'user' },
         tooltip: 'this is a button injected by plugin',
         allowed: true,
         dataTest: 'wipeDataOffButtonPlugin',

samples/sample-generic-content-sidekick-plugin/src/components/sample-generic-content-sidekick-plugin-item/component.tsx

@@ -67,7 +67,7 @@ function SampleGenericContentSidekickPlugin(
       }),
       new MediaAreaOption({
         label: 'Click to increment the badge',
-        icon: 'user',
+        icon: { iconName: 'user' },
         tooltip: 'Use it to enable the badge',
         allowed: true,
         onClick: () => {
@@ -80,7 +80,7 @@ function SampleGenericContentSidekickPlugin(
       }),
       new MediaAreaOption({
         label: 'Click to change menu name',
-        icon: 'user',
+        icon: { iconName: 'user' },
         tooltip: 'Use it to change menu name',
         allowed: true,
         onClick: () => {

samples/sample-media-area-plugin/src/components/sample-media-area-plugin/component.tsx

@@ -31,7 +31,7 @@ function SampleMediaAreaPlugin(
         }),
         new MediaAreaOption({
           label: 'Button injected by plugin',
-          icon: 'copy',
+          icon: { iconName: 'copy' },
           tooltip: 'this is a button injected by plugin',
           allowed: true,
           dataTest: 'mediaAreaOption',
@@ -41,7 +41,7 @@ function SampleMediaAreaPlugin(
         }),
         new MediaAreaOption({
           label: 'Smart layout',
-          icon: 'copy',
+          icon: { iconName: 'copy' },
           tooltip: 'this is a button injected by plugin',
           allowed: true,
           onClick: () => {
@@ -52,7 +52,7 @@ function SampleMediaAreaPlugin(
         }),
         new MediaAreaOption({
           label: 'Media Only',
-          icon: 'copy',
+          icon: { iconName: 'copy' },
           tooltip: 'this is a button injected by plugin',
           allowed: true,
           onClick: () => {
@@ -63,7 +63,7 @@ function SampleMediaAreaPlugin(
         }),
         new MediaAreaOption({
           label: 'Participants and chat Only',
-          icon: 'copy',
+          icon: { iconName: 'copy' },
           tooltip: 'this is a button injected by plugin',
           allowed: true,
           onClick: () => {
@@ -74,7 +74,7 @@ function SampleMediaAreaPlugin(
         }),
         new MediaAreaOption({
           label: 'Presentation Only',
-          icon: 'copy',
+          icon: { iconName: 'copy' },
           tooltip: 'this is a button injected by plugin',
           allowed: true,
           onClick: () => {
@@ -85,7 +85,7 @@ function SampleMediaAreaPlugin(
         }),
         new MediaAreaOption({
           label: 'Cameras Only',
-          icon: 'copy',
+          icon: { iconName: 'copy' },
           tooltip: 'this is a button injected by plugin',
           allowed: true,
           onClick: () => {
@@ -96,7 +96,7 @@ function SampleMediaAreaPlugin(
         }),
         new MediaAreaOption({
           label: 'Plugins only',
-          icon: 'copy',
+          icon: { iconName: 'copy' },
           tooltip: 'this is a button injected by plugin',
           allowed: true,
           onClick: () => {

samples/sample-server-commands-plugin/src/components/sample-server-commands-plugin-item/component.tsx

@@ -33,7 +33,7 @@ function SampleServerCommandsPluginItem(
       }),
       new MediaAreaOption({
         label: 'Send chat message',
-        icon: 'chat',
+        icon: { iconName: 'chat' },
         tooltip: 'This is a button to send chat message',
         allowed: true,
         onClick: () => {
@@ -45,7 +45,7 @@ function SampleServerCommandsPluginItem(
       }),
       new MediaAreaOption({
         label: 'Send custom chat message',
-        icon: 'chat',
+        icon: { iconName: 'chat' },
         tooltip: 'This is a button to send chat message',
         allowed: true,
         onClick: () => {

src/extensible-areas/media-area-item/component.ts

@@ -1,6 +1,6 @@
 import { MediaAreaItemType } from './enums';
 import {
-  MediaAreaInterface, MediaAreaOptionProps,
+  MediaAreaInterface, MediaAreaOptionProps, MediaAreaIconType,
 } from './types';
 
 // MediaArea Extensible Area
@@ -12,7 +12,7 @@ export class MediaAreaOption implements MediaAreaInterface {
 
   label: string;
 
-  icon: string;
+  icon: MediaAreaIconType;
 
   tooltip: string;
 
@@ -26,7 +26,8 @@ export class MediaAreaOption implements MediaAreaInterface {
    * Returns the option for the media area
    *
    * @param label - label to be displayed on the option
-   * @param icon - icon to be displayed on the option
+   * @param icon - icon to be used in the button for the action bar - it can be the iconName
+   * from BigbBlueButton or an svg
    * @param tooltip - tooltip to be displayed when hovering over option
    * @param dataTest - string attribute to be used for testing
    * @param allowed - boolean indicating whether the option should be displayed
@@ -35,7 +36,7 @@ export class MediaAreaOption implements MediaAreaInterface {
    * @returns the option to be displayed in the media area
    */
   constructor({
-    id, label = '', icon = '', tooltip = '', dataTest = '', allowed = true, onClick = () => {},
+    id, label = '', icon, tooltip = '', dataTest = '', allowed = true, onClick = () => {},
   }: MediaAreaOptionProps) {
     if (id) {
       this.id = id;

src/extensible-areas/media-area-item/types.ts

@@ -6,10 +6,23 @@ import { PluginProvidedUiItemDescriptor } from '../base';
 export interface MediaAreaInterface extends PluginProvidedUiItemDescriptor{
 }
 
+export interface MediaAreaButtonIconSvg {
+  svgContent: React.SVGProps<SVGSVGElement>;
+}
+
+export interface MediaAreaButtonIconName {
+  /**
+   * Default icon name defined by BBB (see options there).
+   */
+  iconName: string;
+}
+
+export type MediaAreaIconType = MediaAreaButtonIconSvg | MediaAreaButtonIconName
+
 export interface MediaAreaOptionProps {
   id?: string;
   label: string;
-  icon: string;
+  icon: MediaAreaIconType;
   tooltip: string;
   dataTest?: string;
   allowed: boolean;