Feature: emoji editor (#2411)

* Custom emoji editor: implement backend

This reuses the logo upload code

* Implement emoji edit admin interface

Again reuse base64 logic from the logo upload

* Allow toggling between uploaded and default emojis

* Add route that always serves uploaded emojis

This is needed for the admin emoji interface,
as otherwise the emojis will 404 if custom emojis are disabled

* Fix linter warnings

* Remove custom/uploaded emoji logic

* Reset timer after emoji deletion

* Setup: copy built-in emojis to emoji directory
This commit is contained in:
Philipp
2022-12-12 17:40:43 +01:00
committed by GitHub
parent 592425bfc9
commit dc54dfe363
13 changed files with 439 additions and 87 deletions

View File

@ -143,6 +143,10 @@ export const MainLayout: FC<MainLayoutProps> = ({ children }) => {
label: <Link href="/admin/chat/users">Users</Link>,
key: 'chat-users',
},
{
label: <Link href="/admin/chat/emojis">Emojis</Link>,
key: 'emojis',
},
];
const utilitiesMenu = [

View File

@ -18,13 +18,7 @@ import {
} from '../../utils/input-statuses';
import { NEXT_PUBLIC_API_HOST } from '../../utils/apis';
const ACCEPTED_FILE_TYPES = ['image/png', 'image/jpeg', 'image/gif'];
function getBase64(img: File | Blob, callback: (imageUrl: string | ArrayBuffer) => void) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img);
}
import { ACCEPTED_IMAGE_TYPES, getBase64 } from '../../utils/images';
export const EditLogo: FC = () => {
const [logoUrl, setlogoUrl] = useState(null);
@ -53,7 +47,7 @@ export const EditLogo: FC = () => {
// eslint-disable-next-line consistent-return
return new Promise<void>((res, rej) => {
if (!ACCEPTED_FILE_TYPES.includes(file.type)) {
if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
const msg = `File type is not supported: ${file.type}`;
setSubmitStatus(createInputStatus(STATUS_ERROR, `There was an error: ${msg}`));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
@ -108,7 +102,7 @@ export const EditLogo: FC = () => {
listType="picture"
className="avatar-uploader"
showUploadList={false}
accept={ACCEPTED_FILE_TYPES.join(',')}
accept={ACCEPTED_IMAGE_TYPES.join(',')}
beforeUpload={beforeUpload}
customRequest={handleLogoUpdate}
disabled={loading}