diff --git a/web/.storybook/main.js b/web/.storybook/main.js index c30e13d40..368d23521 100644 --- a/web/.storybook/main.js +++ b/web/.storybook/main.js @@ -6,6 +6,7 @@ module.exports = { '../.storybook/stories-category-doc-pages/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)', '../components/**/*.stories.@(js|jsx|ts|tsx)', + '../pages/**/*.stories.@(js|jsx|ts|tsx)', ], addons: [ '@storybook/addon-links', diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx index 9deceba91..620194206 100644 --- a/web/components/chat/ChatContainer/ChatContainer.tsx +++ b/web/components/chat/ChatContainer/ChatContainer.tsx @@ -20,10 +20,12 @@ interface Props { usernameToHighlight: string; chatUserId: string; isModerator: boolean; + showInput?: boolean; + height?: string; } export default function ChatContainer(props: Props) { - const { messages, usernameToHighlight, chatUserId, isModerator } = props; + const { messages, usernameToHighlight, chatUserId, isModerator, showInput, height } = props; const [atBottom, setAtBottom] = useState(false); // const [showButton, setShowButton] = useState(false); @@ -117,7 +119,7 @@ export default function ChatContainer(props: Props) { () => ( <> + {showInput && } ); } @@ -199,3 +201,8 @@ function checkIsModerator(message) { return scopes.includes('MODERATOR'); } + +ChatContainer.defaultProps = { + showInput: true, + height: 'calc(100vh - 170px)', +}; diff --git a/web/pages/embed/chat/readonly.tsx b/web/pages/embed/chat/readonly.tsx deleted file mode 100644 index 2ccce952d..000000000 --- a/web/pages/embed/chat/readonly.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function ReadOnlyChatEmbed() { - return
chat container goes here
; -} diff --git a/web/pages/embed/chat/readonly/index.tsx b/web/pages/embed/chat/readonly/index.tsx new file mode 100644 index 000000000..b0ca88b32 --- /dev/null +++ b/web/pages/embed/chat/readonly/index.tsx @@ -0,0 +1,29 @@ +import { useRecoilValue } from 'recoil'; +import { ChatMessage } from '../../../../interfaces/chat-message.model'; +import ChatContainer from '../../../../components/chat/ChatContainer/ChatContainer'; +import { + ClientConfigStore, + chatDisplayNameAtom, + chatUserIdAtom, + visibleChatMessagesSelector, +} from '../../../../components/stores/ClientConfigStore'; + +export default function ReadOnlyChatEmbed() { + const chatDisplayName = useRecoilValue(chatDisplayNameAtom); + const chatUserId = useRecoilValue(chatUserIdAtom); + const messages = useRecoilValue(visibleChatMessagesSelector); + + return ( +
+ + +
+ ); +} diff --git a/web/stories/ReadonlyChat.stories.tsx b/web/stories/ReadonlyChat.stories.tsx new file mode 100644 index 000000000..66ffffc1b --- /dev/null +++ b/web/stories/ReadonlyChat.stories.tsx @@ -0,0 +1,34 @@ +import React, { useEffect } from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { RecoilRoot, useSetRecoilState } from 'recoil'; +import ReadOnlyPage from '../pages/embed/chat/readonly/index'; +import { ChatMessage } from '../interfaces/chat-message.model'; +import { chatMessagesAtom } from '../components/stores/ClientConfigStore'; + +export default { + title: 'owncast/Chat/Embeds/Read-only chat', + component: ReadOnlyPage, + 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); + useEffect(() => { + setMessages(messages); + }, []); + + return ; +}; + +const Template: ComponentStory = () => ( + + + +); + +export const Example = Template.bind({}); +Example.args = {};