LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Add a recommendation in the admin to add a second, lower quality if only one is set (#356)

Browse Source 
* ✨ add recommendation box if only one, high-quality video variant is set (#1491)

Related to: https://github.com/owncast/owncast/issues/1491

* Prettified Code!

* Tweak the alert text slightly

Co-authored-by: jeyemwey <jeyemwey@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
This commit is contained in:
Jannik 2021-11-03 22:09:47 +01:00 committed by GitHub
parent 24cb1ed0f1
commit e2b0faa0dd
2 changed files with 28 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/components/config/video-variants-table.tsx
View File

@ -1,7 +1,7 @@
// 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 } from 'antd';
import { Typography, Table, Modal, Button, Alert } from 'antd';
import { ColumnsType } from 'antd/lib/table';
import { DeleteOutlined } from '@ant-design/icons';
import { ServerStatusContext } from '../../utils/server-status-context';
@ -15,6 +15,7 @@ import {
RESET_TIMEOUT,
postConfigUpdateToAPI,
ENCODER_PRESET_TOOLTIPS,
ENCODER_RECOMMENDATION_THRESHOLD,
} from '../../utils/config-constants';
import {
createInputStatus,
@ -183,12 +184,31 @@ export default function CurrentVariantsTable() {
...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>
{showSecondVariantRecommendation() && (
<>
<Alert message={ENCODER_RECOMMENDATION_THRESHOLD.HELP_TEXT} type="info" closable />
</>
)}
<FormStatusIndicator status={submitStatus} />
<Table

7
web/utils/config-constants.tsx
View File

@ -290,6 +290,13 @@ export const ENCODER_PRESET_TOOLTIPS = {
5: 'Highest hardware usage - higher quality video',
};
export const ENCODER_RECOMMENDATION_THRESHOLD = {
VIDEO_HEIGHT: 1080,
VIDEO_BITRATE: 3000,
HELP_TEXT:
'You have only set one video quality variant. If your server has the computing resources, consider adding another, lower-quality variant, so more people can view your content!',
};
export const DEFAULT_SOCIAL_HANDLE: SocialHandle = {
url: '',
platform: '',