mend

css/_emoji-icons.scss

@@ -0,0 +1,101 @@
+
+.emoji-icon-background {
+    background-size: contain;
+    background-position: 50%;
+    background-repeat: no-repeat;
+}
+.emoji-icon {
+    background-size: contain;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    position: relative;
+    display: inline-block;
+    width: 3em;
+    line-height: 3em;
+    z-index: 1000;
+}
+.emoji-icon:before {
+    content: "\00a0";
+}
+.emoji-icon-bomb {
+    background-image: url(../images/emojis/bomb.png);
+}
+.emoji-icon-bulb {
+    background-image: url(../images/emojis/bulb.png);
+}
+.emoji-icon-clap {
+    background-image: url(../images/emojis/clap.png);
+}
+.emoji-icon-fistbump {
+    background-image: url(../images/emojis/fistbump.png);
+}
+.emoji-icon-heart {
+    background-image: url(../images/emojis/heart.png);
+}
+.emoji-icon-highfive {
+    background-image: url(../images/emojis/highfive.png);
+}
+
+.emoji-icon-perfect {
+    background-image: url(../images/emojis/perfect.png);
+}
+
+.emoji-icon-sleep {
+    background-image: url(../images/emojis/sleep.png);
+}
+
+.emoji-icon-smiley1 {
+    background-image: url(../images/emojis/smiley1.png);
+}
+
+.emoji-icon-smiley2 {
+    background-image: url(../images/emojis/smiley2.png);
+}
+
+.emoji-icon-smiley3 {
+    background-image: url(../images/emojis/smiley3.png);
+}
+
+.emoji-icon-smiley4 {
+    background-image: url(../images/emojis/smiley4.png);
+}
+
+.emoji-icon-smiley5 {
+    background-image: url(../images/emojis/smiley5.png);
+}
+
+.emoji-icon-smiley6 {
+    background-image: url(../images/emojis/smiley6.png);
+}
+
+.emoji-icon-smiley7 {
+    background-image: url(../images/emojis/smiley7.png);
+}
+
+.emoji-icon-smiley8 {
+    background-image: url(../images/emojis/smiley8.png);
+}
+
+.emoji-icon-smiley9 {
+    background-image: url(../images/emojis/smiley9.png);
+}
+
+.emoji-icon-smiley10 {
+    background-image: url(../images/emojis/smiley10.png);
+}
+
+.emoji-icon-smiley11 {
+    background-image: url(../images/emojis/smiley11.png);
+}
+
+.emoji-icon-star {
+    background-image: url(../images/emojis/star.png);
+}
+
+.emoji-icon-thumbsdown {
+    background-image: url(../images/emojis/thumbsdown.png);
+}
+
+.emoji-icon-thumbsup {
+    background-image: url(../images/emojis/thumbsup.png);
+}

css/_videolayout_default.scss

@@ -517,6 +517,14 @@
     width: auto;
 }
 
+.emotionsCanvas {
+    bottom: 0;
+    height: 50%;
+    max-height: 200px;
+    position: absolute;
+    width: 100%;
+}
+
 #videoNotAvailableScreen {
     text-align: center;
     #avatarContainer {

css/main.scss

@@ -30,6 +30,8 @@
 
 @import 'flag-icon';
 
+@import 'emoji-icons';
+
 /* Modules BEGIN */
 
 @import 'dial-out';

package-lock.json

@@ -9683,6 +9683,11 @@
       "resolved": "https://registry.npmjs.org/react-addons-text-content/-/react-addons-text-content-0.0.4.tgz",
       "integrity": "sha1-0uJZ/clR0diQbAiQIAIQjc6HkuU="
     },
+    "react-animations": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-animations/-/react-animations-1.0.0.tgz",
+      "integrity": "sha512-ePPpVgdKnNEXm+LP1ww5s3n0JzebBw9QdRfxRqogzeg1PDIn6kf0pmvgeTeVZQXXpGmHImkIeTiaQR1O6xjntA=="
+    },
     "react-clone-referenced-element": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/react-clone-referenced-element/-/react-clone-referenced-element-1.0.1.tgz",

