兼容移动端

example/src/RoomPage.tsx

@@ -1,10 +1,10 @@
-import { faSquare, faThLarge, faUserFriends } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Room, RoomEvent, setLogLevel, VideoPresets } from 'livekit-client';
-import { DisplayContext, DisplayOptions, LiveKitRoom } from '@livekit/react-components';
-import { useState } from 'react';
+import {faSquare, faThLarge, faUserFriends} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {Room, RoomEvent, setLogLevel, VideoPresets} from 'livekit-client';
+import {DisplayContext, DisplayOptions, LiveKitRoom} from '@livekit/react-components';
+import {useState} from 'react';
 import 'react-aspect-ratio/aspect-ratio.css';
-import { useNavigate, useLocation } from 'react-router-dom';
+import {useNavigate, useLocation} from 'react-router-dom';
 
 // 新增代码
 let currentRoom: Room;
@@ -73,6 +73,10 @@ export const RoomPage = () => {
     chat.innerHTML += `<div>${from}: ${str}</div>`;
     chat.scrollTop = chat.scrollHeight;
   };
+  const closeChat = () => {
+    const chatArea: any = document.getElementById('chat-area');
+    chatArea.style.display = 'none';
+  }
   // 新增代码结束
 
   return (
@@ -86,7 +90,7 @@ export const RoomPage = () => {
                 <input
                   id="showStats"
                   type="checkbox"
-                  onChange={(e) => updateOptions({ showStats: e.target.checked })}
+                  onChange={(e) => updateOptions({showStats: e.target.checked})}
                 />
                 <label htmlFor="showStats">Show Stats</label>
               </div>
@@ -95,23 +99,23 @@ export const RoomPage = () => {
                   className="iconButton"
                   disabled={displayOptions.stageLayout === 'grid'}
                   onClick={() => {
-                    updateOptions({ stageLayout: 'grid' });
+                    updateOptions({stageLayout: 'grid'});
                   }}
                 >
-                  <FontAwesomeIcon height={32} icon={faThLarge} />
+                  <FontAwesomeIcon height={32} icon={faThLarge}/>
                 </button>
                 <button
                   className="iconButton"
                   disabled={displayOptions.stageLayout === 'speaker'}
                   onClick={() => {
-                    updateOptions({ stageLayout: 'speaker' });
+                    updateOptions({stageLayout: 'speaker'});
                   }}
                 >
-                  <FontAwesomeIcon height={32} icon={faSquare} />
+                  <FontAwesomeIcon height={32} icon={faSquare}/>
                 </button>
               </div>
               <div className="participantCount">
-                <FontAwesomeIcon icon={faUserFriends} />
+                <FontAwesomeIcon icon={faUserFriends}/>
                 <span>{numParticipants}</span>
               </div>
             </div>
@@ -142,12 +146,15 @@ export const RoomPage = () => {
         </div>
         {
           currentRoom &&
-          <div className="chat-area">
-            <h2>Chat</h2>
+          <div className="chat-area" id="chat-area">
+            <div className="title">
+              <h2>Chat</h2>
+              <div className="close" onClick={closeChat}>x</div>
+            </div>
             <div className="chat" id="chat"></div>
             <div className="send">
-              <input type="text" className="input" id="entry" placeholder="Enter your message" />
-              <button className="btn" type="button" onClick={enterText}>
+              <input type="text" className="input" id="entry" placeholder="Enter your message"/>
+              <button className="chat-btn" onClick={enterText}>
                 Send
               </button>
             </div>

example/src/index.css

@@ -185,11 +185,28 @@ a:hover {
 }
 
 .chat-area {
-  width: 300px;
+  width: 320px;
+}
+
+.chat-area .title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chat-area .title .close {
+  width: 22px;
+  height: 22px;
+  line-height: 20px;
+  font-size: 20px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  text-align: center;
+  display: none;
 }
 
 .chat-area .chat {
-  height: calc(100vh - 275px);
+  height: calc(100vh - 277px);
   font-size: 14px;
   padding: 10px;
   border: 1px solid #ddd;
@@ -214,15 +231,54 @@ a:hover {
   outline: none;
 }
 
-.chat-area .send .btn {
+.chat-btn {
   white-space: nowrap;
   width: 72px;
-  height: 36px;
+  height: 38px;
   font-size: 14px;
   color: #000;
-  background: yellow;
+  background: #e0e012;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }
+
+.chat-btn.round {
+  border-radius: 19px;
+  margin: 0 6px;
+  display: none;
+}
+
+.chat-btn:hover {
+  background: #ff0;
+}
+
+@media screen and (max-width: 767px) {
+  .chat-area {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    padding: 20px;
+    box-sizing: border-box;
+    background: black;
+    display: none;
+  }
+
+  .chat-area .title .close {
+    display: block;
+  }
+
+  .chat-btn.round {
+    display: inline-block;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .chat-area {
+    display: block !important;
+  }
+}
+
 /*新增样式结束*/

packages/components/src/components/ControlsView.tsx

@@ -1,11 +1,11 @@
-import { faDesktop, faStop } from '@fortawesome/free-solid-svg-icons';
-import { Room } from 'livekit-client';
-import React, { ReactElement } from 'react';
-import { useParticipant } from '@livekit/react-core';
-import { AudioSelectButton } from './AudioSelectButton';
-import { ControlButton } from './ControlButton';
+import {faDesktop, faStop} from '@fortawesome/free-solid-svg-icons';
+import {Room} from 'livekit-client';
+import React, {ReactElement} from 'react';
+import {useParticipant} from '@livekit/react-core';
+import {AudioSelectButton} from './AudioSelectButton';
+import {ControlButton} from './ControlButton';
 import styles from './styles.module.css';
-import { VideoSelectButton } from './VideoSelectButton';
+import {VideoSelectButton} from './VideoSelectButton';
 
 export interface ControlsProps {
   room: Room;
@@ -16,13 +16,13 @@ export interface ControlsProps {
 }
 
 export const ControlsView = ({
-  room,
-  enableScreenShare,
-  enableAudio,
-  enableVideo,
-  onLeave,
-}: ControlsProps) => {
-  const { cameraPublication: camPub, microphonePublication: micPub } = useParticipant(
+                               room,
+                               enableScreenShare,
+                               enableAudio,
+                               enableVideo,
+                               onLeave,
+                             }: ControlsProps) => {
+  const {cameraPublication: camPub, microphonePublication: micPub} = useParticipant(
     room.localParticipant,
   );
 
@@ -104,19 +104,28 @@ export const ControlsView = ({
     );
   }
 
+  // 新增代码
+  const showChat = () => {
+    const chatArea: any = document.getElementById('chat-area');
+    chatArea.style.display = 'block';
+  };
+
   return (
     <div className={styles.controlsWrapper}>
       {muteButton}
       {videoButton}
       {screenButton}
-      <span>&nbsp;</span>
+      <button className="chat-btn round" onClick={showChat}>
+        Chat
+      </button>
       {onLeave && (
         <ControlButton
           label="End"
           className={styles.dangerButton}
           onClick={() => {
-            room.disconnect();
-            onLeave(room);
+            // room.disconnect();
+            // onLeave(room);
+            window.close();
           }}
         />
       )}