diff --git a/web/components/ui/OfflineBanner/OfflineBanner.module.scss b/web/components/ui/OfflineBanner/OfflineBanner.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/web/components/ui/OfflineBanner/OfflineBanner.tsx b/web/components/ui/OfflineBanner/OfflineBanner.tsx new file mode 100644 index 000000000..830a3272d --- /dev/null +++ b/web/components/ui/OfflineBanner/OfflineBanner.tsx @@ -0,0 +1,9 @@ +// import s from './OfflineBanner.module.scss'; + +interface Props { + text: string; +} + +export default function OfflineBanner({ text }: Props) { + return
{text}
; +} diff --git a/web/stories/Introduction.stories.mdx b/web/stories/Introduction.stories.mdx index 807f6d5de..8e8f5a275 100644 --- a/web/stories/Introduction.stories.mdx +++ b/web/stories/Introduction.stories.mdx @@ -3,12 +3,19 @@ import { Typography } from 'antd'; -Owncast Web UI v2 +Owncast Web UI v2 Owncast is going through a complete rewrite of the web app frontend. Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on GitHub to see the individual tasks for this project. +## Quick Links + +- [Redesign project](https://github.com/owncast/owncast/milestone/18) +- [Proposed redesign Figma](https://www.figma.com/file/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=643%3A17) +- [Currently defined colors](/story/owncast-style-guide-colors--page) +- [Owncast Frontend Chat](https://owncast.rocket.chat/group/frontend-dev) + ## Why? - Moving to a full React Component workflow allows the project to be more productive and build features faster. @@ -16,7 +23,7 @@ Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on G - Address feedback from users. - Better accessibility. - Better mobile experience. -- Updated [design](https://www.figma.com/file/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=528%3A18). +- Updated [design](https://www.figma.com/proto/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=643%3A646&scaling=min-zoom&page-id=643%3A17&starting-point-node-id=643%3A44). - Standardize styling across the project by using a single design language and style guide. - Allows more people to contribute to the project if we use popular frameworks. @@ -26,20 +33,18 @@ Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on G - [React](https://reactjs.org/) - [Ant Design](https://ant.design/) - ## Contributing 1. Find a component that hasn't yet been worked on by looking through the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) -and the sidebar of components to the left. + and the sidebar of components to the left. 1. See if you can have an example of this functionality in action via the [Owncast Demo Server](https://watch.owncast.online) or [Owncast Nightly Build](https://nightly.owncast.online) so you know how it's supposed to work if it's interactive. 1. Visit the `Docs` tab to read any specific documentation that may have been written about how this component works. 1. Go to the `Canvas` tab of the component you selected and see if there's a Design attached to it. 1. If there is a design, then that's a starting point you can use to start building out the component. -1. If there isn't, then visit the [Owncast Demo Server](https://watch.owncast.online), the [Owncast Nightly Build](https://nightly.owncast.online), or the proposed [v2 design](https://www.figma.com/file/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=0%3A1) for some ways to start. +1. If there isn't, then visit the [Owncast Demo Server](https://watch.owncast.online), the [Owncast Nightly Build](https://nightly.owncast.online), or the proposed [v2 design](https://www.figma.com/proto/B6ICOn1J3dyYeoZM5kPM2A/Owncast---Review?node-id=643%3A646&scaling=min-zoom&page-id=643%3A17&starting-point-node-id=643%3A44) for some ways to start. 1. If no design exists, then you can ask around the Owncast chat for help, for come up with your own ideas! 1. No designs are stuck in stone, and we're using this as an opportunity to level up the UI of Owncast, so all ideas are welcome. - ## How? This rewrite is a large project, but like anything else, breaking it into pieces and working on one thing at a time will eventually get us to the finish line. diff --git a/web/stories/OfflineBanner.stories.tsx b/web/stories/OfflineBanner.stories.tsx new file mode 100644 index 000000000..aa8eba1b2 --- /dev/null +++ b/web/stories/OfflineBanner.stories.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import OfflineBanner from '../components/ui/OfflineBanner/OfflineBanner'; +import OfflineState from './assets/mocks/offline-state.png'; + +export default { + title: 'owncast/Layout/Offline Banner', + component: OfflineBanner, + parameters: { + design: { + type: 'image', + url: OfflineState, + scale: 0.5, + }, + docs: { + description: { + component: `When the stream is offline the player should be replaced by this banner that can support custom text and notify actions.`, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = args => ; + +export const ExampleDefault = Template.bind({}); +ExampleDefault.args = { + text: 'To get notifications when is back online you can follow or ask for notifications.', +}; + +export const ExampleCustom = Template.bind({}); +ExampleCustom.args = { + text: 'This is some example offline text that a streamer can leave for a visitor of the page.', +}; diff --git a/web/stories/assets/mocks/follow-modal.png b/web/stories/assets/mocks/follow-modal.png index 4c6a3b26a..4fdd7d89a 100644 Binary files a/web/stories/assets/mocks/follow-modal.png and b/web/stories/assets/mocks/follow-modal.png differ diff --git a/web/stories/assets/mocks/followers-tab.png b/web/stories/assets/mocks/followers-tab.png new file mode 100644 index 000000000..57cd2ad6e Binary files /dev/null and b/web/stories/assets/mocks/followers-tab.png differ diff --git a/web/stories/assets/mocks/offline-state.png b/web/stories/assets/mocks/offline-state.png new file mode 100644 index 000000000..38013153f Binary files /dev/null and b/web/stories/assets/mocks/offline-state.png differ diff --git a/web/stories/assets/mocks/single-follower.png b/web/stories/assets/mocks/single-follower.png new file mode 100644 index 000000000..c8609c868 Binary files /dev/null and b/web/stories/assets/mocks/single-follower.png differ