RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

include FloatingPanel for mobile

Browse Source
This commit is contained in:
SrGooglo 2022-11-24 14:56:28 +00:00
parent 8d048698c3
commit 972a927555
2 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
packages/app/src/pages/live/[key].jsx
View File

@ -3,7 +3,7 @@ import React from "react"
import * as antd from "antd"
import Livestream from "../../models/livestream"
import { FloatingPanel } from "antd-mobile"
import { UserPreview, LiveChat } from "components"
import { Icons } from "components/Icons"
@ -14,6 +14,8 @@ import mpegts from "mpegts.js"
import "plyr/dist/plyr.css"
import "./index.less"
const floatingPanelAnchors = [160, 72 + 119, window.innerHeight * 0.8]
export default class StreamViewer extends React.Component {
state = {
isEnded: false,
@ -224,24 +226,30 @@ export default class StreamViewer extends React.Component {
</div>
}
return <div className="stream">
return <div className="liveStream">
<video ref={this.videoPlayerRef} id="player" />
<div className="panel">
<div className="info">
<UserPreview username={this.state.streamInfo?.username} />
{
window.isMobile ?
<FloatingPanel anchors={floatingPanelAnchors}>
<UserPreview username={this.state.streamInfo?.username} />
</FloatingPanel> :
<div className="panel">
<div className="info">
<UserPreview username={this.state.streamInfo?.username} />
<div id="spectatorCount">
<Icons.Eye />
{this.state.spectators}
<div id="spectatorCount">
<Icons.Eye />
{this.state.spectators}
</div>
</div>
<div className="chatbox">
<LiveChat
roomId={`livestream/${this.state.streamInfo?.username}`}
/>
</div>
</div>
</div>
<div className="chatbox">
<LiveChat
roomId={`livestream/${this.state.streamInfo?.username}`}
/>
</div>
</div>
}
</div>
}
}

2
packages/app/src/pages/live/index.less
View File

@ -15,7 +15,7 @@
height: 100vh;
}
.stream {
.liveStream {
display: flex;
flex-direction: row;