Merge pull request #74 from talent-path-pipeline/c58-youtube-api-integration

some lesson pane refactors

Author: samsaksfithian

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.`,
 };

src/DUMMY_DATA.js

@@ -1,10 +1,13 @@
 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';
 
 const Lesson = ({ title, src, description, order, course_size, base_path }) => (
   <div className="lesson" key={order}>
+    {/* <YouTube videoId={} opts={} onEnd={} /> */}
     <LessonVideo title={title} src={src} />
     <LessonInfo title={title} order={order} description={description} course_size={course_size} base_path={base_path} />
   </div>

src/components/lesson/Lesson.js

@@ -3,6 +3,9 @@ import { LessonNav } from '..';
 import PropTypes from 'prop-types';
 import '../../css/lesson/LessonInfo.scss';
 
+// TODO: add content channel link
+// TODO: add description about channel and text from actual video
+// TODO: add next and previous lesson buttons
 const LessonInfo = ({ title, description, order, base_path, course_size }) => (
   <div className="lesson-info">
     <LessonNav order={order} base_path={base_path} course_size={course_size} />

src/components/lesson/LessonInfo.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,20 +4,33 @@ 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 total = lessons.length;
 
   return (
     <div className="lesson-page">
-      <Lesson order={order} title={title} src={src} description={description} course_size={total} base_path={base_path}/>
-      <LessonsPane lessons={lessons} curr_lesson_num={curr_lesson_num} base_path={base_path} />
+      <Lesson
+        order={order}
+        title={title}
+        src={src}
+        description={description}
+        course_size={total}
+        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;
+}