made UI better for mobile and chat

src/components/Chatbox.css

@@ -9,20 +9,6 @@ ion-textarea {
   margin: 0;
 }
 
-.input-card-row {
-  position: fixed;
-  width: 100%;
-}
-
-.input-card-col {
-  margin: 0;
-  border-top: solid 1px #999;
-}
-
-.input-card-content {
-  padding: 0;
-}
-
 .send-msg {
   align-items: center;
   justify-content: center;
@@ -33,6 +19,23 @@ ion-textarea {
   width: 100%;
 }
 
-.text-area {
+.message-input {
   height: 100%;
+  border: 1px solid #999;
+  border-radius: 5px;
+}
+
+@media (max-width: 576px) {
+  .message-input {
+    border-radius: 10px;
+    height: 35px;
+  }
+
+  .send-msg {
+    display: none;
+  }
+
+  .native-input.sc-ion-input-ios {
+    padding-inline-start: 5px;
+  }
 }

src/components/Chatbox.tsx

@@ -1,4 +1,4 @@
-import { IonButton, IonCard, IonCardContent, IonCol, IonRow, IonTextarea } from '@ionic/react';
+import { IonButton, IonCard, IonCol, IonFooter, IonInput, IonRow } from '@ionic/react';
 import React, { useState } from 'react';
 import { db, timestamp } from '../services/firebase';
 import './Chatbox.css';
@@ -14,40 +14,47 @@ const Chat: React.FC<ChatboxProps> = ({ roomId, userId }) => {
 
   // Send message to database
   const sendMessage = async () => {
-    await db.collection('rooms').doc(roomId).collection('messages').add({
+    if (message !== '') {
-      createdAt: timestamp,
+      await db.collection('rooms').doc(roomId).collection('messages').add({
-      senderId: userId,
+        createdAt: timestamp,
-      content: message,
+        senderId: userId,
-      type: 'user',
+        content: message,
-    });
+        type: 'user',
+      });
+    }
 
     // Reset textarea field
     setMessage('');
   };
 
+  const onEnter = (e: React.KeyboardEvent<HTMLIonInputElement>) => {
+    if (e.key === 'Enter') {
+      sendMessage();
+    }
+  };
+
   return (
     <IonCard class="chat-card">
       <Messages roomId={roomId} userId={userId}></Messages>
-      <IonRow class="input-card-row">
+      <IonFooter>
-        <IonCol size="12" sizeLg="3" class="input-card-col">
+        <IonRow>
-          <IonCardContent class="input-card-content">
+          <IonCol size="12" sizeSm="9" class="message-col">
-            <IonRow>
+            <IonInput
-              <IonCol size="9">
+              onIonChange={(e) => setMessage(e.detail.value!)}
-                <IonTextarea
+              onKeyDown={(e) => onEnter(e)}
-                  onIonChange={(e) => setMessage(e.detail.value!)}
+              value={message}
-                  value={message}
+              placeholder="Send message"
-                  class="textarea"
+              enterkeyhint="send"
-                ></IonTextarea>
+              class="message-input"
-              </IonCol>
+            ></IonInput>
-              <IonCol size="3" class="send-msg">
+          </IonCol>
-                <IonButton expand="block" color="primary" onClick={sendMessage} class="send-button">
+          <IonCol size="3" class="send-msg">
-                  Send
+            <IonButton expand="block" color="primary" onClick={sendMessage} class="send-button">
-                </IonButton>
+              Send
-              </IonCol>
+            </IonButton>
-            </IonRow>
+          </IonCol>
-          </IonCardContent>
+        </IonRow>
-        </IonCol>
+      </IonFooter>
-      </IonRow>
     </IonCard>
   );
 };

src/components/Messages.tsx

@@ -1,4 +1,4 @@
-import { IonCol, IonContent, IonGrid, IonRow } from '@ionic/react';
+import { IonCol, IonGrid, IonRow, IonContent } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
 import { currTime, db } from '../services/firebase';
 import './Messages.css';

src/components/VideoPlayer.tsx

@@ -111,6 +111,13 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ ownerId, userId, roomId }) =>
       onPause={onPause}
       playing={playing}
       muted={true}
+      config={{
+        youtube: {
+          playerVars: {
+            showinfo: 1, // Keeps mute/full screen controls at bottom for iOS
+          },
+        },
+      }}
     ></ReactPlayer>
   );
 };