RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement StreamInfoEditor

Browse Source
This commit is contained in:
SrGooglo 2022-11-28 16:18:24 +00:00
parent b2033104c3
commit d500f60665
2 changed files with 185 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
packages/app/src/pages/live_control/index.jsx
View File

@ -32,6 +32,131 @@ const StreamingKeyView = (props) => {
</div>
}
const LivestreamsCategoriesSelector = (props) => {
const [categories, setCategories] = React.useState([])
const [loading, setLoading] = React.useState(true)
const loadData = async () => {
setLoading(true)
const categories = await Livestream.getCategories().catch((err) => {
console.error(err)
app.message.error("Failed to load categories")
return null
})
console.log(`Loaded categories >`, categories)
setLoading(false)
if (categories) {
setCategories(categories)
}
}
React.useEffect(() => {
loadData()
}, [])
if (loading) {
return <antd.Skeleton active />
}
return <antd.Select
placeholder="Select a category"
defaultValue={props.defaultValue}
onChange={(value) => props.updateStreamInfo("category", value)}
>
{
categories.map((category) => {
return <antd.Select.Option value={category.key}>{category.label}</antd.Select.Option>
})
}
</antd.Select>
}
const StreamInfoEditor = (props) => {
const [streamInfo, setStreamInfo] = React.useState(props.defaultStreamInfo ?? {})
const updateStreamInfo = (key, value) => {
setStreamInfo({
...streamInfo,
[key]: value,
})
}
const saveStreamInfo = async () => {
if (typeof props.onSave === "function") {
return await props.onSave(streamInfo)
}
// peform default save
const result = await Livestream.updateLivestreamInfo(streamInfo).catch((err) => {
console.error(err)
app.message.error("Failed to update stream info")
return false
})
if (result) {
app.message.success("Stream info updated")
}
if (typeof props.onSaveComplete === "function") {
await props.onSaveComplete(result)
}
return result
}
return <div className="streamInfoEditor">
<div className="field">
<span>
<Icons.MdTitle />Title
</span>
<div className="value">
<antd.Input
placeholder="Stream title"
value={streamInfo.title}
onChange={(e) => updateStreamInfo("title", e.target.value)}
/>
</div>
</div>
<div className="field">
<span>
<Icons.MdTextFields /> Description
</span>
<div className="value">
<antd.Input
placeholder="Stream description"
value={streamInfo.description}
onChange={(e) => updateStreamInfo("description", e.target.value)}
/>
</div>
</div>
<div className="field">
<span>
<Icons.MdCategory /> Category
</span>
<div className="value">
<LivestreamsCategoriesSelector
defaultValue={streamInfo.category.key}
updateStreamInfo={updateStreamInfo}
/>
</div>
</div>
<antd.Button
type="primary"
onClick={saveStreamInfo}
>
Save
</antd.Button>
</div>
}
export default (props) => {
const [streamInfo, setStreamInfo] = React.useState({})
const [addresses, setAddresses] = React.useState({})
@ -39,6 +164,19 @@ export default (props) => {
const [isConnected, setIsConnected] = React.useState(false)
const [streamingKey, setStreamingKey] = React.useState(null)
const onClickEditInfo = () => {
app.ModalController.open(() => <StreamInfoEditor
defaultStreamInfo={streamInfo}
onSaveComplete={(result) => {
if (result) {
app.ModalController.close()
fetchStreamInfo()
}
}}
/>)
}
const regenerateStreamingKey = async () => {
antd.Modal.confirm({
title: "Regenerate streaming key",
@ -125,15 +263,35 @@ export default (props) => {
</h2>
</div>
<div className="description">
<span>
Description
</span>
<p>
{streamInfo?.description ?? "No description"}
</p>
</div>
<div className="category">
<span>
Category
</span>
<h4>
{streamInfo?.category ?? "No category"}
{streamInfo?.category?.label ?? "No category"}
</h4>
</div>
</div>
<div>
<antd.Button
type="primary"
icon={<Icons.Edit2 />}
onClick={onClickEditInfo}
>
Edit info
</antd.Button>
</div>
</div>
<div className="config">

30
packages/app/src/pages/live_control/index.less
View File

@ -8,7 +8,7 @@
display: flex;
flex-direction: row;
height: 20vh;
height: fit-content;
padding: 15px;
@ -21,7 +21,7 @@
.preview {
height: 100%;
max-width: 400px;
width: 300px;
img {
width: 100%;
@ -38,6 +38,7 @@
flex-direction: column;
padding: 20px 0;
width: 100%;
.status {
margin-bottom: 20px;
@ -83,7 +84,7 @@
.title {
display: inline-flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
@ -114,8 +115,29 @@
div {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
}
.streamInfoEditor {
display: flex;
flex-direction: column;
.field {
display: flex;
flex-direction: column;
margin-bottom: 20px;
.value {
margin-top: 5px;
margin-left: 20px;
.ant-select {
min-width: 200px;
}
}
}
}