fix yvideo issue and start styling?

Author: shauryamago12

package-lock.json

@@ -28,6 +28,7 @@
     "bootstrap": "^4.6.0",
     "eslint-plugin-react": "^7.23.1",
     "formik": "^2.2.6",
+    "get-video-id": "^3.2.0",
     "graphql": "^15.5.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",

package.json

@@ -1,29 +1,24 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import YouTube from 'react-youtube';
+import getVideoId from 'get-video-id';
 import '../TaskBlock.css';
 
-// const opts = {
-//    height: '390',
-//    width: '640',
-//    playerVars: {
-//       // https://developers.google.com/youtube/player_parameters
-//       autoplay: 1,
-//    },
-// };
-
 function onReady(event: any) {
    // access to player in all event handlers via event.target
    event.target.pauseVideo();
 }
 
 function VideoBlock({ title, contents }: { title: string; contents: string }) {
+   const { id } = getVideoId(contents); // extract video id from yt url
    return (
       <div className="row">
          <div className="col-md-12 justifyCenter my-2 p-3">
             <h2 className="text-left">
                <b>{title}</b>
             </h2>
             <div className="container">
-               <YouTube videoId={contents} onReady={onReady} />
+               <YouTube videoId={id as never} onReady={onReady} />
             </div>
          </div>
       </div>

src/Components/TaskBlocks/VideoBlock/VideoBlock.tsx

@@ -1,7 +1,3 @@
-#dev-dropdown {
-   float: right;
-}
-
 #log-out {
    float: right;
 }

src/Navigation/Navigation.css

@@ -1,35 +1,15 @@
 import { Auth } from 'aws-amplify';
-import { Navbar, Nav, Form, Button, NavDropdown } from 'react-bootstrap';
+import { Navbar, Nav, Form, Button } from 'react-bootstrap';
 import './Navigation.css';
 
 export default function Navigation() {
    return (
-      <Navbar collapseOnSelect expand="sm" bg="dark" variant="dark">
-         <Navbar.Brand href="/">Flipt(Ed)</Navbar.Brand>
+      <Navbar collapseOnSelect expand="sm" bg="primary" variant="dark">
+         <Navbar.Brand href="/">flipt.ED</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
             <Nav className="container-fluid">
                <Nav.Link href="/">Dashboard</Nav.Link>
-               <Nav.Link href="/viewTask">View Test Task</Nav.Link>
-               <Nav.Link href="/addNewCourse">Create Course</Nav.Link>
-               <NavDropdown title="Dev Screens" className="ml-auto" id="dev-dropdown">
-                  <NavDropdown.Item href="/courseHome">Course Home</NavDropdown.Item>
-                  <NavDropdown.Item href="/addNewCourse">Create Course</NavDropdown.Item>
-                  <NavDropdown.Item href="/addTaskSubmission">Submit Task</NavDropdown.Item>
-                  <NavDropdown.Item href="/taskSubmissionOverview">
-                     Task Submission Overview
-                  </NavDropdown.Item>
-                  <NavDropdown.Item href="/viewTaskSubmission">
-                     View Task Submission
-                  </NavDropdown.Item>
-                  <NavDropdown.Item href="/studentOverview">Student Overview</NavDropdown.Item>
-                  <NavDropdown.Item href="/singleStudentOverview">
-                     Single Student Overview
-                  </NavDropdown.Item>
-                  <NavDropdown.Item href="/singleStudentMasteryOverview">
-                     Single Student Mastery Overview
-                  </NavDropdown.Item>
-               </NavDropdown>
                <Form inline>
                   <Button className="ml-auto" type="submit" onClick={() => Auth.signOut()}>
                      Log Out