BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
vitoralmeida 2023-11-27 22:25:32 -03:00
parent aa6d9fc026
commit 74f8190ee1
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

2
bigbluebutton-html5/private/config/settings.yml
View File

@ -201,6 +201,8 @@ public:
whiteboardToolbarAutoHide: false whiteboardToolbarAutoHide: false
autoCloseReactionsBar: true autoCloseReactionsBar: true
darkTheme: false 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 # fallbackLocale: if the locale the client is loaded in does not have a
# translation a string, it will use the translation from the locale # translation a string, it will use the translation from the locale
# specified in fallbackLocale. Note that fallbackLocale should be a # specified in fallbackLocale. Note that fallbackLocale should be a