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
+
+
+
+
+
+
+
+
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%;