pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

../ 

First pass at the emoji picker
pull/2032/head
Gabe Kangas 3 years ago
parent
1d213b71d4
commit
8ed01ed4da
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
7 changed files with 80 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      controllers/emoji.go
  2. 4
      models/emoji.go
  3. 18
      web/components/chat/ChatTextField/ChatTextField.tsx
  4. 48
      web/components/chat/ChatTextField/EmojiPicker.tsx
  5. 2
      web/next.config.js
  6. 45
      web/package-lock.json
  7. 2
      web/package.json

8
controllers/emoji.go
Unescape View File

@ -14,8 +14,10 @@ import ( @@ -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 { @@ -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)
}

4
models/emoji.go
Unescape View File

@ -2,6 +2,6 @@ package models @@ -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"`
}

18
web/components/chat/ChatTextField/ChatTextField.tsx
Unescape View File

@ -120,16 +120,17 @@ export default function ChatTextField(props: Props) { @@ -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) { @@ -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) { @@ -174,7 +176,7 @@ export default function ChatTextField(props: Props) {
trigger="click"
onVisibleChange={visible => setShowEmojis(visible)}
visible={showEmojis}
placement="bottomLeft"
// placement="topRight"
/>
</div>
);

48
web/components/chat/ChatTextField/EmojiPicker.tsx
Unescape View File

@ -1,6 +1,7 @@ @@ -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 { @@ -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} />;
}

2
web/next.config.js
Unescape View File

@ -23,7 +23,7 @@ module.exports = withLess({ @@ -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
Unescape View File

@ -18,11 +18,11 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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",

2
web/package.json
Unescape View File

@ -22,11 +22,11 @@ @@ -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",

Write Preview
Loading…
Cancel
Save