owncast/web/pages/config-video.tsx
Jannik be5243f5f8 Update Next to 11.0.1 (including lint & import fixes) (#248)
* Bump next from 10.2.3 to 11.0.1

Bumps [next](https://github.com/vercel/next.js) from 10.2.3 to 11.0.1.
- [Release notes](https://github.com/vercel/next.js/releases)
- [Changelog](https://github.com/vercel/next.js/blob/canary/release.js)
- [Commits](https://github.com/vercel/next.js/compare/v10.2.3...v11.0.1)

---
updated-dependencies:
- dependency-name: next
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* 🚨 apply automatic linting

* 🎨 remove unused imports

* 🔇 allow console.* to give more debugging options

* 🎨 move stuff around to reduce linter messages

* 🚨 use destructuring so lint won't complain

* 📌 link Chartkick and Chart.js

Commit uses the linking code which was previously imported with
`import "chartkick/chart.js" [1]. Next did not like the import path,
but this does works now. ¯\_(ツ)_/¯

[1]: https://github.com/ankane/chartkick.js/blob/master/chart.js/chart.esm.js

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2021-07-09 11:42:01 -07:00

50 lines
1.6 KiB
TypeScript

import { Col, Collapse, Row, Typography } from 'antd';
import React from 'react';
import VideoCodecSelector from '../components/config/video-codec-selector';
import VideoLatency from '../components/config/video-latency';
import VideoVariantsTable from '../components/config/video-variants-table';
const { Panel } = Collapse;
const { Title } = Typography;
export default function ConfigVideoSettings() {
return (
<div className="config-video-variants">
<Title>Video configuration</Title>
<p className="description">
Before changing your video configuration{' '}
<a
href="https://owncast.online/docs/video?source=admin"
target="_blank"
rel="noopener noreferrer"
>
visit the video documentation
</a>{' '}
to learn how it impacts your stream performance. The general rule is to start conservatively
by having one middle quality stream output variant and experiment with adding more of varied
qualities.
</p>
<Row gutter={[16, 16]}>
<Col md={24} lg={12}>
<div className="form-module variants-table-module">
<VideoVariantsTable />
</div>
</Col>
<Col md={24} lg={12}>
<div className="form-module latency-module">
<VideoLatency />
</div>
<Collapse className="advanced-settings codec-module">
<Panel header="Advanced Settings" key="1">
<div className="form-module variants-table-module">
<VideoCodecSelector />
</div>
</Panel>
</Collapse>
</Col>
</Row>
</div>
);
}