added input for video URL

6 years ago · ceb90cf140
parent d096b50591
commit ceb90cf140
7 changed files with 82 additions and 11 deletions
--- a/public/index.html
+++ b/public/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <title>Ionic App</title>
+    <title>Turtle</title>

    <base href="/" />

@ -20,12 +20,11 @@

    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="apple-mobile-web-app-title" content="Ionic App" />
+    <meta name="apple-mobile-web-app-title" content="Turtle" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  </head>

  <body>
    <div id="root"></div>
  </body>
-
 </html>
--- a/src/components/Messages.tsx
+++ b/src/components/Messages.tsx
@ -67,7 +67,6 @@ const Messages: React.FC<MessagesProps> = ({ 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
--- a/src/components/RoomHeader.css
+++ 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;
+}
--- a/src/components/RoomHeader.tsx
+++ 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<VideoInputProps> = ({ changeUrl }) => {
+  const [url, setUrl] = useState('');
+
+  const onSubmit = () => {
+    if (url !== '') {
+      changeUrl(url);
+    }
+
+    setUrl('');
+  };
+
+  return (
+    <IonToolbar>
+      <IonTitle slot="start" class="title">
+        Turtle
+      </IonTitle>
+      <IonInput
+        slot="end"
+        type="url"
+        inputmode="search"
+        class="input-bar"
+        placeholder="Upload new video by URL"
+        onIonChange={(e) => setUrl(e.detail.value!)}
+        value={url}
+        onSubmit={onSubmit}
+      ></IonInput>
+      <IonFabButton slot="end" size="small" onClick={onSubmit}>
+        <IonIcon icon={add}></IonIcon>
+      </IonFabButton>
+    </IonToolbar>
+  );
+};
+
+export default VideoInput;
--- 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<VideoPlayerProps> = ({ ownerId, userId, roomId }) => {
+const VideoPlayer: React.FC<VideoPlayerProps> = ({ ownerId, userId, roomId, url }) => {
  const player = useRef<ReactPlayer>(null);
  const [playing, setPlaying] = useState(false);

@ -85,7 +86,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ ownerId, userId, roomId }) =>
  return (
    <ReactPlayer
      ref={player}
-      url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
+      url={url}
      width="100%"
      height="100%"
      controls={true}
--- a/src/pages/Room.css
+++ b/src/pages/Room.css
@ -5,6 +5,16 @@
  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);
--- a/src/pages/Room.tsx
+++ b/src/pages/Room.tsx
@ -1,7 +1,8 @@
-import { IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow, IonTitle, IonToolbar } from '@ionic/react';
+import { IonCol, IonContent, IonGrid, IonHeader, IonPage, IonRow } from '@ionic/react';
 import React, { useEffect, useState } from 'react';
 import { RouteComponentProps, useHistory } from 'react-router';
 import Chat from '../components/Chatbox';
+import RoomHeader from '../components/RoomHeader';
 import VideoPlayer from '../components/VideoPlayer';
 import { auth, db, decrement, increment, rtdb } from '../services/firebase';
 import { generateAnonName } from '../services/utilities';
@ -16,6 +17,7 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ 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<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
    }
  }, [userId, validRoom, roomId, loading, userCount]);

+  // Function passed as prop to VideoInput component
+  const changeUrl = (newUrl: string) => {
+    setUrl(newUrl);
+  };
+
  return (
    <IonPage>
      <IonHeader>
-        <IonToolbar>
-          <IonTitle>Turtle</IonTitle>
-        </IonToolbar>
+        <RoomHeader changeUrl={changeUrl}></RoomHeader>
      </IonHeader>
      {loading ? (
        <IonContent className="ion-padding">Loading...</IonContent>
@ -139,7 +144,7 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
        <IonGrid class="room-grid">
          <IonRow class="room-row">
            <IonCol size="12" sizeLg="9" class="player-col">
-              <VideoPlayer ownerId={ownerId} userId={userId} roomId={roomId}></VideoPlayer>
+              <VideoPlayer ownerId={ownerId} userId={userId} roomId={roomId} url={url}></VideoPlayer>
            </IonCol>
            <IonCol size="12" sizeLg="3" class="chat-col">
              <Chat roomId={roomId} userId={userId}></Chat>