improve cinemaMode

packages/app/src/pages/live/[key].jsx

@@ -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>
 
-            {
+            <div className="livestream_panel">
-                window.isMobile
+                <div className="chatbox">
-                    ? <FloatingPanel anchors={floatingPanelAnchors}>
+                    {
-                        <UserPreview username={this.state.requestedUsername} />
+                        !this.state.cinemaMode && <div className="chatbox_header">
-                    </FloatingPanel>
+                            <h4><Icons.MessageCircle /> Live chat</h4>
-                    : <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>
-                    </div>
+                    }
-            }
+                    <LiveChat
+                        roomId={`livestream:${this.state.requestedUsername}`}
+                        floatingMode={this.state.cinemaMode}
+                    />
+                </div>
+            </div>
         </div>
     }
 }

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

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