add react player, ui styling (stacked to horizontal)

package.json

@@ -19,6 +19,7 @@
     "ionicons": "^5.0.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-player": "^2.6.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",

src/components/Chat.css

@@ -1,28 +1,47 @@
 ion-col {
-  padding: 10px;
-  border-radius: 10px;
+  padding: 6px;
+  border-radius: 5px;
   margin-bottom: 4px;
   white-space: pre-wrap;
-  max-width: 75%;
+  max-width: 70%;
 }
 
 ion-textarea {
   border: solid 1px #999;
 }
 
+.chat-card {
+  height: 100%;
+  width: 100%;
+  float: right;
+  margin: 0;
+}
+
 .right-align {
   justify-content: flex-end;
 }
 
+.message-card {
+  overflow-y: auto;
+  height: calc(100% - 125px);
+  padding: 0;
+}
+
+.input-card {
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
+  padding: 0;
+}
+
 .message-grid {
-  padding-left: calc(100vw - 100%);
   margin-right: 0;
   height: 100%;
 }
 
 .message-input {
-  margin-right: 0;
-  border: solid 1px #bbb;
+  margin: 0;
+  border-top: solid 1px #bbb;
 }
 
 .my-msg {
@@ -45,3 +64,7 @@ ion-textarea {
 .send-button {
   width: 100%;
 }
+
+.text-area {
+  height: 100%;
+}

src/components/Chat.tsx

@@ -1,4 +1,4 @@
-import { IonButton, IonCol, IonContent, IonFooter, IonGrid, IonRow, IonTextarea } from '@ionic/react';
+import { IonButton, IonCard, IonCardContent, IonCol, IonGrid, IonRow, IonTextarea } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
 import { currTime, db, timestamp } from '../services/firebase';
 import './Chat.css';
@@ -80,8 +80,8 @@ const Chat: React.FC<ChatProps> = ({ roomId, userId }) => {
   };
 
   return (
-    <>
-      <IonContent>
+    <IonCard class="chat-card">
+      <IonCardContent class="message-card">
         <IonGrid class="message-grid">
           {!loading ? (
             chats.map((chat) => {
@@ -98,12 +98,16 @@ const Chat: React.FC<ChatProps> = ({ roomId, userId }) => {
             <></>
           )}
         </IonGrid>
-      </IonContent>
-      <IonFooter class="ion-no-border">
+      </IonCardContent>
+      <IonCardContent class="input-card">
         <IonGrid class="message-input">
           <IonRow>
             <IonCol size="9">
-              <IonTextarea onIonChange={(e) => setMessage(e.detail.value!)} value={message}></IonTextarea>
+              <IonTextarea
+                onIonChange={(e) => setMessage(e.detail.value!)}
+                value={message}
+                class="textarea"
+              ></IonTextarea>
             </IonCol>
             <IonCol size="3" class="send-msg">
               <IonButton expand="block" color="primary" onClick={sendMessage} class="send-button">
@@ -112,8 +116,8 @@ const Chat: React.FC<ChatProps> = ({ roomId, userId }) => {
             </IonCol>
           </IonRow>
         </IonGrid>
-      </IonFooter>
-    </>
+      </IonCardContent>
+    </IonCard>
   );
 };
 

src/pages/Home.css

@@ -5,10 +5,10 @@
   width: 100%;
 }
 
-ion-toolbar {
-  text-align: center;
+.home-grid {
+  max-width: 500px;
 }
 
-ion-grid {
-  max-width: 500px;
+ion-toolbar {
+  text-align: center;
 }

src/pages/Room.css

@@ -0,0 +1,14 @@
+.room-grid {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  height: 100%;
+  padding: 0;
+}
+
+.room-row {
+  height: 100%;
+}
+
+.player-col {
+  height: 70%;
+}

src/pages/Room.tsx

@@ -1,9 +1,11 @@
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import { IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
+import ReactPlayer from 'react-player';
 import { RouteComponentProps, useHistory } from 'react-router';
 import Chat from '../components/Chat';
 import { auth, db, decrement, increment, rtdb } from '../services/firebase';
 import { generateAnonName } from '../services/random';
+import './Room.css';
 
 const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
   const history = useHistory();
@@ -132,7 +134,21 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
       {loading ? (
         <IonContent className="ion-padding">Loading...</IonContent>
       ) : (
+        <IonGrid class="room-grid">
+          <IonRow class="room-row">
+            <IonCol size="12" sizeLg="9">
+              <ReactPlayer
+                className="react-player"
+                url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
+                width="100%"
+                height="100%"
+              ></ReactPlayer>
+            </IonCol>
+            <IonCol size="12" sizeLg="3">
               <Chat roomId={roomId} userId={userId}></Chat>
+            </IonCol>
+          </IonRow>
+        </IonGrid>
       )}
     </IonPage>
   );