From ceb90cf1406154f5ee75f698b671fd06fd634cee Mon Sep 17 00:00:00 2001 From: Simon Huang Date: Mon, 24 Aug 2020 20:59:29 -0400 Subject: [PATCH] added input for video URL --- public/index.html | 5 ++-- src/components/Messages.tsx | 1 - src/components/RoomHeader.css | 14 +++++++++++ src/components/RoomHeader.tsx | 43 ++++++++++++++++++++++++++++++++++ src/components/VideoPlayer.tsx | 5 ++-- src/pages/Room.css | 10 ++++++++ src/pages/Room.tsx | 15 ++++++++---- 7 files changed, 82 insertions(+), 11 deletions(-) create mode 100644 src/components/RoomHeader.css create mode 100644 src/components/RoomHeader.tsx diff --git a/public/index.html b/public/index.html index 25b753b..b1178c0 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - Ionic App + Turtle @@ -20,12 +20,11 @@ - +
- diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx index fe1fc01..8f7e303 100644 --- a/src/components/Messages.tsx +++ b/src/components/Messages.tsx @@ -67,7 +67,6 @@ const Messages: React.FC = ({ roomId, userId }) => { // Always scroll to most recent chat message (bottom) useEffect(() => { - console.log('scrolling'); let content = document.querySelector('ion-content'); // Set timeout because DOM doesn't update immediately after 'chats' state is updated diff --git a/src/components/RoomHeader.css b/src/components/RoomHeader.css new file mode 100644 index 0000000..0c951bc --- /dev/null +++ b/src/components/RoomHeader.css @@ -0,0 +1,14 @@ +.input-bar { + min-width: 200px; + align-self: center; +} + +ion-icon { + width: 24px; + height: 24px; + padding: 5px; +} + +.native-input.sc-ion-input-ios { + padding-right: 0; +} diff --git a/src/components/RoomHeader.tsx b/src/components/RoomHeader.tsx new file mode 100644 index 0000000..bade334 --- /dev/null +++ b/src/components/RoomHeader.tsx @@ -0,0 +1,43 @@ +import { IonFabButton, IonIcon, IonInput, IonTitle, IonToolbar } from '@ionic/react'; +import { add } from 'ionicons/icons'; +import React, { useState } from 'react'; +import './RoomHeader.css'; + +type VideoInputProps = { + changeUrl: (newUrl: string) => void; +}; + +const VideoInput: React.FC = ({ changeUrl }) => { + const [url, setUrl] = useState(''); + + const onSubmit = () => { + if (url !== '') { + changeUrl(url); + } + + setUrl(''); + }; + + return ( + + + Turtle + + setUrl(e.detail.value!)} + value={url} + onSubmit={onSubmit} + > + + + + + ); +}; + +export default VideoInput; diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx index 5af13cb..56c84b6 100644 --- a/src/components/VideoPlayer.tsx +++ b/src/components/VideoPlayer.tsx @@ -7,9 +7,10 @@ type VideoPlayerProps = { ownerId: string; userId: string; roomId: string; + url: string; }; -const VideoPlayer: React.FC = ({ ownerId, userId, roomId }) => { +const VideoPlayer: React.FC = ({ ownerId, userId, roomId, url }) => { const player = useRef(null); const [playing, setPlaying] = useState(false); @@ -85,7 +86,7 @@ const VideoPlayer: React.FC = ({ ownerId, userId, roomId }) => return ( > = ({ match }) => { const [ownerId, setOwnerId] = useState(''); const [loading, setLoading] = useState(true); const [userCount, setUserCount] = useState(0); + const [url, setUrl] = useState('https://www.youtube.com/watch?v=ysz5S6PUM-U'); // Verify that the roomId exists in db useEffect(() => { @@ -126,12 +128,15 @@ const Room: React.FC> = ({ match }) => { } }, [userId, validRoom, roomId, loading, userCount]); + // Function passed as prop to VideoInput component + const changeUrl = (newUrl: string) => { + setUrl(newUrl); + }; + return ( - - Turtle - + {loading ? ( Loading... @@ -139,7 +144,7 @@ const Room: React.FC> = ({ match }) => { - +