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

246 lines
6.8 KiB
TypeScript
Raw Normal View History

2021-01-17 11:40:46 +03:00
// Updating a variant will post ALL the variants in an array as an update to the API.
import React, { useContext, useState } from 'react';
import { Typography, Table, Modal, Button, Alert } from 'antd';
2021-01-10 13:37:22 +03:00
import { ColumnsType } from 'antd/lib/table';
2021-01-17 12:41:00 +03:00
import { DeleteOutlined } from '@ant-design/icons';
import { ServerStatusContext } from '../../utils/server-status-context';
import { AlertMessageContext } from '../../utils/alert-message-context';
import { UpdateArgs, VideoVariant } from '../../types/config-section';
2021-01-10 13:37:22 +03:00
import VideoVariantForm from './video-variant-form';
2021-01-31 12:38:20 +03:00
import {
API_VIDEO_VARIANTS,
DEFAULT_VARIANT_STATE,
RESET_TIMEOUT,
postConfigUpdateToAPI,
ENCODER_PRESET_TOOLTIPS,
ENCODER_RECOMMENDATION_THRESHOLD,
} from '../../utils/config-constants';
import {
createInputStatus,
StatusState,
STATUS_ERROR,
STATUS_PROCESSING,
STATUS_SUCCESS,
} from '../../utils/input-statuses';
import FormStatusIndicator from './form-status-indicator';
const { Title } = Typography;
export default function CurrentVariantsTable() {
2021-01-10 13:37:22 +03:00
const [displayModal, setDisplayModal] = useState(false);
const [modalProcessing, setModalProcessing] = useState(false);
2021-01-10 13:37:22 +03:00
const [editId, setEditId] = useState(0);
const { setMessage } = useContext(AlertMessageContext);
// current data inside modal
const [modalDataState, setModalDataState] = useState(DEFAULT_VARIANT_STATE);
2021-01-31 12:38:20 +03:00
const [submitStatus, setSubmitStatus] = useState<StatusState>(null);
2021-01-17 11:40:46 +03:00
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig, setFieldInConfigState } = serverStatusData || {};
const { videoSettings } = serverConfig || {};
const { videoQualityVariants } = videoSettings || {};
let resetTimer = null;
if (!videoSettings) {
return null;
}
const resetStates = () => {
setSubmitStatus(null);
resetTimer = null;
clearTimeout(resetTimer);
2021-01-31 12:38:20 +03:00
};
2021-01-10 13:37:22 +03:00
const handleModalCancel = () => {
setDisplayModal(false);
setEditId(-1);
setModalDataState(DEFAULT_VARIANT_STATE);
2021-01-31 12:38:20 +03:00
};
// posts all the variants at once as an array obj
const postUpdateToAPI = async (postValue: any) => {
setSubmitStatus(createInputStatus(STATUS_PROCESSING));
await postConfigUpdateToAPI({
apiPath: API_VIDEO_VARIANTS,
data: { value: postValue },
onSuccess: () => {
2021-01-31 12:38:20 +03:00
setFieldInConfigState({
fieldName: 'videoQualityVariants',
value: postValue,
path: 'videoSettings',
});
// close modal
setModalProcessing(false);
handleModalCancel();
setSubmitStatus(createInputStatus(STATUS_SUCCESS, 'Variants updated'));
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
if (serverStatusData.online) {
setMessage(
'Updating your video configuration will take effect the next time you begin a new stream.',
);
}
},
onError: (message: string) => {
setSubmitStatus(createInputStatus(STATUS_ERROR, message));
setModalProcessing(false);
resetTimer = setTimeout(resetStates, RESET_TIMEOUT);
},
});
};
// on Ok, send all of dataState to api
// show loading
// close modal when api is done
const handleModalOk = () => {
setModalProcessing(true);
2021-01-31 12:38:20 +03:00
const postData = [...videoQualityVariants];
if (editId === -1) {
postData.push(modalDataState);
} else {
postData.splice(editId, 1, modalDataState);
}
postUpdateToAPI(postData);
2021-01-17 12:41:00 +03:00
};
const handleDeleteVariant = (index: number) => {
2021-01-31 12:38:20 +03:00
const postData = [...videoQualityVariants];
2021-01-17 12:41:00 +03:00
postData.splice(index, 1);
2021-01-31 12:38:20 +03:00
postUpdateToAPI(postData);
2021-01-17 12:41:00 +03:00
};
2021-01-10 13:37:22 +03:00
const handleUpdateField = ({ fieldName, value }: UpdateArgs) => {
setModalDataState({
...modalDataState,
2021-01-10 13:37:22 +03:00
[fieldName]: value,
});
2021-01-31 12:38:20 +03:00
};
const videoQualityColumns: ColumnsType<VideoVariant> = [
{
title: 'Name',
dataIndex: 'name',
render: (name: string) => (!name ? 'No name' : name),
},
{
2021-01-31 12:38:20 +03:00
title: 'Video bitrate',
dataIndex: 'videoBitrate',
key: 'videoBitrate',
2021-02-21 03:09:40 +03:00
render: (bitrate: number, variant: VideoVariant) =>
!bitrate || variant.videoPassthrough ? 'Same as source' : `${bitrate} kbps`,
},
{
2021-01-31 12:38:20 +03:00
title: 'CPU Usage',
dataIndex: 'cpuUsageLevel',
key: 'cpuUsageLevel',
2021-02-21 03:09:40 +03:00
render: (level: string, variant: VideoVariant) =>
!level || variant.videoPassthrough ? 'n/a' : ENCODER_PRESET_TOOLTIPS[level].split(' ')[0],
},
{
title: '',
dataIndex: '',
key: 'edit',
render: ({ key }: VideoVariant) => {
const index = key - 1;
2021-01-17 12:41:00 +03:00
return (
<span className="actions">
2021-01-31 12:38:20 +03:00
<Button
size="small"
onClick={() => {
setEditId(index);
setModalDataState(videoQualityVariants[index]);
setDisplayModal(true);
}}
>
2021-01-17 12:41:00 +03:00
Edit
</Button>
<Button
className="delete-button"
icon={<DeleteOutlined />}
size="small"
disabled={videoQualityVariants.length === 1}
2021-01-17 12:41:00 +03:00
onClick={() => {
handleDeleteVariant(index);
}}
2021-01-31 12:38:20 +03:00
/>
2021-01-17 12:41:00 +03:00
</span>
2021-01-31 12:38:20 +03:00
);
2021-01-17 12:41:00 +03:00
},
2021-01-31 12:38:20 +03:00
},
];
2021-01-31 12:38:20 +03:00
const videoQualityVariantData = videoQualityVariants.map((variant, index) => ({
key: index + 1,
...variant,
}));
const showSecondVariantRecommendation = (): boolean => {
if (videoQualityVariants.length !== 1) {
return false;
}
const [variant] = videoQualityVariants;
return (
ENCODER_RECOMMENDATION_THRESHOLD.VIDEO_HEIGHT <= variant.scaledHeight ||
ENCODER_RECOMMENDATION_THRESHOLD.VIDEO_BITRATE <= variant.videoBitrate
);
};
return (
<>
<Title level={3} className="section-title">
Stream output
</Title>
2021-01-31 12:38:20 +03:00
{showSecondVariantRecommendation() && (
2021-12-07 05:01:30 +03:00
<Alert message={ENCODER_RECOMMENDATION_THRESHOLD.HELP_TEXT} type="info" closable />
)}
<FormStatusIndicator status={submitStatus} />
<Table
2021-01-17 12:41:00 +03:00
className="variants-table"
pagination={false}
size="small"
columns={videoQualityColumns}
dataSource={videoQualityVariantData}
/>
2021-01-10 13:37:22 +03:00
<Modal
title="Edit Video Variant Details"
visible={displayModal}
onOk={handleModalOk}
onCancel={handleModalCancel}
confirmLoading={modalProcessing}
width={900}
2021-01-10 13:37:22 +03:00
>
2021-01-31 12:38:20 +03:00
<VideoVariantForm dataState={{ ...modalDataState }} onUpdateField={handleUpdateField} />
<FormStatusIndicator status={submitStatus} />
2021-01-10 13:37:22 +03:00
</Modal>
<br />
2021-01-31 12:38:20 +03:00
<Button
type="primary"
onClick={() => {
setEditId(-1);
setModalDataState(DEFAULT_VARIANT_STATE);
setDisplayModal(true);
2021-01-31 12:38:20 +03:00
}}
>
Add a new variant
</Button>
</>
);
2021-01-31 12:38:20 +03:00
}