add an overlay to terminal in room to prevent input mode when touch o…

…n terminal

client/src/components/StreamPreview.tsx

@@ -66,7 +66,7 @@ const StreamPreview: FC<Props> = ({ title, wsUrl, streamerID, nViewers, startedT
         Data: "",
       });
       setTimeout(() => {
-        ws.send(payload);
+        utils.sendWhenConnected(ws, payload);
       }, 100);
     })
 

client/src/components/Terminal.tsx

@@ -6,7 +6,6 @@ import * as message from "../types/message";
 import * as buffer from "../lib/buffer";
 import * as pako from "pako";
 
-
 interface Winsize {
   Rows: number;
   Cols: number;
@@ -21,7 +20,6 @@ interface Props {
   className?: string;
 }
 
-
 const Terminal: React.FC<Props> = ({ msgManager, width = -1, height = -1, delay = 0, className = ""}: Props) => {
   const termRef = useRef<Xterm>(null);
   const divRef = useRef<HTMLDivElement>(null);
@@ -101,6 +99,7 @@ const Terminal: React.FC<Props> = ({ msgManager, width = -1, height = -1, delay
   return (
     <div className={`relative ${className} overflow-hidden`}
       style={{width: width!, height: height!}}>
+      <div className="overlay bg-transparent absolute top-0 left-0 z-10 w-full h-full"></div>
       <div ref={divRef}
         className="divref absolute top-1/2 left-1/2 origin-top-left transform -translate-x-1/2 -translate-y-1/2 overflow-hidden">
         <Xterm
@@ -118,8 +117,8 @@ class WriteManager {
 
   queue: message.Wrapper[] = [];
   writeCB: (arr:Uint8Array) => void;
-  winsizeCB: (ws:Winsize) => void
-    delay: number; // in milliseconds
+  winsizeCB: (ws:Winsize) => void;
+  delay: number; // in milliseconds
 
   constructor(writeCB: (arr: Uint8Array) => void, winsizeCB: (ws: Winsize) => void, delay: number = 0) {
     this.writeCB = writeCB;
@@ -212,7 +211,7 @@ class WriteManager {
     let msgArrayString: string[] = JSON.parse(buffer.ab2str(data));
 
     let msgArray: message.Wrapper[] = [];
-    msgArrayString.forEach((msgString: string, i) => {
+    msgArrayString.forEach((msgString: string) => {
       // re-compute the offset of this message with respect to the render time
       let msg: message.Wrapper = JSON.parse(window.atob(msgString));
       msg.Delay = msg.Delay - blockDelayTime;

client/src/pages/[room]/index.tsx

@@ -302,18 +302,18 @@ class Room extends React.Component<Props, State> {
             <div id="terminal-view" className="relative"
               onMouseMove={() => this.flashTitle()}>
               {this.state.roomInfo?.Status == RoomStatus.Streaming &&
-              <div id="info" className={`relative w-full ${this.state.mouseMove ? "visible" : "hidden"}`}>
+              <div id="info" className={`relative w-full ${this.state.mouseMove ? "visible" : "hidden"} z-20`}>
 
-                <div className={`top-0 left-0 w-full absolute z-10 px-4 py-2 bg-opacity-80 bg-gray-800 `}>
+                <div className={`top-0 left-0 w-full absolute z-20 px-4 py-2 bg-opacity-80 bg-gray-800 `}>
                   <p className="text-2xl">{this.state.roomInfo!.Title}</p>
                   <p className="text-md">@{this.state.roomInfo!.StreamerID}</p>
                 </div>
 
-                <div id="info-uptime" className={`p-1 bg-red-400 rounded absolute top-4 right-4 z-10`}>
+                <div id="info-uptime" className={`p-1 bg-red-400 rounded absolute top-4 right-4 z-20`}>
                   <Uptime className="text-md text-white font-semibold" startTime={new Date(this.state.roomInfo!.StartedTime)} />
                 </div>
 
-                <div id="info-nviewers" className="p-1 bg-gray-400 rounded absolute top-4 right-24 z-10">
+                <div id="info-nviewers" className="p-1 bg-gray-400 rounded absolute top-4 right-24 z-20">
                   <p className="text-md text-whtie font-semibold"><PersonIcon/> {this.state.roomInfo!.NViewers}</p>
                 </div>