LogalDeveloper/owncast
0
Fork 0
Code Activity

Fix web project build errors

Browse Source
This commit is contained in:
Gabe Kangas
2022-05-11 23:31:31 -07:00
parent b66617961d
commit 72c01e1b9a
86 changed files with 863 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/chat/ChatActionMessage.jsx → web/components/chat/ChatActionMessage.tsx
View File

@@ -1,9 +1,11 @@
import { ChatMessage } from '../../interfaces/chat-message.model';
interface Props {
// eslint-disable-next-line react/no-unused-prop-types
message: ChatMessage;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function ChatSystemMessage(props: Props) {
return <div>Component goes here</div>;
}

2
web/components/chat/ChatContainer.tsx
View File

@@ -1,6 +1,6 @@
import { Spin } from 'antd';
import { Virtuoso } from 'react-virtuoso';
import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
import { useRef } from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { ChatMessage } from '../../interfaces/chat-message.model';
import { ChatState } from '../../interfaces/application-state';

1
web/components/chat/ChatModeratorNotification.tsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
interface Props {}
export default function ChatModerationNotification(props: Props) {

2
web/components/chat/ChatSocialMessage.jsx → web/components/chat/ChatSocialMessage.tsx
View File

@@ -1,3 +1,5 @@
/* eslint-disable react/no-unused-prop-types */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { ChatMessage } from '../../interfaces/chat-message.model';
interface Props {

2
web/components/chat/ChatSystemMessage.tsx
View File

@@ -1,3 +1,5 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react/no-unused-prop-types */
import { ChatMessage } from '../../interfaces/chat-message.model';
interface Props {

1
web/components/chat/ChatTextField.tsx
View File

@@ -2,6 +2,7 @@ import { useState } from 'react';
interface Props {}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function ChatTextField(props: Props) {
const [value, setValue] = useState('');
const [showEmojis, setShowEmojis] = useState(false);

6
web/components/chat/ChatTextField/ChatTextField.module.scss
View File

@@ -1,4 +1,4 @@
.root {
height: 2rem;
color: var(--black);
}
height: 2rem;
color: var(--black);
}

53
web/components/chat/ChatTextField/ChatTextField.tsx
View File

@@ -1,14 +1,13 @@
import { SmileOutlined } from '@ant-design/icons';
import { Button, Popover } from 'antd';
import React, { useState, useMemo, useRef, useEffect } from 'react';
import React, { useState } from 'react';
import { useRecoilValue } from 'recoil';
import { Transforms, createEditor, Node, BaseEditor, Text } from 'slate';
import { Transforms, createEditor, BaseEditor, Text } from 'slate';
import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
import EmojiPicker from './EmojiPicker';
import WebsocketService from '../../../services/websocket-service';
import { websocketServiceAtom } from '../../stores/ClientConfigStore';
import { MessageType } from '../../../interfaces/socket-events';
import s from './ChatTextField.module.scss';
type CustomElement = { type: 'paragraph'; children: CustomText[] };
type CustomText = { text: string };
@@ -25,24 +24,30 @@ interface Props {
value?: string;
}
// eslint-disable-next-line react/prop-types
const Image = ({ element }) => (
<img
// eslint-disable-next-line no-undef
// eslint-disable-next-line react/prop-types
src={element.url}
alt="emoji"
style={{ display: 'inline', position: 'relative', width: '30px', bottom: '10px' }}
/>
);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const insertImage = (editor, url) => {
const text = { text: '' };
const image: ImageElement = { type: 'image', url, children: [text] };
Transforms.insertNodes(editor, image);
// const text = { text: '' };
// const image: ImageElement = { type: 'image', url, children: [text] };
// Transforms.insertNodes(editor, image);
};
const withImages = editor => {
const { isVoid } = editor;
// eslint-disable-next-line no-param-reassign
editor.isVoid = element => (element.type === 'image' ? true : isVoid(element));
// eslint-disable-next-line no-param-reassign
editor.isInline = element => element.type === 'image';
return editor;
@@ -52,13 +57,13 @@ export type EmptyText = {
text: string;
};
type ImageElement = {
type: 'image';
url: string;
children: EmptyText[];
};
// type ImageElement = {
// type: 'image';
// url: string;
// children: EmptyText[];
// };
const Element = props => {
const Element = (props: any) => {
const { attributes, children, element } = props;
switch (element.type) {
@@ -71,10 +76,10 @@ const Element = props => {
const serialize = node => {
if (Text.isText(node)) {
let string = node.text;
if (node.bold) {
string = `<strong>${string}</strong>`;
}
const string = node.text;
// if (node.bold) {
// string = `<strong>${string}</strong>`;
// }
return string;
}
@@ -90,8 +95,9 @@ const serialize = node => {
}
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function ChatTextField(props: Props) {
const { value: originalValue } = props;
// const { value: originalValue } = props;
const [showEmojis, setShowEmojis] = useState(false);
const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
const [editor] = useState(() => withImages(withReact(createEditor())));
@@ -113,7 +119,7 @@ export default function ChatTextField(props: Props) {
Transforms.delete(editor);
};
const handleChange = e => {};
const handleChange = () => {};
const handleEmojiSelect = emoji => {
console.log(emoji);
@@ -135,19 +141,12 @@ export default function ChatTextField(props: Props) {
}
};
const initialValue = [
{
type: 'paragraph',
children: [{ text: originalValue }],
},
];
return (
<div>
<Slate editor={editor} value={initialValue} onChange={handleChange}>
<Slate editor={editor} value={[]} onChange={handleChange}>
<Editable
onKeyDown={onKeyDown}
renderElement={props => <Element {...props} />}
renderElement={p => <Element {...p} />}
placeholder="Chat message goes here..."
/>
</Slate>

36
web/components/chat/ChatTextField/EmojiPicker.tsx
View File

@@ -1,22 +1,28 @@
import data from '@emoji-mart/data';
import React, { useRef, useEffect } from 'react';
// import data from '@emoji-mart/data';
import React, { useRef } from 'react';
export default function EmojiPicker(props) {
interface Props {
// eslint-disable-next-line react/no-unused-prop-types
onEmojiSelect: (emoji: string) => void;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function EmojiPicker(props: 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 custom = [
// {
// emojis: [
// {
// id: 'party_parrot',
// name: 'Party Parrot',
// keywords: ['dance', 'dancing'],
// skins: [{ src: 'https://watch.owncast.online/img/emoji/bluntparrot.gif' }],
// },
// ],
// },
// ];
// TODO: Fix the emoji picker from throwing errors.
// useEffect(() => {

2
web/components/chat/ChatUserMessage.tsx
View File

@@ -7,7 +7,9 @@ interface Props {
export default function ChatUserMessage(props: Props) {
const { message, showModeratorMenu } = props;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { body, user, timestamp } = message;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { displayName, displayColor } = user;
// TODO: Convert displayColor (a hue) to a usable color.

43
web/components/chat/chat.js
View File

@@ -101,45 +101,6 @@ export function convertToText(str = '') {
return value;
}
/*
You would call this when a user pastes from
the clipboard into a `contenteditable` area.
*/
export function convertOnPaste(event = { preventDefault() {} }, emojiList) {
// Prevent paste.
event.preventDefault();
// Set later.
let value = '';
// Does method exist?
const hasEventClipboard = !!(
event.clipboardData &&
typeof event.clipboardData === 'object' &&
typeof event.clipboardData.getData === 'function'
);
// Get clipboard data?
if (hasEventClipboard) {
value = event.clipboardData.getData('text/plain');
}
// Insert into temp `<textarea>`, read back out.
const textarea = document.createElement('textarea');
textarea.innerHTML = value;
value = textarea.innerText;
// Clean up text.
value = convertToText(value);
const HTML = emojify(value, emojiList);
// Insert text.
if (typeof document.execCommand === 'function') {
document.execCommand('insertHTML', false, HTML);
}
}
export function createEmojiMarkup(data, isCustom) {
const emojiUrl = isCustom ? data.emoji : data.url;
const emojiName = (
@@ -156,6 +117,7 @@ export function trimNbsp(html) {
export function emojify(HTML, emojiList) {
const textValue = convertToText(HTML);
// eslint-disable-next-line no-plusplus
for (let lastPos = textValue.length; lastPos >= 0; lastPos--) {
const endPos = textValue.lastIndexOf(':', lastPos);
if (endPos <= 0) {
@@ -170,8 +132,9 @@ export function emojify(HTML, emojiList) {
emojiItem => emojiItem.name.toLowerCase() === typedEmoji.toLowerCase(),
);
if (emojiIndex != -1) {
if (emojiIndex !== -1) {
const emojiImgElement = createEmojiMarkup(emojiList[emojiIndex], true);
// eslint-disable-next-line no-param-reassign
HTML = HTML.replace(`:${typedEmoji}:`, emojiImgElement);
}
}