Custom emoji & Sticker support (#686)

* Remove comments * Show custom emoji first in suggestions * Show global image packs in emoji picker * Display emoji and sticker in room settings * Fix some pack not visible in emojiboard * WIP * Add/delete/rename images to exisitng packs * Change pack avatar, name & attribution * Add checkbox to make pack global * Bug fix * Create or delete pack * Add personal emoji in settings * Show global pack selector in settings * Show space emoji in emojiboard * Send custom emoji reaction as mxc * Render stickers as stickers * Fix sticker jump bug * Fix reaction width * Fix stretched custom emoji * Fix sending space emoji in message * Remove unnessesary comments * Send user pills * Fix pill generating regex * Add support for sending stickers
2022-08-06 09:04:23 +05:30
parent 5e527e434a
commit edace32213
33 changed files with 1781 additions and 203 deletions
--- a/src/app/molecules/image-pack/ImagePackUpload.jsx
+++ b/src/app/molecules/image-pack/ImagePackUpload.jsx
@@ -0,0 +1,73 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './ImagePackUpload.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { scaleDownImage } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import IconButton from '../../atoms/button/IconButton';
+import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+
+function ImagePackUpload({ onUpload }) {
+  const mx = initMatrix.matrixClient;
+  const inputRef = useRef(null);
+  const shortcodeRef = useRef(null);
+  const [imgFile, setImgFile] = useState(null);
+  const [progress, setProgress] = useState(false);
+
+  const handleSubmit = async (evt) => {
+    evt.preventDefault();
+    if (!imgFile) return;
+    const { shortcodeInput } = evt.target;
+    const shortcode = shortcodeInput.value.trim();
+    if (shortcode === '') return;
+
+    setProgress(true);
+    const image = await scaleDownImage(imgFile, 512, 512);
+    const url = await mx.uploadContent(image, {
+      onlyContentUri: true,
+    });
+
+    onUpload(shortcode, url);
+    setProgress(false);
+    setImgFile(null);
+    shortcodeRef.current.value = '';
+  };
+
+  const handleFileChange = (evt) => {
+    const img = evt.target.files[0];
+    if (!img) return;
+    setImgFile(img);
+    shortcodeRef.current.focus();
+  };
+  const handleRemove = () => {
+    setImgFile(null);
+    inputRef.current.value = null;
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="image-pack-upload">
+      <input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" accept=".png, .gif, .webp" required />
+      {
+        imgFile
+          ? (
+            <div className="image-pack-upload__file">
+              <IconButton onClick={handleRemove} src={CirclePlusIC} tooltip="Remove file" />
+              <Text>{imgFile.name}</Text>
+            </div>
+          )
+          : <Button onClick={() => inputRef.current.click()}>Import image</Button>
+      }
+      <Input forwardRef={shortcodeRef} name="shortcodeInput" placeholder="shortcode" required />
+      <Button disabled={progress} variant="primary" type="submit">{progress ? 'Uploading...' : 'Upload'}</Button>
+    </form>
+  );
+}
+ImagePackUpload.propTypes = {
+  onUpload: PropTypes.func.isRequired,
+};
+
+export default ImagePackUpload;