owncast/web
2022-05-09 13:06:17 -07:00
..
.github Fix linter workflow? 2022-03-07 00:02:00 -08:00
.storybook Tweak storybook UI a bit 2022-05-07 01:13:26 -07:00
.vscode Start codec selection in admin 2021-04-13 13:54:57 -07:00
components Missing file 2022-05-09 13:06:17 -07:00
docs - add <Col>s to areas with <Row>s for consitency 2021-02-15 21:22:17 -08:00
interfaces Fill out the follower component 2022-05-04 08:56:47 -07:00
pages Use some style values so it looks like this page is making progress 2022-05-07 10:25:04 -07:00
public Prettified Code! 2022-04-25 15:52:39 -07:00
services Use the webpack dev server proxy for requests 2022-05-08 23:28:54 -07:00
stories Changed Logo and Header 2022-05-08 10:45:45 +02:00
style-definitions Add action buttons and status bar 2022-05-07 16:13:06 -07:00
styles Closed ending bracket 2022-05-08 09:38:42 +02:00
types Display the representation % of players in metrics 2022-03-27 16:28:14 -07:00
utils Connect to websocket and start accepting messages 2022-05-02 22:13:36 -07:00
.editorconfig Bootstrap the admin project 2020-09-30 15:13:06 -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 Handle centralized app state and registration + chat history 2022-05-02 17:45:22 -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 Add ability to set a user as a moderator via the admin (#355) 2021-11-02 17:06:46 -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 Use the webpack dev server proxy for requests 2022-05-08 23:28:54 -07:00
package-lock.json Add style-dictionary definitions 2022-05-06 23:29:44 -07:00
package.json Add style-dictionary definitions 2022-05-06 23:29:44 -07:00
postcss.config.js First pass at component library 2022-04-25 15:52:38 -07:00
README.md More blank components and stories to be filled in 2022-04-28 14:36:05 -07:00
renovate.json Require NPM modules to be stable for 3 days 2022-02-02 14:49:50 -08:00
tsconfig.json Project setting updates 2021-11-08 00:37:15 -08:00

Owncast Web

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

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

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.

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 until /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:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Style guide and components

We are currently experimenting with using Storybook to build components, experiment with styling, and have a single place to find colors, fonts, and other styles.

To work with Storybook:

npm run storybook