diff --git a/css/_emoji-icons.scss b/css/_emoji-icons.scss new file mode 100644 index 000000000..9713d3c6b --- /dev/null +++ b/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); +} diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 6595286a8..5ada31426 100644 --- a/css/_videolayout_default.scss +++ b/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 { diff --git a/css/main.scss b/css/main.scss index 1ead560dc..039088ad0 100644 --- a/css/main.scss +++ b/css/main.scss @@ -30,6 +30,8 @@ @import 'flag-icon'; +@import 'emoji-icons'; + /* Modules BEGIN */ @import 'dial-out'; diff --git a/images/emojis/bomb.png b/images/emojis/bomb.png new file mode 100755 index 000000000..4c833e975 Binary files /dev/null and b/images/emojis/bomb.png differ diff --git a/images/emojis/bulb.png b/images/emojis/bulb.png new file mode 100755 index 000000000..408e0fef4 Binary files /dev/null and b/images/emojis/bulb.png differ diff --git a/images/emojis/clap.png b/images/emojis/clap.png new file mode 100755 index 000000000..5683995f1 Binary files /dev/null and b/images/emojis/clap.png differ diff --git a/images/emojis/fistbump.png b/images/emojis/fistbump.png new file mode 100755 index 000000000..697997a83 Binary files /dev/null and b/images/emojis/fistbump.png differ diff --git a/images/emojis/heart.png b/images/emojis/heart.png new file mode 100755 index 000000000..add7a5de0 Binary files /dev/null and b/images/emojis/heart.png differ diff --git a/images/emojis/highfive.png b/images/emojis/highfive.png new file mode 100755 index 000000000..82a45d296 Binary files /dev/null and b/images/emojis/highfive.png differ diff --git a/images/emojis/perfect.png b/images/emojis/perfect.png new file mode 100755 index 000000000..e93bb1b1d Binary files /dev/null and b/images/emojis/perfect.png differ diff --git a/images/emojis/sleep.png b/images/emojis/sleep.png new file mode 100755 index 000000000..9e1ab21bc Binary files /dev/null and b/images/emojis/sleep.png differ diff --git a/images/emojis/smiley1.png b/images/emojis/smiley1.png new file mode 100755 index 000000000..48bd35e5b Binary files /dev/null and b/images/emojis/smiley1.png differ diff --git a/images/emojis/smiley10.png b/images/emojis/smiley10.png new file mode 100755 index 000000000..a6d73884f Binary files /dev/null and b/images/emojis/smiley10.png differ diff --git a/images/emojis/smiley11.png b/images/emojis/smiley11.png new file mode 100755 index 000000000..7df766087 Binary files /dev/null and b/images/emojis/smiley11.png differ diff --git a/images/emojis/smiley2.png b/images/emojis/smiley2.png new file mode 100755 index 000000000..cd81753f0 Binary files /dev/null and b/images/emojis/smiley2.png differ diff --git a/images/emojis/smiley3.png b/images/emojis/smiley3.png new file mode 100755 index 000000000..857e1be05 Binary files /dev/null and b/images/emojis/smiley3.png differ diff --git a/images/emojis/smiley4.png b/images/emojis/smiley4.png new file mode 100755 index 000000000..2c8b71100 Binary files /dev/null and b/images/emojis/smiley4.png differ diff --git a/images/emojis/smiley5.png b/images/emojis/smiley5.png new file mode 100755 index 000000000..70240ea5b Binary files /dev/null and b/images/emojis/smiley5.png differ diff --git a/images/emojis/smiley6.png b/images/emojis/smiley6.png new file mode 100755 index 000000000..b22b35c5a Binary files /dev/null and b/images/emojis/smiley6.png differ diff --git a/images/emojis/smiley7.png b/images/emojis/smiley7.png new file mode 100755 index 000000000..46b8fa023 Binary files /dev/null and b/images/emojis/smiley7.png differ diff --git a/images/emojis/smiley8.png b/images/emojis/smiley8.png new file mode 100755 index 000000000..22bf80de0 Binary files /dev/null and b/images/emojis/smiley8.png differ diff --git a/images/emojis/smiley9.png b/images/emojis/smiley9.png new file mode 100755 index 000000000..3819f5fda Binary files /dev/null and b/images/emojis/smiley9.png differ diff --git a/images/emojis/star.png b/images/emojis/star.png new file mode 100755 index 000000000..d00c34d2d Binary files /dev/null and b/images/emojis/star.png differ diff --git a/images/emojis/thumbsdown.png b/images/emojis/thumbsdown.png new file mode 100755 index 000000000..892f5cf1e Binary files /dev/null and b/images/emojis/thumbsdown.png differ diff --git a/images/emojis/thumbsup.png b/images/emojis/thumbsup.png new file mode 100755 index 000000000..f4bafe3cc Binary files /dev/null and b/images/emojis/thumbsup.png differ diff --git a/package-lock.json b/package-lock.json index 57482989c..4324c2cf3 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 2623bfc41..e54de2f84 100644 --- a/package.json +++ b/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", diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js index dab7eba8f..c43435478 100644 --- a/react/features/large-video/components/LargeVideo.web.js +++ b/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 : } + ); } diff --git a/react/features/reactions/components/EmojiIcon.js b/react/features/reactions/components/EmojiIcon.js new file mode 100644 index 000000000..f9a2524fc --- /dev/null +++ b/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 ; + } +} + diff --git a/react/features/reactions/components/ReactionsCanvas.native.js b/react/features/reactions/components/ReactionsCanvas.native.js new file mode 100644 index 000000000..d31700757 --- /dev/null +++ b/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 ( + + + + ); + } +} + diff --git a/react/features/reactions/components/ReactionsCanvas.web.js b/react/features/reactions/components/ReactionsCanvas.web.js new file mode 100644 index 000000000..29bd476de --- /dev/null +++ b/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 ( +
+ +
+ ); + } +} + diff --git a/react/features/reactions/components/index.js b/react/features/reactions/components/index.js index eb7b8d570..d5026aec7 100644 --- a/react/features/reactions/components/index.js +++ b/react/features/reactions/components/index.js @@ -1 +1,2 @@ export { default as ReactionsToolbarButton } from './ReactionsToolbarButton'; +export { default as ReactionsCanvas } from './ReactionsCanvas'; diff --git a/react/features/reactions/components/styles.js b/react/features/reactions/components/styles.js new file mode 100644 index 000000000..ed24a4508 --- /dev/null +++ b/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' + } +});