added 'join room' option

src/components/Messages.css

@@ -40,6 +40,10 @@
   padding-top: 5px;
 }
 
+ion-footer ion-toolbar:last-of-type {
+  padding-bottom: 10px;
+}
+
 .message-input {
   width: 100%;
   height: 100%;

src/pages/Home.css

@@ -24,15 +24,42 @@ ion-title {
 }
 
 .first-step-col {
-  margin-top: 20%;
-  margin-bottom: 10px;
+  margin-top: 15%;
 }
 
 .create-col {
-  margin-bottom: 50px;
+  margin-bottom: 20px;
 }
 
 .share-col {
-  margin-top: 8px;
+  margin-top: 2px;
   font-size: 20px;
+  margin-bottom: 50px;
+}
+
+.join-col {
+  font-size: 20px;
+}
+
+.paste-col {
+  padding: 0;
+}
+
+.paste-toolbar {
+  max-width: 300px;
+  --background: none;
+  margin: auto;
+}
+
+.paste-input {
+  margin-left: 2px;
+  text-align: left;
+  font-size: 14px;
+  border: 1px solid var(--ion-color-secondary);
+  border-radius: 5px;
+}
+
+.paste-button {
+  margin-right: 2px;
+  --box-shadow: 0 3px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }

src/pages/Home.tsx

@@ -1,13 +1,29 @@
-import { IonButton, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar, IonCol } from '@ionic/react';
+import {
+  IonButton,
+  IonCol,
+  IonContent,
+  IonFabButton,
+  IonGrid,
+  IonHeader,
+  IonIcon,
+  IonInput,
+  IonPage,
+  IonRow,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { enterOutline } from 'ionicons/icons';
 import React, { useEffect, useState } from 'react';
 import { useHistory } from 'react-router';
 import { auth, db, rtdb, timestamp } from '../services/firebase';
-import { generateAnonName } from '../services/utilities';
+import { generateAnonName, matchRoomUrl } from '../services/utilities';
 import './Home.css';
 
 const Home: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [userId, setUserId] = useState('');
+  const [roomLink, setRoomLink] = useState('');
+  const [valid, setValid] = useState(true);
 
   let history = useHistory();
 
@@ -30,7 +46,7 @@ const Home: React.FC = () => {
     };
   }, []);
 
-  // Populate both Firestore and RealTimeDB before navigating to room
+  // Populate both Firestore and RealTimeDB before navigating to room on create
   const createRoom = async () => {
     // Firestore preparations
     const roomId = await db.collection('rooms').add({
@@ -53,7 +69,25 @@ const Home: React.FC = () => {
     await rtdb.ref('/available/' + roomId.id).set({ name: 'Room Name', createdAt: new Date().toISOString() });
     const path = '/room/' + roomId.id;
 
-    return history.push(path);
+    return history.push(path); // Navigate to room
+  };
+
+  const showError = () => {
+    return <div style={{ color: 'red', fontSize: '14px' }}>Invalid link</div>;
+  };
+
+  // Validate URL and join the room
+  const joinRoom = async () => {
+    if (matchRoomUrl(roomLink)) {
+      const roomId = roomLink.split('/')[roomLink.split('/').length - 1];
+      const doc = await db.collection('rooms').doc(roomId).get();
+      if (doc.exists) {
+        setValid(true);
+        return history.push('/room/' + roomId);
+      }
+    }
+
+    setValid(false);
   };
 
   return (
@@ -88,6 +122,35 @@ const Home: React.FC = () => {
                 Share the link with friends!
               </IonCol>
             </IonRow>
+            <IonRow>
+              <IonCol size="12">OR</IonCol>
+            </IonRow>
+            <IonRow>
+              <IonCol size="12" class="join-col">
+                Join a room:
+              </IonCol>
+            </IonRow>
+            <IonRow>
+              <IonCol size="12" class="paste-col">
+                <IonToolbar class="paste-toolbar">
+                  <IonInput
+                    onIonChange={(e) => setRoomLink(e.detail.value!)}
+                    placeholder="Paste room link"
+                    class="paste-input"
+                  ></IonInput>
+                  <IonFabButton
+                    slot="end"
+                    size="small"
+                    disabled={roomLink === ''}
+                    onClick={joinRoom}
+                    class="paste-button"
+                  >
+                    <IonIcon icon={enterOutline}></IonIcon>
+                  </IonFabButton>
+                </IonToolbar>
+                {valid ? <></> : showError()}
+              </IonCol>
+            </IonRow>
           </IonGrid>
         )}
       </IonContent>

src/pages/Room.tsx

@@ -2,8 +2,8 @@ import { IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow } from '@ionic/
 import React, { useEffect, useState } from 'react';
 import { RouteComponentProps, useHistory } from 'react-router';
 import Frame from '../components/Frame';
-import RoomHeader from '../components/RoomHeader';
 import VideoPlayer from '../components/Player/VideoPlayer';
+import RoomHeader from '../components/RoomHeader';
 import { auth, db, decrement, increment, rtdb } from '../services/firebase';
 import { generateAnonName } from '../services/utilities';
 import './Room.css';
@@ -83,12 +83,13 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
           }
         });
 
-        // Manage user count
+        // Manage user count and maintain room availability
         rtdb.ref('.info/connected').on('value', async (snapshot) => {
           if (snapshot.val() === true) {
             try {
               await roomRef.update({ userCount: increment });
-              await roomRef.onDisconnect().update({ userCount: decrement });
+              roomRef.onDisconnect().update({ userCount: decrement });
+              availableRef.child(roomId).set({ name: 'Room Name', createdAt: new Date().toISOString() });
             } catch (err) {
               console.log(err);
             }

src/services/utilities.ts

@@ -88,6 +88,7 @@ const animals = [
 //   MATCH_URL_VIDYARD: /vidyard.com\/(?:watch\/)?([a-zA-Z0-9-]+)/,
 // };
 
+const MATCH_URL_ROOM = /((^(http:\/\/)?localhost:3000)|(^(https?:\/\/(www\.)?)?turtletv\.app))\/room\/([-a-zA-Z0-9]*)/;
 const MATCH_URL_NETFLIX = /https?:\/\/(www\.)?netflix\.com\/watch\/([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
 export const matchUrl = (url: string) => {
@@ -98,6 +99,13 @@ export const matchUrl = (url: string) => {
   }
 };
 
+export const matchRoomUrl = (url: string) => {
+  if (url.match(MATCH_URL_ROOM)) {
+    return true;
+  }
+  return false;
+};
+
 export const generateAnonName = (): string => {
   const adj: string = adjectives[Math.floor(Math.random() * 40)];
   const animal: string = animals[Math.floor(Math.random() * 30)];