diff --git a/packages/app/src/pages/live_control/index.jsx b/packages/app/src/pages/live_control/index.jsx index 5903e7e8..d862a952 100644 --- a/packages/app/src/pages/live_control/index.jsx +++ b/packages/app/src/pages/live_control/index.jsx @@ -1,7 +1,10 @@ import React from "react" import * as antd from "antd" + import { Icons } from "components/Icons" +import Livestream from "../../models/livestream" + import "./index.less" const StreamingKeyView = (props) => { @@ -22,7 +25,7 @@ const StreamingKeyView = (props) => {
toogleVisibility()} > - + Click to show key
} @@ -30,34 +33,20 @@ const StreamingKeyView = (props) => { } export default (props) => { - const [streamInfo, setStreamInfo] = React.useState(null) + const [streamInfo, setStreamInfo] = React.useState({}) + const [addresses, setAddresses] = React.useState({}) const [isConnected, setIsConnected] = React.useState(false) - const [targetServer, setTargetServer] = React.useState("No available server") - const [streamingKey, setStreamingKey] = React.useState(null) - const checkStreamingKey = async () => { - const result = await app.api.withEndpoints("main").get.streamingKey().catch((error) => { - console.error(error) - antd.message.error(error.message) - - return null - }) - - if (result) { - setStreamingKey(result.key) - } - } - const regenerateStreamingKey = async () => { antd.Modal.confirm({ title: "Regenerate streaming key", content: "Are you sure you want to regenerate the streaming key? After this, all other generated keys will be deleted.", onOk: async () => { - const result = await app.api.withEndpoints("main").post.regenerateStreamingKey().catch((error) => { - console.error(error) - antd.message.error(error.message) + const result = await Livestream.regenerateStreamingKey().catch((err) => { + app.message.error(`Failed to regenerate streaming key`) + console.error(err) return null }) @@ -69,8 +58,33 @@ export default (props) => { }) } + const fetchStreamingKey = async () => { + const streamingKey = await Livestream.getStreamingKey().catch((err) => { + console.error(err) + return false + }) + + if (streamingKey) { + setStreamingKey(streamingKey.key) + } + } + + const fetchAddresses = async () => { + const addresses = await Livestream.getAddresses().catch((error) => { + app.message.error(`Failed to fetch addresses`) + console.error(error) + + return null + }) + + if (addresses) { + setAddresses(addresses) + } + } + React.useEffect(() => { - checkStreamingKey() + fetchAddresses() + fetchStreamingKey() }, []) return
@@ -116,7 +130,7 @@ export default (props) => { Ingestion URL - {targetServer} + {addresses.ingestURL ?? "No ingest URL available"}
@@ -140,7 +154,69 @@ export default (props) => {
-

Additional options

+

Additional options

+ +
+ Enable DVR + +
+ +
+
+ +
+ Private mode + +
+ +
+
+
+ +
+

URL Information

+ +
+ API URL + + + {addresses.apiURL ?? "No API URL available"} + +
+ +
+ HLS URL + + + {addresses.hlsURL ?? "No HLS URL available"} + +
+ +
+ FLV URL + + + {addresses.flvURL ?? "No FLV URL available"} + +
+
+ +
+

Statistics

+ +
+ +

+ Cannot connect with statistics +

+
+
diff --git a/packages/app/src/pages/live_control/index.less b/packages/app/src/pages/live_control/index.less index bf0fe451..ce9dda92 100644 --- a/packages/app/src/pages/live_control/index.less +++ b/packages/app/src/pages/live_control/index.less @@ -76,7 +76,7 @@ display: flex; flex-direction: column; - margin: 20px 20px 20px 0; + margin: 10px 20px 20px 0; width: 100%;