package.json

@@ -51,6 +51,7 @@
     "postis": "2.2.0",
     "prop-types": "15.6.0",
     "react": "16.2.0",
+    "react-animations": "^1.0.0",
     "react-dom": "16.2.0",
     "react-i18next": "4.8.0",
     "react-native": "0.51.0",

react/features/large-video/components/LargeVideo.web.js

@@ -6,6 +6,7 @@ import React, { Component } from 'react';
 import { Watermarks } from '../../base/react';
 import { VideoQualityLabel } from '../../video-quality';
 import { RecordingLabel } from '../../recording';
+import { ReactionsCanvas } from '../../reactions';
 
 declare var interfaceConfig: Object;
 
@@ -79,6 +80,7 @@ export default class LargeVideo extends Component<*> {
                 { this.props.hideVideoQualityLabel
                     ? null : <VideoQualityLabel /> }
                 <RecordingLabel />
+                <ReactionsCanvas />
             </div>
         );
     }

react/features/reactions/components/EmojiIcon.js

@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+import styled, { keyframes } from 'styled-components';
+import { merge, rollIn, zoomIn } from 'react-animations';
+
+const tadaFlip = merge(rollIn, zoomIn);
+
+const bounceAnimation = keyframes`${tadaFlip}`;
+
+const BouncySpan = styled.span`
+        animation: ${bounceAnimation} 2s;
+        animation-direction: alternate;
+    `;
+
+/**
+ * Implements a React {@link Component} to render an emoji icon.
+ */
+export default class EmojiIcon extends Component {
+    /**
+     * {@code Emoji}'s property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * The css style class name.
+         */
+        className: PropTypes.string,
+
+        /**
+         * The emoji name.
+         */
+        emojiName: PropTypes.string
+    };
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const iconClassName
+            = `emoji-icon emoji-icon-${this.props.emojiName}`;
+
+        return <BouncySpan className = { iconClassName } />;
+    }
+}
+

react/features/reactions/components/ReactionsCanvas.native.js

@@ -0,0 +1,44 @@
+/* @flow */
+
+import React, { Component } from 'react';
+import { View } from 'react-native';
+
+import EmojiIcon from './EmojiIcon';
+
+/**
+ * Base style for the {@code TintedView} component.
+ */
+const BASE_STYLE = {
+    alignItems: 'center',
+    bottom: 0,
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0
+};
+
+/**
+ * Implements a React {@link Component} which represents the large video (a.k.a.
+ * the conference participant who is on the local stage) on Web/React.
+ *
+ * @extends Component
+ */
+export default class ReactionsCanvas extends Component<*> {
+
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <View style = { BASE_STYLE }>
+                <EmojiIcon emojiName = 'thumbsup' />
+            </View>
+        );
+    }
+}
+

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

@@ -0,0 +1,31 @@
+/* @flow */
+
+import React, { Component } from 'react';
+
+import EmojiIcon from './EmojiIcon';
+
+
+/**
+ * Implements a React {@link Component} which represents the large video (a.k.a.
+ * the conference participant who is on the local stage) on Web/React.
+ *
+ * @extends Component
+ */
+export default class ReactionsCanvas extends Component<*> {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <div className = 'emotionsCanvas'>
+                <EmojiIcon
+                    emojiName = 'thumbsup' />
+            </div>
+        );
+    }
+}
+

react/features/reactions/components/index.js

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

react/features/reactions/components/styles.js

@@ -0,0 +1,12 @@
+import { createStyleSheet } from '../../base/styles';
+
+import { merge, tada, flip } from 'react-animations';
+
+const tadaFlip = merge(tada, flip);
+
+export default createStyleSheet({
+    bounce: {
+        animationName: tadaFlip,
+        animationDuration: '10s'
+    }
+});

react/features/reactions/index.js

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