25119561fb
* Add className prop to some components * Give mobile chatbox height priority over other elements * Optimize for mobile landscape mode * Make thumbnail background black * Fix overflow issues on narrow screens * Adjust layout for offline mode on mobile * Fix main content width on Desktop * Fix offline layout for desktop |
||
|---|---|---|
| .. | ||
| .storybook | ||
| .vscode | ||
| assets/images | ||
| components | ||
| docs | ||
| interfaces | ||
| pages | ||
| public | ||
| services | ||
| stories | ||
| style-definitions | ||
| styles | ||
| types | ||
| utils | ||
| .env.development | ||
| .env.production | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| favicon.ico | ||
| LICENSE | ||
| next-env.d.ts | ||
| next.config.js | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| renovate.json | ||
| tsconfig.json | ||
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
- Find a component that hasn't yet been worked on by looking through the UIv2 milestone and the sidebar of components in storybook.
- 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.
- Visit the
Docstab to read any specific documentation that may have been written about how this component works. - Go to the
Canvastab of the component you selected and see if there's a Design attached to it. - If there is a design, then that's a starting point you can use to start building out the component.
- If there isn't, then visit the Owncast Demo Server, the Owncast Nightly Build, or the proposed v2 design for some ways to start.
- If no design exists, then you can ask around the Owncast chat for help, or come up with your own ideas!
- 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:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.