LogalDeveloper/owncast
0
Fork 0
Code Activity

start video variant page; setup video variant table for modals wip; use dark theme as default

Browse Source
This commit is contained in:
gingervitis
2021-01-24 13:05:43 -08:00
committed by Gabe Kangas
parent e7e89556e7
commit 5ed73d7f6f
11 changed files with 234 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/pages/components/config/constants.tsx
+8 -2
View File
@@ -187,23 +187,29 @@ export const TEXTFIELD_DEFAULTS = {
},
videoSettings: {
// number slider
numberOfPlaylistItems: {
apiPath: '/webserverport', // tbd
defaultValue: 4,
maxLength: 6,
maxLength: 3,
placeholder: '4',
label: 'Segment Length',
tip: '',
required: true,
minValue: 1,
maxValue: 10,
},
// number slider
segmentLengthSeconds: {
apiPath: '/webserverport', // tbd
defaultValue: 5,
maxLength: 6,
maxLength: 3,
placeholder: '5',
label: 'Number of segments',
tip: '',
required: true,
minValue: 1,
maxValue: 10,
},
}
}
web/pages/components/config/edit-directory.tsx
-1
View File
@@ -35,7 +35,6 @@ export default function EditYPDetails() {
disabled: !hasInstanceUrl,
};
// TODO: DISABLE THIS SECTION UNTIL instanceURL is populated
return (
<div className="config-directory-details-form">
<Title level={3}>Owncast Directory Settings</Title>
web/pages/components/config/form-textfield.tsx
+4 -4
View File
@@ -31,7 +31,7 @@ export default function TextField(props: TextFieldProps) {
configPath = '',
disabled = false,
fieldName,
handleResetValue,
handleResetValue = () => {},
initialValues = {},
onSubmit,
onBlur,
@@ -67,7 +67,7 @@ export default function TextField(props: TextFieldProps) {
const val = type === TEXTFIELD_TYPE_NUMBER ? e : e.target.value;
// https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
const hasValidity = type !== TEXTFIELD_TYPE_NUMBER && e.target.validity.valid;
const hasValidity = (type !== TEXTFIELD_TYPE_NUMBER && e.target.validity.valid) || type === TEXTFIELD_TYPE_NUMBER ;
if ((required && (val === '' || val === null)) || val === initialValue || !hasValidity) {
setHasChanged(false);
@@ -139,7 +139,7 @@ export default function TextField(props: TextFieldProps) {
Field = InputNumber;
fieldProps = {
type: 'number',
min: 0,
min: 1,
max: (10**maxLength) - 1,
onKeyDown: (e: React.KeyboardEvent) => {
if (e.target.value.length > maxLength - 1 )
@@ -154,7 +154,7 @@ export default function TextField(props: TextFieldProps) {
}
return (
<div className="textfield-container">
<div className={`textfield-container type-${type}`}>
<div className="textfield">
<InfoTip tip={tip} />
<Form.Item
web/pages/components/config/video-variants-table.tsx
+76
View File
@@ -0,0 +1,76 @@
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}
/>
</>
);
}
web/pages/config-page-content.tsx
+1 -1
View File
@@ -95,7 +95,7 @@ export default function PageContentEditor() {
}}
/>
<div className="page-content-actions">
{ hasChanged ? <Button type="primary" size="small" onClick={handleSave}>Save</Button> : null }
{ hasChanged ? <Button type="primary" onClick={handleSave}>Save</Button> : null }
<div className={`status-message ${submitStatus || ''}`}>
{newStatusIcon} {newStatusMessage} {submitStatusMessage}
</div>
web/pages/config-public-details.tsx
+9 -11
View File
@@ -1,5 +1,6 @@
import React, { useContext, useEffect } from 'react';
import { Typography, Form } from 'antd';
import Link from 'next/link';
import TextField, { TEXTFIELD_TYPE_TEXTAREA, TEXTFIELD_TYPE_URL } from './components/config/form-textfield';
@@ -18,27 +19,21 @@ export default function PublicFacingDetails() {
const { serverConfig } = serverStatusData || {};
const { instanceDetails, yp } = serverConfig;
const { instanceDetails: instanceDetailsDefaults, yp: ypDefaults } = TEXTFIELD_DEFAULTS;
const initialValues = {
...instanceDetails,
...yp,
};
const defaultFields = {
...instanceDetailsDefaults,
...ypDefaults,
};
useEffect(() => {
form.setFieldsValue(initialValues);
}, [instanceDetails]);
const handleResetValue = (fieldName: string) => {
const defaultValue = defaultFields[fieldName] && defaultFields[fieldName].defaultValue || '';
// const handleResetValue = (fieldName: string) => {
// const defaultValue = defaultFields[fieldName] && defaultFields[fieldName].defaultValue || '';
form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
}
// form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
// }
// if instanceUrl is empty, we should also turn OFF the `enabled` field of directory.
const handleSubmitInstanceUrl = () => {
@@ -54,7 +49,7 @@ export default function PublicFacingDetails() {
}
const extraProps = {
handleResetValue,
// handleResetValue,
initialValues,
configPath: 'instanceDetails',
};
@@ -83,6 +78,9 @@ export default function PublicFacingDetails() {
<TextField fieldName="summary" type={TEXTFIELD_TYPE_TEXTAREA} {...extraProps} />
<TextField fieldName="logo" {...extraProps} />
</Form>
<Link href="/admin/config-page-content">
<a>this page!</a>
</Link>
</div>
<div className="misc-fields">
{/* add social handles comp
web/pages/config-server-details.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export default function ConfigServerDetails() {
const defaultValue = TEXTFIELD_DEFAULTS[fieldName] && TEXTFIELD_DEFAULTS[fieldName].defaultValue || '';
form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
}
};
const extraProps = {
handleResetValue,
web/pages/config-video.tsx
+52 -103
View File
@@ -1,113 +1,62 @@
import React, { useContext } from 'react';
import { Table, Typography } from 'antd';
import React, { useContext, useEffect } from 'react';
import { Typography, Form, Slider } from 'antd';
import { ServerStatusContext } from '../utils/server-status-context';
import VideoVariantsTable from './components/config/video-variants-table';
import TextField, { TEXTFIELD_TYPE_NUMBER } from './components/config/form-textfield';
import { TEXTFIELD_DEFAULTS } from './components/config/constants';
const { Title } = Typography;
function VideoVariants({ config }) {
if (!config || !config.videoSettings) {
return null;
}
console.log(config.videoSettings)
const videoQualityColumns = [
{
title: "#",
dataIndex: "key",
key: "key"
},
{
title: "Video bitrate",
dataIndex: "videoBitrate",
key: "videoBitrate",
render: (bitrate) =>
!bitrate ? "Same as source" : `${bitrate} kbps`,
},
{
title: "Framerate",
dataIndex: "framerate",
key: "framerate",
render: (framerate) =>
!framerate ? "Same as source" : `${framerate} fps`,
},
{
title: "Encoder preset",
dataIndex: "encoderPreset",
key: "framerate",
render: (preset) =>
!preset ? "n/a" : preset,
},
{
title: "Audio bitrate",
dataIndex: "audioBitrate",
key: "audioBitrate",
render: (bitrate) =>
!bitrate ? "Same as source" : `${bitrate} kbps`,
},
];
const miscVideoSettingsColumns = [
{
title: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Value",
dataIndex: "value",
key: "value",
},
];
const miscVideoSettings = [
{
name: "Segment length",
value: config.videoSettings.segmentLengthSeconds,
key: "segmentLength"
},
{
name: "Number of segments",
value: config.videoSettings.numberOfPlaylistItems,
key: "numberOfSegments"
},
];
const videoQualityVariantData = config.videoSettings.videoQualityVariants.map(function(variant, index) {
return {
key: index,
...variant
}
});
return (
<div>
<Title>Video configuration</Title>
<Table
pagination={false}
columns={videoQualityColumns}
dataSource={videoQualityVariantData}
/>
<Table
pagination={false}
columns={miscVideoSettingsColumns}
dataSource={miscVideoSettings}
rowKey={row => row.name}
/>
<br/>
<Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
</div>
);
}
export default function VideoConfig() {
export default function VideoConfig() {
const [form] = Form.useForm();
const serverStatusData = useContext(ServerStatusContext);
const { serverConfig: config } = serverStatusData || {};
// const { serverConfig } = serverStatusData || {};
// const { videoSettings } = serverConfig || {};
// const { numberOfPlaylistItems, segmentLengthSeconds } = videoSettings || {};
const videoSettings = serverStatusData?.serverConfig?.videoSettings;
const { numberOfPlaylistItems, segmentLengthSeconds } = videoSettings || {};
const initialValues = {
numberOfPlaylistItems,
segmentLengthSeconds,
};
useEffect(() => {
form.setFieldsValue(initialValues);
}, [serverStatusData]);
const handleResetValue = (fieldName: string) => {
const defaultValue = TEXTFIELD_DEFAULTS.videoSettings[fieldName] && TEXTFIELD_DEFAULTS.videoSettings[fieldName].defaultValue || '';
form.setFieldsValue({ [fieldName]: initialValues[fieldName] || defaultValue });
}
const extraProps = {
handleResetValue,
initialValues: videoSettings,
configPath: 'videoSettings',
};
return (
<div>
<VideoVariants config={config} />
<div className="config-video-variants">
<Title level={2}>Video configuration</Title>
<Title level={5}>Learn more about configuring Owncast <a href="https://owncast.online/docs/configuration">by visiting the documentation.</a></Title>
<div className="config-video-misc">
<Slider defaultValue={37} />
<Slider tooltipVisible step={10} defaultValue={37} />
<Form
form={form}
layout="vertical"
>
<TextField fieldName="numberOfPlaylistItems" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
<TextField fieldName="segmentLengthSeconds" type={TEXTFIELD_TYPE_NUMBER} {...extraProps} />
</Form>
</div>
<VideoVariantsTable />
</div>
);
}