include FloatingPanel for mobile

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

@@ -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,9 +226,14 @@ export default class StreamViewer extends React.Component {
             </div>
         }
 
-        return <div className="stream">
+        return <div className="liveStream">
             <video ref={this.videoPlayerRef} id="player" />
 
+            {
+                window.isMobile ?
+                    <FloatingPanel anchors={floatingPanelAnchors}>
+                        <UserPreview username={this.state.streamInfo?.username} />
+                    </FloatingPanel> :
                     <div className="panel">
                         <div className="info">
                             <UserPreview username={this.state.streamInfo?.username} />
@@ -242,6 +249,7 @@ export default class StreamViewer extends React.Component {
                             />
                         </div>
                     </div>
+            }
         </div>
     }
 }

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

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