Initial localization work (#3980)
* First pass at configuring localization * Add CI job for translations * Update CI job * Update default value * Update parser config * Update defaults again * try to fix the multiple parsing of a file * Update crowdlin config * Update configs * New Crowdin translations by GitHub Action (#3448) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * Point to updated translated files * Tooltip i18n * Run translation job when web components are updated * Commit updated translations * Translations update (#3453) * Update source file strings.json Updated translations * New translations strings.json (French) Updated translations * New translations strings.json (Spanish) Updated translations * New translations strings.json (German) Updated translations * New translations strings.json (English, United States) Updated translations * Commit updated translations * New Crowdin translations by GitHub Action (#3452) Co-authored-by: Owncast <owncast@owncast.online> * chore(deps): update to next config to address build errors * New Crowdin translations by GitHub Action (#3455) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * Translations update (#3456) * New translations strings.json (Arabic) Updated translations * New translations strings.json (German) Updated translations * New translations strings.json (Greek) Updated translations * New translations strings.json (Irish) Updated translations * New translations strings.json (Italian) Updated translations * New translations strings.json (Japanese) Updated translations * New translations strings.json (Korean) Updated translations * New translations strings.json (Dutch) Updated translations * New translations strings.json (Norwegian) Updated translations * New translations strings.json (Punjabi) Updated translations * New translations strings.json (Russian) Updated translations * New translations strings.json (Swedish) Updated translations * New translations strings.json (Chinese Traditional) Updated translations * New translations strings.json (Vietnamese) Updated translations * New translations strings.json (Bengali) Updated translations * New translations strings.json (Thai) Updated translations * New translations strings.json (Croatian) Updated translations * New translations strings.json (Hindi) Updated translations * New translations strings.json (Malay) Updated translations * New Crowdin translations by GitHub Action (#3457) * New translations strings.json (Arabic) Updated translations * New translations strings.json (German) Updated translations * New translations strings.json (Greek) Updated translations * New translations strings.json (Irish) Updated translations * New translations strings.json (Italian) Updated translations * New translations strings.json (Japanese) Updated translations * New translations strings.json (Korean) Updated translations * New translations strings.json (Dutch) Updated translations * New translations strings.json (Norwegian) Updated translations * New translations strings.json (Punjabi) Updated translations * New translations strings.json (Russian) Updated translations * New translations strings.json (Swedish) Updated translations * New translations strings.json (Chinese Traditional) Updated translations * New translations strings.json (Vietnamese) Updated translations * New translations strings.json (Bengali) Updated translations * New translations strings.json (Thai) Updated translations * New translations strings.json (Croatian) Updated translations * New translations strings.json (Hindi) Updated translations * New translations strings.json (Malay) Updated translations * New Crowdin translations by GitHub Action --------- Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * Commit updated API documentation * Update translations job * New Crowdin translations by GitHub Action (#3698) Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * Update Crowdin configuration file * Translations update (#3700) * New translations strings.json (French) Updated translations * New translations strings.json (Italian) Updated translations * Translations update (#3699) * New translations strings.json (French) Updated translations * New translations strings.json (Spanish) Updated translations * New translations strings.json (Italian) Updated translations * New translations strings.json (Japanese) Updated translations * New translations strings.json (Polish) Updated translations * New translations strings.json (Russian) Updated translations * New translations strings.json (Portuguese, Brazilian) Updated translations * Commit updated API documentation --------- Co-authored-by: Owncast <owncast@owncast.online> * New Crowdin translations by GitHub Action (#3701) * New translations strings.json (French) Updated translations * New translations strings.json (Spanish) Updated translations * New translations strings.json (Italian) Updated translations * New translations strings.json (Japanese) Updated translations * New translations strings.json (Polish) Updated translations * New translations strings.json (Russian) Updated translations * New translations strings.json (Portuguese, Brazilian) Updated translations * New Crowdin translations by GitHub Action --------- Co-authored-by: Gabe Kangas <gabek@real-ity.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> * Draft: Mark strings for translation. (#3458) * Mark strings for translation. * Mark up strings for translation * fix(web): fix linter warnings --------- Co-authored-by: Le fractal <17422-fractal@users.noreply.framagit.org> Co-authored-by: Gabe Kangas <gabek@real-ity.com> * do not pull from cowdin via workflow * Commit updated translations * feat: add translations support to admin pages and components (#3977) * feat: add translations support to admin pages and components Added translations support admin main page and its components, help page, handware-info page. Added translations support for LogTable, NewsFeed and StreamHealthOverview components. * update package.json * fix rendering issue * Commit updated API documentation --------- Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: Gabe Kangas <gabek@real-ity.com> * Offline banner i18n formatting (#3997) * Fix "Last live ago" string formatting with i18n interpolation * Change some base translation jsons to use i18n interpolation * Linting fix * chore(js): ignore i18n pkgs in knip * fix(test): fix browser ui test * fix(js): remove unused var --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: Owncast <owncast@owncast.online> Co-authored-by: taintedcypher <119351153+taintedcypher@users.noreply.github.com> Co-authored-by: Le fractal <17422-fractal@users.noreply.framagit.org> Co-authored-by: Sufyaan Khateeb <81009832+SufyaanKhateeb@users.noreply.github.com> Co-authored-by: mahmed2000 <mahmad2000@protonmail.com>
This commit is contained in:
Gabe Kangas
@@ -5,6 +5,7 @@ import { ColumnsType } from 'antd/es/table';
|
||||
import { format } from 'date-fns';
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useTranslation } from 'next-export-i18n';
|
||||
import { MessageType } from '../../../types/chat';
|
||||
import {
|
||||
CHAT_HISTORY,
|
||||
@@ -61,6 +62,7 @@ export default function Chat() {
|
||||
const [bulkProcessing, setBulkProcessing] = useState(false);
|
||||
const [bulkOutcome, setBulkOutcome] = useState(null);
|
||||
const [bulkAction, setBulkAction] = useState('');
|
||||
const { t } = useTranslation();
|
||||
let outcomeTimeout = null;
|
||||
let chatReloadInterval = null;
|
||||
|
||||
@@ -153,7 +155,7 @@ export default function Chat() {
|
||||
|
||||
const chatColumns: ColumnsType<MessageType> = [
|
||||
{
|
||||
title: 'Time',
|
||||
title: t('Time'),
|
||||
dataIndex: 'timestamp',
|
||||
key: 'timestamp',
|
||||
className: 'timestamp-col',
|
||||
@@ -166,7 +168,7 @@ export default function Chat() {
|
||||
width: 90,
|
||||
},
|
||||
{
|
||||
title: 'User',
|
||||
title: t('User'),
|
||||
dataIndex: 'user',
|
||||
key: 'user',
|
||||
className: 'name-col',
|
||||
@@ -182,7 +184,7 @@ export default function Chat() {
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
title: 'Message',
|
||||
title: t('Message'),
|
||||
dataIndex: 'body',
|
||||
key: 'body',
|
||||
className: 'message-col',
|
||||
@@ -201,8 +203,8 @@ export default function Chat() {
|
||||
key: 'hiddenAt',
|
||||
className: 'toggle-col',
|
||||
filters: [
|
||||
{ text: 'Visible messages', value: true },
|
||||
{ text: 'Hidden messages', value: false },
|
||||
{ text: t('Visible messages'), value: true },
|
||||
{ text: t('Hidden messages'), value: false },
|
||||
],
|
||||
onFilter: (value, record) => record.visible === value,
|
||||
render: (hiddenAt, record) => (
|
||||
@@ -219,10 +221,12 @@ export default function Chat() {
|
||||
|
||||
return (
|
||||
<div className="chat-messages">
|
||||
<Title>Chat Messages</Title>
|
||||
<p>Manage the messages from viewers that show up on your stream.</p>
|
||||
<Title>{t('Chat Messages')}</Title>
|
||||
<p>{t('Manage the messages from viewers that show up on your stream.')}</p>
|
||||
<div className={bulkDivClasses}>
|
||||
<span className="label">Check multiple messages to change their visibility to: </span>
|
||||
<span className="label">
|
||||
{t('Check multiple messages to change their visibility to:')}{' '}
|
||||
</span>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
@@ -234,7 +238,7 @@ export default function Chat() {
|
||||
disabled={!selectedRowKeys.length || (bulkAction && bulkAction !== 'show')}
|
||||
onClick={handleSubmitBulkShow}
|
||||
>
|
||||
Show
|
||||
{t('Show')}
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
@@ -246,7 +250,7 @@ export default function Chat() {
|
||||
disabled={!selectedRowKeys.length || (bulkAction && bulkAction !== 'hide')}
|
||||
onClick={handleSubmitBulkHide}
|
||||
>
|
||||
Hide
|
||||
{t('Hide')}
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect, useContext, ReactElement } from 'react';
|
||||
import { Tabs } from 'antd';
|
||||
import { useTranslation } from 'next-export-i18n';
|
||||
import { ServerStatusContext } from '../../../utils/server-status-context';
|
||||
import {
|
||||
CONNECTED_CLIENTS,
|
||||
@@ -24,6 +25,7 @@ export default function ChatUsers() {
|
||||
const [ipBans, setIPBans] = useState([]);
|
||||
const [clients, setClients] = useState([]);
|
||||
const [moderators, setModerators] = useState([]);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const getInfo = async () => {
|
||||
try {
|
||||
@@ -71,34 +73,50 @@ export default function ChatUsers() {
|
||||
<>
|
||||
<ClientTable data={clients} />
|
||||
<p className="description">
|
||||
Visit the{' '}
|
||||
{t('Visit the')}{' '}
|
||||
<a
|
||||
href="https://owncast.online/docs/viewers/?source=admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
documentation
|
||||
{t('documentation')}
|
||||
</a>{' '}
|
||||
to configure additional details about your viewers.
|
||||
{t('to configure additional details about your viewers.')}
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="description">
|
||||
When a stream is active and chat is enabled, connected chat clients will be displayed here.
|
||||
{t(
|
||||
'When a stream is active and chat is enabled, connected chat clients will be displayed here.',
|
||||
)}
|
||||
</p>
|
||||
);
|
||||
|
||||
const connectedUserTabTitle = (
|
||||
<span>Connected {online ? `(${clients.length})` : '(offline)'}</span>
|
||||
<span>
|
||||
{t('Connected')} ({online ? clients.length : t('offline')})
|
||||
</span>
|
||||
);
|
||||
|
||||
const bannedUsersTabTitle = <span>Banned Users ({disabledUsers.length})</span>;
|
||||
const bannedUsersTabTitle = (
|
||||
<span>
|
||||
{t('Banned Users')} ({disabledUsers.length})
|
||||
</span>
|
||||
);
|
||||
const bannedUsersTable = <UserTable data={disabledUsers} />;
|
||||
|
||||
const bannedIPTabTitle = <span>IP Bans ({ipBans.length})</span>;
|
||||
const bannedIPTabTitle = (
|
||||
<span>
|
||||
{t('IP Bans')} ({ipBans.length})
|
||||
</span>
|
||||
);
|
||||
const bannedIpTable = <BannedIPsTable data={ipBans} />;
|
||||
|
||||
const moderatorUsersTabTitle = <span>Moderators ({moderators.length})</span>;
|
||||
const moderatorUsersTabTitle = (
|
||||
<span>
|
||||
{t('Moderators')} ({moderators.length})
|
||||
</span>
|
||||
);
|
||||
const moderatorTable = <UserTable data={moderators} />;
|
||||
|
||||
const items = [
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Row, Col, Typography, Alert, Spin } from 'antd';
|
||||
import React, { ReactElement, useEffect, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useTranslation } from 'next-export-i18n';
|
||||
import { fetchData, FETCH_INTERVAL, HARDWARE_STATS } from '../../utils/apis';
|
||||
import { Chart } from '../../components/admin/Chart';
|
||||
import { StatisticItem } from '../../components/admin/StatisticItem';
|
||||
@@ -22,6 +23,7 @@ const SaveOutlined = dynamic(() => import('@ant-design/icons/SaveOutlined'), {
|
||||
});
|
||||
|
||||
export default function HardwareInfo() {
|
||||
const { t } = useTranslation();
|
||||
const [hardwareStatus, setHardwareStatus] = useState({
|
||||
cpu: [], // Array<TimedValue>(),
|
||||
memory: [], // Array<TimedValue>(),
|
||||
@@ -53,13 +55,13 @@ export default function HardwareInfo() {
|
||||
if (!hardwareStatus.cpu) {
|
||||
return (
|
||||
<div>
|
||||
<Typography.Title>Hardware Info</Typography.Title>
|
||||
<Typography.Title>{t('Hardware Info')}</Typography.Title>
|
||||
|
||||
<Alert
|
||||
style={{ marginTop: '10px' }}
|
||||
banner
|
||||
message="Please wait"
|
||||
description="No hardware details have been collected yet."
|
||||
message={t('Please wait')}
|
||||
description={t('No hardware details have been collected yet.')}
|
||||
type="info"
|
||||
/>
|
||||
<Spin spinning style={{ width: '100%', margin: '10px' }} />
|
||||
@@ -73,19 +75,19 @@ export default function HardwareInfo() {
|
||||
|
||||
const series = [
|
||||
{
|
||||
name: 'CPU',
|
||||
name: t('CPU'),
|
||||
color: '#B63FFF',
|
||||
data: hardwareStatus.cpu,
|
||||
pointStyle: 'rect',
|
||||
},
|
||||
{
|
||||
name: 'Memory',
|
||||
name: t('Memory'),
|
||||
color: '#2087E2',
|
||||
data: hardwareStatus.memory,
|
||||
pointStyle: 'circle',
|
||||
},
|
||||
{
|
||||
name: 'Disk',
|
||||
name: t('Disk'),
|
||||
color: '#FF7700',
|
||||
data: hardwareStatus.disk,
|
||||
pointStyle: 'rectRounded',
|
||||
@@ -94,7 +96,7 @@ export default function HardwareInfo() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography.Title>Hardware Info</Typography.Title>
|
||||
<Typography.Title>{t('Hardware Info')}</Typography.Title>
|
||||
<br />
|
||||
<div>
|
||||
<Row gutter={[16, 16]} justify="space-around">
|
||||
@@ -130,7 +132,7 @@ export default function HardwareInfo() {
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Chart title="% used" dataCollections={series} color="#FF7700" unit="%" />
|
||||
<Chart title={`% ${t('used')}`} dataCollections={series} color="#FF7700" unit="%" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -5,6 +5,7 @@ import Title from 'antd/lib/typography/Title';
|
||||
import React, { ReactElement } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
import { useTranslation } from 'next-export-i18n';
|
||||
import { AdminLayout } from '../../components/layouts/AdminLayout';
|
||||
|
||||
// Lazy loaded components
|
||||
@@ -50,10 +51,12 @@ const SlidersTwoTone = dynamic(() => import('@ant-design/icons/SlidersTwoTone'),
|
||||
});
|
||||
|
||||
export default function Help() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const questions = [
|
||||
{
|
||||
icon: <SettingTwoTone style={{ fontSize: '24px' }} />,
|
||||
title: 'I want to configure my owncast instance',
|
||||
title: t('I want to configure my owncast instance'),
|
||||
content: (
|
||||
<div>
|
||||
<a
|
||||
@@ -61,14 +64,14 @@ export default function Help() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<LinkOutlined /> Learn more
|
||||
<LinkOutlined /> {t('Learn more')}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: <CameraTwoTone style={{ fontSize: '24px' }} />,
|
||||
title: 'Help configuring my broadcasting software',
|
||||
title: t('Help configuring my broadcasting software'),
|
||||
content: (
|
||||
<div>
|
||||
<a
|
||||
@@ -76,14 +79,14 @@ export default function Help() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<LinkOutlined /> Learn more
|
||||
<LinkOutlined /> {t('Learn more')}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: <Html5TwoTone style={{ fontSize: '24px' }} />,
|
||||
title: 'I want to embed my stream into another site',
|
||||
title: t('I want to embed my stream into another site'),
|
||||
content: (
|
||||
<div>
|
||||
<a
|
||||
@@ -91,14 +94,14 @@ export default function Help() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<LinkOutlined /> Learn more
|
||||
<LinkOutlined /> {t('Learn more')}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: <EditTwoTone style={{ fontSize: '24px' }} />,
|
||||
title: 'I want to customize my website',
|
||||
title: t('I want to customize my website'),
|
||||
content: (
|
||||
<div>
|
||||
<a
|
||||
@@ -106,14 +109,14 @@ export default function Help() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<LinkOutlined /> Learn more
|
||||
<LinkOutlined /> {t('Learn more')}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: <SlidersTwoTone style={{ fontSize: '24px' }} />,
|
||||
title: 'I want to tweak my video output',
|
||||
title: t('I want to tweak my video output'),
|
||||
content: (
|
||||
<div>
|
||||
<a
|
||||
@@ -121,14 +124,14 @@ export default function Help() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<LinkOutlined /> Learn more
|
||||
<LinkOutlined /> {t('Learn more')}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: <DatabaseTwoTone style={{ fontSize: '24px' }} />,
|
||||
title: 'I want to use an external storage provider',
|
||||
title: t('I want to use an external storage provider'),
|
||||
content: (
|
||||
<div>
|
||||
<a
|
||||
@@ -136,7 +139,7 @@ export default function Help() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<LinkOutlined /> Learn more
|
||||
<LinkOutlined /> {t('Learn more')}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
@@ -146,58 +149,58 @@ export default function Help() {
|
||||
const otherResources = [
|
||||
{
|
||||
icon: <BugTwoTone style={{ fontSize: '24px' }} />,
|
||||
title: 'I found a bug',
|
||||
title: t('I found a bug'),
|
||||
content: (
|
||||
<div>
|
||||
If you found a bug, then please
|
||||
{t('If you found a bug, then please')}
|
||||
<a
|
||||
href="https://github.com/owncast/owncast/issues/new/choose"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{' '}
|
||||
let us know
|
||||
{t('let us know')}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: <QuestionCircleTwoTone style={{ fontSize: '24px' }} />,
|
||||
title: 'I have a general question',
|
||||
title: t('I have a general question'),
|
||||
content: (
|
||||
<div>
|
||||
Most general questions are answered in our
|
||||
{t('Most general questions are answered in our')}
|
||||
<a
|
||||
href="https://owncast.online/faq/?source=admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{' '}
|
||||
FAQ
|
||||
{t('FAQ')}
|
||||
</a>{' '}
|
||||
or exist in our{' '}
|
||||
{t('or exist in our')}{' '}
|
||||
<a
|
||||
href="https://github.com/owncast/owncast/discussions"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
discussions
|
||||
{t('discussions')}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: <ApiTwoTone style={{ fontSize: '24px' }} />,
|
||||
title: 'I want to build add-ons for Owncast',
|
||||
title: t('I want to build add-ons for Owncast'),
|
||||
content: (
|
||||
<div>
|
||||
You can build your own bots, overlays, tools and add-ons with our
|
||||
{t('You can build your own bots, overlays, tools and add-ons with our')}
|
||||
<a
|
||||
href="https://owncast.online/thirdparty?source=admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
developer APIs.
|
||||
{t('developer APIs.')}
|
||||
</a>
|
||||
</div>
|
||||
),
|
||||
@@ -206,11 +209,11 @@ export default function Help() {
|
||||
|
||||
return (
|
||||
<div className="help-page">
|
||||
<Title style={{ textAlign: 'center' }}>How can we help you?</Title>
|
||||
<Title style={{ textAlign: 'center' }}>{t('How can we help you?')}</Title>
|
||||
<Row gutter={[16, 16]} justify="space-around" align="middle">
|
||||
<Col xs={24} lg={12} style={{ textAlign: 'center' }}>
|
||||
<Result status="500" />
|
||||
<Title level={2}>Troubleshooting</Title>
|
||||
<Title level={2}>{t('Troubleshooting')}</Title>
|
||||
<Button
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
@@ -218,12 +221,12 @@ export default function Help() {
|
||||
icon={<LinkOutlined />}
|
||||
type="primary"
|
||||
>
|
||||
Fix your problems
|
||||
{t('Fix your problems')}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col xs={24} lg={12} style={{ textAlign: 'center' }}>
|
||||
<Result status="404" />
|
||||
<Title level={2}>Documentation</Title>
|
||||
<Title level={2}>{t('Documentation')}</Title>
|
||||
<Button
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
@@ -231,12 +234,12 @@ export default function Help() {
|
||||
icon={<LinkOutlined />}
|
||||
type="primary"
|
||||
>
|
||||
Read the Docs
|
||||
{t('Read the Docs')}
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Divider />
|
||||
<Title level={2}>Common tasks</Title>
|
||||
<Title level={2}>{t('Common tasks')}</Title>
|
||||
<Row gutter={[16, 16]}>
|
||||
{questions.map(question => (
|
||||
<Col xs={24} lg={12} key={question.title}>
|
||||
@@ -247,7 +250,7 @@ export default function Help() {
|
||||
))}
|
||||
</Row>
|
||||
<Divider />
|
||||
<Title level={2}>Other</Title>
|
||||
<Title level={2}>{t('Other')}</Title>
|
||||
<Row gutter={[16, 16]}>
|
||||
{otherResources.map(question => (
|
||||
<Col xs={24} lg={12} key={question.title}>
|
||||
|
||||
@@ -3,6 +3,7 @@ import React, { useState, useEffect, useContext, ReactElement } from 'react';
|
||||
import { Skeleton, Card, Statistic, Row, Col } from 'antd';
|
||||
import { formatDistanceToNow, formatRelative } from 'date-fns';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useTranslation } from 'next-export-i18n';
|
||||
import { ServerStatusContext } from '../../utils/server-status-context';
|
||||
import { LogTable } from '../../components/admin/LogTable';
|
||||
import { Offline } from '../../components/admin/Offline';
|
||||
@@ -39,6 +40,8 @@ function streamDetailsFormatter(streamDetails) {
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const serverStatusData = useContext(ServerStatusContext);
|
||||
const { broadcaster, serverConfig: configData } = serverStatusData || {};
|
||||
const { remoteAddr, streamDetails } = broadcaster || {};
|
||||
@@ -101,12 +104,12 @@ export default function Home() {
|
||||
<div className="stream-details-item-container">
|
||||
<Statistic
|
||||
className="stream-details-item"
|
||||
title="Outbound Video Stream"
|
||||
title={t('Outbound Video Stream')}
|
||||
value={videoSetting}
|
||||
/>
|
||||
<Statistic
|
||||
className="stream-details-item"
|
||||
title="Outbound Audio Stream"
|
||||
title={t('Outbound Audio Stream')}
|
||||
value={audioSetting}
|
||||
/>
|
||||
</div>
|
||||
@@ -130,17 +133,17 @@ export default function Home() {
|
||||
<Row gutter={[16, 16]} align="middle">
|
||||
<Col span={8} sm={24} md={8}>
|
||||
<Statistic
|
||||
title={`Stream started ${formatRelative(broadcastDate, Date.now())}`}
|
||||
title={`${t('Stream started')} ${formatRelative(broadcastDate, Date.now())}`}
|
||||
value={formatDistanceToNow(broadcastDate)}
|
||||
prefix={<ClockCircleOutlined />}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8} sm={24} md={8}>
|
||||
<Statistic title="Viewers" value={viewerCount} prefix={<UserOutlined />} />
|
||||
<Statistic title={t('Viewers')} value={viewerCount} prefix={<UserOutlined />} />
|
||||
</Col>
|
||||
<Col span={8} sm={24} md={8}>
|
||||
<Statistic
|
||||
title="Peak viewer count"
|
||||
title={t('Peak viewer count')}
|
||||
value={sessionPeakViewerCount}
|
||||
prefix={<UserOutlined />}
|
||||
/>
|
||||
@@ -154,28 +157,28 @@ export default function Home() {
|
||||
<Col className="stream-details" span={12} sm={24} md={24} lg={12}>
|
||||
<Card
|
||||
size="small"
|
||||
title="Outbound Stream Details"
|
||||
title={t('Outbound Stream Details')}
|
||||
type="inner"
|
||||
className="outbound-details"
|
||||
>
|
||||
{videoQualitySettings}
|
||||
</Card>
|
||||
|
||||
<Card size="small" title="Inbound Stream Details" type="inner">
|
||||
<Card size="small" title={t('Inbound Stream Details')} type="inner">
|
||||
<Statistic
|
||||
className="stream-details-item"
|
||||
title="Input"
|
||||
title={t('Input')}
|
||||
value={`${encoder} ${formatIPAddress(remoteAddr)}`}
|
||||
/>
|
||||
<Statistic
|
||||
className="stream-details-item"
|
||||
title="Inbound Video Stream"
|
||||
title={t('Inbound Video Stream')}
|
||||
value={streamDetails}
|
||||
formatter={streamDetailsFormatter}
|
||||
/>
|
||||
<Statistic
|
||||
className="stream-details-item"
|
||||
title="Inbound Audio Stream"
|
||||
title={t('Inbound Audio Stream')}
|
||||
value={streamAudioDetailString}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useContext, ReactElement } from 'react';
|
||||
import { Row, Col, Typography, MenuProps, Dropdown, Spin, Alert } from 'antd';
|
||||
import { getUnixTime, sub } from 'date-fns';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { useTranslation } from 'next-export-i18n';
|
||||
import { Chart } from '../../components/admin/Chart';
|
||||
import { StatisticItem } from '../../components/admin/StatisticItem';
|
||||
import { ViewerTable } from '../../components/admin/ViewerTable';
|
||||
@@ -26,6 +27,7 @@ const FETCH_INTERVAL = 60 * 1000; // 1 min
|
||||
|
||||
export default function ViewersOverTime() {
|
||||
const context = useContext(ServerStatusContext);
|
||||
const { t } = useTranslation();
|
||||
const { online, broadcaster, viewerCount, overallPeakViewerCount, sessionPeakViewerCount } =
|
||||
context || {};
|
||||
let streamStart;
|
||||
@@ -34,13 +36,13 @@ export default function ViewersOverTime() {
|
||||
}
|
||||
|
||||
const times = [
|
||||
{ title: 'Current stream', start: streamStart },
|
||||
{ title: 'Last 12 hours', start: sub(new Date(), { hours: 12 }) },
|
||||
{ title: 'Last 24 hours', start: sub(new Date(), { hours: 24 }) },
|
||||
{ title: 'Last 7 days', start: sub(new Date(), { days: 7 }) },
|
||||
{ title: 'Last 30 days', start: sub(new Date(), { days: 30 }) },
|
||||
{ title: 'Last 3 months', start: sub(new Date(), { months: 3 }) },
|
||||
{ title: 'Last 6 months', start: sub(new Date(), { months: 6 }) },
|
||||
{ title: t('Current stream'), start: streamStart },
|
||||
{ title: t('Last 12 hours'), start: sub(new Date(), { hours: 12 }) },
|
||||
{ title: t('Last 24 hours'), start: sub(new Date(), { hours: 24 }) },
|
||||
{ title: t('Last 7 days'), start: sub(new Date(), { days: 7 }) },
|
||||
{ title: t('Last 30 days'), start: sub(new Date(), { days: 30 }) },
|
||||
{ title: t('Last 3 months'), start: sub(new Date(), { months: 3 }) },
|
||||
{ title: t('Last 6 months'), start: sub(new Date(), { months: 6 }) },
|
||||
];
|
||||
|
||||
const [loadingChart, setLoadingChart] = useState(true);
|
||||
@@ -94,13 +96,13 @@ export default function ViewersOverTime() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography.Title>Viewer Info</Typography.Title>
|
||||
<Typography.Title>{t('Viewer Info')}</Typography.Title>
|
||||
<br />
|
||||
<Row gutter={[16, 16]} justify="space-around">
|
||||
{online && (
|
||||
<Col span={8} md={8}>
|
||||
<StatisticItem
|
||||
title="Current viewers"
|
||||
title={t('Current viewers')}
|
||||
value={viewerCount.toString()}
|
||||
prefix={<UserOutlined />}
|
||||
/>
|
||||
@@ -108,14 +110,14 @@ export default function ViewersOverTime() {
|
||||
)}
|
||||
<Col md={online ? 8 : 12}>
|
||||
<StatisticItem
|
||||
title={online ? 'Max viewers this stream' : 'Max viewers last stream'}
|
||||
title={online ? t('Max viewers this stream') : t('Max viewers last stream')}
|
||||
value={sessionPeakViewerCount.toString()}
|
||||
prefix={<UserOutlined />}
|
||||
/>
|
||||
</Col>
|
||||
<Col md={online ? 8 : 12}>
|
||||
<StatisticItem
|
||||
title="All-time max viewers"
|
||||
title={t('max viewers')}
|
||||
value={overallPeakViewerCount.toString()}
|
||||
prefix={<UserOutlined />}
|
||||
/>
|
||||
@@ -125,8 +127,8 @@ export default function ViewersOverTime() {
|
||||
<Alert
|
||||
style={{ marginTop: '10px' }}
|
||||
banner
|
||||
message="Please wait"
|
||||
description="No viewer data has been collected yet."
|
||||
message={t('Please wait')}
|
||||
description={t('No viewer data has been collected yet.')}
|
||||
type="info"
|
||||
/>
|
||||
)}
|
||||
@@ -134,7 +136,7 @@ export default function ViewersOverTime() {
|
||||
<Spin spinning={!viewerInfo.length || loadingChart}>
|
||||
{viewerInfo.length > 0 && (
|
||||
<Chart
|
||||
title="Viewers"
|
||||
title={t('Viewers')}
|
||||
data={viewerInfo}
|
||||
color="#2087E2"
|
||||
unit="viewers"
|
||||
|
||||
Reference in New Issue
Block a user