diff --git a/web/.storybook/stories-category-doc-pages/Introduction.stories.mdx b/web/.storybook/stories-category-doc-pages/Introduction.stories.mdx index 8e8f5a275..521852831 100644 --- a/web/.storybook/stories-category-doc-pages/Introduction.stories.mdx +++ b/web/.storybook/stories-category-doc-pages/Introduction.stories.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs'; import { Typography } from 'antd'; - + Owncast Web UI v2 diff --git a/web/pages/embed/chat/readwrite.tsx b/web/pages/embed/chat/readwrite.tsx deleted file mode 100644 index f08122709..000000000 --- a/web/pages/embed/chat/readwrite.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function ReadWriteChatEmbed() { - return
fully featured chat embed goes here
; -} diff --git a/web/pages/embed/chat/readwrite/index.tsx b/web/pages/embed/chat/readwrite/index.tsx new file mode 100644 index 000000000..58b43edc4 --- /dev/null +++ b/web/pages/embed/chat/readwrite/index.tsx @@ -0,0 +1,38 @@ +import { useRecoilValue } from 'recoil'; +import { ChatMessage } from '../../../../interfaces/chat-message.model'; +import { ChatContainer } from '../../../../components/chat/ChatContainer/ChatContainer'; +import { + ClientConfigStore, + chatDisplayNameAtom, + chatUserIdAtom, + visibleChatMessagesSelector, + clientConfigStateAtom, + isChatModeratorAtom, +} from '../../../../components/stores/ClientConfigStore'; +import Header from '../../../../components/ui/Header/Header'; +import { ClientConfig } from '../../../../interfaces/client-config.model'; + +export default function ReadWriteChatEmbed() { + const chatDisplayName = useRecoilValue(chatDisplayNameAtom); + const chatUserId = useRecoilValue(chatUserIdAtom); + const messages = useRecoilValue(visibleChatMessagesSelector); + const clientConfig = useRecoilValue(clientConfigStateAtom); + const isModerator = useRecoilValue(isChatModeratorAtom); + + const { name, chatDisabled } = clientConfig; + + return ( +
+ +
+ +
+ ); +} diff --git a/web/stories/ReadwriteChat.stories.tsx b/web/stories/ReadwriteChat.stories.tsx new file mode 100644 index 000000000..0e2444655 --- /dev/null +++ b/web/stories/ReadwriteChat.stories.tsx @@ -0,0 +1,62 @@ +import React, { useEffect } from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { RecoilRoot, useSetRecoilState } from 'recoil'; +import ReadWritePage from '../pages/embed/chat/readwrite/index'; +import { ChatMessage } from '../interfaces/chat-message.model'; +import { + chatMessagesAtom, + chatDisplayNameAtom, + clientConfigStateAtom, +} from '../components/stores/ClientConfigStore'; +import { ClientConfig } from '../interfaces/client-config.model'; + +export default { + title: 'owncast/Chat/Embeds/Read-write chat', + component: ReadWritePage, + parameters: {}, +} as ComponentMeta; + +const testMessages = + '[{"type":"CHAT","id":"wY-MEXwnR","timestamp":"2022-04-28T20:30:27.001762726Z","user":{"id":"h_5GQ6E7R","displayName":"UserDisplayName42","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"this is a test message"},{"type":"CHAT","id":"VhLGEXwnR","timestamp":"2022-04-28T20:30:28.806999545Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hit 3"},{"type":"CHAT","id":"GguMEuw7R","timestamp":"2022-04-28T20:30:34.500150601Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Jkjk"},{"type":"CHAT","id":"y_-VEXwnR","timestamp":"2022-04-28T20:31:32.695583044Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m doing alright. How about you Hatnix?"},{"type":"CHAT","id":"qAaKEuwng","timestamp":"2022-04-28T20:34:16.22275314Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Oh shiet I didn\u0026#39;t think you would kill him"},{"type":"CHAT","id":"8wUFEuwnR","timestamp":"2022-04-28T20:34:21.624898714Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hahaha, ruthless"},{"type":"CHAT","id":"onYcPuQnR","timestamp":"2022-04-28T20:34:50.671024312Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;ve never played it before"},{"type":"CHAT","id":"kORyEXQ7R","timestamp":"2022-04-28T20:40:29.761977233Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"brb real quick"},{"type":"CHAT","id":"F3DvsuQ7g","timestamp":"2022-04-28T20:50:29.451341783Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m back"},{"type":"CHAT","id":"AH2vsXwnR","timestamp":"2022-04-28T20:50:33.872156152Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Whoa what happened here?"},{"type":"CHAT","id":"xGkOsuw7R","timestamp":"2022-04-28T20:50:53.202147658Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Your dwarf was half naked."},{"type":"CHAT","id":"opIdsuw7g","timestamp":"2022-04-28T20:50:59.631595947Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"lol"},{"type":"CHAT","id":"JpwdsuQnR","timestamp":"2022-04-28T20:51:18.065535459Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"evening did i just see you running around in... nothing"},{"type":"CHAT","id":"R4WKsXw7R","timestamp":"2022-04-28T20:51:28.064914803Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"^^"},{"type":"CHAT","id":"g-PKyXw7g","timestamp":"2022-04-28T20:51:47.936500772Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Lol Starfarer, so my eyes didnt deceive me."},{"type":"CHAT","id":"fV8Ksuw7R","timestamp":"2022-04-28T20:51:49.588744112Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"hahahaha"},{"type":"CHAT","id":"TaStyuwnR","timestamp":"2022-04-28T20:52:38.127528579Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"lol sounds nice"},{"type":"CHAT","id":"JGposuwng","timestamp":"2022-04-28T20:53:49.329567087Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10 * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6 * toudy49","(ghost of)^7 * toudy49","(ghost of)^8 * toudy49","(ghost of)^9 * toudy49","(ghost of)^10 * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!hydrate"},{"type":"CHAT","id":"T4tTsuwng","timestamp":"2022-04-28T20:53:49.391636551Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"test 123"},{"type":"CHAT","id":"wUJTsuw7R","timestamp":"2022-04-28T20:53:54.073218761Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10 * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6 * toudy49","(ghost of)^7 * toudy49","(ghost of)^8 * toudy49","(ghost of)^9 * toudy49","(ghost of)^10 * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!stretch"},{"type":"CHAT","id":"S_Joyuw7R","timestamp":"2022-04-28T20:53:54.119778013Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"blah blah"},{"type":"CHAT","id":"MtYTyXwnR","timestamp":"2022-04-28T20:53:57.796985761Z","user":{"id":"vbh9gtPng","displayName":"π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π’½π’Άπ“…π“…π“Ž π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’","π“ˆπ“‰π’Άπ’Άπ“‡π’»π’Άπ’Άπ“‡π‘’π‘’π“‡β„’","π“ˆπ“‰π’Άπ“‡π’»π’Άπ“‡π‘’π“‡β„’"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"heyy toudy"}]'; +const messages: ChatMessage[] = JSON.parse(testMessages); + +const Page = () => { + const setMessages = useSetRecoilState(chatMessagesAtom); + const setDisplayName = useSetRecoilState(chatDisplayNameAtom); + const setClientConfig = useSetRecoilState(clientConfigStateAtom); + + const fakeConfig: ClientConfig = { + chatDisabled: false, + name: 'Fake Owncast Server', + summary: '', + logo: '', + tags: [], + version: '', + nsfw: false, + extraPageContent: '', + socialHandles: [], + externalActions: [], + customStyles: '', + maxSocketPayloadSize: 0, + federation: undefined, + notifications: undefined, + authentication: undefined, + }; + + useEffect(() => { + setMessages(messages); + setDisplayName('fake-chat-user'); + setClientConfig(fakeConfig); + }, []); + + return ; +}; + +const Template: ComponentStory = () => ( + + + +); + +export const Example = Template.bind({}); +Example.args = {};