merge pull from staging

Author: emily-yang

package-lock.json

@@ -8,6 +8,7 @@
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@glidejs/glide": "^3.3.0",
     "axios": "^0.19.0",
+    "dotenv": "^8.1.0",
     "isotope-layout": "^3.0.6",
     "node-sass": "^4.12.0",
     "prop-types": "^15.7.2",
@@ -16,7 +17,8 @@
     "react-dom": "^16.8.6",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
-    "react-vertical-timeline-component": "^2.4.0"
+    "react-vertical-timeline-component": "^2.4.0",
+    "react-youtube": "^7.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -53,13 +53,15 @@ function App() {
             const courseObj = courses.find(
               course => course.slug === props.match.params.course,
             );
-            if (!courseObj) return <ErrorPage />;
+            const order = parseInt(props.match.params.order, 10);
+            if (!courseObj || order >= courseObj.lessons.length) return <ErrorPage />;
             return (
               <LessonPage
                 {...props}
+                course_title={courseObj.title}
                 lessons={courseObj.lessons}
-                curr_lesson_num={parseInt(props.match.params.order, 10)}
-                base_path={props.match.params.course}
+                curr_lesson_num={order}
+                base_path={courseObj.slug}
               />
             );
           }}

src/App.js

@@ -1,3 +1,8 @@
+// channel page: https://www.youtube.com/channel/UCqJ-Xo29CKyLTjn6z2XwYAw
+// api call: https://www.googleapis.com/youtube/v3/videos?part=[PART TYPE]&id=[VIDEO ID]key=[API KEY]
+// part type = snippet gets: publishedAt, channelId, title, description, thumbnails, channelTitle, tags, categoryId
+// part type = contentDetails gets: duration, dimension, definition, caption, licensedContent, projection
+
 const example_session = {
   order: 0,
   src: 'https://www.youtube.com/embed/MFCzwiqlnCE',
@@ -65,7 +70,7 @@ const adventure_begins = {
 const make_rules = {
   order: 0,
   src: 'https://www.youtube.com/embed/g5lrIDoEPOw',
-  length: 3603,
+  length: 'PT3H9M7S',
   title: 'You Make the Rules!',
   description: `The published D&D sourcebooks have their fair share of suggested rules... but as the DM, you have the special privilege to bend those to your will! Learn in this video how to set house rules for your campaign and your world, and begin collecting these guidelines in a Player's Guide for your party.`,
   yt_chan_name: 'Nerdarchy',

src/DUMMY_DATA.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+// import YouTube from 'react-youtube';
+// https://www.npmjs.com/package/react-youtube
 import { LessonVideo, LessonInfo } from '..';
 import '../../css/lesson/Lesson.scss';
 

src/components/lesson/Lesson.js

@@ -1,12 +1,25 @@
 import React from 'react';
-import { Link } from 'react-router-dom'
+import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import '../../css/lesson/LessonLink.scss';
 
-const formatTime = seconds => {
-  const h = Math.floor(seconds / 3600);
-  const m = Math.floor((seconds % 3600) / 60);
-  const s = Math.floor((seconds % 3600) % 60);
+const formatTime = time => {
+  let h;
+  let m;
+  let s;
+
+  if (typeof time === 'number') {
+    h = Math.floor(time / 3600);
+    m = Math.floor((time % 3600) / 60);
+    s = Math.floor((time % 3600) % 60);
+  } else {
+    // this is the date format the YouTube API uses: "PT3H9M7S"
+    const timeStr = time.slice(2, time.length - 1);
+    let msStr;
+    // TODO: this breaks if there are no hours
+    [h, msStr] = timeStr.split('H');
+    [m, s] = msStr.split('M');
+  }
 
   const hStr = h > 0 ? `${h}:` : '';
   const mStr = `${m < 10 ? '0' : ''}${m}:`;
@@ -15,22 +28,15 @@ const formatTime = seconds => {
   return `${hStr}${mStr}${sStr}`;
 };
 
-const LessonLink = ({ title, length, order, active, base_path }) => (
-  <div className="lesson-link">
-    {/* TODO: this can probably be consolidated */}
-    {active ? (
-      <div className="active-video">
-        <p>{title}
-          <span className="video-length">{formatTime(length)}</span>
-        </p>
-      </div>
-    ) : (
-      <div className="link">
-        <Link to={`/courses/${base_path}/${order}`}>{title}<span className="video-length">{formatTime(length)}</span></Link>
-      </div>
-    )}
-  </div>
-);
+const LessonLink = ({ title, length, order, active, base_path }) => {
+  const TagType = active ? 'p' : Link;
+  return (
+    <TagType to={`/courses/${base_path}/${order}`} className="lesson-link">
+      {title}
+      <span className="video-length">{formatTime(length)}</span>
+    </TagType>
+  );
+};
 
 LessonLink.propTypes = {
   title: PropTypes.string.isRequired,

src/components/lesson/LessonLink.js

@@ -3,16 +3,16 @@ import PropTypes from 'prop-types';
 import { LessonLink } from '..';
 import '../../css/lesson/LessonsPane.scss';
 
-const LessonsPane = ({ lessons, curr_lesson_num, base_path }) => (
+// TODO: add next and previous course buttons
+const LessonsPane = ({ course_title, lessons, curr_lesson_num, base_path }) => (
   <div className="lessons-pane">
-    <h2>Lessons</h2>
-    {lessons.map(({ order, title, src, length }) => (
+    <h2>{course_title}</h2>
+    {lessons.map(({ order, title, length }) => (
       <LessonLink
+        key={order}
         order={order}
         title={title}
-        src={src}
         length={length}
-        key={order}
         base_path={base_path}
         active={order === curr_lesson_num}
       />
@@ -21,12 +21,12 @@ const LessonsPane = ({ lessons, curr_lesson_num, base_path }) => (
 );
 
 LessonsPane.propTypes = {
+  course_title: PropTypes.string.isRequired,
   curr_lesson_num: PropTypes.number.isRequired,
   lessons: PropTypes.arrayOf(
     PropTypes.shape({
       order: PropTypes.number.isRequired,
       title: PropTypes.string.isRequired,
-      src: PropTypes.string.isRequired,
       length: PropTypes.number.isRequired,
     }),
   ).isRequired,

src/components/lesson/LessonsPane.js

@@ -4,7 +4,7 @@ import { Lesson, LessonsPane } from '..';
 import '../../css/pages/LessonPage.scss';
 
 function LessonPage(props) {
-  const { curr_lesson_num, lessons, base_path } = props;
+  const { curr_lesson_num, lessons, base_path, course_title } = props;
   // const { title, src, description, id } = lessons.find(elem => elem.id === activeId);
   // const { title, src, description, order } = lessons[curr_lesson_num];
   const lesson = lessons[curr_lesson_num];
@@ -13,12 +13,18 @@ function LessonPage(props) {
   return (
     <div className="lesson-page">
       <Lesson lesson={lesson} course_size={total} base_path={base_path}/>
-      <LessonsPane lessons={lessons} curr_lesson_num={curr_lesson_num} base_path={base_path} />
+      <LessonsPane
+        course_title={course_title}
+        lessons={lessons}
+        curr_lesson_num={curr_lesson_num}
+        base_path={base_path}
+      />
     </div>
   );
 }
 
 LessonPage.propTypes = {
+  course_title: PropTypes.string.isRequired,
   curr_lesson_num: PropTypes.number.isRequired,
   lessons: PropTypes.arrayOf(
     PropTypes.shape({

src/components/pages/LessonPage.js

@@ -1,49 +1,36 @@
-
 @import '../VARIABLES.scss';
 
 .lesson-link {
   border: dotted var(--blue) 0.5px;
-}
-
-.lesson-link .link {
-  display: flex;
-  justify-content: space-between;
-  // padding: 1rem;
-  cursor: pointer;
   font-family: var(--fontfamily-alt);
+  color: var(--black);
 
-  p {
-    color: var(--black);
+  .video-length {
+    float: right;
   }
-
 }
 
-.lesson-link .link a {
-  color: var(--black);
-  text-decoration: none;
+a.lesson-link,
+p.lesson-link {
+  display: flex;
+  justify-content: space-between;
   padding: 1rem;
   width: 100%;
 }
 
-.lesson-link .link:hover a{
-  background-color: var(--greyblue);
-  color: var(--white);
-  border: none;
-}
-
-.lesson-link .video-length {
-  float: right;
+a.lesson-link {
+  cursor: pointer;
+  color: var(--black);
+  text-decoration: none;
 }
 
-.lesson-link .active-video {
-  display: flex;
-  justify-content: space-between;
-  padding: 1rem;
+p.lesson-link {
+  color: var(--white);
   background-color: var(--brown);
-  font-family: var(--fontfamily-alt);
 }
 
-
-.lesson-link .active-video p{
-  width: 100%;
-}
+a.lesson-link:hover {
+  background-color: var(--greyblue);
+  color: var(--white);
+  border: none;
+}

src/css/lesson/LessonLink.scss

@@ -4,11 +4,13 @@
   background-color: var(--white);
   min-width: 30%;
   border: solid var(--blue) 2px;
+  flex: 1 0 30%;
 }
 
 .lessons-pane h2 {
   background-color: var(--navy);
   padding: 1rem;
   font-weight: bold;
   color: var(--white);
-}
+  font-size: calc(16px + 1vw);
+}