owncast/web
Matthew Heller 6e54ec7695
Antd updates (#2194)
* Fix antd Modal.visible warning by using updated attribute name 'open'.

* Update more attributes (onVisibleChange => onOpenChange, defaultVisible => defaultOpen) to fix browser console warnings.

* Update ModalProps property from 'visible' to 'open' to match the change in antd.

* Update variable names to match the antd change from 'visible' to 'open'.

* Inline this for the linter.

* One more visible => open reference.
2022-10-10 17:11:29 -07:00
..
.storybook Add and use additional light background color for custom page content 2022-10-09 18:41:52 -07:00
.vscode Add current user object that holds user session values instead of standalone getters. Closes #2050 2022-10-10 16:40:13 -07:00
assets/images Add some images+icons to assets section 2022-05-09 19:02:10 -07:00
components Antd updates (#2194) 2022-10-10 17:11:29 -07:00
docs Fix web project build errors 2022-05-11 23:31:31 -07:00
interfaces Add current user object that holds user session values instead of standalone getters. Closes #2050 2022-10-10 16:40:13 -07:00
pages Add current user object that holds user session values instead of standalone getters. Closes #2050 2022-10-10 16:40:13 -07:00
public Prettified Code! 2022-10-10 20:33:13 +00:00
services Remove hardcoded websocket host 2022-10-09 21:17:55 -07:00
stories Add current user object that holds user session values instead of standalone getters. Closes #2050 2022-10-10 16:40:13 -07:00
style-definitions Add and use additional light background color for custom page content 2022-10-09 18:41:52 -07:00
styles Remove admin stylesheets from loading with app. Closes #2183 2022-10-10 13:31:37 -07:00
types Add admin field for setting offline message. Closes #1901 2022-08-16 21:48:06 -07:00
utils Fix slider marks by changing the corresponding labels to non-empty string (#2171) 2022-10-04 13:19:23 -07:00
.env.development blah 2020-10-07 23:09:42 -07:00
.env.production Support API calls without auth and without cors 2020-11-07 16:44:11 -08:00
.eslintignore Configure eslint action 2021-02-06 19:13:04 -08:00
.eslintrc.js reafctor: normalize component formatting (#2082) 2022-09-07 00:00:28 -07:00
.gitignore Add support for less variables and using a custom theme 2022-04-25 15:52:38 -07:00
.prettierignore Add linting and code formatting 2020-09-30 18:47:18 -07:00
.prettierrc Fix web project build errors 2022-05-11 23:31:31 -07:00
favicon.ico a bit of refactor, use context for overall broacast status; move files around for routing 2020-10-22 16:18:18 -07:00
LICENSE Initial commit 2020-09-30 14:47:14 -07:00
next-env.d.ts Admin social features (#408) 2022-01-12 13:52:37 -08:00
next.config.js Fix next builds 2022-09-08 21:43:32 -07:00
package-lock.json chore(deps): lock file maintenance 2022-10-10 10:12:53 +00:00
package.json fix(deps): update dependency slate-react to v0.83.1 (#2169) 2022-10-09 00:07:44 -07:00
postcss.config.js First pass at component library 2022-04-25 15:52:38 -07:00
README.md docs: add how-to docs for creating components (#2124) 2022-09-16 09:19:55 -07:00
renovate.json Fix web project build errors 2022-05-11 23:31:31 -07:00
tsconfig.json Fix web project build errors 2022-05-11 23:31:31 -07:00

Owncast Web Frontend

The Owncast web frontend is a Next.js project with React components, TypeScript, Sass styling, using Ant Design UI components.

Getting Started

First, install the dependencies.

npm install --include=dev

Components and Styles

You can start the Storybook UI for exploring, testing, and developing components by running:

npm run storybook

This allows for components to be made available without the need of the server to be running and changes to be made in isolation.

Contribute

  1. Find a component that hasn't yet been worked on by looking through the UIv2 milestone and the sidebar of components in storybook.
  2. See if you can have an example of this functionality in action via the Owncast Demo Server or Owncast Nightly Build so you know how it's supposed to work if it's interactive.
  3. Visit the Docs tab to read any specific documentation that may have been written about how this component works.
  4. Go to the Canvas tab of the component you selected and see if there's a Design attached to it.
  5. If there is a design, then that's a starting point you can use to start building out the component.
  6. If there isn't, then visit the Owncast Demo Server, the Owncast Nightly Build, or the proposed v2 design for some ways to start.
  7. If no design exists, then you can ask around the Owncast chat for help, for come up with your own ideas!
  8. 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.

See the extra how-to guide for components here: Components How-to.

Run the web project

Make sure you're running an instance of Owncast on localhost:8080, as your copy of the admin will look to use that as the API.

Next, start the web project with npm.

npm run dev

Update the project

You can add or edit a pages by modifying pages/something.js. The page auto-updates as you edit the file.

Routes will automatically be available for this new page components.

Since this project hits API endpoints you should make requests in componentDidMount, and not in getStaticProps, since they're not static and we don't want to fetch them at build time, but instead at runtime.

A list of API end points can be found here: https://owncast.online/api/development/

Admin Authentication

The pages under /admin require authentication to make API calls.

Auth: HTTP Basic

username: admin

pw: [your streamkey]

Learn More

To learn more about Next.js, take a look at the following resources: