Merge pull request #3554 from maunium/emoji-picker

Add full emoji picker for reactions

src/components/views/emojipicker/Category.js

@@ -0,0 +1,54 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import sdk from '../../../index';
+
+class Category extends React.PureComponent {
+    static propTypes = {
+        emojis: PropTypes.arrayOf(PropTypes.object).isRequired,
+        name: PropTypes.string.isRequired,
+        id: PropTypes.string.isRequired,
+        onMouseEnter: PropTypes.func.isRequired,
+        onMouseLeave: PropTypes.func.isRequired,
+        onClick: PropTypes.func.isRequired,
+        selectedEmojis: PropTypes.instanceOf(Set),
+    };
+
+    render() {
+        const { onClick, onMouseEnter, onMouseLeave, emojis, name, selectedEmojis } = this.props;
+        if (!emojis || emojis.length === 0) {
+            return null;
+        }
+
+        const Emoji = sdk.getComponent("emojipicker.Emoji");
+        return (
+            <section className="mx_EmojiPicker_category" data-category-id={this.props.id}>
+                <h2 className="mx_EmojiPicker_category_label">
+                    {name}
+                </h2>
+                <ul className="mx_EmojiPicker_list">
+                    {emojis.map(emoji => <Emoji key={emoji.hexcode} emoji={emoji} selectedEmojis={selectedEmojis}
+                        onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />)}
+                </ul>
+            </section>
+        );
+    }
+}
+
+export default Category;

src/components/views/emojipicker/Emoji.js

@@ -0,0 +1,45 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Emoji extends React.PureComponent {
+    static propTypes = {
+        onClick: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
+        emoji: PropTypes.object.isRequired,
+        selectedEmojis: PropTypes.instanceOf(Set),
+    };
+
+    render() {
+        const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
+        const isSelected = selectedEmojis && selectedEmojis.has(emoji.unicode);
+        return (
+            <li onClick={() => onClick(emoji)}
+                onMouseEnter={() => onMouseEnter(emoji)}
+                onMouseLeave={() => onMouseLeave(emoji)}
+                className="mx_EmojiPicker_item_wrapper">
+                <div className={`mx_EmojiPicker_item ${isSelected ? 'mx_EmojiPicker_item_selected' : ''}`}>
+                    {emoji.unicode}
+                </div>
+            </li>
+        );
+    }
+}
+
+export default Emoji;

src/components/views/emojipicker/EmojiPicker.js

