added to home page, set limit for stateUpdates

schema.ts

@@ -13,6 +13,7 @@ const collection = {
               createdAt: 'timestamp',
               content: 'Message content',
               senderId: 'userId',
+              type: 'type',
             },
           },
         ],

src/components/Messages.css

@@ -1,10 +1,3 @@
-ion-col {
-  padding: 6px;
-  border-radius: 5px;
-  margin-bottom: 4px;
-  max-width: 70%;
-}
-
 .message-card {
   overflow-y: auto;
   height: calc(100% - 125px);
@@ -22,11 +15,19 @@ ion-col {
 }
 
 .my-msg {
+  padding: 6px;
+  border-radius: 5px;
+  margin-bottom: 4px;
+  max-width: 70%;
   background: var(--ion-color-primary);
   color: #fff;
 }
 
 .other-msg {
+  padding: 6px;
+  border-radius: 5px;
+  margin-bottom: 4px;
+  max-width: 70%;
   background: var(--ion-color-secondary);
   color: #fff;
 }

src/components/Messages.tsx

@@ -76,7 +76,6 @@ const Messages: React.FC<MessagesProps> = ({ ownerId, roomId, userId }) => {
   // Always scroll to most recent chat message (bottom)
   useEffect(() => {
     let content = contentRef.current;
-    console.log(content);
 
     // Set timeout because DOM doesn't update immediately after 'chats' state is updated
     setTimeout(() => {

src/components/RoomHeader.css

@@ -1,3 +1,14 @@
+.title {
+  text-align: left;
+  max-width: 100px;
+  padding-left: 15px;
+  padding-right: 15px;
+  color: var(--ion-color-primary);
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 24px;
+  cursor: pointer;
+}
+
 .input-bar {
   min-width: 200px;
   align-self: center;

src/components/RoomHeader.tsx

@@ -1,6 +1,7 @@
 import { IonFabButton, IonIcon, IonInput, IonTitle, IonToolbar } from '@ionic/react';
 import { add } from 'ionicons/icons';
 import React, { useState } from 'react';
+import { useHistory } from 'react-router';
 import { db, timestamp } from '../services/firebase';
 import './RoomHeader.css';
 
@@ -13,6 +14,7 @@ type RoomHeaderProps = {
 
 const RoomHeader: React.FC<RoomHeaderProps> = ({ roomId, userId, ownerId, videoId }) => {
   const [videoUrl, setVideoUrl] = useState('');
+  let history = useHistory();
 
   const onSubmit = async () => {
     if (userId === ownerId) {
@@ -33,9 +35,14 @@ const RoomHeader: React.FC<RoomHeaderProps> = ({ roomId, userId, ownerId, videoI
     }
   };
 
+  const toHome = () => {
+    history.replace('/');
+    history.go(0);
+  };
+
   return (
     <IonToolbar>
-      <IonTitle slot="start" class="title">
+      <IonTitle slot="start" onClick={toHome} class="title">
         Turtle
       </IonTitle>
       {userId === ownerId ? (

src/components/VideoPlayer.tsx

@@ -14,6 +14,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ ownerId, userId, roomId, stat
   const player = useRef<ReactPlayer>(null);
   const [playing, setPlaying] = useState(false);
   const [videoUrl, setVideoUrl] = useState('');
+  const [allowUpdate, setAllowUpdate] = useState(true);
 
   // Update database on play (owner only)
   const onPlay = async () => {
@@ -87,7 +88,12 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ ownerId, userId, roomId, stat
             }
 
             // Continue requesting an update on the video state, until synced
-            if (Math.abs(currTime - data.time) > SYNC_MARGIN / 1000 && data.isPlaying) {
+            if (allowUpdate && Math.abs(currTime - data.time) > SYNC_MARGIN / 1000 && data.isPlaying) {
+              setAllowUpdate(false);
+              setTimeout(() => {
+                setAllowUpdate(true);
+              }, 3000);
+
               player.current?.seekTo(data.time);
               console.log('diff: ' + Math.abs(currTime - data.time));
               db.collection('rooms').doc(roomId).collection('messages').add({
@@ -104,7 +110,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ ownerId, userId, roomId, stat
         stateUnsubscribe();
       };
     }
-  }, [ownerId, userId, roomId]);
+  }, [ownerId, userId, roomId, allowUpdate]);
 
   // Listen for video updateState requests (owner only)
   useEffect(() => {

src/pages/Home.css

@@ -1,14 +1,36 @@
 .create-room {
-  text-align: center;
-  justify-content: center;
-  margin: 30% 10% 0 10%;
-  width: 100%;
+  width: 50%;
 }
 
 .home-grid {
   max-width: 500px;
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 30px;
+  color: var(--ion-color-secondary);
+  text-align: center;
 }
 
 ion-toolbar {
   text-align: center;
 }
+
+ion-title {
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  font-size: 24px;
+  color: var(--ion-color-primary);
+}
+
+.first-step-col {
+  margin-top: 20%;
+  margin-bottom: 10px;
+}
+
+.create-col {
+  margin-bottom: 50px;
+}
+
+.share-col {
+  margin-top: 10px;
+  font-size: 20px;
+  color: var(--ion-color-primary);
+}

src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import { IonButton, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
+import { IonButton, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar, IonCol } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import { auth, db, rtdb, timestamp } from '../services/firebase';
@@ -62,17 +62,32 @@ const Home: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent>
-        <IonGrid class="home-grid">
-          <IonRow>
-            {loading ? (
-              <IonContent className="ion-padding">Loading...</IonContent>
-            ) : (
-              <IonButton onClick={createRoom} class="create-room">
-                Create Room
-              </IonButton>
-            )}
-          </IonRow>
-        </IonGrid>
+        {loading ? (
+          <IonContent className="ion-padding">Loading...</IonContent>
+        ) : (
+          <IonGrid class="home-grid">
+            <IonRow>
+              <IonCol size="12" class="first-step-col">
+                Step 1:
+              </IonCol>
+            </IonRow>
+            <IonRow>
+              <IonCol size="12" class="create-col">
+                <IonButton onClick={createRoom} class="create-room">
+                  Create Room
+                </IonButton>
+              </IonCol>
+            </IonRow>
+            <IonRow>
+              <IonCol size="12">Step 2:</IonCol>
+            </IonRow>
+            <IonRow>
+              <IonCol size="12" class="share-col">
+                Share the link with friends!
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        )}
       </IonContent>
     </IonPage>
   );

src/pages/Room.css

@@ -5,16 +5,6 @@
   padding: 0;
 }
 
-.title {
-  text-align: left;
-  max-width: 100px;
-  padding-left: 15px;
-  padding-right: 15px;
-  color: var(--ion-color-primary);
-  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-  font-size: 24px;
-}
-
 @media (min-width: 992px) {
   .player-col {
     height: calc(0.5625 * 75vw);