Merge pull request #78 from talent-path-pipeline/73-yt-lesson-details

73 yt lesson details

Author: afterafx

src/DUMMY_DATA.js

@@ -73,6 +73,11 @@ const make_rules = {
   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',
+  yt_chan_src: 'https://www.youtube.com/channel/UCHLzgnQu3OWn31g2PebQV5Q',
+  yt_title: 'How to Use House Rules in Your D&D Campaign| Game Master Tips',
+  yt_desc: 'formatted youtube description',
+
 };
 
 const expectations = {

src/components/lesson/Lesson.js

@@ -5,19 +5,24 @@ import PropTypes from 'prop-types';
 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} />
+const Lesson = ({ lesson, course_size, base_path }) => (
+  <div className="lesson" key={lesson.order}>
+    <LessonVideo title={lesson.title} src={lesson.src} />
+    <LessonInfo lesson={lesson} course_size={course_size} base_path={base_path} />
   </div>
 );
 
 Lesson.propTypes = {
-  title: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  order: PropTypes.number.isRequired,
+  lesson: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    src: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    order: PropTypes.number.isRequired,
+    yt_chan_name: PropTypes.string.isRequired,
+    yt_chan_src: PropTypes.string.isRequired,
+    yt_title: PropTypes.string.isRequired,
+    yt_desc: PropTypes.string.isRequired,
+  }).isRequired,
   course_size: PropTypes.number.isRequired,
   base_path: PropTypes.string.isRequired,
 };

src/components/lesson/LessonInfo.js

@@ -3,23 +3,50 @@ 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} />
-    <h4 id="lesson-playing">Now playing:</h4>
-    <h2>{title || 'Lesson'}</h2>
-    <hr />
-    <p id="lesson-description">{description || 'No description provided'}</p>
-  </div>
-);
+const getVideoURL = embedLink => embedLink.replace('embed/', 'watch?v=');
+
+const LessonInfo = ({ lesson, base_path, course_size }) => {
+  const {title, description, order, src, yt_chan_name, yt_chan_src, yt_title, yt_desc} = lesson;
+
+  return (
+    <div className="lesson-info">
+      <LessonNav order={order} base_path={base_path} course_size={course_size} />
+      <h4 id="lesson-playing">Now playing:</h4>
+      <h2>{title || 'Lesson'}</h2>
+      <hr />
+      <p id="lesson-description">{description || 'No description provided'}</p>
+      <hr />
+
+      <div id="yt-info">
+        <h3 className="subheader">Youtube credits</h3>
+        <p id="yt-chan">
+          <span className="title">Creator: </span>
+          <a href={yt_chan_src} target="_blank" rel="noopener noreferrer">{yt_chan_name || 'YouTube Channel goes here'}</a>
+        </p>
+        <p id="yt-title">
+          <span className="title">Video title: </span>
+          <a href={getVideoURL(src)} target="_blank" rel="noopener noreferrer">{yt_title || 'Original YouTube Video'}</a>
+        </p>
+        <p id="yt-desc">
+          <span className="title">Video Description: </span>
+          {yt_desc || 'YouTube description goes here'}
+        </p>
+      </div>
+    </div>
+  );
+};
 
 LessonInfo.propTypes = {
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  order: PropTypes.number.isRequired,
+  lesson: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    src: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    order: PropTypes.number.isRequired,
+    yt_chan_name: PropTypes.string.isRequired,
+    yt_chan_src: PropTypes.string.isRequired,
+    yt_title: PropTypes.string.isRequired,
+    yt_desc: PropTypes.string.isRequired,
+  }).isRequired,
   base_path: PropTypes.string.isRequired,
   course_size: PropTypes.number.isRequired,
 };

src/components/lesson/LessonLink.js

@@ -41,7 +41,7 @@ const LessonLink = ({ title, length, order, active, base_path }) => {
 LessonLink.propTypes = {
   title: PropTypes.string.isRequired,
   order: PropTypes.number.isRequired,
-  length: PropTypes.number.isRequired,
+  length: PropTypes.string.isRequired,
   active: PropTypes.bool.isRequired,
   base_path: PropTypes.string.isRequired,
 };

src/components/lesson/LessonsPane.js

@@ -27,7 +27,7 @@ LessonsPane.propTypes = {
     PropTypes.shape({
       order: PropTypes.number.isRequired,
       title: PropTypes.string.isRequired,
-      length: PropTypes.number.isRequired,
+      length: PropTypes.string.isRequired,
     }),
   ).isRequired,
   base_path: PropTypes.string.isRequired,

src/components/pages/LessonPage.js

@@ -6,19 +6,12 @@ import '../../css/pages/LessonPage.scss';
 function LessonPage(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];
   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}
-      />
+      <Lesson lesson={lesson} course_size={total} base_path={base_path}/>
       <LessonsPane
         course_title={course_title}
         lessons={lessons}
@@ -37,7 +30,7 @@ LessonPage.propTypes = {
       order: PropTypes.number.isRequired,
       title: PropTypes.string.isRequired,
       src: PropTypes.string.isRequired,
-      length: PropTypes.number.isRequired,
+      length: PropTypes.string.isRequired,
       description: PropTypes.string.isRequired,
     }),
   ).isRequired,

src/css/lesson/LessonInfo.scss

@@ -16,7 +16,30 @@
   color: var(--black);
 }
 
-#lesson-description {
+.lesson-info p {
   font-family: var(--fontfamily-alt);
+  font-weight: bold;
   color: var(--black);
+}
+
+#yt-info {
+  margin: 1rem 0;
+}
+
+.subheader {
+  color: var(--brown);
+}
+
+.title {
+  font-family: var(--fontfamily-roboto);
+  // font-size: 1.1em;
+}
+
+#yt-info a {
+  text-decoration: none;
+  color: var(--light-blue);
+}
+
+#yt-info a:hover {
+  text-decoration: underline;
 }