@@ -0,0 +1,239 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import EMOJIBASE from 'emojibase-data/en/compact.json';
+
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+import * as recent from './recent';
+
+const EMOJIBASE_CATEGORY_IDS = [
+    "people", // smileys
+    "people", // actually people
+    "control", // modifiers and such, not displayed in picker
+    "nature",
+    "foods",
+    "places",
+    "activity",
+    "objects",
+    "symbols",
+    "flags",
+];
+
+const DATA_BY_CATEGORY = {
+    "people": [],
+    "nature": [],
+    "foods": [],
+    "places": [],
+    "activity": [],
+    "objects": [],
+    "symbols": [],
+    "flags": [],
+};
+const DATA_BY_EMOJI = {};
+
+EMOJIBASE.forEach(emoji => {
+    DATA_BY_EMOJI[emoji.unicode] = emoji;
+    const categoryId = EMOJIBASE_CATEGORY_IDS[emoji.group];
+    if (DATA_BY_CATEGORY.hasOwnProperty(categoryId)) {
+        DATA_BY_CATEGORY[categoryId].push(emoji);
+    }
+    // This is used as the string to match the query against when filtering emojis.
+    emoji.filterString = `${emoji.annotation}\n${emoji.shortcodes.join('\n')}}\n${emoji.emoticon || ''}`;
+});
+
+class EmojiPicker extends React.Component {
+    static propTypes = {
+        onChoose: PropTypes.func.isRequired,
+        selectedEmojis: PropTypes.instanceOf(Set),
+        showQuickReactions: PropTypes.bool,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            filter: "",
+            previewEmoji: null,
+        };
+
+        this.recentlyUsed = recent.get().map(unicode => DATA_BY_EMOJI[unicode]);
+        this.memoizedDataByCategory = {
+            recent: this.recentlyUsed,
+            ...DATA_BY_CATEGORY,
+        };
+
+        this.categories = [{
+            id: "recent",
+            name: _t("Frequently Used"),
+            enabled: this.recentlyUsed.length > 0,
+            visible: this.recentlyUsed.length > 0,
+            ref: React.createRef(),
+        }, {
+            id: "people",
+            name: _t("Smileys & People"),
+            enabled: true,
+            visible: true,
+            ref: React.createRef(),
+        }, {
+            id: "nature",
+            name: _t("Animals & Nature"),
+            enabled: true,
+            visible: false,
+            ref: React.createRef(),
+        }, {
+            id: "foods",
+            name: _t("Food & Drink"),
+            enabled: true,
+            visible: false,
+            ref: React.createRef(),
+        }, {
+            id: "activity",
+            name: _t("Activities"),
+            enabled: true,
+            visible: false,
+            ref: React.createRef(),
+        }, {
+            id: "places",
+            name: _t("Travel & Places"),
+            enabled: true,
+            visible: false,
+            ref: React.createRef(),
+        }, {
+            id: "objects",
+            name: _t("Objects"),
+            enabled: true,
+            visible: false,
+            ref: React.createRef(),
+        }, {
+            id: "symbols",
+            name: _t("Symbols"),
+            enabled: true,
+            visible: false,
+            ref: React.createRef(),
+        }, {
+            id: "flags",
+            name: _t("Flags"),
+            enabled: true,
+            visible: false,
+            ref: React.createRef(),
+        }];
+
+        this.bodyRef = React.createRef();
+
+        this.onChangeFilter = this.onChangeFilter.bind(this);
+        this.onHoverEmoji = this.onHoverEmoji.bind(this);
+        this.onHoverEmojiEnd = this.onHoverEmojiEnd.bind(this);
+        this.onClickEmoji = this.onClickEmoji.bind(this);
+        this.scrollToCategory = this.scrollToCategory.bind(this);
+        this.updateVisibility = this.updateVisibility.bind(this);
+    }
+
+    updateVisibility() {
+        const rect = this.bodyRef.current.getBoundingClientRect();
+        for (const cat of this.categories) {
+            const elem = this.bodyRef.current.querySelector(`[data-category-id="${cat.id}"]`);
+            if (!elem) {
+                cat.visible = false;
+                cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
+                continue;
+            }
+            const elemRect = elem.getBoundingClientRect();
+            const y = elemRect.y - rect.y;
+            const yEnd = elemRect.y + elemRect.height - rect.y;
+            cat.visible = y < rect.height && yEnd > 0;
+            // We update this here instead of through React to avoid re-render on scroll.
+            if (cat.visible) {
+                cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible");
+            } else {
+                cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
+            }
+        }
+    }
+
+    scrollToCategory(category) {
+        this.bodyRef.current.querySelector(`[data-category-id="${category}"]`).scrollIntoView();
+    }
+
+    onChangeFilter(filter) {
+        for (const cat of this.categories) {
+            let emojis;
+            // If the new filter string includes the old filter string, we don't have to re-filter the whole dataset.
+            if (filter.includes(this.state.filter)) {
+                emojis = this.memoizedDataByCategory[cat.id];
+            } else {
+                emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id];
+            }
+            emojis = emojis.filter(emoji => emoji.filterString.includes(filter));
+            this.memoizedDataByCategory[cat.id] = emojis;
+            cat.enabled = emojis.length > 0;
+            // The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...
+            cat.ref.current.disabled = !cat.enabled;
+        }
+        this.setState({ filter });
+        // Header underlines need to be updated, but updating requires knowing
+        // where the categories are, so we wait for a tick.
+        setTimeout(this.updateVisibility, 0);
+    }
+
+    onHoverEmoji(emoji) {
+        this.setState({
+            previewEmoji: emoji,
+        });
+    }
+
+    onHoverEmojiEnd(emoji) {
+        this.setState({
+            previewEmoji: null,
+        });
+    }
+
+    onClickEmoji(emoji) {
+        if (this.props.onChoose(emoji.unicode) !== false) {
+            recent.add(emoji.unicode);
+        }
+    }
+
+    render() {
+        const Header = sdk.getComponent("emojipicker.Header");
+        const Search = sdk.getComponent("emojipicker.Search");
+        const Category = sdk.getComponent("emojipicker.Category");
+        const Preview = sdk.getComponent("emojipicker.Preview");
+        const QuickReactions = sdk.getComponent("emojipicker.QuickReactions");
+        return (
+            <div className="mx_EmojiPicker">
+                <Header categories={this.categories} defaultCategory="recent" onAnchorClick={this.scrollToCategory}/>
+                <Search query={this.state.filter} onChange={this.onChangeFilter}/>
+                <div className="mx_EmojiPicker_body" ref={this.bodyRef} onScroll={this.updateVisibility}>
+                    {this.categories.map(category => (
+                        <Category key={category.id} id={category.id} name={category.name}
+                            emojis={this.memoizedDataByCategory[category.id]} onClick={this.onClickEmoji}
+                            onMouseEnter={this.onHoverEmoji} onMouseLeave={this.onHoverEmojiEnd}
+                            selectedEmojis={this.props.selectedEmojis} />
+                    ))}
+                </div>
+                {this.state.previewEmoji || !this.props.showQuickReactions
+                    ? <Preview emoji={this.state.previewEmoji} />
+                    : <QuickReactions onClick={this.onClickEmoji} selectedEmojis={this.props.selectedEmojis} /> }
+            </div>
+        );
+    }
+}
+
+export default EmojiPicker;

