improve live control

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) => {
             <div
                 onClick={() => toogleVisibility()}
             >
-                <Icons.Eye  />
+                <Icons.Eye />
                 Click to show key
             </div>
         }
@@ -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) => {
+                const result = await Livestream.regenerateStreamingKey().catch((err) => {
-                    console.error(error)
+                    app.message.error(`Failed to regenerate streaming key`)
-                    antd.message.error(error.message)
+                    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 <div className="streamingControlPanel">
@@ -116,7 +130,7 @@ export default (props) => {
                     <span>Ingestion URL</span>
 
                     <code>
-                        {targetServer}
+                        {addresses.ingestURL ?? "No ingest URL available"}
                     </code>
                 </div>
 
@@ -140,7 +154,69 @@ export default (props) => {
             </div>
 
             <div className="panel">
-                <h2>Additional options</h2>
+                <h2><Icons.Tool />Additional options</h2>
+
+                <div className="content">
+                    <span>Enable DVR</span>
+
+                    <div className="value">
+                        <antd.Switch
+                            checked={streamInfo?.dvr ?? false}
+                            onChange={false}
+                        />
+                    </div>
+                </div>
+
+                <div className="content">
+                    <span>Private mode</span>
+
+                    <div className="value">
+                        <antd.Switch
+                            checked={streamInfo?.private ?? false}
+                            onChange={false}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            <div className="panel">
+                <h2><Icons.Link /> URL Information</h2>
+
+                <div className="content">
+                    <span>API URL</span>
+
+                    <code>
+                        {addresses.apiURL ?? "No API URL available"}
+                    </code>
+                </div>
+
+                <div className="content">
+                    <span>HLS URL</span>
+
+                    <code>
+                        {addresses.hlsURL ?? "No HLS URL available"}
+                    </code>
+                </div>
+
+                <div className="content">
+                    <span>FLV URL</span>
+
+                    <code>
+                        {addresses.flvURL ?? "No FLV URL available"}
+                    </code>
+                </div>
+            </div>
+
+            <div className="panel">
+                <h2><Icons.Activity /> Statistics</h2>
+
+                <div className="content">
+                    <antd.Result>
+                        <h1>
+                            Cannot connect with statistics
+                        </h1>
+                    </antd.Result>
+                </div>
             </div>
         </div>
     </div>

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