Gabe Kangas
5 years ago
8 changed files with 221 additions and 10 deletions
@ -0,0 +1,114 @@
@@ -0,0 +1,114 @@
|
||||
import React, { useState, useEffect, useContext } from 'react'; |
||||
import { Table, Typography } from 'antd'; |
||||
import { formatDistanceToNow } from 'date-fns'; |
||||
import { SortOrder } from 'antd/lib/table/interface'; |
||||
|
||||
import { ServerStatusContext } from '../../utils/server-status-context'; |
||||
|
||||
import { CONNECTED_CLIENTS, VIEWERS_OVER_TIME, fetchData } from '../../utils/apis'; |
||||
|
||||
const FETCH_INTERVAL = 60 * 1000; // 1 min
|
||||
|
||||
export default function ChatUsers() { |
||||
const context = useContext(ServerStatusContext); |
||||
const { online } = context || {}; |
||||
|
||||
const [viewerInfo, setViewerInfo] = useState([]); |
||||
const [clients, setClients] = useState([]); |
||||
|
||||
const getInfo = async () => { |
||||
try { |
||||
const result = await fetchData(VIEWERS_OVER_TIME); |
||||
setViewerInfo(result); |
||||
} catch (error) { |
||||
console.log('==== error', error); |
||||
} |
||||
|
||||
try { |
||||
const result = await fetchData(CONNECTED_CLIENTS); |
||||
setClients(result); |
||||
} catch (error) { |
||||
console.log('==== error', error); |
||||
} |
||||
}; |
||||
|
||||
useEffect(() => { |
||||
let getStatusIntervalId = null; |
||||
|
||||
getInfo(); |
||||
if (online) { |
||||
getStatusIntervalId = setInterval(getInfo, FETCH_INTERVAL); |
||||
// returned function will be called on component unmount
|
||||
return () => { |
||||
clearInterval(getStatusIntervalId); |
||||
}; |
||||
} |
||||
|
||||
return () => []; |
||||
}, [online]); |
||||
|
||||
// todo - check to see if broadcast active has changed. if so, start polling.
|
||||
|
||||
if (!viewerInfo.length) { |
||||
return 'no info'; |
||||
} |
||||
|
||||
const columns = [ |
||||
{ |
||||
title: 'User name', |
||||
dataIndex: 'username', |
||||
key: 'username', |
||||
render: username => username || '-', |
||||
sorter: (a, b) => a.username - b.username, |
||||
sortDirections: ['descend', 'ascend'] as SortOrder[], |
||||
}, |
||||
{ |
||||
title: 'Messages sent', |
||||
dataIndex: 'messageCount', |
||||
key: 'messageCount', |
||||
sorter: (a, b) => a.messageCount - b.messageCount, |
||||
sortDirections: ['descend', 'ascend'] as SortOrder[], |
||||
}, |
||||
{ |
||||
title: 'Connected Time', |
||||
dataIndex: 'connectedAt', |
||||
key: 'connectedAt', |
||||
render: time => formatDistanceToNow(new Date(time)), |
||||
sorter: (a, b) => new Date(a.connectedAt).getTime() - new Date(b.connectedAt).getTime(), |
||||
sortDirections: ['descend', 'ascend'] as SortOrder[], |
||||
}, |
||||
{ |
||||
title: 'User Agent', |
||||
dataIndex: 'userAgent', |
||||
key: 'userAgent', |
||||
}, |
||||
{ |
||||
title: 'Location', |
||||
dataIndex: 'geo', |
||||
key: 'geo', |
||||
render: geo => (geo ? `${geo.regionName}, ${geo.countryCode}` : '-'), |
||||
}, |
||||
]; |
||||
|
||||
return ( |
||||
<> |
||||
<div> |
||||
<Typography.Title>Connected</Typography.Title> |
||||
<Table dataSource={clients} columns={columns} rowKey={row => row.clientID} /> |
||||
<p> |
||||
<Typography.Text type="secondary"> |
||||
Visit the{' '} |
||||
<a |
||||
href="https://owncast.online/docs/viewers/?source=admin" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
> |
||||
documentation |
||||
</a>{' '} |
||||
to configure additional details about your viewers. |
||||
</Typography.Text>{' '} |
||||
</p> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,69 @@
@@ -0,0 +1,69 @@
|
||||
import React, { useState, useContext, useEffect } from 'react'; |
||||
import { Typography } from 'antd'; |
||||
import { |
||||
FIELD_PROPS_DISABLE_CHAT, |
||||
TEXTFIELD_PROPS_CHAT_USERNAME_BLOCKLIST, |
||||
} from '../utils/config-constants'; |
||||
import { ServerStatusContext } from '../utils/server-status-context'; |
||||
import ToggleSwitch from '../components/config/form-toggleswitch'; |
||||
import { UpdateArgs } from '../types/config-section'; |
||||
import { TEXTFIELD_TYPE_TEXTAREA } from '../components/config/form-textfield'; |
||||
import TextFieldWithSubmit from '../components/config/form-textfield-with-submit'; |
||||
|
||||
export default function ConfigChat() { |
||||
const { Title } = Typography; |
||||
const [formDataValues, setFormDataValues] = useState(null); |
||||
const serverStatusData = useContext(ServerStatusContext); |
||||
|
||||
const { serverConfig } = serverStatusData || {}; |
||||
const { chatDisabled } = serverConfig; |
||||
const { usernameBlocklist } = serverConfig; |
||||
|
||||
function handleChatDisableChange(disabled: boolean) { |
||||
handleFieldChange({ fieldName: 'chatDisabled', value: disabled }); |
||||
} |
||||
|
||||
function handleChatUsernameBlockListChange(args: UpdateArgs) { |
||||
handleFieldChange({ fieldName: 'usernameBlocklist', value: args.value }); |
||||
} |
||||
|
||||
useEffect(() => { |
||||
setFormDataValues({ |
||||
chatDisabled, |
||||
usernameBlocklist, |
||||
}); |
||||
}, [serverConfig]); |
||||
|
||||
if (!formDataValues) { |
||||
return null; |
||||
} |
||||
|
||||
const handleFieldChange = ({ fieldName, value }: UpdateArgs) => { |
||||
setFormDataValues({ |
||||
...formDataValues, |
||||
[fieldName]: value, |
||||
}); |
||||
}; |
||||
|
||||
return ( |
||||
<div className="config-server-details-form"> |
||||
<Title>Chat Settings</Title> |
||||
<div className="form-module config-server-details-container"> |
||||
<ToggleSwitch |
||||
fieldName="chatDisabled" |
||||
{...FIELD_PROPS_DISABLE_CHAT} |
||||
checked={formDataValues.chatDisabled} |
||||
onChange={handleChatDisableChange} |
||||
/> |
||||
<TextFieldWithSubmit |
||||
fieldName="usernameBlocklist" |
||||
{...TEXTFIELD_PROPS_CHAT_USERNAME_BLOCKLIST} |
||||
type={TEXTFIELD_TYPE_TEXTAREA} |
||||
value={formDataValues.usernameBlocklist} |
||||
initialValue={usernameBlocklist} |
||||
onChange={handleChatUsernameBlockListChange} |
||||
/> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue