owncast/web/pages/components/config/video-variants-table.tsx

76 lines
1.8 KiB
TypeScript

import React, { useContext } from 'react';
import { Typography, Table, Modal } from 'antd';
import { ServerStatusContext } from '../../../utils/server-status-context';
const { Title } = Typography;
export default function CurrentVariantsTable() {
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig } = serverStatusData || {};
const { videoSettings } = serverConfig || {};
const { videoQualityVariants } = videoSettings || {};
if (!videoSettings) {
return null;
}
const videoQualityColumns = [
{
title: "#",
dataIndex: "key",
key: "key"
},
{
title: "Video bitrate",
dataIndex: "videoBitrate",
key: "videoBitrate",
render: (bitrate: number) =>
!bitrate ? "Same as source" : `${bitrate} kbps`,
},
{
title: "Framerate",
dataIndex: "framerate",
key: "framerate",
render: (framerate: number) =>
!framerate ? "Same as source" : `${framerate} fps`,
},
{
title: "Encoder preset",
dataIndex: "encoderPreset",
key: "encoderPreset",
render: (preset: string) =>
!preset ? "n/a" : preset,
},
{
title: "Audio bitrate",
dataIndex: "audioBitrate",
key: "audioBitrate",
render: (bitrate: number) =>
!bitrate ? "Same as source" : `${bitrate} kbps`,
},
{
title: '',
dataIndex: '',
key: 'edit',
render: () => "edit.. populate modal",
},
];
const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({ key: index, ...variant }));
return (
<>
<Title level={3}>Current Variants</Title>
<Table
pagination={false}
size="small"
columns={videoQualityColumns}
dataSource={videoQualityVariantData}
/>
</>
);
}