use comtyjs model

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

@@ -7,7 +7,7 @@ import UserPreview from "@components/UserPreview"
 import { Icons } from "@components/Icons"
 
 import LiveChat from "@components/LiveChat"
-import SpectrumAPI from "@classes/SpectrumAPI"
+import SpectrumModel from "@models/spectrum"
 
 import Plyr from "plyr"
 import Hls from "hls.js"
@@ -33,7 +33,7 @@ const StreamDecoders = {
 			type: "flv",
 			isLive: true,
 			enableWorker: true,
-            url: source
+			url: source,
 		})
 
 		if (typeof onSourceEnd === "function") {
@@ -90,7 +90,7 @@ const StreamDecoders = {
 		})
 
 		return hlsInstance
-    }
+	},
 }
 
 export default class StreamViewer extends React.Component {
@@ -130,7 +130,7 @@ export default class StreamViewer extends React.Component {
 		const decoderInstance = await StreamDecoders[decoder](...args)
 
 		await this.setState({
-            decoderInstance: decoderInstance
+			decoderInstance: decoderInstance,
 		})
 
 		await this.toggleLoading(false)
@@ -139,10 +139,12 @@ export default class StreamViewer extends React.Component {
 	}
 
 	loadStream = async (stream_id) => {
-        let stream = await SpectrumAPI.getLivestream(stream_id).catch((error) => {
+		let stream = await SpectrumModel.getLivestream(stream_id).catch(
+			(error) => {
 				console.error(error)
 				return null
-        })
+			},
+		)
 
 		if (!stream) {
 			return false
@@ -182,22 +184,35 @@ export default class StreamViewer extends React.Component {
 			clickToPlay: false,
 			autoplay: true,
 			muted: true,
-            controls: ["mute", "volume", "fullscreen", "airplay", "options", "settings",],
+			controls: [
+				"mute",
+				"volume",
+				"fullscreen",
+				"airplay",
+				"options",
+				"settings",
+			],
 			settings: ["quality"],
 		})
 
 		player.muted = true
 
 		// insert a button to enter to cinema mode
-        player.elements.buttons.fullscreen.insertAdjacentHTML("beforeBegin", `
+		player.elements.buttons.fullscreen.insertAdjacentHTML(
+			"beforeBegin",
+			`
             <button class="plyr__controls__item plyr__control" type="button" data-plyr="cinema">
                 <span class="label">Cinema mode</span>
             </button>
-        `)
+        `,
+		)
 
-        player.elements.buttons.cinema = player.elements.container.querySelector("[data-plyr='cinema']")
+		player.elements.buttons.cinema =
+			player.elements.container.querySelector("[data-plyr='cinema']")
 
-        player.elements.buttons.cinema.addEventListener("click", () => this.toggleCinemaMode())
+		player.elements.buttons.cinema.addEventListener("click", () =>
+			this.toggleCinemaMode(),
+		)
 
 		this.setState({
 			player,
@@ -227,12 +242,13 @@ export default class StreamViewer extends React.Component {
 				return
 			}
 
-            await this.loadDecoder("flv",
+			await this.loadDecoder(
+				"flv",
 				this.videoPlayerRef.current,
 				stream.sources.flv,
 				{
 					onSourceEnd: this.onSourceEnd,
-                }
+				},
 			)
 		}
 	}
@@ -296,13 +312,11 @@ export default class StreamViewer extends React.Component {
 	}
 
 	render() {
-        return <div
+		return (
-            className={classnames(
+			<div
-                "livestream",
+				className={classnames("livestream", {
-                {
 					["cinemaMode"]: this.state.cinemaMode,
-                }
+				})}
-            )}
 			>
 				{this.props.query.id}
 				<div className="livestream_player">
@@ -314,46 +328,54 @@ export default class StreamViewer extends React.Component {
 							<Icons.IoMdExit />
 						</div>
 
-                    {
+						{this.state.stream ? (
-                        this.state.stream
+							<>
-                            ? <>
 								<div className="livestream_player_header_user">
-
+									<UserPreview
-
+										user={this.state.stream.user}
-                                    <UserPreview user={this.state.stream.user} />
+									/>
 
 									<div className="livestream_player_indicators">
-                                        {
+										{!this.state.isEnded && (
-                                            !this.state.isEnded && <div className="livestream_player_header_user_spectators">
+											<div className="livestream_player_header_user_spectators">
 												<antd.Tag
 													icon={<Icons.FiEye />}
 												>
 													{this.state.spectators}
 												</antd.Tag>
 											</div>
-                                        }
+										)}
 									</div>
 								</div>
 
-                                {
+								{this.state.stream.info && (
-                                    this.state.stream.info && <div className="livestream_player_header_info">
+									<div className="livestream_player_header_info">
 										<div className="livestream_player_header_info_title">
-                                            <h1>{this.state.stream.info?.title}</h1>
+											<h1>
+												{this.state.stream.info?.title}
+											</h1>
 										</div>
 										<div className="livestream_player_header_info_description">
-                                            <Marquee
+											<Marquee mode="smooth">
-                                                mode="smooth"
-                                            >
 												{({ index }) => {
-                                                    return <h4>{this.state.stream.info?.description}</h4>
+													return (
+														<h4>
+															{
+																this.state
+																	.stream.info
+																	?.description
+															}
+														</h4>
+													)
 												}}
 											</Marquee>
 										</div>
 									</div>
-                                }
+								)}
 							</>
-                            : <antd.Skeleton active />
+						) : (
-                    }
+							<antd.Skeleton active />
+						)}
 					</div>
 
 					<video
@@ -364,21 +386,16 @@ export default class StreamViewer extends React.Component {
 						}}
 					/>
 
-                {
+					{this.state.isEnded && (
-                    this.state.isEnded && <antd.Result>
+						<antd.Result>
-                        <h1>
+							<h1>This stream is ended</h1>
-                            This stream is ended
-                        </h1>
 						</antd.Result>
-                }
+					)}
 
 					<div
-                    className={classnames(
+						className={classnames("livestream_player_loading", {
-                        "livestream_player_loading",
-                        {
 							["active"]: this.state.loading,
-                        }
+						})}
-                    )}
 					>
 						<antd.Spin />
 					</div>
@@ -386,11 +403,13 @@ export default class StreamViewer extends React.Component {
 
 				<div className="livestream_panel">
 					<div className="chatbox">
-                    {
+						{!this.state.cinemaMode && (
-                        !this.state.cinemaMode && <div className="chatbox_header">
+							<div className="chatbox_header">
-                            <h4><Icons.FiMessageCircle /> Live chat</h4>
+								<h4>
+									<Icons.FiMessageCircle /> Live chat
+								</h4>
 							</div>
-                    }
+						)}
 						<LiveChat
 							id={`livestream:${this.props.params.id}`}
 							floatingMode={this.state.cinemaMode}
@@ -398,5 +417,6 @@ export default class StreamViewer extends React.Component {
 					</div>
 				</div>
 			</div>
+		)
 	}
 }