src/components/views/emojipicker/Header.js

@@ -0,0 +1,41 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Header extends React.PureComponent {
+    static propTypes = {
+        categories: PropTypes.arrayOf(PropTypes.object).isRequired,
+        onAnchorClick: PropTypes.func.isRequired,
+        refs: PropTypes.object,
+    };
+
+    render() {
+        return (
+            <nav className="mx_EmojiPicker_header">
+                {this.props.categories.map(category => (
+                    <button disabled={!category.enabled} key={category.id} ref={category.ref}
+                        className={`mx_EmojiPicker_anchor ${category.visible ? 'mx_EmojiPicker_anchor_visible' : ''}
+                            mx_EmojiPicker_anchor_${category.id}`}
+                        onClick={() => this.props.onAnchorClick(category.id)} title={category.name} />
+                ))}
+            </nav>
+        );
+    }
+}
+
+export default Header;

src/components/views/emojipicker/Preview.js

@@ -0,0 +1,49 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class Preview extends React.PureComponent {
+    static propTypes = {
+        emoji: PropTypes.object,
+    };
+
+    render() {
+        const {
+            unicode = "",
+            annotation = "",
+            shortcodes: [shortcode = ""]
+        } = this.props.emoji || {};
+        return (
+            <div className="mx_EmojiPicker_footer mx_EmojiPicker_preview">
+                <div className="mx_EmojiPicker_preview_emoji">
+                    {unicode}
+                </div>
+                <div className="mx_EmojiPicker_preview_text">
+                    <div className="mx_EmojiPicker_name mx_EmojiPicker_preview_name">
+                        {annotation}
+                    </div>
+                    <div className="mx_EmojiPicker_shortcode">
+                        {shortcode}
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default Preview;

src/components/views/emojipicker/QuickReactions.js

@@ -0,0 +1,84 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import EMOJIBASE from 'emojibase-data/en/compact.json';
+
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+const QUICK_REACTIONS = ["👍️", "👎️", "😄", "🎉", "😕", "❤️", "🚀", "👀"];
+EMOJIBASE.forEach(emoji => {
+    const index = QUICK_REACTIONS.indexOf(emoji.unicode);
+    if (index !== -1) {
+        QUICK_REACTIONS[index] = emoji;
+    }
+});
+
+class QuickReactions extends React.Component {
+    static propTypes = {
+        onClick: PropTypes.func.isRequired,
+        selectedEmojis: PropTypes.instanceOf(Set),
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            hover: null,
+        };
+        this.onMouseEnter = this.onMouseEnter.bind(this);
+        this.onMouseLeave = this.onMouseLeave.bind(this);
+    }
+
+    onMouseEnter(emoji) {
+        this.setState({
+            hover: emoji,
+        });
+    }
+
+    onMouseLeave() {
+        this.setState({
+            hover: null,
+        });
+    }
+
+    render() {
+        const Emoji = sdk.getComponent("emojipicker.Emoji");
+
+        return (
+            <section className="mx_EmojiPicker_footer mx_EmojiPicker_quick mx_EmojiPicker_category">
+                <h2 className="mx_EmojiPicker_quick_header mx_EmojiPicker_category_label">
+                    {!this.state.hover
+                        ? _t("Quick Reactions")
+                        : <React.Fragment>
+                            <span className="mx_EmojiPicker_name">{this.state.hover.annotation}</span>
+                            <span className="mx_EmojiPicker_shortcode">{this.state.hover.shortcodes[0]}</span>
+                        </React.Fragment>
+                    }
+                </h2>
+                <ul className="mx_EmojiPicker_list">
+                    {QUICK_REACTIONS.map(emoji => <Emoji
+                        key={emoji.hexcode} emoji={emoji} onClick={this.props.onClick}
+                        onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
+                        selectedEmojis={this.props.selectedEmojis}/>)}
+                </ul>
+            </section>
+        )
+    }
+}
+
+export default QuickReactions;

src/components/views/emojipicker/ReactionPicker.js

@@ -0,0 +1,120 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from "prop-types";
+import EmojiPicker from "./EmojiPicker";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+
+class ReactionPicker extends React.Component {
+    static propTypes = {
+        mxEvent: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+        closeMenu: PropTypes.func.isRequired,
+        reactions: PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            selectedEmojis: new Set(Object.keys(this.getReactions())),
+        };
+        this.onChoose = this.onChoose.bind(this);
+        this.onReactionsChange = this.onReactionsChange.bind(this);
+        this.addListeners();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.reactions !== this.props.reactions) {
+            this.addListeners();
+            this.onReactionsChange();
+        }
+    }
+
+    addListeners() {
+        if (this.props.reactions) {
+            this.props.reactions.on("Relations.add", this.onReactionsChange);
+            this.props.reactions.on("Relations.remove", this.onReactionsChange);
+            this.props.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.reactions) {
+            this.props.reactions.removeListener(
+                "Relations.add",
+                this.onReactionsChange,
+            );
+            this.props.reactions.removeListener(
+                "Relations.remove",
+                this.onReactionsChange,
+            );
+            this.props.reactions.removeListener(
+                "Relations.redaction",
+                this.onReactionsChange,
+            );
+        }
+    }
+
+    getReactions() {
+        if (!this.props.reactions) {
+            return {};
+        }
+        const userId = MatrixClientPeg.get().getUserId();
+        const myAnnotations = this.props.reactions.getAnnotationsBySender()[userId] || [];
+        return Object.fromEntries([...myAnnotations]
+            .filter(event => !event.isRedacted())
+            .map(event => [event.getRelation().key, event.getId()]));
+    };
+
+    onReactionsChange() {
+        this.setState({
+            selectedEmojis: new Set(Object.keys(this.getReactions()))
+        });
+    }
+
+    onChoose(reaction) {
+        this.componentWillUnmount();
+        this.props.closeMenu();
+        this.props.onFinished();
+        const myReactions = this.getReactions();
+        if (myReactions.hasOwnProperty(reaction)) {
+            MatrixClientPeg.get().redactEvent(
+                this.props.mxEvent.getRoomId(),
+                myReactions[reaction],
+            );
+            // Tell the emoji picker not to bump this in the more frequently used list.
+            return false;
+        } else {
+            MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId(), "m.reaction", {
+                "m.relates_to": {
+                    "rel_type": "m.annotation",
+                    "event_id": this.props.mxEvent.getId(),
+                    "key": reaction,
+                },
+            });
+            return true;
+        }
+    }
+
+    render() {
+        return <EmojiPicker onChoose={this.onChoose} selectedEmojis={this.state.selectedEmojis}
+            showQuickReactions={true}/>
+    }
+}
+
+export default ReactionPicker

