diff --git a/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.jsx b/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.jsx index d4c23703..39979746 100755 --- a/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.jsx +++ b/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.jsx @@ -162,13 +162,32 @@ export default (props) => { } return
+
+ +
-
- + { + setSelectedProfileId(profileID) + }} /> + + } + onClick={onClickEditInfo} + > + Edit profile +
@@ -208,42 +227,24 @@ export default (props) => {
- -
- { - setSelectedProfileId(profileID) - }} - /> - - } - onClick={onClickEditInfo} - > - Edit profile - -
-
+
-
+

Emission

Ingestion URL - - {profileData?.addresses?.ingest ?? "No ingest URL available"} - +
+ + {profileData?.addresses?.ingest ?? "No ingest URL available"} + +
@@ -265,7 +266,7 @@ export default (props) => {
-
+

Additional options

@@ -291,35 +292,41 @@ export default (props) => {
-
+

URL Information

AAC URL (Only Audio) - - {profileData?.addresses?.aac ?? "No AAC URL available"} - +
+ + {profileData?.addresses?.aac ?? "No AAC URL available"} + +
HLS URL - - {profileData?.addresses?.hls ?? "No HLS URL available"} - +
+ + {profileData?.addresses?.hls ?? "No HLS URL available"} + +
FLV URL - - {profileData?.addresses?.flv ?? "No FLV URL available"} - +
+ + {profileData?.addresses?.flv ?? "No FLV URL available"} + +
-
+

Statistics

diff --git a/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less b/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less index 95fa2dca..6a5bc645 100755 --- a/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less +++ b/packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less @@ -2,11 +2,59 @@ display: flex; flex-direction: column; - width: 100%; - transition: all 0.3s ease-in-out; + // width: 100%; + // max-width: 100%; + + overflow: hidden; + + gap: 20px; + + .inline_field { + background-color: var(--background-color-accent); + + font-size: 1rem; + + width: 100%; + + font-family: "DM Mono", monospace; + + overflow: hidden; + + span { + user-select: all; + + width: 100%; + + word-wrap: break-all; + } + } + + .streamingControlPanel_header_thumbnail { + align-self: center; + justify-self: center; + + border-radius: 12px; + + width: 100%; + height: 300px; + + background-color: black; + + img { + height: 100%; + width: 100%; + + object-fit: contain; + + border-radius: 12px; + } + } + .streamingControlPanel_header { + position: relative; + display: flex; flex-direction: row; @@ -17,37 +65,17 @@ border: 1px solid var(--border-color); border-radius: 12px; - margin-bottom: 20px; + gap: 20px; transition: all 0.3s ease-in-out; - .streamingControlPanel_header_thumbnail { - align-self: center; - justify-self: center; - - border-radius: 12px; - - height: 100%; - width: 100%; - - img { - height: 15vh; - width: 20vw; - - object-fit: cover; - - border-radius: 12px; - } - - margin-right: 40px; - } - .streamingControlPanel_header_details { display: inline-flex; flex-direction: column; + width: fit-content; + padding: 20px 0; - width: 100%; .streamingControlPanel_header_details_status { margin-bottom: 20px; @@ -58,7 +86,9 @@ .streamingControlPanel_header_actions { display: flex; - flex-direction: row; + flex-direction: column; + + max-width: 200px; justify-items: center; @@ -66,36 +96,24 @@ .ant-select { height: fit-content; - min-width: 300px; + width: 100%; } } } - .config { + .streaming_configs { display: flex; flex-direction: column; - padding: 0 40px; + width: 100%; transition: all 0.3s ease-in-out; gap: 20px; - code { - padding: 5px 8px; - font-size: 1rem; + overflow: hidden; - background-color: var(--background-color-accent); - color: var(--text-color); - - border-radius: 8px; - - font-family: "DM Mono", monospace; - - user-select: all; - } - - .panel { + .streaming_configs_panel { display: flex; flex-direction: column; @@ -108,6 +126,13 @@ } .content { + display: flex; + flex-direction: column; + + padding: 10px 20px; + + width: 100%; + .title { display: inline-flex; flex-direction: row; @@ -116,13 +141,6 @@ width: 100%; } - - display: flex; - flex-direction: column; - - margin: 10px 20px; - - width: 100%; } } }