From 8ed01ed4da0bcdb7571c1b3ae9a1d3a47bcbc507 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Thu, 26 May 2022 18:59:16 -0700
Subject: [PATCH] ../

First pass at the emoji picker
---
 controllers/emoji.go                          |  8 ++--
 models/emoji.go                               |  4 +-
 .../chat/ChatTextField/ChatTextField.tsx      | 18 +++----
 .../chat/ChatTextField/EmojiPicker.tsx        | 48 +++++++++++--------
 web/next.config.js                            |  2 +-
 web/package-lock.json                         | 45 ++++++++++++-----
 web/package.json                              |  2 +-
 7 files changed, 80 insertions(+), 47 deletions(-)

diff --git a/controllers/emoji.go b/controllers/emoji.go
index b95e279dc..11f8db7ef 100644
--- a/controllers/emoji.go
+++ b/controllers/emoji.go
@@ -14,8 +14,10 @@ import (
 	log "github.com/sirupsen/logrus"
 )
 
-var emojiCache = make([]models.CustomEmoji, 0)
-var emojiCacheTimestamp time.Time
+var (
+	emojiCache          = make([]models.CustomEmoji, 0)
+	emojiCacheTimestamp time.Time
+)
 
 // getCustomEmojiList returns a list of custom emoji either from the cache or from the emoji directory.
 func getCustomEmojiList() []models.CustomEmoji {
@@ -38,7 +40,7 @@ func getCustomEmojiList() []models.CustomEmoji {
 		for _, f := range files {
 			name := strings.TrimSuffix(f.Name(), path.Ext(f.Name()))
 			emojiPath := filepath.Join(config.EmojiDir, f.Name())
-			singleEmoji := models.CustomEmoji{Name: name, Emoji: emojiPath}
+			singleEmoji := models.CustomEmoji{Name: name, URL: emojiPath}
 			emojiCache = append(emojiCache, singleEmoji)
 		}
 
diff --git a/models/emoji.go b/models/emoji.go
index f2029f0b3..16ea6ae0e 100644
--- a/models/emoji.go
+++ b/models/emoji.go
@@ -2,6 +2,6 @@ package models
 
 // CustomEmoji represents an image that can be used in chat as a custom emoji.
 type CustomEmoji struct {
-	Name  string `json:"name"`
-	Emoji string `json:"emoji"`
+	Name string `json:"name"`
+	URL  string `json:"url"`
 }
diff --git a/web/components/chat/ChatTextField/ChatTextField.tsx b/web/components/chat/ChatTextField/ChatTextField.tsx
index 38859339e..d35ad1f8b 100644
--- a/web/components/chat/ChatTextField/ChatTextField.tsx
+++ b/web/components/chat/ChatTextField/ChatTextField.tsx
@@ -120,16 +120,17 @@ export default function ChatTextField(props: Props) {
 
   const handleChange = () => {};
 
-  const handleEmojiSelect = emoji => {
-    console.log(emoji);
-    if (!emoji.native) {
+  const handleEmojiSelect = e => {
+    ReactEditor.focus(editor);
+
+    if (e.url) {
       // Custom emoji
-      const { src } = emoji;
-      insertImage(editor, src);
+      const { url } = e;
+      insertImage(editor, url);
     } else {
       // Native emoji
-      const { native } = emoji;
-      Transforms.insertText(editor, native);
+      const { emoji } = e;
+      Transforms.insertText(editor, emoji);
     }
   };
 
@@ -153,6 +154,7 @@ export default function ChatTextField(props: Props) {
             renderElement={p => <Element {...p} />}
             placeholder="Chat message goes here..."
             style={{ width: '100%' }}
+            autoFocus
           />
         </Slate>
         <button
@@ -174,7 +176,7 @@ export default function ChatTextField(props: Props) {
         trigger="click"
         onVisibleChange={visible => setShowEmojis(visible)}
         visible={showEmojis}
-        placement="bottomLeft"
+        // placement="topRight"
       />
     </div>
   );
diff --git a/web/components/chat/ChatTextField/EmojiPicker.tsx b/web/components/chat/ChatTextField/EmojiPicker.tsx
index bfd1c4bfa..371f8cd94 100644
--- a/web/components/chat/ChatTextField/EmojiPicker.tsx
+++ b/web/components/chat/ChatTextField/EmojiPicker.tsx
@@ -1,6 +1,7 @@
-// import data from '@emoji-mart/data';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { createPicker } from 'picmo';
 
+const CUSTOM_EMOJI_URL = '/api/emoji';
 interface Props {
   // eslint-disable-next-line react/no-unused-prop-types
   onEmojiSelect: (emoji: string) => void;
@@ -8,28 +9,33 @@ interface Props {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default function EmojiPicker(props: Props) {
+  const [customEmoji, setCustomEmoji] = useState([]);
+  const { onEmojiSelect } = props;
   const ref = useRef();
 
-  // TODO: Pull this custom emoji data in from the emoji API.
-  // const custom = [
-  //   {
-  //     emojis: [
-  //       {
-  //         id: 'party_parrot',
-  //         name: 'Party Parrot',
-  //         keywords: ['dance', 'dancing'],
-  //         skins: [{ src: 'https://watch.owncast.online/img/emoji/bluntparrot.gif' }],
-  //       },
-  //     ],
-  //   },
-  // ];
+  const getCustomEmoji = async () => {
+    try {
+      const response = await fetch(CUSTOM_EMOJI_URL);
+      const emoji = await response.json();
+      setCustomEmoji(emoji);
+    } catch (e) {
+      console.error('cannot fetch custom emoji', e);
+    }
+  };
 
-  // TODO: Fix the emoji picker from throwing errors.
-  // useEffect(() => {
-  //   import('emoji-mart').then(EmojiMart => {
-  //     new EmojiMart.Picker({ ...props, data, ref });
-  //   });
-  // }, []);
+  // Fetch the custom emoji on component mount.
+  useEffect(() => {
+    getCustomEmoji();
+  }, []);
+
+  // Recreate the emoji picker when the custom emoji changes.
+  useEffect(() => {
+    const picker = createPicker({ rootElement: ref.current, custom: customEmoji });
+    picker.addEventListener('emoji:select', event => {
+      console.log('Emoji selected:', event.emoji);
+      onEmojiSelect(event);
+    });
+  }, [customEmoji]);
 
   return <div ref={ref} />;
 }
diff --git a/web/next.config.js b/web/next.config.js
index 56500b081..40a920da6 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -23,7 +23,7 @@ module.exports = withLess({
       },
       {
         source: '/img/:path*',
-        destination: 'http://localhost:8080/hls/:path*', // Proxy to Backend to work around CORS.
+        destination: 'http://localhost:8080/img/:path*', // Proxy to Backend to work around CORS.
       },
       {
         source: '/logo',
diff --git a/web/package-lock.json b/web/package-lock.json
index 7c3309a12..3aab6cbf0 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -18,11 +18,11 @@
         "chartkick": "4.1.1",
         "classnames": "2.3.1",
         "date-fns": "2.28.0",
-        "emoji-mart": "^5.0.0",
         "lodash": "4.17.21",
         "markdown-it": "12.3.2",
         "next": "^12.1.5",
         "next-with-less": "^2.0.5",
+        "picmo": "^5.1.0",
         "postcss-flexbugs-fixes": "^5.0.2",
         "prop-types": "15.8.1",
         "rc-overflow": "1.2.4",
@@ -16298,17 +16298,21 @@
         "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
-    "node_modules/emoji-mart": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.0.0.tgz",
-      "integrity": "sha512-4O75LxV/RPOrtC9+0qhHhfPgJgW/Kwc4zv15h190liC3vJ/5RVibIrnPlDZ0xqYx0bPVOy3W/QcDTZY+jq1qOw=="
-    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/emojibase": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/emojibase/-/emojibase-6.1.0.tgz",
+      "integrity": "sha512-1GkKJPXP6tVkYJHOBSJHoGOr/6uaDxZ9xJ6H7m6PfdGXTmQgbALHLWaVRY4Gi/qf5x/gT/NUXLPuSHYLqtLtrQ==",
+      "funding": {
+        "type": "ko-fi",
+        "url": "https://ko-fi.com/milesjohnson"
+      }
+    },
     "node_modules/emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -25569,6 +25573,17 @@
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
+    "node_modules/picmo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/picmo/-/picmo-5.1.0.tgz",
+      "integrity": "sha512-gbq6gih+GMC3A+IAZloz/0imSCyTB1Ea8BNDLOTKvThg++a4h1KIspTXQO2S/DHDoB1arDTzE6BLcUjuQxkiMw==",
+      "dependencies": {
+        "emojibase": "^6.1.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/joeattardi"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -44952,17 +44967,17 @@
       "dev": true,
       "peer": true
     },
-    "emoji-mart": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.0.0.tgz",
-      "integrity": "sha512-4O75LxV/RPOrtC9+0qhHhfPgJgW/Kwc4zv15h190liC3vJ/5RVibIrnPlDZ0xqYx0bPVOy3W/QcDTZY+jq1qOw=="
-    },
     "emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "emojibase": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/emojibase/-/emojibase-6.1.0.tgz",
+      "integrity": "sha512-1GkKJPXP6tVkYJHOBSJHoGOr/6uaDxZ9xJ6H7m6PfdGXTmQgbALHLWaVRY4Gi/qf5x/gT/NUXLPuSHYLqtLtrQ=="
+    },
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -52101,6 +52116,14 @@
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
+    "picmo": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/picmo/-/picmo-5.1.0.tgz",
+      "integrity": "sha512-gbq6gih+GMC3A+IAZloz/0imSCyTB1Ea8BNDLOTKvThg++a4h1KIspTXQO2S/DHDoB1arDTzE6BLcUjuQxkiMw==",
+      "requires": {
+        "emojibase": "^6.1.0"
+      }
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index 487f657fa..4831b2b94 100644
--- a/web/package.json
+++ b/web/package.json
@@ -22,11 +22,11 @@
     "chartkick": "4.1.1",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
-    "emoji-mart": "^5.0.0",
     "lodash": "4.17.21",
     "markdown-it": "12.3.2",
     "next": "^12.1.5",
     "next-with-less": "^2.0.5",
+    "picmo": "^5.1.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "prop-types": "15.8.1",
     "rc-overflow": "1.2.4",