From 2ed8323d97b71366809f283a6f6f4aa95e1769c9 Mon Sep 17 00:00:00 2001 From: Simon Huang Date: Sun, 30 Aug 2020 18:38:05 -0400 Subject: [PATCH] added to home page, set limit for stateUpdates --- schema.ts | 1 + src/components/Messages.css | 15 +++++++------ src/components/Messages.tsx | 1 - src/components/RoomHeader.css | 11 ++++++++++ src/components/RoomHeader.tsx | 9 +++++++- src/components/VideoPlayer.tsx | 10 +++++++-- src/pages/Home.css | 30 ++++++++++++++++++++++---- src/pages/Home.tsx | 39 +++++++++++++++++++++++----------- src/pages/Room.css | 10 --------- 9 files changed, 89 insertions(+), 37 deletions(-) diff --git a/schema.ts b/schema.ts index 55d5bb8..a32413f 100644 --- a/schema.ts +++ b/schema.ts @@ -13,6 +13,7 @@ const collection = { createdAt: 'timestamp', content: 'Message content', senderId: 'userId', + type: 'type', }, }, ], diff --git a/src/components/Messages.css b/src/components/Messages.css index e8b8070..9c7a011 100644 --- a/src/components/Messages.css +++ b/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; } diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx index bbaa623..c94d5b9 100644 --- a/src/components/Messages.tsx +++ b/src/components/Messages.tsx @@ -76,7 +76,6 @@ const Messages: React.FC = ({ 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(() => { diff --git a/src/components/RoomHeader.css b/src/components/RoomHeader.css index 0c951bc..465baa5 100644 --- a/src/components/RoomHeader.css +++ b/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; diff --git a/src/components/RoomHeader.tsx b/src/components/RoomHeader.tsx index 2b3148c..da4af52 100644 --- a/src/components/RoomHeader.tsx +++ b/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 = ({ 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 = ({ roomId, userId, ownerId, videoI } }; + const toHome = () => { + history.replace('/'); + history.go(0); + }; + return ( - + Turtle {userId === ownerId ? ( diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx index 9257a62..be66e69 100644 --- a/src/components/VideoPlayer.tsx +++ b/src/components/VideoPlayer.tsx @@ -14,6 +14,7 @@ const VideoPlayer: React.FC = ({ ownerId, userId, roomId, stat const player = useRef(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 = ({ 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 = ({ ownerId, userId, roomId, stat stateUnsubscribe(); }; } - }, [ownerId, userId, roomId]); + }, [ownerId, userId, roomId, allowUpdate]); // Listen for video updateState requests (owner only) useEffect(() => { diff --git a/src/pages/Home.css b/src/pages/Home.css index 0015ab1..09fc8f7 100644 --- a/src/pages/Home.css +++ b/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); +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 2e9422d..581db45 100644 --- a/src/pages/Home.tsx +++ b/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 = () => { - - - {loading ? ( - Loading... - ) : ( - - Create Room - - )} - - + {loading ? ( + Loading... + ) : ( + + + + Step 1: + + + + + + Create Room + + + + + Step 2: + + + + + + )} ); diff --git a/src/pages/Room.css b/src/pages/Room.css index a3407df..37d9478 100644 --- a/src/pages/Room.css +++ b/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);