src/components/views/emojipicker/Search.js

@@ -0,0 +1,50 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+class Search extends React.PureComponent {
+    static propTypes = {
+        query: PropTypes.string.isRequired,
+        onChange: PropTypes.func.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+        this.inputRef = React.createRef();
+    }
+
+    componentDidMount() {
+        // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a setTimeout
+        setTimeout(() => this.inputRef.current.focus(), 0);
+    }
+
+    render() {
+        return (
+            <div className="mx_EmojiPicker_search">
+                <input autoFocus type="text" placeholder="Search" value={this.props.query}
+                    onChange={ev => this.props.onChange(ev.target.value)} ref={this.inputRef} />
+                <button onClick={() => this.props.onChange("")}
+                    className={`mx_EmojiPicker_search_icon ${this.props.query ? "mx_EmojiPicker_search_clear" : ""}`}
+                    title={this.props.query ? _t("Cancel search") : _t("Search")} />
+            </div>
+        );
+    }
+}
+
+export default Search;

src/components/views/emojipicker/recent.js

@@ -0,0 +1,35 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const REACTION_COUNT = JSON.parse(window.localStorage.mx_reaction_count || '{}');
+let sorted = null;
+
+export function add(emoji) {
+    const [count] = REACTION_COUNT[emoji] || [0];
+    REACTION_COUNT[emoji] = [count + 1, Date.now()];
+    window.localStorage.mx_reaction_count = JSON.stringify(REACTION_COUNT);
+    sorted = null;
+}
+
+export function get(limit = 24) {
+    if (sorted === null) {
+        sorted = Object.entries(REACTION_COUNT)
+            .sort(([, [count1, date1]], [, [count2, date2]]) =>
+                count2 === count1 ? date2 - date1 : count2 - count1)
+            .map(([emoji, count]) => emoji);
+    }
+    return sorted.slice(0, limit);
+}

