diff --git a/package-lock.json b/package-lock.json index 43b4bea..5460b6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1123,6 +1123,11 @@ "to-fast-properties": "^2.0.0" } }, + "@capacitor/android": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-2.4.0.tgz", + "integrity": "sha512-5sJicZjtuBRgtmBuV1kvWnIjlu7bnw2TGGp62UXf0ZrjvMUCYSFHBqIHZ8neffW7a3xM5cdGMUlxJ+HfA9ntAg==" + }, "@capacitor/cli": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/@capacitor/cli/-/cli-2.4.0.tgz", @@ -1150,6 +1155,11 @@ "tslib": "^1.9.0" } }, + "@capacitor/ios": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/@capacitor/ios/-/ios-2.4.0.tgz", + "integrity": "sha512-G4WcQHS4RuK94Ncoi5K+r12DWPqkB8yZKupQrJaGT1S/Zyc3mcA9m1f4HwRPlYCwyxQ6lCd8+N9GYxLu7Kv+SA==" + }, "@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -1482,12 +1492,6 @@ "@hapi/hoek": "^8.3.0" } }, - "@iconify/icons-logos": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/@iconify/icons-logos/-/icons-logos-1.0.12.tgz", - "integrity": "sha512-VC5hcZ2lw1D15iQX5AukQ0m5r6EmRJ5jg6zoTL+XCRwH1RTdu0jUw6uN35uPTKp7OohAj1eLIjjnZw0WPeBkJg==", - "dev": true - }, "@iconify/icons-simple-icons": { "version": "1.0.47", "resolved": "https://registry.npmjs.org/@iconify/icons-simple-icons/-/icons-simple-icons-1.0.47.tgz", diff --git a/package.json b/package.json index 5a522c4..ce6574d 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,9 @@ "version": "0.0.1", "private": true, "dependencies": { + "@capacitor/android": "^2.4.0", "@capacitor/core": "2.4.0", + "@capacitor/ios": "^2.4.0", "@ionic/react": "^5.0.7", "@ionic/react-router": "^5.0.7", "@testing-library/jest-dom": "^4.2.4", diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx index 551448c..710e4f4 100644 --- a/src/components/Messages.tsx +++ b/src/components/Messages.tsx @@ -11,7 +11,7 @@ import { } from '@ionic/react'; import { sendOutline } from 'ionicons/icons'; import React, { useEffect, useRef, useState } from 'react'; -import { arrayUnion, db, rtdb } from '../services/firebase'; +import { db, rtdb } from '../services/firebase'; import { secondsToTimestamp } from '../services/utilities'; import './Messages.css'; @@ -39,15 +39,6 @@ const Messages: React.FC = ({ pane, ownerId, roomId, userId, user const [message, setMessage] = useState(''); // Message to be sent const contentRef = useRef(null); - // Send 'joined room' message on component mount - useEffect(() => { - db.collection('rooms') - .doc(roomId) - .update({ - requests: arrayUnion({ createdAt: Date.now(), senderId: userId, time: 0, type: 'join' }), - }); - }, [roomId, userId]); - // Listen for new chat messages useEffect(() => { rtdb.ref('/chats/' + roomId).on('value', (snapshot) => { @@ -71,22 +62,6 @@ const Messages: React.FC = ({ pane, ownerId, roomId, userId, user }; }, [roomId, joinTime]); - // Convert request type to message content - const processType = (type: string, time: number): string => { - switch (type) { - case 'change': - return 'changed the video.'; - case 'join': - return 'joined the room.'; - case 'pause': - return 'paused the video at ' + secondsToTimestamp(time); - case 'play': - return 'played the video from ' + secondsToTimestamp(time); - default: - return ''; - } - }; - // Listen for new system messages useEffect(() => { const roomUnsubscribe = db @@ -117,6 +92,22 @@ const Messages: React.FC = ({ pane, ownerId, roomId, userId, user }; }, [roomId, joinTime]); + // Convert request type to message content + const processType = (type: string, time: number): string => { + switch (type) { + case 'change': + return 'changed the video.'; + case 'join': + return 'joined the room.'; + case 'pause': + return 'paused the video at ' + secondsToTimestamp(time); + case 'play': + return 'played the video from ' + secondsToTimestamp(time); + default: + return ''; + } + }; + // Maintain list of users who entered the room, in order to keep all sender names of messages in the room useEffect(() => { userList.forEach((name: string, id: string) => { @@ -137,7 +128,7 @@ const Messages: React.FC = ({ pane, ownerId, roomId, userId, user setTimeout(() => { content?.scrollToBottom(200); }, 100); - }, [allMessages]); + }, [allMessages, pane]); // Retrieve display name from userId const getName = (id: string) => { diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx index e9fa3c5..7b573b4 100644 --- a/src/pages/Room.tsx +++ b/src/pages/Room.tsx @@ -4,7 +4,7 @@ import { RouteComponentProps, useHistory } from 'react-router'; import Frame from '../components/Frame'; import RoomHeader from '../components/RoomHeader'; import VideoPlayer from '../components/VideoPlayer'; -import { auth, db, decrement, increment, rtdb } from '../services/firebase'; +import { auth, db, decrement, increment, rtdb, arrayUnion } from '../services/firebase'; import { generateAnonName } from '../services/utilities'; import './Room.css'; @@ -19,24 +19,6 @@ const Room: React.FC> = ({ match }) => { const [userCount, setUserCount] = useState(0); const [userList, setUserList] = useState>(new Map()); - // Handle logging in - useEffect(() => { - const authUnsubscribe = auth.onAuthStateChanged(async (user) => { - if (user) { - setUserId(user.uid); - } else { - const credential = await auth.signInAnonymously(); - await db.collection('users').doc(credential.user?.uid).set({ - name: generateAnonName(), - }); - } - }); - - return () => { - authUnsubscribe(); - }; - }, []); - // Verify that the roomId exists in db useEffect(() => { const fetchRoomAndVid = async () => { @@ -53,6 +35,26 @@ const Room: React.FC> = ({ match }) => { fetchRoomAndVid(); }, [history, roomId]); + // Handle logging in + useEffect(() => { + if (validRoom) { + const authUnsubscribe = auth.onAuthStateChanged(async (user) => { + if (user) { + setUserId(user.uid); + } else { + const credential = await auth.signInAnonymously(); + await db.collection('users').doc(credential.user?.uid).set({ + name: generateAnonName(), + }); + } + }); + + return () => { + authUnsubscribe(); + }; + } + }, [validRoom]); + // Subscribe RealTimeDB listeners useEffect(() => { if (userId !== '' && validRoom) { @@ -76,6 +78,12 @@ const Room: React.FC> = ({ match }) => { const username = (await db.collection('users').doc(userId).get()).data()?.name; await roomRef.child(userId).set({ name: username }); await roomRef.update({ userCount: increment }); + await db + .collection('rooms') + .doc(roomId) + .update({ + requests: arrayUnion({ createdAt: Date.now(), senderId: userId, time: 0, type: 'join' }), + }); } });