mirror of
https://github.com/owncast/owncast.git
synced 2024-11-21 20:28:15 +03:00
Add placeholder components to be worked on
This commit is contained in:
parent
07c6faad60
commit
91b0db9c2e
53 changed files with 565 additions and 54 deletions
8
web/components/CustomPageContent.tsx
Normal file
8
web/components/CustomPageContent.tsx
Normal file
|
@ -0,0 +1,8 @@
|
|||
interface Props {
|
||||
content: string;
|
||||
}
|
||||
|
||||
export default function CustomPageContent(props: Props) {
|
||||
const { content } = props;
|
||||
return <div>{content}</div>;
|
||||
}
|
9
web/components/ExternalActionButton.tsx
Normal file
9
web/components/ExternalActionButton.tsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { ExternalAction } from '../interfaces/external-action.interface';
|
||||
|
||||
interface Props {
|
||||
action: ExternalAction;
|
||||
}
|
||||
|
||||
export default function ExternalActionButton(props: Props) {
|
||||
return <div>External action button component goes here</div>;
|
||||
}
|
7
web/components/PageLogo.tsx
Normal file
7
web/components/PageLogo.tsx
Normal file
|
@ -0,0 +1,7 @@
|
|||
interface Props {
|
||||
url: string;
|
||||
}
|
||||
|
||||
export default function PageLogo(props: Props) {
|
||||
return <div>Pimary logo component goes here</div>;
|
||||
}
|
9
web/components/SocialLinks.tsx
Normal file
9
web/components/SocialLinks.tsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { SocialLink } from '../interfaces/social-link.model';
|
||||
|
||||
interface Props {
|
||||
links: SocialLink[];
|
||||
}
|
||||
|
||||
export default function SocialLinks(props: Props) {
|
||||
return <div>Social links component goes here</div>;
|
||||
}
|
5
web/components/UserDropdownMenu.tsx
Normal file
5
web/components/UserDropdownMenu.tsx
Normal file
|
@ -0,0 +1,5 @@
|
|||
interface Props {}
|
||||
|
||||
export default function UserDropdown(props: Props) {
|
||||
return <div>User settings dropdown component goes here</div>;
|
||||
}
|
9
web/components/chat/ChatActionMessage.jsx
Normal file
9
web/components/chat/ChatActionMessage.jsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { ChatMessage } from '../../interfaces/chat-message.model';
|
||||
|
||||
interface Props {
|
||||
message: ChatMessage;
|
||||
}
|
||||
|
||||
export default function ChatSystemMessage(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
9
web/components/chat/ChatContainer.tsx
Normal file
9
web/components/chat/ChatContainer.tsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { ChatMessage } from '../../interfaces/chat-message.model';
|
||||
|
||||
interface Props {
|
||||
messages: ChatMessage[];
|
||||
}
|
||||
|
||||
export default function ChatContainer(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
5
web/components/chat/ChatModeratorNotification.tsx
Normal file
5
web/components/chat/ChatModeratorNotification.tsx
Normal file
|
@ -0,0 +1,5 @@
|
|||
interface Props {}
|
||||
|
||||
export default function ChatModerationNotification(props: Props) {
|
||||
return <div>You are now a moderator notification component goes here</div>;
|
||||
}
|
9
web/components/chat/ChatSocialMessage.jsx
Normal file
9
web/components/chat/ChatSocialMessage.jsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { ChatMessage } from '../../interfaces/chat-message.model';
|
||||
|
||||
interface Props {
|
||||
message: ChatMessage;
|
||||
}
|
||||
|
||||
export default function ChatSocialMessage(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
9
web/components/chat/ChatSystemMessage.tsx
Normal file
9
web/components/chat/ChatSystemMessage.tsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { ChatMessage } from '../../interfaces/chat-message.model';
|
||||
|
||||
interface Props {
|
||||
message: ChatMessage;
|
||||
}
|
||||
|
||||
export default function ChatSystemMessage(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
5
web/components/chat/ChatTextField.tsx
Normal file
5
web/components/chat/ChatTextField.tsx
Normal file
|
@ -0,0 +1,5 @@
|
|||
interface Props {}
|
||||
|
||||
export default function ChatTextField(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
9
web/components/chat/ChatUserMessage.tsx
Normal file
9
web/components/chat/ChatUserMessage.tsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
import { ChatMessage } from '../../interfaces/chat-message.model';
|
||||
|
||||
interface Props {
|
||||
message: ChatMessage;
|
||||
}
|
||||
|
||||
export default function ChatUserMessage(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
|
@ -1,10 +1,10 @@
|
|||
import { useRecoilValue } from 'recoil';
|
||||
import { Layout, Row, Col } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import { ServerStatus } from '../../models/ServerStatus';
|
||||
import { ServerStatus } from '../../interfaces/server-status.model';
|
||||
import { ServerStatusStore, serverStatusState } from '../stores/ServerStatusStore';
|
||||
import { ClientConfigStore, clientConfigState } from '../stores/ClientConfigStore';
|
||||
import { ClientConfig } from '../../models/ClientConfig';
|
||||
import { ClientConfig } from '../../interfaces/client-config.model';
|
||||
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
|
||||
|
|
5
web/components/modals/AuthModal.tsx
Normal file
5
web/components/modals/AuthModal.tsx
Normal file
|
@ -0,0 +1,5 @@
|
|||
interface Props {}
|
||||
|
||||
export default function AuthModal(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
5
web/components/modals/BrowserNotifyModal.tsx
Normal file
5
web/components/modals/BrowserNotifyModal.tsx
Normal file
|
@ -0,0 +1,5 @@
|
|||
interface Props {}
|
||||
|
||||
export default function BrowserNotifyModal(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
5
web/components/modals/FediAuthModal.tsx
Normal file
5
web/components/modals/FediAuthModal.tsx
Normal file
|
@ -0,0 +1,5 @@
|
|||
interface Props {}
|
||||
|
||||
export default function FediAuthModal(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
5
web/components/modals/FollowModal.tsx
Normal file
5
web/components/modals/FollowModal.tsx
Normal file
|
@ -0,0 +1,5 @@
|
|||
interface Props {}
|
||||
|
||||
export default function FollowModal(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
5
web/components/modals/IndieAuthModal.tsx
Normal file
5
web/components/modals/IndieAuthModal.tsx
Normal file
|
@ -0,0 +1,5 @@
|
|||
interface Props {}
|
||||
|
||||
export default function IndieAuthModal(props: Props) {
|
||||
return <div>Component goes here</div>;
|
||||
}
|
|
@ -1,14 +1,25 @@
|
|||
import { useEffect } from 'react';
|
||||
import { ReactElement } from 'react-markdown/lib/react-markdown';
|
||||
import { atom, useRecoilState } from 'recoil';
|
||||
import { makeEmptyClientConfig, ClientConfig } from '../../models/ClientConfig';
|
||||
import ClientConfigService from '../../services/ClientConfigService';
|
||||
import { makeEmptyClientConfig, ClientConfig } from '../../interfaces/client-config.model';
|
||||
import ClientConfigService from '../../services/client-config-service';
|
||||
|
||||
// The config that comes from the API.
|
||||
export const clientConfigState = atom({
|
||||
key: 'clientConfigState',
|
||||
default: makeEmptyClientConfig(),
|
||||
});
|
||||
|
||||
export const chatCurrentlyVisible = atom({
|
||||
key: 'chatvisible',
|
||||
default: false,
|
||||
});
|
||||
|
||||
export const chatDislayName = atom({
|
||||
key: 'chatDisplayName',
|
||||
default: '',
|
||||
});
|
||||
|
||||
export function ClientConfigStore(): ReactElement {
|
||||
const [, setClientConfig] = useRecoilState<ClientConfig>(clientConfigState);
|
||||
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { useEffect } from 'react';
|
||||
import { ReactElement } from 'react-markdown/lib/react-markdown';
|
||||
import { atom, useRecoilState } from 'recoil';
|
||||
import { ServerStatus, makeEmptyServerStatus } from '../../models/ServerStatus';
|
||||
import ServerStatusService from '../../services/StatusService';
|
||||
import { ServerStatus, makeEmptyServerStatus } from '../../interfaces/server-status.model';
|
||||
import ServerStatusService from '../../services/status-service';
|
||||
|
||||
export const serverStatusState = atom({
|
||||
key: 'serverStatusState',
|
||||
|
|
9
web/components/video/StatusBar.jsx
Normal file
9
web/components/video/StatusBar.jsx
Normal file
|
@ -0,0 +1,9 @@
|
|||
interface Props {
|
||||
online: boolean;
|
||||
viewers: number;
|
||||
timer: string;
|
||||
}
|
||||
|
||||
export default function StatusBar(props: Props) {
|
||||
return <div>Stream status bar goes here</div>;
|
||||
}
|
1
web/interfaces/chat-message.model.ts
Normal file
1
web/interfaces/chat-message.model.ts
Normal file
|
@ -0,0 +1 @@
|
|||
export interface ChatMessage {}
|
6
web/interfaces/external-action.tsx
Normal file
6
web/interfaces/external-action.tsx
Normal file
|
@ -0,0 +1,6 @@
|
|||
export interface ExternalAction {
|
||||
title: string;
|
||||
description?: string;
|
||||
color?: string;
|
||||
url: string;
|
||||
}
|
5
web/interfaces/social-link.model.ts
Normal file
5
web/interfaces/social-link.model.ts
Normal file
|
@ -0,0 +1,5 @@
|
|||
export interface SocialLink {
|
||||
platform: string;
|
||||
icon: string;
|
||||
url: string;
|
||||
}
|
|
@ -1,4 +1,4 @@
|
|||
import { ClientConfig } from '../models/ClientConfig';
|
||||
import { ClientConfig } from '../interfaces/client-config.model';
|
||||
const ENDPOINT = `http://localhost:8080/api/config`;
|
||||
|
||||
class ClientConfigService {
|
|
@ -1,4 +1,4 @@
|
|||
import ServerStatus from '../models/ServerStatus';
|
||||
import ServerStatus from '../interfaces/server-status.model';
|
||||
|
||||
const ENDPOINT = `http://localhost:8080/api/status`;
|
||||
|
21
web/stories/AuthModal.stories.tsx
Normal file
21
web/stories/AuthModal.stories.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import AuthModal from '../components/modals/AuthModal';
|
||||
|
||||
const Example = () => (
|
||||
<div>
|
||||
<AuthModal />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'owncast/Modals/Auth',
|
||||
component: AuthModal,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof AuthModal>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof AuthModal> = args => <Example />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
21
web/stories/BrowserNotifyModal.stories.tsx
Normal file
21
web/stories/BrowserNotifyModal.stories.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import BrowserNotifyModal from '../components/modals/BrowserNotifyModal';
|
||||
|
||||
const Example = () => (
|
||||
<div>
|
||||
<AuthModal />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'owncast/Modals/Browser Push Notifications',
|
||||
component: BrowserNotifyModal,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof BrowserNotifyModal>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof BrowserNotifyModal> = args => <Example />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
15
web/stories/ChatActionMessage.stories.tsx
Normal file
15
web/stories/ChatActionMessage.stories.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import ChatActionMessage from '../components/chat/ChatActionMessage';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Chat/Messages/Chat action',
|
||||
component: ChatActionMessage,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof ChatActionMessage>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof ChatActionMessage> = args => <ChatActionMessage />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
21
web/stories/ChatContainer.stories.tsx
Normal file
21
web/stories/ChatContainer.stories.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import ChatContainer from '../components/chat/ChatContainer';
|
||||
|
||||
const Example = () => (
|
||||
<div>
|
||||
<ChatContainer />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'owncast/Chat/Chat messages container',
|
||||
component: ChatContainer,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof ChatContainer>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof ChatContainer> = args => <Example />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
17
web/stories/ChatModerationNotification.stories.tsx
Normal file
17
web/stories/ChatModerationNotification.stories.tsx
Normal file
|
@ -0,0 +1,17 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import ChatModeratorNotification from '../components/chat/ChatModeratorNotification';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Chat/Messages/Moderator notification',
|
||||
component: ChatModeratorNotification,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof ChatModeratorNotification>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof ChatModeratorNotification> = args => (
|
||||
<ChatModeratorNotification />
|
||||
);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
15
web/stories/ChatSocialMessage.stories.tsx
Normal file
15
web/stories/ChatSocialMessage.stories.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import ChatSocialMessage from '../components/chat/ChatSocialMessage';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Chat/Messages/Social-fediverse event',
|
||||
component: ChatSocialMessage,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof ChatSocialMessage>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof ChatSocialMessage> = args => <ExamChatSocialMessageple />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
15
web/stories/ChatSystemMessage.stories.tsx
Normal file
15
web/stories/ChatSystemMessage.stories.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import ChatSystemMessage from '../components/chat/ChatSystemMessage';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Chat/Messages/System',
|
||||
component: ChatSystemMessage,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof ChatSystemMessage>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
21
web/stories/ChatTextField.stories.tsx
Normal file
21
web/stories/ChatTextField.stories.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import ChatTextField from '../components/chat/ChatTextField';
|
||||
|
||||
const Example = () => (
|
||||
<div>
|
||||
<ChatTextField />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'owncast/Chat/Input text field',
|
||||
component: ChatTextField,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof ChatTextField>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof ChatTextField> = args => <Example />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
15
web/stories/ChatUserMessage.stories.tsx
Normal file
15
web/stories/ChatUserMessage.stories.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import UserChatMessage from '../components/chat/ChatUserMessage';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Chat/Messages/Standard user',
|
||||
component: UserChatMessage,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof UserChatMessage>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
27
web/stories/CustomPageContent.stories.tsx
Normal file
27
web/stories/CustomPageContent.stories.tsx
Normal file
File diff suppressed because one or more lines are too long
39
web/stories/ExternalActionButton.stories.tsx
Normal file
39
web/stories/ExternalActionButton.stories.tsx
Normal file
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import ExternalActionButton from '../components/ExternalActionButton';
|
||||
|
||||
export default {
|
||||
title: 'owncast/External action button',
|
||||
component: ExternalActionButton,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof ExternalActionButton>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof ExternalActionButton> = args => (
|
||||
<ExternalActionButton {...args} />
|
||||
);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Example1 = Template.bind({});
|
||||
Example1.args = {
|
||||
action: {
|
||||
url: 'https://owncast.online/docs',
|
||||
title: 'Documentation',
|
||||
description: 'Owncast Documentation',
|
||||
icon: 'https://owncast.online/images/logo.svg',
|
||||
color: '#5232c8',
|
||||
openExternally: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const Example2 = Template.bind({});
|
||||
Example2.args = {
|
||||
action: {
|
||||
url: 'https://opencollective.com/embed/owncast/donate',
|
||||
title: 'Support Owncast',
|
||||
description: 'Contribute to Owncast',
|
||||
icon: 'https://opencollective.com/static/images/opencollective-icon.svg',
|
||||
color: '#2b4863',
|
||||
openExternally: false,
|
||||
},
|
||||
};
|
21
web/stories/FediAuthModal.stories.tsx
Normal file
21
web/stories/FediAuthModal.stories.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import FediAuthModal from '../components/modals/FediAuthModal';
|
||||
|
||||
const Example = () => (
|
||||
<div>
|
||||
<FediAuthModal />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'owncast/Modals/FediAuth',
|
||||
component: FediAuthModal,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof FediAuthModal>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof FediAuthModal> = args => <Example />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
21
web/stories/FollowModal.stories.tsx
Normal file
21
web/stories/FollowModal.stories.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import FollowModal from '../components/modals/FollowModal';
|
||||
|
||||
const Example = () => (
|
||||
<div>
|
||||
<FollowModal />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'owncast/Modals/Follow',
|
||||
component: FollowModal,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof FollowModal>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof FollowModal> = args => <Example />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
|
@ -99,7 +99,7 @@ const FormExample = () => {
|
|||
};
|
||||
|
||||
export default {
|
||||
title: 'owncast/Form',
|
||||
title: 'example/Form',
|
||||
component: Form,
|
||||
// parameters: {},
|
||||
} as ComponentMeta<typeof Form>;
|
||||
|
|
21
web/stories/IndieAuthModal.stories.tsx
Normal file
21
web/stories/IndieAuthModal.stories.tsx
Normal file
|
@ -0,0 +1,21 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import IndieAuthModal from '../components/modals/IndieAuthModal';
|
||||
|
||||
const Example = () => (
|
||||
<div>
|
||||
<IndieAuthModal />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default {
|
||||
title: 'owncast/Modals/IndieAuth',
|
||||
component: IndieAuthModal,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof IndieAuthModal>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof IndieAuthModal> = args => <Example />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Basic = Template.bind({});
|
|
@ -2,37 +2,16 @@ import React, { useState } from 'react';
|
|||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import { Modal, Button } from 'antd';
|
||||
|
||||
const Usage = () => {
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
|
||||
const showModal = () => {
|
||||
setIsModalVisible(true);
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
setIsModalVisible(false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsModalVisible(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button type="primary" onClick={showModal}>
|
||||
Test Modal
|
||||
</Button>
|
||||
<Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
|
||||
const Usage = () => (
|
||||
<Modal title="Basic Modal" visible>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
<p>Some contents...</p>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default {
|
||||
title: 'owncast/Modal',
|
||||
title: 'owncast/Modal container',
|
||||
component: Modal,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof Modal>;
|
||||
|
@ -40,8 +19,4 @@ export default {
|
|||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof Modal> = args => <Usage />;
|
||||
|
||||
export const Basic = Template.bind({});
|
||||
|
||||
Usage.propTypes = {};
|
||||
|
||||
Usage.defaultProps = {};
|
||||
export const Example = Template.bind({});
|
||||
|
|
23
web/stories/PageLogo.stories.tsx
Normal file
23
web/stories/PageLogo.stories.tsx
Normal file
|
@ -0,0 +1,23 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import PageLogo from '../components/PageLogo';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Page Logo',
|
||||
component: PageLogo,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof PageLogo>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof PageLogo> = args => <PageLogo {...args} />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Logo = Template.bind({});
|
||||
Logo.args = {
|
||||
url: '/logo',
|
||||
};
|
||||
|
||||
export const DemoServer = Template.bind({});
|
||||
DemoServer.args = {
|
||||
url: 'https://watch.owncast.online/logo',
|
||||
};
|
35
web/stories/SocialLinks.stories.tsx
Normal file
35
web/stories/SocialLinks.stories.tsx
Normal file
|
@ -0,0 +1,35 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import SocialLinks from '../components/SocialLinks';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Social links',
|
||||
component: SocialLinks,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof SocialLinks>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof SocialLinks> = args => <SocialLinks {...args} />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Populated = Template.bind({});
|
||||
Populated.args = {
|
||||
links: [
|
||||
{
|
||||
platform: 'github',
|
||||
url: 'https://github.com/owncast/owncast',
|
||||
icon: '/img/platformlogos/github.svg',
|
||||
},
|
||||
{ platform: 'Documentation', url: 'https://owncast.online' },
|
||||
{
|
||||
platform: 'mastodon',
|
||||
url: 'https://fosstodon.org/users/owncast',
|
||||
icon: '/img/platformlogos/mastodon.svg',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const Empty = Template.bind({});
|
||||
Empty.args = {
|
||||
links: [],
|
||||
};
|
25
web/stories/StatusBar.stories.tsx
Normal file
25
web/stories/StatusBar.stories.tsx
Normal file
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import StatusBar from '../components/video/StatusBar';
|
||||
|
||||
export default {
|
||||
title: 'owncast/Status bar',
|
||||
component: StatusBar,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof StatusBar>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof StatusBar> = args => <StatusBar {...args} />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Online = Template.bind({});
|
||||
Online.args = {
|
||||
online: true,
|
||||
viewers: 42,
|
||||
timer: '10:42',
|
||||
};
|
||||
|
||||
export const Offline = Template.bind({});
|
||||
Offline.args = {
|
||||
online: false,
|
||||
};
|
15
web/stories/UserDropdownMenu.stories.tsx
Normal file
15
web/stories/UserDropdownMenu.stories.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import UserDropdownMenu from '../components/UserDropdownMenu';
|
||||
|
||||
export default {
|
||||
title: 'owncast/User settings dropdown menu',
|
||||
component: UserDropdownMenu,
|
||||
parameters: {},
|
||||
} as ComponentMeta<typeof UserDropdownMenu>;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const Template: ComponentStory<typeof UserDropdownMenu> = args => <UserDropdownMenu />;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
export const Example = Template.bind({});
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||
import OwncastPlayer from '../components/video/owncastplayer';
|
||||
import OwncastPlayer from '../components/video/OwncastPlayer';
|
||||
|
||||
const streams = {
|
||||
DemoServer: `https://watch.owncast.online`,
|
||||
|
|
|
@ -12,9 +12,9 @@ export const URL_BAN_USER = `/api/chat/users/setenabled`;
|
|||
|
||||
// TODO: This directory is customizable in the config. So we should expose this via the config API.
|
||||
export const URL_STREAM = `/hls/stream.m3u8`;
|
||||
export const URL_WEBSOCKET = `${
|
||||
location.protocol === 'https:' ? 'wss' : 'ws'
|
||||
}://${location.host}/ws`;
|
||||
export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${
|
||||
location.host
|
||||
}/ws`;
|
||||
export const URL_CHAT_REGISTRATION = `/api/chat/register`;
|
||||
export const URL_FOLLOWERS = `/api/followers`;
|
||||
export const URL_PLAYBACK_METRICS = `/api/metrics/playback`;
|
||||
|
@ -43,8 +43,7 @@ export const KEY_USERNAME = 'owncast_username';
|
|||
export const KEY_CUSTOM_USERNAME_SET = 'owncast_custom_username_set';
|
||||
export const KEY_CHAT_DISPLAYED = 'owncast_chat';
|
||||
export const KEY_CHAT_FIRST_MESSAGE_SENT = 'owncast_first_message_sent';
|
||||
export const CHAT_INITIAL_PLACEHOLDER_TEXT =
|
||||
'Type here to chat, no account necessary.';
|
||||
export const CHAT_INITIAL_PLACEHOLDER_TEXT = 'Type here to chat, no account necessary.';
|
||||
export const CHAT_PLACEHOLDER_TEXT = 'Message';
|
||||
export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.';
|
||||
export const CHAT_MAX_MESSAGE_LENGTH = 500;
|
||||
|
@ -71,8 +70,7 @@ export const ORIENTATION_PORTRAIT = 'portrait';
|
|||
export const ORIENTATION_LANDSCAPE = 'landscape';
|
||||
|
||||
// localstorage keys
|
||||
export const HAS_DISPLAYED_NOTIFICATION_MODAL_KEY =
|
||||
'HAS_DISPLAYED_NOTIFICATION_MODAL';
|
||||
export const HAS_DISPLAYED_NOTIFICATION_MODAL_KEY = 'HAS_DISPLAYED_NOTIFICATION_MODAL';
|
||||
export const USER_VISIT_COUNT_KEY = 'USER_VISIT_COUNT';
|
||||
export const USER_DISMISSED_ANNOYING_NOTIFICATION_POPUP_KEY =
|
||||
'USER_DISMISSED_ANNOYING_NOTIFICATION_POPUP_KEY';
|
||||
|
|
|
@ -40,7 +40,7 @@ export function jumpToBottom(element, behavior) {
|
|||
});
|
||||
},
|
||||
50,
|
||||
element
|
||||
element,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue