fix(highlight) implement custom notification for highlight start recording (#11217)

react/features/recording/components/Recording/AbstractHighlightButton.js

@@ -44,7 +44,7 @@ export type Props = {
  */
 export default class AbstractHighlightButton<P: Props> extends Component<P> {
     /**
-     * Initializes a new AbstractVideoTrack instance.
+     * Initializes a new AbstractHighlightButton instance.
      *
      * @param {Object} props - The read-only properties with which the new
      * instance is to be initialized.

react/features/recording/components/Recording/web/HighlightButton.js

@@ -3,12 +3,14 @@
 import { withStyles } from '@material-ui/core';
 import React from 'react';
 
+import { openDialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { IconHighlight } from '../../../../base/icons';
 import { Label } from '../../../../base/label';
 import { connect } from '../../../../base/redux';
 import { Tooltip } from '../../../../base/tooltip';
 import BaseTheme from '../../../../base/ui/components/BaseTheme';
+import { StartRecordingDialog } from '../../../components';
 import AbstractHighlightButton, {
     _abstractMapStateToProps,
     type Props as AbstractProps
@@ -28,6 +30,17 @@ type Props = AbstractProps & {
     _visible: boolean,
 };
 
+/**
+ * The type of the React {@code Component} state of {@link HighlightButton}.
+ */
+ type State = {
+
+    /**
+     * Whether the notification which prompts for starting recording is open is not.
+     */
+    isNotificationOpen: boolean
+};
+
 /**
  * Creates the styles for the component.
  *
@@ -37,13 +50,36 @@ type Props = AbstractProps & {
  */
 const styles = theme => {
     return {
-        regular: {
+        container: {
-            background: theme.palette.field02,
+            position: 'relative'
-            margin: '0 4px 4px 4px'
         },
         disabled: {
             background: theme.palette.text02,
             margin: '0 4px 4px 4px'
+        },
+        regular: {
+            background: theme.palette.field02,
+            margin: '0 4px 4px 4px'
+        },
+        highlightNotification: {
+            backgroundColor: theme.palette.field02,
+            borderRadius: '6px',
+            boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.25)',
+            boxSizing: 'border-box',
+            color: theme.palette.uiBackground,
+            fontSize: '14px',
+            fontWeight: '400',
+            left: '4px',
+            padding: '16px',
+            position: 'absolute',
+            top: '32px',
+            width: 320
+        },
+        highlightNotificationButton: {
+            color: theme.palette.field01Focus,
+            cursor: 'pointer',
+            fontWeight: '600',
+            marginTop: '8px'
         }
     };
 };
@@ -52,7 +88,82 @@ const styles = theme => {
  * React {@code Component} responsible for displaying an action that
  * allows users to highlight a meeting moment.
  */
-export class HighlightButton extends AbstractHighlightButton<Props> {
+export class HighlightButton extends AbstractHighlightButton<Props, State> {
+    /**
+     * Initializes a new HighlightButton instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            isNotificationOpen: false
+        };
+
+        this._onOpenDialog = this._onOpenDialog.bind(this);
+        this._onWindowClickListener = this._onWindowClickListener.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidMount()}.
+     *
+     * @inheritdoc
+     */
+    componentDidMount() {
+        window.addEventListener('click', this._onWindowClickListener);
+    }
+
+    /**
+     * Implements React's {@link Component#componentWillUnmount()}.
+     *
+     * @inheritdoc
+     */
+    componentWillUnmount() {
+        window.removeEventListener('click', this._onWindowClickListener);
+    }
+
+    /**
+    * Handles clicking / pressing the start recording button.
+    *
+    * @returns {void}
+    */
+    _onOpenDialog() {
+        this.props.dispatch(openDialog(StartRecordingDialog));
+    }
+
+    /**
+    * Handles clicking / pressing the highlight button.
+    *
+    * @override
+    * @param {Event} e - The click event.
+    * @returns {void}
+    */
+    _onClick(e) {
+        e.stopPropagation();
+
+        const { _disabled } = this.props;
+
+        if (_disabled) {
+            this.setState({
+                isNotificationOpen: true
+            });
+        } else {
+            super._onClick();
+        }
+    }
+
+    /**
+     * Window click event listener.
+     *
+     * @returns {void}
+     */
+    _onWindowClickListener() {
+        this.setState({
+            isNotificationOpen: false
+        });
+    }
 
     /**
      * Implements React's {@link Component#render()}.
@@ -77,16 +188,28 @@ export class HighlightButton extends AbstractHighlightButton<Props> {
         const tooltipKey = _disabled ? 'recording.highlightMomentDisabled' : 'recording.highlightMoment';
 
         return (
-            <Tooltip
+            <div className = { classes.container }>
-                content = { t(tooltipKey) }
+                <Tooltip
-                position = { 'bottom' }>
+                    content = { t(tooltipKey) }
-                <Label
+                    position = { 'bottom' }>
-                    className = { className }
+                    <Label
-                    icon = { IconHighlight }
+                        className = { className }
-                    iconColor = { _disabled ? BaseTheme.palette.text03 : BaseTheme.palette.field01 }
+                        icon = { IconHighlight }
-                    id = 'highlightMeetingLabel'
+                        iconColor = { _disabled ? BaseTheme.palette.text03 : BaseTheme.palette.field01 }
-                    onClick = { this._onClick } />
+                        id = 'highlightMeetingLabel'
-            </Tooltip>
+                        onClick = { this._onClick } />
+                </Tooltip>
+                {this.state.isNotificationOpen && (
+                    <div className = { classes.highlightNotification }>
+                        {t('recording.highlightMomentDisabled')}
+                        <div
+                            className = { classes.highlightNotificationButton }
+                            onClick = { this._onOpenDialog }>
+                            {t('localRecording.start')}
+                        </div>
+                    </div>
+                )}
+            </div>
         );
     }
 }