improve a little bit livestream player

packages/app/src/pages/tv/live/[id].jsx

@@ -139,12 +139,10 @@ export default class StreamViewer extends React.Component {
 	}
 
 	loadStream = async (stream_id) => {
-		let stream = await SpectrumModel.getLivestream(stream_id).catch(
+		let stream = await SpectrumModel.getStream(stream_id).catch((error) => {
-			(error) => {
 			console.error(error)
 			return null
-			},
+		})
-		)
 
 		if (!stream) {
 			return false
@@ -169,8 +167,6 @@ export default class StreamViewer extends React.Component {
 			this.state.decoderInstance.destroy()
 		}
 
-		this.state.player.destroy()
-
 		this.setState({
 			isEnded: true,
 			loading: false,
@@ -221,15 +217,10 @@ export default class StreamViewer extends React.Component {
 
 	componentDidMount = async () => {
 		this.enterPlayerAnimation()
-
-		const stream_id = this.props.params.id
-
-		console.log("Stream ID >", stream_id)
-
 		this.attachPlayer()
 
-		// get stream info
+		// load stream
-		const stream = await this.loadStream(stream_id)
+		const stream = await this.loadStream(this.props.params.id)
 
 		if (!stream) {
 			return this.onSourceEnd()
@@ -254,16 +245,15 @@ export default class StreamViewer extends React.Component {
 	}
 
 	componentWillUnmount = () => {
-		if (this.state.player) {
-			this.state.player.destroy()
-		}
-
 		if (typeof this.state.decoderInstance?.unload === "function") {
 			this.state.decoderInstance.unload()
 		}
 
-		this.exitPlayerAnimation()
+		if (typeof this.state.decoderInstance?.destroy === "function") {
+			this.state.decoderInstance.destroy()
+		}
 
+		this.exitPlayerAnimation()
 		this.toggleCinemaMode(false)
 
 		if (this.streamInfoInterval) {
@@ -272,17 +262,21 @@ export default class StreamViewer extends React.Component {
 	}
 
 	enterPlayerAnimation = () => {
-		app.cores.style.applyTemporalVariant("dark")
-		app.layout.toggleCompactMode(true)
 		app.layout.toggleCenteredContent(false)
-		app.controls.toggleUIVisibility(false)
+		app.layout.toggleTotalWindowHeight(true)
+
+		if (app.layout.tools_bar) {
+			app.layout.tools_bar.toggleVisibility(false)
+		}
 	}
 
 	exitPlayerAnimation = () => {
-		app.cores.style.applyVariant(app.cores.style.currentVariantKey)
-		app.layout.toggleCompactMode(false)
 		app.layout.toggleCenteredContent(true)
-		app.controls.toggleUIVisibility(true)
+		app.layout.toggleTotalWindowHeight(false)
+
+		if (app.layout.tools_bar) {
+			app.layout.tools_bar.toggleVisibility(true)
+		}
 	}
 
 	updateQuality = (newQuality) => {
@@ -308,6 +302,9 @@ export default class StreamViewer extends React.Component {
 			to = !this.state.cinemaMode
 		}
 
+		app.controls.toggleUIVisibility(!to)
+		app.layout.toggleCompactMode(to)
+
 		this.setState({ cinemaMode: to })
 	}
 
@@ -318,21 +315,14 @@ export default class StreamViewer extends React.Component {
 					["cinemaMode"]: this.state.cinemaMode,
 				})}
 			>
-				{this.props.query.id}
 				<div className="livestream_player">
 					<div className="livestream_player_header">
-						<div
-							className="livestream_player_header_exit"
-							onClick={() => app.location.back()}
-						>
-							<Icons.IoMdExit />
-						</div>
-
 						{this.state.stream ? (
 							<>
 								<div className="livestream_player_header_user">
 									<UserPreview
-										user={this.state.stream.user}
+										user_id={this.state.stream.user_id}
+										onlyIcon
 									/>
 
 									<div className="livestream_player_indicators">
@@ -350,24 +340,19 @@ export default class StreamViewer extends React.Component {
 
 								{this.state.stream.info && (
 									<div className="livestream_player_header_info">
-										<div className="livestream_player_header_info_title">
+										<div className="livestream_player_header_title">
 											<h1>
 												{this.state.stream.info?.title}
 											</h1>
 										</div>
-										<div className="livestream_player_header_info_description">
+										<div className="livestream_player_header_description">
 											<Marquee mode="smooth">
-												{({ index }) => {
-													return (
 												<h4>
 													{
-																this.state
+														this.state.stream.info
-																	.stream.info
 															?.description
 													}
 												</h4>
-													)
-												}}
 											</Marquee>
 										</div>
 									</div>

packages/app/src/pages/tv/live/index.less

@@ -1,6 +1,9 @@
-@panel-width: 500px;
 @chatbox-header-height: 50px;
 
+.content_layout {
+	padding: 10px;
+}
+
 html {
 	&.mobile {
 		.livestream {
@@ -41,13 +44,15 @@ html {
 	align-items: center;
 	justify-content: center;
 
-    height: 100vh;
+	gap: 10px;
+
+	height: 100%;
 	width: 100%;
 
-    overflow: hidden;
-
 	color: var(--background-color-contrast);
 
+	overflow: hidden;
+
 	h1,
 	h2,
 	h3,
@@ -60,15 +65,7 @@ html {
 
 	&.cinemaMode {
 		.livestream_player {
-            width: 100vw;
+			border-radius: 0px;
-
-            video {
-                width: 100vw;
-            }
-
-            .plyr {
-                width: 100vw;
-            }
 
 			.livestream_player_header {
 				animation: disappear 0.3s ease-in-out forwards;
@@ -87,7 +84,7 @@ html {
 
 			padding: 20px;
 
-            overflow-x: hidden;
+			background-color: transparent;
 
 			.chatbox {
 				padding: 0;
@@ -116,13 +113,15 @@ html {
 		align-items: center;
 		justify-content: center;
 
-        width: calc(100% - @panel-width);
+		width: 100%;
 		height: 100%;
 
 		overflow-y: hidden;
 
 		transition: all 0.3s ease-in-out;
 
+		border-radius: 24px;
+
 		.livestream_player_loading {
 			display: flex;
 			flex-direction: column;
@@ -190,19 +189,6 @@ html {
 				white-space: nowrap;
 			}
 
-            .livestream_player_header_exit {
-                display: flex;
-                flex-direction: row;
-
-                width: fit-content;
-                height: fit-content;
-
-                svg {
-                    font-size: 1.5rem;
-                    margin: 0;
-                }
-            }
-            
 			.livestream_player_header_user {
 				display: flex;
 				flex-direction: column;
@@ -222,6 +208,12 @@ html {
 						height: fit-content;
 
 						.ant-tag {
+							display: flex;
+							flex-direction: row;
+
+							align-items: center;
+							gap: 5px;
+
 							background-color: #eb0400;
 							border-color: #eb0400;
 							color: var(--background-color-contrast);
@@ -247,11 +239,12 @@ html {
 
 				overflow: hidden;
 
+				min-width: 350px;
 				width: 100%;
 
 				.livestream_player_header_title {
 					font-family: "Space Grotesk", sans-serif;
-                    font-size: 1rem;
+					font-size: 0.9rem;
 					font-weight: 700;
 
 					text-overflow: ellipsis;
@@ -272,13 +265,20 @@ html {
 	}
 
 	.livestream_panel {
+		position: relative;
+		z-index: 100;
+
 		display: flex;
 		flex-direction: column;
 
-        position: relative;
+		height: 100%;
-        height: 100vh;
+		min-width: 300px;
+		width: 30%;
 
-        width: @panel-width;
+		background-color: var(--background-color-accent);
+		border-radius: 24px;
+
+		overflow: hidden;
 
 		.chatbox {
 			position: relative;
@@ -288,7 +288,7 @@ html {
 
 			overflow: hidden;
 
-            padding: 20px;
+			padding: 10px;
 
 			.chatbox_header {
 				position: absolute;
@@ -327,18 +327,26 @@ html {
 						height: @chatbox-header-height;
 
 						filter: blur(7px);
-                        background-color: rgba(var(--layoutBackgroundColor), 0.7);
+						background-color: rgba(
+							var(--layoutBackgroundColor),
+							0.7
+						);
 					}
 
 					padding-top: @chatbox-header-height;
 				}
+
+				.liveChat_textInput {
+					.ant-input-affix-wrapper {
+						background-color: var(--background-color-primary);
+					}
+				}
 			}
 		}
 	}
 
 	.plyr {
-        border-radius: 0 4px 4px 0;
+		width: 100%;
-        width: 80vw;
+		height: 100%;
-        height: 100vh;
 	}
 }