feat(raise-hand) Update raised hand design (#10651)

Updated indicator color and background color
Added border on thumbnails
Web and Native

react/features/base/icons/components/Icon.js

@@ -15,7 +15,7 @@ type Props = {
     /**
      * Color of the icon (if not provided by the style object).
      */
-    color?: string,
+    color?: ?string,
 
     /**
      * Id prop (mainly for autotests).
@@ -35,7 +35,7 @@ type Props = {
     /**
      * The size of the icon (if not provided by the style object).
      */
-    size?: number | string,
+    size?: ?number | string,
 
     /**
      * The preloaded icon component to render.

react/features/base/icons/svg/raised-hand.svg

@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="22" height="22" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9167 3.20834L11.9167 4.83334L11.9167 11L11.9167 11.9167C11.9167 12.4229 12.3271 12.8333 12.8333 12.8333C13.3396 12.8333 13.75 12.4229 13.75 11.9167V11V4.83334C13.75 4.73632 13.9183 4.58334 14.2083 4.58334C14.4984 4.58334 14.6667 4.73632 14.6667 4.83334L14.6667 6.875L14.6667 11.9167C14.6667 12.4229 15.0771 12.8333 15.5833 12.8333C16.0896 12.8333 16.5 12.4229 16.5 11.9167L16.5 6.875C16.5 6.62187 16.7052 6.41667 16.9583 6.41667C17.2115 6.41667 17.4167 6.62187 17.4167 6.875V13.788C17.1671 16.3395 14.9919 18.3333 12.375 18.3333C10.6569 18.3333 9.09297 17.4675 8.17032 16.0753L8.16703 16.0762L4.67206 10.8208C4.50437 10.5805 4.55476 10.2948 4.76211 10.1496C4.96947 10.0044 5.25526 10.0548 5.40045 10.2621L6.57295 12.015L6.57177 12.0158C6.85487 12.4355 7.42461 12.5463 7.84432 12.2632C8.09767 12.0923 8.23844 11.8169 8.24797 11.5332L8.25 11.5338V5.04167C8.25 4.78854 8.4552 4.58334 8.70833 4.58334C8.96124 4.58334 9.1663 4.78818 9.16667 5.041L9.16667 5.04167L9.16667 11L9.16667 11.9167C9.16667 12.4229 9.57707 12.8333 10.0833 12.8333C10.5896 12.8333 11 12.4229 11 11.9167V11V5.04167V3.20834C11 2.95521 11.2052 2.75001 11.4583 2.75001C11.7115 2.75001 11.9167 2.95521 11.9167 3.20834ZM19.2337 13.7686L19.25 13.7605V13.2917V6.875C19.25 5.60935 18.224 4.58334 16.9583 4.58334C16.7976 4.58334 16.6408 4.59988 16.4894 4.63136C16.3776 3.57554 15.399 2.75001 14.2083 2.75001C14.0384 2.75001 13.8729 2.76681 13.7135 2.7987C13.5204 1.72851 12.5842 0.916672 11.4583 0.916672C10.3309 0.916672 9.39356 1.73088 9.20233 2.80339C9.04323 2.76843 8.87793 2.75001 8.70833 2.75001C7.44268 2.75001 6.41667 3.77602 6.41667 5.04167V8.70352C5.64445 8.11321 4.54919 8.06056 3.71056 8.64778C2.67379 9.37373 2.42183 10.8027 3.14778 11.8395L6.44893 16.7791C7.64459 18.8065 9.85095 20.1667 12.375 20.1667C16.0117 20.1667 18.9888 17.3431 19.2337 13.7686Z" />
 </svg>

react/features/base/react/components/native/BaseIndicator.js

@@ -26,6 +26,11 @@ type Props = {
      */
     icon: string,
 
+    /**
+     * Size of icon.
+     */
+    iconSize: ?number,
+
     /**
      * Additional style to be applied to the icon element.
      */
@@ -43,7 +48,7 @@ export default class BaseIndicator extends Component<Props> {
      * @inheritdoc
      */
     render() {
-        const { highlight, icon, iconStyle, backgroundColor } = this.props;
+        const { highlight, icon, iconStyle, backgroundColor, iconSize } = this.props;
         const highlightedIndicator = { ...styles.highlightedIndicator };
 
         if (backgroundColor) {
@@ -55,6 +60,7 @@ export default class BaseIndicator extends Component<Props> {
                 style = { [ BASE_INDICATOR,
                     highlight ? highlightedIndicator : null ] }>
                 <Icon
+                    size = { iconSize }
                     src = { icon }
                     style = { [
                         styles.indicator,

react/features/base/react/components/native/indicatorstyles.js

@@ -8,8 +8,8 @@ export default {
      */
     highlightedIndicator: {
         backgroundColor: ColorPalette.blue,
-        borderRadius: 16,
-        padding: 4
+        borderRadius: 4,
+        padding: 2
     },
 
     /**

react/features/base/react/components/web/BaseIndicator.js

@@ -27,6 +27,11 @@ type Props = {
     */
     iconClassName: string,
 
+    /**
+     * The color of the icon.
+     */
+    iconColor: ?string,
+
     /**
      * Id of the icon to be rendered.
      */
@@ -81,6 +86,7 @@ const BaseIndicator = ({
     className = '',
     icon,
     iconClassName,
+    iconColor,
     iconId,
     iconSize,
     id = '',
@@ -105,6 +111,7 @@ const BaseIndicator = ({
                     id = { id }>
                     <Icon
                         className = { iconClassName }
+                        color = { iconColor }
                         id = { iconId }
                         src = { icon }
                         style = { style } />

react/features/filmstrip/components/native/RaisedHandIndicator.js

@@ -25,9 +25,11 @@ class RaisedHandIndicator extends AbstractRaisedHandIndicator<Props> {
     _renderIndicator() {
         return (
             <BaseIndicator
-                backgroundColor = { BaseTheme.palette.warning01 }
+                backgroundColor = { BaseTheme.palette.warning02 }
                 highlight = { true }
-                icon = { IconRaisedHand } />
+                icon = { IconRaisedHand }
+                iconSize = { 16 }
+                iconStyle = {{ color: BaseTheme.palette.uiBackground }} />
         );
     }
 }

react/features/filmstrip/components/native/Thumbnail.js

@@ -14,7 +14,8 @@ import {
     isEveryoneModerator,
     pinParticipant,
     getParticipantByIdOrUndefined,
-    getLocalParticipant
+    getLocalParticipant,
+    hasRaisedHand
 } from '../../../base/participants';
 import { Container } from '../../../base/react';
 import { connect } from '../../../base/redux';
@@ -84,6 +85,11 @@ type Props = {
      */
     _pinned: boolean,
 
+    /**
+     * Whether or not the participant has the hand raised.
+     */
+    _raisedHand: boolean,
+
     /**
      * Whether to show the dominant speaker indicator or not.
      */
@@ -267,6 +273,7 @@ class Thumbnail extends PureComponent<Props> {
             _participantId: participantId,
             _participantInLargeVideo: participantInLargeVideo,
             _pinned,
+            _raisedHand,
             _styles,
             disableTint,
             height,
@@ -289,7 +296,8 @@ class Thumbnail extends PureComponent<Props> {
                 style = { [
                     styles.thumbnail,
                     _pinned && !tileView ? _styles.thumbnailPinned : null,
-                    styleOverrides
+                    styleOverrides,
+                    _raisedHand ? styles.thumbnailRaisedHand : null
                 ] }
                 touchFeedback = { false }>
                 <ParticipantView
@@ -354,6 +362,7 @@ function _mapStateToProps(state, ownProps) {
         _participantInLargeVideo: participantInLargeVideo,
         _participantId: id,
         _pinned: participant?.pinned,
+        _raisedHand: hasRaisedHand(participant),
         _renderDominantSpeakerIndicator: renderDominantSpeakerIndicator,
         _renderModeratorIndicator: renderModeratorIndicator,
         _styles: ColorSchemeRegistry.get(state, 'Thumbnail'),

react/features/filmstrip/components/native/styles.js

@@ -2,6 +2,7 @@
 
 import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
 import { ColorPalette } from '../../../base/styles';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 import { SMALL_THUMBNAIL_SIZE } from '../../constants';
 
 /**
@@ -147,6 +148,11 @@ export default {
 
     thumbnailTopRightIndicatorContainer: {
         right: 0
+    },
+
+    thumbnailRaisedHand: {
+        borderWidth: 2,
+        borderColor: BaseTheme.palette.warning02
     }
 };
 

react/features/filmstrip/components/web/RaisedHandIndicator.js

@@ -7,6 +7,7 @@ import { useSelector } from 'react-redux';
 import { IconRaisedHand } from '../../../base/icons';
 import { getParticipantById, hasRaisedHand } from '../../../base/participants';
 import { BaseIndicator } from '../../../base/react';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
 
 /**
  * The type of the React {@code Component} props of {@link RaisedHandIndicator}.
@@ -33,7 +34,7 @@ type Props = {
 const useStyles = makeStyles(theme => {
     return {
         raisedHandIndicator: {
-            backgroundColor: theme.palette.warning01,
+            backgroundColor: theme.palette.warning02,
             padding: '2px',
             zIndex: 3,
             display: 'inline-block',
@@ -65,6 +66,7 @@ const RaisedHandIndicator = ({
         <div className = { styles.raisedHandIndicator }>
             <BaseIndicator
                 icon = { IconRaisedHand }
+                iconColor = { BaseTheme.palette.uiBackground }
                 iconSize = { `${iconSize}px` }
                 tooltipKey = 'raisedHand'
                 tooltipPosition = { tooltipPosition } />

react/features/filmstrip/components/web/Thumbnail.js

@@ -10,6 +10,7 @@ import { isMobileBrowser } from '../../../base/environment/utils';
 import { MEDIA_TYPE, VideoTrack } from '../../../base/media';
 import {
     getParticipantByIdOrUndefined,
+    hasRaisedHand,
     pinParticipant
 } from '../../../base/participants';
 import { connect } from '../../../base/redux';
@@ -153,6 +154,11 @@ export type Props = {|
      */
     _participant: Object,
 
+    /**
+     * Whether or not the participant has the hand raised.
+     */
+    _raisedHand: boolean,
+
     /**
      * The video track that will be displayed in the thumbnail.
      */
@@ -245,14 +251,23 @@ const defaultStyles = theme => {
             backgroundColor: theme.palette.ui02
         },
 
+        borderIndicator: {
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            zIndex: '9',
+            borderRadius: '4px'
+        },
+
         activeSpeaker: {
             '& .active-speaker-indicator': {
-                boxShadow: `inset 0px 0px 0px 4px ${theme.palette.link01Active} !important`,
-                position: 'absolute',
-                width: '100%',
-                height: '100%',
-                zIndex: '9',
-                borderRadius: '4px'
+                boxShadow: `inset 0px 0px 0px 4px ${theme.palette.link01Active} !important`
+            }
+        },
+
+        raisedHand: {
+            '& .raised-hand-border': {
+                boxShadow: `inset 0px 0px 0px 2px ${theme.palette.warning02} !important`
             }
         }
     };
@@ -661,11 +676,16 @@ class Thumbnail extends Component<Props, State> {
             _participant,
             _currentLayout,
             _isAnyParticipantPinned,
+            _raisedHand,
             classes
         } = this.props;
 
         className += ` ${DISPLAY_MODE_TO_CLASS_NAME[displayMode]}`;
 
+        if (_raisedHand) {
+            className += ` ${classes.raisedHand}`;
+        }
+
         if (_currentLayout === LAYOUTS.TILE_VIEW) {
             if (!_isDominantSpeakerDisabled && _participant?.dominantSpeaker) {
                 className += ` ${classes.activeSpeaker} dominant-speaker`;
@@ -828,7 +848,8 @@ class Thumbnail extends Component<Props, State> {
                     </div>
                 )}
                 <ThumbnailAudioIndicator _audioTrack = { _audioTrack } />
-                <div className = 'active-speaker-indicator' />
+                <div className = { clsx(classes.borderIndicator, 'raised-hand-border') } />
+                <div className = { clsx(classes.borderIndicator, 'active-speaker-indicator') } />
             </span>
         );
     }
@@ -892,7 +913,6 @@ function _mapStateToProps(state, ownProps): Object {
     const { localFlipX } = state['features/base/settings'];
     const _isMobile = isMobileBrowser();
 
-
     switch (_currentLayout) {
     case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
     case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: {
@@ -948,6 +968,7 @@ function _mapStateToProps(state, ownProps): Object {
         _isVideoPlayable: id && isVideoPlayable(state, id),
         _localFlipX: Boolean(localFlipX),
         _participant: participant,
+        _raisedHand: hasRaisedHand(participant),
         _videoTrack,
         ...size
     };

react/features/participants-pane/components/native/RaisedHandIndicator.js

@@ -8,7 +8,7 @@ import styles from './styles';
 export const RaisedHandIndicator = () => (
     <View style = { styles.raisedHandIndicator }>
         <Icon
-            size = { 15 }
+            size = { 16 }
             src = { IconRaisedHandHollow }
             style = { styles.raisedHandIcon } />
     </View>

react/features/participants-pane/components/native/styles.js

@@ -195,7 +195,8 @@ export default {
 
     raisedHandIcon: {
         ...flexContent,
-        top: BaseTheme.spacing[1]
+        top: BaseTheme.spacing[1],
+        color: BaseTheme.palette.uiBackground
     },
 
     lobbyListContainer: {

react/features/participants-pane/components/web/RaisedHandIndicator.js

@@ -4,11 +4,12 @@ import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 
 import { Icon, IconRaisedHandHollow } from '../../../base/icons';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
 
 const useStyles = makeStyles(theme => {
     return {
         indicator: {
-            backgroundColor: theme.palette.warning01,
+            backgroundColor: theme.palette.warning02,
             borderRadius: `${theme.shape.borderRadius / 2}px`,
             height: '24px',
             width: '24px'
@@ -22,7 +23,8 @@ export const RaisedHandIndicator = () => {
     return (
         <div className = { styles.indicator }>
             <Icon
-                size = { 15 }
+                color = { BaseTheme.palette.uiBackground }
+                size = { 16 }
                 src = { IconRaisedHandHollow } />
         </div>
     );