Hollow Web reactions buttons

css/_reactions.scss

@@ -0,0 +1,20 @@
+.reactions-dialog {
+    .reactions-dialog-title {
+        margin-bottom: 10px;
+    }
+
+    .reactions-dialog-contents {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        padding: 10px;
+        min-width: 250px;
+    }
+
+    .reactions-dialog-cell {
+        display: inline;
+        height: 50px;
+        width: 50px;
+    }
+}

css/main.scss

@@ -75,5 +75,6 @@
 @import 'unsupported-browser/main';
 @import 'modals/invite/add-people';
 @import 'vertical_filmstrip_overrides';
+@import 'reactions';
 
 /* Modules END */

interface_config.js

@@ -43,7 +43,7 @@ var interfaceConfig = {
         'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup',
 
         // extended toolbar
-        'profile', 'contacts', 'info', 'chat', 'recording', 'etherpad', 'sharedvideo', 'settings', 'raisehand', 'videoquality', 'filmstrip' ],
+        'profile', 'contacts', 'info', 'chat', 'recording', 'etherpad', 'sharedvideo', 'settings', 'raisehand', 'videoquality', 'reactions', 'filmstrip' ],
 
     /**
      * Main Toolbar Buttons

react/features/reactions/components/ReactionsDialog.web.js

@@ -0,0 +1,78 @@
+// @flow
+
+import React, { Component } from 'react';
+
+type Props = {
+    onClose: Function
+};
+
+/**
+ * The list of supported reactions (i.e. reaction buttons).
+ */
+const REACTIONS = [
+];
+
+// FIXME Pretend there's a list of supported reactions (i.e. reaction buttons).
+for (let i = 1; i < 21; ++i) {
+    REACTIONS.push(`smiley${i}`);
+}
+
+/**
+ * Represents the dialog in the terms of {@link ToolbarButtonWithDialog} which
+ * renders the list of supported reactions (i.e. reaction buttons).
+ */
+export default class ReactionsDialog extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {React$Element}
+     */
+    render() {
+        return (
+            <div className = 'reactions-dialog'>
+                <h3 className = 'reactions-dialog-title'>
+                    Reactions
+                </h3>
+                <div className = 'reactions-dialog-contents'>
+                    { this._renderContents() }
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * Handles the click on a reaction (button).
+     *
+     * @param {*} reaction - The reaction (button) which was clicked.
+     * @returns {void}
+     */
+    _onClick(reaction) { // eslint-disable-line no-unused-vars
+        // Close this ReactionsDialog.
+        this.props.onClose();
+    }
+
+    /**
+     * Renders the contents of this ReactionsDialog minus its title.
+     *
+     * @returns {React$Node}
+     */
+    _renderContents() {
+        const contents = [];
+
+        for (const reaction of REACTIONS) {
+            /* eslint-disable react/jsx-no-bind */
+
+            contents.push(
+                <img
+                    className = 'reactions-dialog-cell'
+                    onClick = { this._onClick.bind(this, reaction) }
+                    src = { `images/smileys/${reaction}.svg` } />
+            );
+
+            /* eslint-enable react/jsx-no-bind */
+        }
+
+        return contents;
+    }
+}

react/features/reactions/components/ReactionsToolbarButton.web.js

@@ -0,0 +1,45 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import { ToolbarButtonWithDialog } from '../../toolbox';
+
+import ReactionsDialog from './ReactionsDialog';
+
+type Props = {
+    tooltipPosition: *
+};
+
+/**
+ * The {@code ToolbarButton} configuration which describes how
+ * {@link ReactionsToolbarButton} is to be rendered (by default).
+ *
+ * @type {object}
+ */
+const DEFAULT_BUTTON_CONFIGURATION = {
+    buttonName: 'reactions',
+    classNames: [ 'button', 'icon-star-full' ],
+    enabled: true,
+    id: 'toolbar_button_reactions'
+};
+
+/**
+ * Implements the Web {@code ToolbarButton} which shows the dialog with the list
+ * of supported reactions (i.e. reaction buttons).
+ */
+export default class ReactionsToolbarButton extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <ToolbarButtonWithDialog
+                button = { DEFAULT_BUTTON_CONFIGURATION }
+                content = { ReactionsDialog }
+                tooltipPosition = { this.props.tooltipPosition } />
+        );
+    }
+}

react/features/reactions/components/index.js

@@ -0,0 +1 @@
+export { default as ReactionsToolbarButton } from './ReactionsToolbarButton';

react/features/reactions/index.js

@@ -0,0 +1 @@
+export * from './components';

react/features/toolbox/defaultToolbarButtons.web.js

@@ -13,6 +13,7 @@ import {
 import { ParticipantCounter } from '../contact-list';
 import { openDeviceSelectionDialog } from '../device-selection';
 import { InfoDialogButton, openInviteDialog } from '../invite';
+import { ReactionsToolbarButton } from '../reactions';
 import UIEvents from '../../../service/UI/UIEvents';
 import { VideoQualityButton } from '../video-quality';
 
@@ -435,6 +436,10 @@ export default function getDefaultButtons() {
             tooltipKey: 'toolbar.raiseHand'
         },
 
+        reactions: {
+            component: ReactionsToolbarButton
+        },
+
         /**
          * The descriptor of the recording toolbar button. Requires additional
          * initialization in the recording module.

react/features/toolbox/functions.web.js

@@ -25,6 +25,17 @@ export function getDefaultToolboxButtons(buttonHandlers: Object): Object {
 
     if (typeof interfaceConfig !== 'undefined'
             && interfaceConfig.TOOLBAR_BUTTONS) {
+        // FIXME Force (the display of) specific toolbar buttons in order to
+        // avoid the necessity to have them in interfaceConfig.
+        const FORCED_TOOLBAR_BUTTONS = [
+            'reactions'
+        ];
+
+        for (const forced of FORCED_TOOLBAR_BUTTONS) {
+            if (interfaceConfig.TOOLBAR_BUTTONS.indexOf(forced) === -1) {
+                interfaceConfig.TOOLBAR_BUTTONS.push(forced);
+            }
+        }
 
         toolbarButtons
             = interfaceConfig.TOOLBAR_BUTTONS.reduce(

react/features/video-quality/components/VideoQualityButton.web.js

@@ -25,7 +25,7 @@ const DEFAULT_BUTTON_CONFIGURATION = {
  *
  * @extends Component
  */
-class VideoQualityButton extends Component {
+export default class VideoQualityButton extends Component {
     /**
      * {@code VideoQualityButton}'s property types.
      *
@@ -54,5 +54,3 @@ class VideoQualityButton extends Component {
         );
     }
 }
-
-export default VideoQualityButton;