Gabe Kangas
3 years ago
8 changed files with 205 additions and 17 deletions
@ -0,0 +1,174 @@
@@ -0,0 +1,174 @@
|
||||
import React, { useContext, useState } from 'react'; |
||||
import { Table, Space, Button, Typography, Alert, Input, Form } from 'antd'; |
||||
import { DeleteOutlined, EyeOutlined, PlusOutlined } from '@ant-design/icons'; |
||||
import { ServerStatusContext } from '../../../../utils/server-status-context'; |
||||
|
||||
import { fetchData, UPDATE_STREAM_KEYS } from '../../../../utils/apis'; |
||||
|
||||
const { Title, Paragraph } = Typography; |
||||
const { Item } = Form; |
||||
|
||||
const saveKeys = async (keys, setError) => { |
||||
try { |
||||
await fetchData(UPDATE_STREAM_KEYS, { |
||||
method: 'POST', |
||||
auth: true, |
||||
data: { value: keys }, |
||||
}); |
||||
} catch (error) { |
||||
console.error(error); |
||||
setError(error); |
||||
} |
||||
}; |
||||
|
||||
const AddKeyForm = ({ setShowAddKeyForm, setFieldInConfigState, streamKeys, setError }) => { |
||||
const handleAddKey = (newkey: any) => { |
||||
const updatedKeys = [...streamKeys, newkey]; |
||||
|
||||
console.log(updatedKeys); |
||||
setFieldInConfigState({ |
||||
fieldName: 'streamKeys', |
||||
value: updatedKeys, |
||||
}); |
||||
|
||||
saveKeys(updatedKeys, setError); |
||||
|
||||
setShowAddKeyForm(false); |
||||
}; |
||||
|
||||
return ( |
||||
<Form layout="inline" autoComplete="off" onFinish={handleAddKey}> |
||||
<Item label="Key" name="key" tooltip="The key you provide your broadcasting software"> |
||||
<Input placeholder="def456" /> |
||||
</Item> |
||||
<Item label="Comment" name="comment" tooltip="For remembering why you added this key"> |
||||
<Input placeholder="My OBS Key" /> |
||||
</Item> |
||||
|
||||
<Button type="primary" htmlType="submit"> |
||||
Add |
||||
</Button> |
||||
</Form> |
||||
); |
||||
}; |
||||
|
||||
const AddKeyButton = ({ setShowAddKeyForm }) => ( |
||||
<Button type="default" onClick={() => setShowAddKeyForm(true)}> |
||||
<PlusOutlined /> |
||||
</Button> |
||||
); |
||||
|
||||
const StreamKeys = () => { |
||||
const serverStatusData = useContext(ServerStatusContext); |
||||
const { serverConfig, setFieldInConfigState } = serverStatusData || {}; |
||||
const { streamKeys } = serverConfig; |
||||
const [showAddKeyForm, setShowAddKeyForm] = useState(false); |
||||
const [showKeyMap, setShowKeyMap] = useState({}); |
||||
const [error, setError] = useState(null); |
||||
|
||||
const handleDeleteKey = keyToRemove => { |
||||
const newKeys = streamKeys.filter(k => k !== keyToRemove); |
||||
setFieldInConfigState({ |
||||
fieldName: 'streamKeys', |
||||
value: newKeys, |
||||
}); |
||||
saveKeys(newKeys, setError); |
||||
}; |
||||
|
||||
const handleToggleShowKey = key => { |
||||
setShowKeyMap({ |
||||
...showKeyMap, |
||||
[key]: !showKeyMap[key], |
||||
}); |
||||
}; |
||||
|
||||
const columns = [ |
||||
{ |
||||
title: 'Key', |
||||
dataIndex: 'key', |
||||
key: 'key', |
||||
render: text => ( |
||||
<Space direction="horizontal"> |
||||
<Paragraph copyable>{showKeyMap[text] ? text : '**********'}</Paragraph> |
||||
|
||||
<Button |
||||
type="link" |
||||
style={{ top: '-7px' }} |
||||
icon={<EyeOutlined />} |
||||
onClick={() => handleToggleShowKey(text)} |
||||
/> |
||||
</Space> |
||||
), |
||||
}, |
||||
{ |
||||
title: 'Comment', |
||||
dataIndex: 'comment', |
||||
key: 'comment', |
||||
}, |
||||
{ |
||||
title: '', |
||||
key: 'delete', |
||||
render: text => <Button onClick={() => handleDeleteKey(text)} icon={<DeleteOutlined />} />, |
||||
}, |
||||
]; |
||||
|
||||
return ( |
||||
<div> |
||||
<Title>Streaming Keys</Title> |
||||
<Paragraph> |
||||
A streaming key is used with your broadcasting software to authenticate itself to Owncast. |
||||
Most people will only need one. However, if you share a server with others or you want |
||||
different keys for different broadcasting sources you can add more here. |
||||
</Paragraph> |
||||
<Paragraph> |
||||
These keys are unrelated to the admin password and will not grant you access to make changes |
||||
to Owncast's configuration. |
||||
</Paragraph> |
||||
<Paragraph> |
||||
Read more about broadcasting at{' '} |
||||
<a |
||||
href="https://owncast.online/docs/broadcasting/?source=admin" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
> |
||||
the documentation |
||||
</a> |
||||
. |
||||
</Paragraph> |
||||
|
||||
<Space direction="vertical" style={{ width: '70%' }}> |
||||
{error && <Alert type="error" message="Saving Keys Error" description={error} />} |
||||
|
||||
{streamKeys.length === 0 && ( |
||||
<Alert |
||||
message="No stream keys!" |
||||
description="You will not be able to stream until you create at least one stream key and add it to your broadcasting software." |
||||
type="error" |
||||
/> |
||||
)} |
||||
|
||||
<Table |
||||
rowKey="key" |
||||
columns={columns} |
||||
dataSource={streamKeys} |
||||
pagination={false} |
||||
// eslint-disable-next-line react/no-unstable-nested-components
|
||||
footer={() => |
||||
showAddKeyForm ? ( |
||||
<AddKeyForm |
||||
setShowAddKeyForm={setShowAddKeyForm} |
||||
streamKeys={streamKeys} |
||||
setFieldInConfigState={setFieldInConfigState} |
||||
setError={setError} |
||||
/> |
||||
) : ( |
||||
<AddKeyButton setShowAddKeyForm={setShowAddKeyForm} /> |
||||
) |
||||
} |
||||
/> |
||||
<br /> |
||||
</Space> |
||||
</div> |
||||
); |
||||
}; |
||||
export default StreamKeys; |
||||
Loading…
Reference in new issue