../
First pass at the emoji picker
This commit is contained in:
Gabe Kangas
parent
1d213b71d4
commit
8ed01ed4da
@ -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)
|
||||
}
|
||||
|
||||
|
||||
@ -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"`
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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} />;
|
||||
}
|
||||
|
||||
@ -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',
|
||||
|
||||
45
web/package-lock.json
generated
45
web/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user