mirrors/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2024-11-28 19:19:06 +03:00
Code Issues Projects Releases Packages Wiki Activity
owncast/web/components/modals/ChatModal/ChatModal.stories.tsx

602 lines
15 KiB
TypeScript
Raw Permalink Normal View History

Migrated Storybook notation from CSF2 to CSF3 (#3412) * Migrate web action-buttons directory to CSF3 notation * Migrate web chat directory to CSF3 notation * Migrate web common directory to CSF3 notation * Migrate web layout directory to CSF3 notation * Migrate web modals directory to CSF3 notation * Migrate web ui directory to CSF3 notation * Migrate web video directory to CSF3 notation * Migrate web stories directory to CSF3 notation
2023-11-07 06:35:05 +03:00
import { useEffect } from 'react';
import { StoryFn, Meta } from '@storybook/react';
Refactor mobile chat into modal (#3038) * feat(mobile): refactor mobile chat into modal - Make page always scrollable - Move mobile chat into a standalone modal * fix(test): split out mobile browser test specs * fix(mobile): force chat button to render on top of footer * fix: some small updates from review * fix: hide/show hide chat menu option based on width * fix: chat button icon getting cut off * chore(tests): add browser tests for mobile chat modal * chore(tests): add story for ChatModal component * fix(test): quiet shellcheck * fix: remove unused import * fix(tests): silence storybook linting warning * fix(ui): reposition chat modal button icon with transform
2023-05-23 04:56:44 +03:00
import { RecoilRoot, useSetRecoilState } from 'recoil';
import { ChatModal, ChatModalProps } from './ChatModal';
import { ChatMessage } from '../../../interfaces/chat-message.model';
import { CurrentUser } from '../../../interfaces/current-user';
import { currentUserAtom } from '../../stores/ClientConfigStore';
Migrated Storybook notation from CSF2 to CSF3 (#3412) * Migrate web action-buttons directory to CSF3 notation * Migrate web chat directory to CSF3 notation * Migrate web common directory to CSF3 notation * Migrate web layout directory to CSF3 notation * Migrate web modals directory to CSF3 notation * Migrate web ui directory to CSF3 notation * Migrate web video directory to CSF3 notation * Migrate web stories directory to CSF3 notation
2023-11-07 06:35:05 +03:00
const meta = {
Refactor mobile chat into modal (#3038) * feat(mobile): refactor mobile chat into modal - Make page always scrollable - Move mobile chat into a standalone modal * fix(test): split out mobile browser test specs * fix(mobile): force chat button to render on top of footer * fix: some small updates from review * fix: hide/show hide chat menu option based on width * fix: chat button icon getting cut off * chore(tests): add browser tests for mobile chat modal * chore(tests): add story for ChatModal component * fix(test): quiet shellcheck * fix: remove unused import * fix(tests): silence storybook linting warning * fix(ui): reposition chat modal button icon with transform
2023-05-23 04:56:44 +03:00
title: 'owncast/Chat/Chat modal',
component: ChatModal,
parameters: {
chromatic: { diffThreshold: 0.8 },
docs: {},
},
Migrated Storybook notation from CSF2 to CSF3 (#3412) * Migrate web action-buttons directory to CSF3 notation * Migrate web chat directory to CSF3 notation * Migrate web common directory to CSF3 notation * Migrate web layout directory to CSF3 notation * Migrate web modals directory to CSF3 notation * Migrate web ui directory to CSF3 notation * Migrate web video directory to CSF3 notation * Migrate web stories directory to CSF3 notation
2023-11-07 06:35:05 +03:00
} satisfies Meta<typeof ChatModal>;
export default meta;
Refactor mobile chat into modal (#3038) * feat(mobile): refactor mobile chat into modal - Make page always scrollable - Move mobile chat into a standalone modal * fix(test): split out mobile browser test specs * fix(mobile): force chat button to render on top of footer * fix: some small updates from review * fix: hide/show hide chat menu option based on width * fix: chat button icon getting cut off * chore(tests): add browser tests for mobile chat modal * chore(tests): add story for ChatModal component * fix(test): quiet shellcheck * fix: remove unused import * fix(tests): silence storybook linting warning * fix(ui): reposition chat modal button icon with transform
2023-05-23 04:56:44 +03:00
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"
},
{
"id": "xDHBYL4Vgz",
"timestamp": "2022-10-05T01:50:08.178863235Z",
"type": "USER_JOINED",
"user": {
"id": "fg9tcCnVg",
"displayName": "brave-khorana",
"displayColor": 293,
"createdAt": "2022-09-25T15:27:35.444193966Z",
"previousNames": [
"brave-khorana"
],
"nameChangedAt": "0001-01-01T00:00:00Z",
"isBot": false,
"authenticated": false
}
},
{
"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"
},
{
"body": "Bonjour gabe. What a pleasure to meet you.",
"id": "YZqhLYV4g",
"timestamp": "2022-10-05T01:47:13.909247665Z",
"type": "SYSTEM",
"user": {
"displayName": "Owncast TV"
}
},
{
"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"
},
{
"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": "how is everyone?"
},
{
"body": "Gabe Test liked that this stream went live.",
"id": "FTprqf0VR",
"image": "https://media.mastodon.cloud/accounts/avatars/000/463/008/original/d0bc0971a54ffc75.jpg",
"link": "https://mastodon.cloud/users/gabektest",
"timestamp": "2023-02-05T17:49:36.619470844-08:00",
"title": "gabektest@mastodon.cloud",
"type": "FEDIVERSE_ENGAGEMENT_LIKE",
"user": {
"displayName": "New Owncast Server"
}
}
]`;
const messages: ChatMessage[] = JSON.parse(testMessages);
const currentUser = {
id: 'fKINHKpnR',
displayName: 'testuser',
displayColor: 2,
isModerator: true,
};
// This component uses Recoil internally so wrap it in a RecoilRoot.
const Component = args => {
const setCurrentUser = useSetRecoilState<CurrentUser>(currentUserAtom);
useEffect(() => setCurrentUser(currentUser), []);
return <ChatModal {...args} />;
};
Migrated Storybook notation from CSF2 to CSF3 (#3412) * Migrate web action-buttons directory to CSF3 notation * Migrate web chat directory to CSF3 notation * Migrate web common directory to CSF3 notation * Migrate web layout directory to CSF3 notation * Migrate web modals directory to CSF3 notation * Migrate web ui directory to CSF3 notation * Migrate web video directory to CSF3 notation * Migrate web stories directory to CSF3 notation
2023-11-07 06:35:05 +03:00
const Template: StoryFn<typeof ChatModal> = args => (
Refactor mobile chat into modal (#3038) * feat(mobile): refactor mobile chat into modal - Make page always scrollable - Move mobile chat into a standalone modal * fix(test): split out mobile browser test specs * fix(mobile): force chat button to render on top of footer * fix: some small updates from review * fix: hide/show hide chat menu option based on width * fix: chat button icon getting cut off * chore(tests): add browser tests for mobile chat modal * chore(tests): add story for ChatModal component * fix(test): quiet shellcheck * fix: remove unused import * fix(tests): silence storybook linting warning * fix(ui): reposition chat modal button icon with transform
2023-05-23 04:56:44 +03:00
<RecoilRoot>
<Component {...args} />
</RecoilRoot>
);
Migrated Storybook notation from CSF2 to CSF3 (#3412) * Migrate web action-buttons directory to CSF3 notation * Migrate web chat directory to CSF3 notation * Migrate web common directory to CSF3 notation * Migrate web layout directory to CSF3 notation * Migrate web modals directory to CSF3 notation * Migrate web ui directory to CSF3 notation * Migrate web video directory to CSF3 notation * Migrate web stories directory to CSF3 notation
2023-11-07 06:35:05 +03:00
export const Example = {
render: Template,
args: {
loading: false,
messages,
usernameToHighlight: 'testuser',
chatUserId: 'testuser',
isModerator: true,
showInput: true,
chatAvailable: true,
handleClose: () => {},
currentUser,
} as ChatModalProps,
};
Reference in a new issue Copy permalink