RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve style

Browse Source
This commit is contained in:
SrGooglo 2023-08-17 18:01:13 +00:00
parent b14eb2a6a7
commit ee67777649
2 changed files with 117 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
packages/app/src/pages/tv/tabs/livestreamControlPanel/index.jsx
View File

@ -162,7 +162,6 @@ export default (props) => {
}
return <div className="streamingControlPanel">
<div className="streamingControlPanel_header">
<div className="streamingControlPanel_header_thumbnail">
<img
src={
@ -170,6 +169,26 @@ export default (props) => {
}
/>
</div>
<div className="streamingControlPanel_header">
<div className="streamingControlPanel_header_actions">
<ProfileSelector
profiles={R_Profiles}
value={selectedProfileId}
loading={L_Profiles}
onCreateProfile={handleCreateProfile}
onChangeProfile={(profileID) => {
setSelectedProfileId(profileID)
}}
/>
<antd.Button
type="primary"
icon={<Icons.Edit2 />}
onClick={onClickEditInfo}
>
Edit profile
</antd.Button>
</div>
<div className="streamingControlPanel_header_details">
<div className="streamingControlPanel_header_details_status">
@ -208,42 +227,24 @@ export default (props) => {
<CategoryViewResolver category={profileData?.info.category} />
</div>
</div>
<div className="streamingControlPanel_header_actions">
<ProfileSelector
profiles={R_Profiles}
value={selectedProfileId}
loading={L_Profiles}
onCreateProfile={handleCreateProfile}
onChangeProfile={(profileID) => {
setSelectedProfileId(profileID)
}}
/>
<antd.Button
type="primary"
icon={<Icons.Edit2 />}
onClick={onClickEditInfo}
>
Edit profile
</antd.Button>
</div>
</div>
<div className="config">
<div className="streaming_configs">
<LimitAlert
limit_id="streaming_bandwidth"
/>
<div className="panel">
<div className="streaming_configs_panel">
<h2><Icons.MdSettingsInputAntenna /> Emission</h2>
<div className="content">
<span>Ingestion URL</span>
<code>
<div className="inline_field">
<span>
{profileData?.addresses?.ingest ?? "No ingest URL available"}
</code>
</span>
</div>
</div>
<div className="content">
@ -265,7 +266,7 @@ export default (props) => {
</div>
</div>
<div className="panel">
<div className="streaming_configs_panel">
<h2><Icons.Tool />Additional options</h2>
<div className="content">
@ -291,35 +292,41 @@ export default (props) => {
</div>
</div>
<div className="panel">
<div className="streaming_configs_panel">
<h2><Icons.Link /> URL Information</h2>
<div className="content">
<span>AAC URL (Only Audio)</span>
<code>
<div className="inline_field">
<span>
{profileData?.addresses?.aac ?? "No AAC URL available"}
</code>
</span>
</div>
</div>
<div className="content">
<span>HLS URL</span>
<code>
<div className="inline_field">
<span>
{profileData?.addresses?.hls ?? "No HLS URL available"}
</code>
</span>
</div>
</div>
<div className="content">
<span>FLV URL</span>
<code>
<div className="inline_field">
<span>
{profileData?.addresses?.flv ?? "No FLV URL available"}
</code>
</span>
</div>
</div>
</div>
<div className="panel">
<div className="streaming_configs_panel">
<h2><Icons.Activity /> Statistics</h2>
<div className="content">

118
packages/app/src/pages/tv/tabs/livestreamControlPanel/index.less
View File

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