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 }) => {
-
+