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

improve cinemaMode

Browse Source
This commit is contained in:
SrGooglo 2022-12-21 19:16:18 +00:00
parent 48b97f8911
commit 617ae389fa
2 changed files with 75 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,6 @@ import * as antd from "antd"
import classnames from "classnames"
import Livestream from "models/livestream"
import { FloatingPanel } from "antd-mobile"
import { UserPreview, LiveChat } from "components"
import { Icons } from "components/Icons"
import Ticker from "react-ticker"
@ -16,8 +15,6 @@ 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 = {
requestedUsername: null,
@ -124,6 +121,7 @@ export default class StreamViewer extends React.Component {
this.setState({
isEnded: true,
loading: false,
cinemaMode: false,
})
}
@ -300,7 +298,14 @@ export default class StreamViewer extends React.Component {
}
render() {
return <div className="livestream">
return <div
className={classnames(
"livestream",
{
["cinemaMode"]: this.state.cinemaMode,
}
)}
>
<div className="livestream_player">
<div className="livestream_player_header">
{
@ -367,22 +372,19 @@ export default class StreamViewer extends React.Component {
</div>
</div>
{
window.isMobile
? <FloatingPanel anchors={floatingPanelAnchors}>
<UserPreview username={this.state.requestedUsername} />
</FloatingPanel>
: <div className="livestream_panel">
<div className="chatbox">
<div className="chatbox_header">
<h4><Icons.MessageCircle /> Live chat</h4>
</div>
<LiveChat
roomId={`livestream:${this.state.requestedUsername}`}
/>
<div className="livestream_panel">
<div className="chatbox">
{
!this.state.cinemaMode && <div className="chatbox_header">
<h4><Icons.MessageCircle /> Live chat</h4>
</div>
</div>
}
}
<LiveChat
roomId={`livestream:${this.state.requestedUsername}`}
floatingMode={this.state.cinemaMode}
/>
</div>
</div>
</div>
}
}

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

@ -33,6 +33,57 @@
color: var(--background-color-contrast);
}
&.cinemaMode {
.livestream_player {
width: 100%;
video {
width: 100%;
}
.plyr {
width: 100%;
}
.livestream_player_header {
animation: disappear 0.3s ease-in-out forwards;
}
}
.livestream_panel {
position: absolute;
z-index: 99;
right: 0;
top: 0;
height: 60vh;
width: 20vw;
padding: 20px;
overflow-x: hidden;
.chatbox {
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
.liveChat {
.liveChat_timeline {
padding-top: 0 !important;
&::after {
content: "";
display: none;
}
}
}
}
}
}
.livestream_player {
display: flex;
position: relative;
@ -45,6 +96,8 @@
overflow-y: hidden;
transition: all 0.3s ease-in-out;
.livestream_player_loading {
display: flex;
flex-direction: column;
@ -113,7 +166,7 @@
.livestream_player_header_user {
display: flex;
flex-direction: column;
margin-right: 20px;
.livestream_player_header_user_spectators {
@ -167,27 +220,6 @@
width: @panel-width;
.livestream_panel_info {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
padding: 10px;
backdrop-filter: 20px;
h1,
h2,
h3,
h4,
h5 {
margin: 0;
}
}
.chatbox {
position: relative;