src/components/views/messages/MessageActionBar.js

@@ -25,6 +25,7 @@ import Modal from '../../../Modal';
 import { createMenu } from '../../structures/ContextualMenu';
 import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
 import {RoomContext} from "../../structures/RoomView";
+import MatrixClientPeg from '../../../MatrixClientPeg';
 
 export default class MessageActionBar extends React.PureComponent {
     static propTypes = {
@@ -84,31 +85,9 @@ export default class MessageActionBar extends React.PureComponent {
         });
     };
 
-    onOptionsClick = (ev) => {
-        const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
+    getMenuOptions = (ev) => {
+        const menuOptions = {};
         const buttonRect = ev.target.getBoundingClientRect();
-
-        const { getTile, getReplyThread } = this.props;
-        const tile = getTile && getTile();
-        const replyThread = getReplyThread && getReplyThread();
-
-        let e2eInfoCallback = null;
-        if (this.props.mxEvent.isEncrypted()) {
-            e2eInfoCallback = () => this.onCryptoClick();
-        }
-
-        const menuOptions = {
-            mxEvent: this.props.mxEvent,
-            chevronFace: "none",
-            permalinkCreator: this.props.permalinkCreator,
-            eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined,
-            collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined,
-            e2eInfoCallback: e2eInfoCallback,
-            onFinished: () => {
-                this.onFocusChange(false);
-            },
-        };
-
         // The window X and Y offsets are to adjust position when zoomed in to page
         const buttonRight = buttonRect.right + window.pageXOffset;
         const buttonBottom = buttonRect.bottom + window.pageYOffset;
@@ -122,23 +101,55 @@ export default class MessageActionBar extends React.PureComponent {
         } else {
             menuOptions.bottom = window.innerHeight - buttonTop;
         }
+        return menuOptions;
+    };
+
+    onReactClick = (ev) => {
+        const ReactionPicker = sdk.getComponent('emojipicker.ReactionPicker');
+
+        const menuOptions = {
+            ...this.getMenuOptions(ev),
+            mxEvent: this.props.mxEvent,
+            reactions: this.props.reactions,
+            chevronFace: "none",
+            onFinished: () => this.onFocusChange(false),
+        };
+
+        createMenu(ReactionPicker, menuOptions);
+
+        this.onFocusChange(true);
+    };
+
+    onOptionsClick = (ev) => {
+        const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
+
+        const { getTile, getReplyThread } = this.props;
+        const tile = getTile && getTile();
+        const replyThread = getReplyThread && getReplyThread();
+
+        let e2eInfoCallback = null;
+        if (this.props.mxEvent.isEncrypted()) {
+            e2eInfoCallback = () => this.onCryptoClick();
+        }
+
+        const menuOptions = {
+            ...this.getMenuOptions(ev),
+            mxEvent: this.props.mxEvent,
+            chevronFace: "none",
+            permalinkCreator: this.props.permalinkCreator,
+            eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined,
+            collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined,
+            e2eInfoCallback: e2eInfoCallback,
+            onFinished: () => {
+                this.onFocusChange(false);
+            },
+        };
 
         createMenu(MessageContextMenu, menuOptions);
 
         this.onFocusChange(true);
     };
 
-    renderReactButton() {
-        const ReactMessageAction = sdk.getComponent('messages.ReactMessageAction');
-        const { mxEvent, reactions } = this.props;
-
-        return <ReactMessageAction
-            mxEvent={mxEvent}
-            reactions={reactions}
-            onFocusChange={this.onFocusChange}
-        />;
-    }
-
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
@@ -148,7 +159,11 @@ export default class MessageActionBar extends React.PureComponent {
 
         if (isContentActionable(this.props.mxEvent)) {
             if (this.context.room.canReact) {
-                reactButton = this.renderReactButton();
+                reactButton = <AccessibleButton
+                    className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton"
+                    title={_t("React")}
+                    onClick={this.onReactClick}
+                />;
             }
             if (this.context.room.canReply) {
                 replyButton = <AccessibleButton

src/components/views/messages/ReactMessageAction.js

@@ -1,97 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import sdk from '../../../index';
-
-export default class ReactMessageAction extends React.PureComponent {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired,
-        // The Relations model from the JS SDK for reactions to `mxEvent`
-        reactions: PropTypes.object,
-        onFocusChange: PropTypes.func,
-    }
-
-    constructor(props) {
-        super(props);
-
-        if (props.reactions) {
-            props.reactions.on("Relations.add", this.onReactionsChange);
-            props.reactions.on("Relations.remove", this.onReactionsChange);
-            props.reactions.on("Relations.redaction", this.onReactionsChange);
-        }
-    }
-
-    onFocusChange = (focused) => {
-        if (!this.props.onFocusChange) {
-            return;
-        }
-        this.props.onFocusChange(focused);
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.reactions !== this.props.reactions) {
-            this.props.reactions.on("Relations.add", this.onReactionsChange);
-            this.props.reactions.on("Relations.remove", this.onReactionsChange);
-            this.props.reactions.on("Relations.redaction", this.onReactionsChange);
-            this.onReactionsChange();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.props.reactions) {
-            this.props.reactions.removeListener(
-                "Relations.add",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.remove",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.redaction",
-                this.onReactionsChange,
-            );
-        }
-    }
-
-    onReactionsChange = () => {
-        // Force a re-render of the tooltip because a change in the reactions
-        // set means the event tile's layout may have changed and possibly
-        // altered the location where the tooltip should be shown.
-        this.forceUpdate();
-    }
-
-    render() {
-        const ReactionsQuickTooltip = sdk.getComponent('messages.ReactionsQuickTooltip');
-        const InteractiveTooltip = sdk.getComponent('elements.InteractiveTooltip');
-        const { mxEvent, reactions } = this.props;
-
-        const content = <ReactionsQuickTooltip
-            mxEvent={mxEvent}
-            reactions={reactions}
-        />;
-
-        return <InteractiveTooltip
-            content={content}
-            onVisibilityChange={this.onFocusChange}
-        >
-            <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton" />
-        </InteractiveTooltip>;
-    }
-}

src/components/views/messages/ReactionTooltipButton.js

@@ -1,68 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import MatrixClientPeg from '../../../MatrixClientPeg';
-
-export default class ReactionTooltipButton extends React.PureComponent {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired,
-        // The reaction content / key / emoji
-        content: PropTypes.string.isRequired,
-        title: PropTypes.string,
-        // A possible Matrix event if the current user has voted for this type
-        myReactionEvent: PropTypes.object,
-    };
-
-    onClick = (ev) => {
-        const { mxEvent, myReactionEvent, content } = this.props;
-        if (myReactionEvent) {
-            MatrixClientPeg.get().redactEvent(
-                mxEvent.getRoomId(),
-                myReactionEvent.getId(),
-            );
-        } else {
-            MatrixClientPeg.get().sendEvent(mxEvent.getRoomId(), "m.reaction", {
-                "m.relates_to": {
-                    "rel_type": "m.annotation",
-                    "event_id": mxEvent.getId(),
-                    "key": content,
-                },
-            });
-        }
-    }
-
-    render() {
-        const { content, myReactionEvent } = this.props;
-
-        const classes = classNames({
-            mx_ReactionTooltipButton: true,
-            mx_ReactionTooltipButton_selected: !!myReactionEvent,
-        });
-
-        return <span className={classes}
-            data-key={content}
-            title={this.props.title}
-            aria-hidden={true}
-            onClick={this.onClick}
-        >
-            {content}
-        </span>;
-    }
-}

src/components/views/messages/ReactionsQuickTooltip.js

@@ -1,195 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { _t } from '../../../languageHandler';
-import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import { unicodeToShortcode } from '../../../HtmlUtils';
-
-export default class ReactionsQuickTooltip extends React.PureComponent {
-    static propTypes = {
-        mxEvent: PropTypes.object.isRequired,
-        // The Relations model from the JS SDK for reactions to `mxEvent`
-        reactions: PropTypes.object,
-    };
-
-    constructor(props) {
-        super(props);
-
-        if (props.reactions) {
-            props.reactions.on("Relations.add", this.onReactionsChange);
-            props.reactions.on("Relations.remove", this.onReactionsChange);
-            props.reactions.on("Relations.redaction", this.onReactionsChange);
-        }
-
-        this.state = {
-            hoveredItem: null,
-            myReactions: this.getMyReactions(),
-        };
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.reactions !== this.props.reactions) {
-            this.props.reactions.on("Relations.add", this.onReactionsChange);
-            this.props.reactions.on("Relations.remove", this.onReactionsChange);
-            this.props.reactions.on("Relations.redaction", this.onReactionsChange);
-            this.onReactionsChange();
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.props.reactions) {
-            this.props.reactions.removeListener(
-                "Relations.add",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.remove",
-                this.onReactionsChange,
-            );
-            this.props.reactions.removeListener(
-                "Relations.redaction",
-                this.onReactionsChange,
-            );
-        }
-    }
-
-    onReactionsChange = () => {
-        this.setState({
-            myReactions: this.getMyReactions(),
-        });
-    }
-
-    getMyReactions() {
-        const reactions = this.props.reactions;
-        if (!reactions) {
-            return null;
-        }
-        const userId = MatrixClientPeg.get().getUserId();
-        const myReactions = reactions.getAnnotationsBySender()[userId];
-        if (!myReactions) {
-            return null;
-        }
-        return [...myReactions.values()];
-    }
-
-    onMouseOver = (ev) => {
-        const { key } = ev.target.dataset;
-        const item = this.items.find(({ content }) => content === key);
-        this.setState({
-            hoveredItem: item,
-        });
-    }
-
-    onMouseOut = (ev) => {
-        this.setState({
-            hoveredItem: null,
-        });
-    }
-
-    get items() {
-        return [
-            {
-                content: "👍",
-                title: _t("Agree"),
-            },
-            {
-                content: "👎",
-                title: _t("Disagree"),
-            },
-            {
-                content: "😄",
-                title: _t("Happy"),
-            },
-            {
-                content: "🎉",
-                title: _t("Party Popper"),
-            },
-            {
-                content: "😕",
-                title: _t("Confused"),
-            },
-            {
-                content: "❤️",
-                title: _t("Heart"),
-            },
-            {
-                content: "🚀",
-                title: _t("Rocket"),
-            },
-            {
-                content: "👀",
-                title: _t("Eyes"),
-            },
-        ];
-    }
-
-    render() {
-        const { mxEvent } = this.props;
-        const { myReactions, hoveredItem } = this.state;
-        const ReactionTooltipButton = sdk.getComponent('messages.ReactionTooltipButton');
-
-        const buttons = this.items.map(({ content, title }) => {
-            const myReactionEvent = myReactions && myReactions.find(mxEvent => {
-                if (mxEvent.isRedacted()) {
-                    return false;
-                }
-                return mxEvent.getRelation().key === content;
-            });
-
-            return <ReactionTooltipButton
-                key={content}
-                content={content}
-                title={title}
-                mxEvent={mxEvent}
-                myReactionEvent={myReactionEvent}
-            />;
-        });
-
-        let label = " "; // non-breaking space to keep layout the same when empty
-        if (hoveredItem) {
-            const { content, title } = hoveredItem;
-
-            let shortcodeLabel;
-            const shortcode = unicodeToShortcode(content);
-            if (shortcode) {
-                shortcodeLabel = <span className="mx_ReactionsQuickTooltip_shortcode">
-                    {shortcode}
-                </span>;
-            }
-
-            label = <div className="mx_ReactionsQuickTooltip_label">
-                <span className="mx_ReactionsQuickTooltip_title">
-                    {title}
-                </span>
-                {shortcodeLabel}
-            </div>;
-        }
-
-        return <div className="mx_ReactionsQuickTooltip"
-            onMouseOver={this.onMouseOver}
-            onMouseOut={this.onMouseOut}
-        >
-            <div className="mx_ReactionsQuickTooltip_buttons">
-                {buttons}
-            </div>
-            {label}
-        </div>;
-    }
-}

src/i18n/strings/en_EN.json

@@ -1836,5 +1836,17 @@
     "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.": "If you didn't remove the recovery method, an attacker may be trying to access your account. Change your account password and set a new recovery method immediately in Settings.",
     "Failed to set direct chat tag": "Failed to set direct chat tag",
     "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
-    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room"
+    "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room",
+    "Quick Reactions": "Quick Reactions",
+    "Frequently Used": "Frequently Used",
+    "Smileys & People": "Smileys & People",
+    "Animals & Nature": "Animals & Nature",
+    "Food & Drink": "Food & Drink",
+    "Activities": "Activities",
+    "Travel & Places": "Travel & Places",
+    "Objects": "Objects",
+    "Symbols": "Symbols",
+    "Flags": "Flags",
+    "React": "React",
+    "Cancel search": "Cancel search"
 }