start video variant page; setup video variant table for modals wip; use dark theme as default
This commit is contained in:
gingervitis
Gabe Kangas
parent
e7e89556e7
commit
5ed73d7f6f
@ -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,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
76
web/pages/components/config/video-variants-table.tsx
Normal file
76
web/pages/components/config/video-variants-table.tsx
Normal 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}
|
||||
/>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,6 +4,8 @@
|
||||
|
||||
--online-color: #73dd3f;
|
||||
|
||||
--owncast-dark1: #1f1f21;
|
||||
|
||||
|
||||
--ant-error: #ff4d4f;
|
||||
--ant-success: #52c41a;
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
.tag-editor-container,
|
||||
.config-directory-details-form {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(128,0,255,.15);
|
||||
background-color: rgba(128,99,255,.1);
|
||||
padding: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
@ -41,6 +41,15 @@
|
||||
justify-content: flex-end;
|
||||
position: relative;
|
||||
width: 314px;
|
||||
|
||||
// &.type-numeric {
|
||||
// .ant-form-item-control {
|
||||
// flex-direction: row;
|
||||
// .ant-form-item-control-input {
|
||||
// margin-right: .75rem;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
.textfield {
|
||||
display: flex;
|
||||
@ -77,6 +86,17 @@
|
||||
right: 0;
|
||||
bottom: .5em;
|
||||
}
|
||||
// .ant-form-horizontal {
|
||||
// .textfield-container.type-numeric {
|
||||
// width: auto;
|
||||
|
||||
// .submit-button {
|
||||
// bottom: unset;
|
||||
// top: 0;
|
||||
// right: unset;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// form-toggleswitch
|
||||
@ -156,3 +176,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-video-variants {
|
||||
.config-video-misc {
|
||||
margin: 2rem 0;
|
||||
// .ant-form {
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// align-items: flex-start;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
@import "~antd/dist/antd.dark";
|
||||
|
||||
$owncast-purple: rgba(90,103,216,1);
|
||||
|
||||
html,
|
||||
@ -7,6 +9,8 @@ body {
|
||||
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
// background-color: #1f1f21;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -25,6 +29,11 @@ pre {
|
||||
margin: .5rem 0;
|
||||
background-color: #eee;
|
||||
}
|
||||
// pre {
|
||||
// background-color: rgb(44, 44, 44);
|
||||
// color:lightgrey;
|
||||
// }
|
||||
|
||||
code {
|
||||
color: var(--owncast-purple);
|
||||
}
|
||||
@ -34,14 +43,7 @@ code {
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@import "~antd/dist/antd.dark";
|
||||
pre {
|
||||
background-color: rgb(44, 44, 44);
|
||||
color:lightgrey;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// GENERAL ANT FORM OVERRIDES
|
||||
@ -50,24 +52,22 @@ code {
|
||||
}
|
||||
.ant-input-affix-wrapper {
|
||||
border-radius: 5px;
|
||||
background-color: rgba(0,0,0,.1);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255,255,255,.1);
|
||||
}
|
||||
background-color: rgba(255,255,255,.1);
|
||||
|
||||
textarea {
|
||||
border-radius: 5px;
|
||||
}
|
||||
input {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.ant-btn-primary:hover, .ant-btn-primary:focus {
|
||||
background-color: white;
|
||||
color: #40a9ff;
|
||||
}
|
||||
.ant-btn.ant-btn-primary:focus {
|
||||
border: 1px solid var(--owncast-purple);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: white;
|
||||
}
|
||||
border-color: white;
|
||||
|
||||
}
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-btn {
|
||||
@ -76,41 +76,40 @@ code {
|
||||
}
|
||||
|
||||
// markdown editor overrides
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.rc-md-editor {
|
||||
// Set the background color of the preview container
|
||||
.editor-container {
|
||||
background-color: #E2E8F0;
|
||||
color: rgba(45,55,72,1);
|
||||
}
|
||||
|
||||
// Custom CSS for formatting the preview text
|
||||
.markdown-editor-preview-pane {
|
||||
// color:lightgrey;
|
||||
a {
|
||||
color: $owncast-purple;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
.rc-md-editor {
|
||||
// Set the background color of the preview container
|
||||
.editor-container {
|
||||
background-color: #E2E8F0;
|
||||
color: rgba(45,55,72,1);
|
||||
}
|
||||
|
||||
// Custom CSS class used to format the text of the editor
|
||||
.markdown-editor-pane {
|
||||
color: white !important;
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
// Custom CSS for formatting the preview text
|
||||
.markdown-editor-preview-pane {
|
||||
// color:lightgrey;
|
||||
a {
|
||||
color: $owncast-purple;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
// Set the background color of the editor text input
|
||||
textarea {
|
||||
background-color: rgb(44,44,44) !important;
|
||||
color:lightgrey !important;
|
||||
}
|
||||
// Custom CSS class used to format the text of the editor
|
||||
.markdown-editor-pane {
|
||||
color: white !important;
|
||||
background-color: black;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
// Hide extra toolbar buttons.
|
||||
.button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Set the background color of the editor text input
|
||||
textarea {
|
||||
background-color: rgb(44,44,44) !important;
|
||||
color:lightgrey !important;
|
||||
}
|
||||
|
||||
// Hide extra toolbar buttons.
|
||||
.button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user