feat(webcam): adds custom color highlight option #16068

bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/component.jsx

@@ -53,7 +53,7 @@ const VideoListItem = (props) => {
   const videoContainer = useRef();
 
   const videoIsReady = isStreamHealthy && videoDataLoaded && !isSelfViewDisabled;
-  const { animations } = Settings.application;
+  const { animations, webcamBorderHighlightColor } = Settings.application;
   const talking = voiceUser?.talking;
 
   const onStreamStateChange = (e) => {
@@ -225,6 +225,7 @@ const VideoListItem = (props) => {
     <Styled.Content
       ref={videoContainer}
       talking={talking}
+      customHighlight={webcamBorderHighlightColor}
       fullscreen={isFullscreenContext}
       data-test={talking ? 'webcamItemTalkingUser' : 'webcamItem'}
       animations={animations}

bigbluebutton-html5/imports/ui/components/video-provider/video-list/video-list-item/styles.js

@@ -43,7 +43,7 @@ const Content = styled.div`
     border: 2px solid ${colorBlack};
     border-radius: 10px;
 
-    ${({ isStream }) => !isStream   && `
+    ${({ isStream }) => !isStream && `
       border: 2px solid ${webcamPlaceholderBorder};
     `}
 
@@ -51,6 +51,10 @@ const Content = styled.div`
       border: 2px solid ${colorPrimary};
     `}
 
+    ${({ talking, customHighlight }) => talking && customHighlight && customHighlight.length > 0 && `
+      border: 2px solid rgb(${customHighlight[0]}, ${customHighlight[1]}, ${customHighlight[2]});
+    `}
+
     ${({ animations }) => animations && `
       transition: opacity .1s;
     `}

bigbluebutton-html5/private/config/settings.yml

@@ -201,6 +201,8 @@ public:
         whiteboardToolbarAutoHide: false
         autoCloseReactionsBar: true
         darkTheme: false
+        # set a custom color for talking highlight in webcam
+        webcamBorderHighlightColor: []
         # fallbackLocale: if the locale the client is loaded in does not have a
         # translation a string, it will use the translation from the locale
         # specified in fallbackLocale. Note that fallbackLocale should be a