Implement text based lecture content

package.json

@@ -34,6 +34,7 @@
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.8.10",
     "react-icons": "^4.2.0",
+    "react-markdown": "^6.0.2",
     "react-player": "^2.9.0",
     "react-share": "^4.4.0",
     "react-toastify": "^7.0.3",

src/components/Courses/CourseInfo/InstructorBio.tsx

@@ -21,9 +21,9 @@ const InstructorBio: React.FC<Props> = ({ instructor, photo }) => {
             src={photo}
           />
           <Link to={`/instructors/${instructor.profile.github}`}>
-            <h3 className="px-2 py-3 text-lg font-bold underline text-purple-800">
+            <div className="px-2 py-3 text-lg font-bold underline text-purple-800">
               {instructor.profile.name}
-            </h3>
+            </div>
           </Link>
 
           <div className="px-2 text-sm font-bold">{instructor.profile.bio}</div>

src/components/Courses/Filters.tsx

@@ -54,7 +54,7 @@ const Filters = () => {
   return (
     <div className="mb-6 sm:mx-5">
       <div className="flex flex-col md:flex-row w-full items-center">
-        <h1>{t('filters.title')}</h1>
+        <div>{t('filters.title')}</div>
         <select
           className="mx-4 placeholder-gray-500 focus:outline-none focus:bg-white"
           name="language"

src/components/Courses/VideoPlayer.tsx → src/components/Courses/LectureViewer.tsx

@@ -1,11 +1,12 @@
 import React, { useContext, useState } from 'react'
 import ReactPlayer from 'react-player'
 import { navigate } from 'gatsby'
+import ReactMarkdown from 'react-markdown'
 import { AuthContext } from '../../contexts/AuthContext'
 import { addProfile } from '../../services/api'
 import CourseRating from './CourseRating'
 
-type VideoPlayerProps = {
+type LectureViewerProps = {
   url: string
   lectureStrapiId: number
   courseStrapiId: number
@@ -15,10 +16,14 @@ type VideoPlayerProps = {
   isLastLecture: boolean
   isFirstLecture: boolean
   canNavigateToNext: boolean
+  type: string
+  content: string
 }
 
-const VideoPlayer: React.FC<VideoPlayerProps> = ({
+const LectureViewer: React.FC<LectureViewerProps> = ({
   url,
+  type,
+  content,
   lectureStrapiId,
   courseStrapiId,
   showFeedback,
@@ -73,16 +78,25 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
   }
   return (
     <div className="relative " style={{ paddingTop: '56.25%' }}>
-      <ReactPlayer
-        className="absolute top-0 right-0"
-        playing={!open && !isFirstLecture}
-        url={url}
-        width="100%"
-        height="100%"
-        controls
-        onProgress={isLoggedIn ? handleProgress : () => {}}
-        onEnded={handleCompleteVideo}
-      />
+      {type === 'text' && (
+        <div className="absolute top-0 left-0 ml-1">
+          <ReactMarkdown>{content}</ReactMarkdown>
+        </div>
+      )}
+      {type === 'video' && (
+        <div>
+          <ReactPlayer
+            className="absolute top-0 right-0"
+            playing={!open && !isFirstLecture}
+            url={url}
+            width="100%"
+            height="100%"
+            controls
+            onProgress={isLoggedIn ? handleProgress : () => {}}
+            onEnded={handleCompleteVideo}
+          />
+        </div>
+      )}
 
       {open && (
         <CourseRating
@@ -94,4 +108,4 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
     </div>
   )
 }
-export default VideoPlayer
+export default LectureViewer

src/components/General/Modal.tsx

@@ -29,13 +29,13 @@ const Modal: React.FC<ModalProps> = ({
         <div className={`w-9/12 ${large ? '' : 'md:max-w-md '}mx-auto rounded`}>
           <div className="border-0 rounded-lg shadow-2xl relative flex flex-col w-full bg-white outline-none focus:outline-none">
             <div className="flex flex-row items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t">
-              <h3
+              <div
                 className={`text-lg sm:text-2xl title flex-1 ${
                   titleCentered ? 'text-center' : ''
                 }`}
               >
                 {title}
-              </h3>
+              </div>
               {onDismiss && (
                 <button
                   type="button"

src/components/LandingPage/HeroSection.tsx

@@ -17,11 +17,11 @@ const HeroSection: React.FC = () => {
               isRtl ? 'right ml-2' : 'left mr-2'
             }`}
           >
-            <h1 className="text-5xl tracking-tight">
+            <div className="text-5xl tracking-tight">
               <span className="block text-brmg-highlight xl:inline">
                 {t('landingPage.heroText')}
               </span>
-            </h1>
+            </div>
             <p className="mt-3 text-2xl text-brmg-black">
               {t('landingPage.heroSubtitle')}
             </p>

src/components/LecturesList/index.tsx

@@ -16,6 +16,7 @@ import {
   StyledVideoIcon,
   StyledDuration,
   StyledLockIcon,
+  StyledFileIcon,
 } from './styles'
 import { Lecture } from '../../types/api.types'
 
@@ -54,10 +55,16 @@ const LectureList: React.FC<LectureListProps> = ({
   }
   const ALLOWED_LECTURES_WHEN_NOT_LOGGED_IN = Math.ceil(lectures.length / 3)
   const isCourseInProgress = useCourseProgress(courseStrapiId)
+
   const sortedLectures = orderBy(lectures, 'position', 'asc')
+
   const lectureIcon = (index: number) => {
     if (isLoggedIn || index < ALLOWED_LECTURES_WHEN_NOT_LOGGED_IN)
-      return <StyledVideoIcon />
+      return sortedLectures[index].type === 'text' ? (
+        <StyledFileIcon />
+      ) : (
+        <StyledVideoIcon />
+      )
     return <StyledLockIcon />
   }
   const canWatch = (index: number) =>
@@ -90,9 +97,11 @@ const LectureList: React.FC<LectureListProps> = ({
                   <p className={`${isRtl ? 'rtl' : 'ltr'}`}>
                     <span className="text-gray-700">{lecture.title}</span>
                   </p>
-                  <StyledDuration>
-                    {formatDuration(lecture.duration)}
-                  </StyledDuration>
+                  {lecture.type !== 'text' && (
+                    <StyledDuration>
+                      {formatDuration(lecture.duration)}
+                    </StyledDuration>
+                  )}
                 </StyledListBody>
 
                 <div>{lectureIcon(index)}</div>

src/components/LecturesList/styles.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { FaVideo, FaLock } from 'react-icons/fa'
+import { FaVideo, FaLock, FaFileAlt } from 'react-icons/fa'
 
 export const StyledLectureList = styled.ul`
   border-bottom: 1px solid #d4d4d4;
@@ -51,15 +51,23 @@ export const StyledDuration = styled.div`
 `
 export const StyledVideoIcon = styled(FaVideo)`
   position: absolute;
-  font-size: 12px;
+  font-size: 16px;
   color: #a6a6a6;
   left: 68px;
   top: 50%;
   transform: translateY(-50%);
 `
 export const StyledLockIcon = styled(FaLock)`
   position: absolute;
-  font-size: 12px;
+  font-size: 16px;
+  color: #a6a6a6;
+  left: 68px;
+  top: 50%;
+  transform: translateY(-50%);
+`
+export const StyledFileIcon = styled(FaFileAlt)`
+  position: absolute;
+  font-size: 16px;
   color: #a6a6a6;
   left: 68px;
   top: 50%;

src/components/layout.css

@@ -1,6 +1,18 @@
 @tailwind base;
 
 @layer base {
+  h1 {
+    @apply text-3xl;
+  }
+  h2 {
+    @apply text-2xl;
+  }
+  h3 {
+    @apply text-xl;
+  }
+  pre {
+    @apply bg-gray-200 p-3 ml-5;
+  }
 }
 
 .rtl {

src/pages/connect/github.tsx

@@ -10,7 +10,7 @@ const Github: React.FC = () => {
     <div className="container section has-text-centered">
       <div className="columns is-centered">
         <div className="column is-half">
-          <h1 className="is-size-5">You are about to sign in using Github</h1>
+          <div className="is-size-5">You are about to sign in using Github</div>
           <Spinner />
         </div>
       </div>

src/pages/connect/google.tsx

@@ -8,7 +8,7 @@ const Google: React.FC = () => {
     <div className="container section has-text-centered">
       <div className="columns is-centered">
         <div className="column is-half">
-          <h1 className="is-size-5">You are about to sign in using google</h1>
+          <div className="is-size-5">You are about to sign in using google</div>
           <Spinner />
           <Spinner />
         </div>

src/pages/signin/forgotPassword.tsx

@@ -35,9 +35,9 @@ const ForgotPassword = () => {
     <Layout>
       <div className="bg-white w-full max-w-lg rounded-lg shadow-md overflow-hidden mx-auto">
         <div className="py-4 px-6">
-          <h2 className="text-center font-bold text-gray-700 text-3xl">
+          <div className="text-center font-bold text-gray-700 text-3xl">
             {t('forgotPass')}
-          </h2>
+          </div>
           {!success && (
             <form onSubmit={formik.handleSubmit}>
               <div className="mt-4 w-full">

src/pages/signin/index.tsx

@@ -47,7 +47,9 @@ const SiginPage = () => {
     <Layout title={t('signIn')}>
       <div className="bg-white w-full max-w-lg rounded-lg shadow-md overflow-hidden mx-auto">
         <div className="py-4 px-6">
-          <h2 className="text-center text-gray-700 text-3xl">{t('signIn')}</h2>
+          <div className="text-center text-gray-700 text-3xl">
+            {t('signIn')}
+          </div>
           <div className="border-teal p-8 border-t-12 bg-white mb-6 rounded-lg  mt-3">
             <form onSubmit={formik.handleSubmit}>
               <div className="mb-4">
@@ -103,9 +105,9 @@ const SiginPage = () => {
                 </ActivityIndicator>
               </div>
               <div className="text-center">
-                <h1 className="font-bold text-grey-darker block mb-2 mt-5">
+                <div className="font-bold text-grey-darker block mb-2 mt-5">
                   {t('or')}
-                </h1>
+                </div>
               </div>
             </form>
 

src/pages/signin/resetPassword.tsx

@@ -39,9 +39,9 @@ const ResetPassword = () => {
     <Layout>
       <div className="bg-white w-full max-w-lg rounded-lg shadow-md overflow-hidden mx-auto">
         <div className="py-4 px-6">
-          <h2 className="text-center font-bold text-gray-700 text-3xl">
+          <div className="text-center font-bold text-gray-700 text-3xl">
             {t('resetPass')}
-          </h2>
+          </div>
 
           <form onSubmit={formik.handleSubmit}>
             <div className="mt-4 w-full">

src/pages/signup/index.tsx

@@ -72,7 +72,9 @@ const Signup: React.FC<FormikProps<FormValues>> = () => {
     <Layout title={t('signUp')}>
       <div className="bg-white w-full max-w-lg rounded-lg shadow-md overflow-hidden mx-auto">
         <div className="py-4 px-6">
-          <h2 className="text-center text-gray-700 text-3xl">{t('signUp')}</h2>
+          <div className="text-center text-gray-700 text-3xl">
+            {t('signUp')}
+          </div>
 
           <form onSubmit={formik.handleSubmit}>
             <div className="mt-4 w-full">
@@ -165,7 +167,7 @@ const Signup: React.FC<FormikProps<FormValues>> = () => {
             </div>
 
             <div className="text-center">
-              <h1 className="text-grey-darker block mb-2 mt-5">{t('or')}</h1>
+              <div className="text-grey-darker block mb-2 mt-5">{t('or')}</div>
             </div>
           </form>
 

src/templates/LectureView/index.tsx

@@ -7,12 +7,11 @@ import Layout from '../../components/Layout'
 import LecturesList from '../../components/LecturesList'
 import Seo from '../../components/General/Seo'
 import LectureNavigationButton from '../../components/Courses/LectureNavigationButton'
-import VideoPlayer from '../../components/Courses/VideoPlayer'
+import LectureViewer from '../../components/Courses/LectureViewer'
 import { getYoutubeThumbnail } from '../../common/util'
 import CourseInfoCards from '../../components/Courses/CourseInfoCards'
 import CourseCard from '../../components/Courses/CourseCard'
 import { AuthContext } from '../../contexts/AuthContext'
-import { ALLOWED_LECTURES_WHEN_NOT_LOGGED_IN } from '../../common/constants'
 import { Course, Lecture } from '../../types/api.types'
 
 type LectureViewProps = {
@@ -34,13 +33,21 @@ const LectureView: React.FC<LectureViewProps> = ({ data, location }) => {
   if (!strapiCourse) {
     return <div />
   }
-  const { url, title: lectureTitle, position, strapiId } = lecture
+  const {
+    url,
+    title: lectureTitle,
+    position,
+    strapiId,
+    type,
+    content,
+  } = lecture
   const {
     title: courseTitle,
     slug,
     lectures,
     strapiId: courseStrapiId,
   } = strapiCourse
+  const ALLOWED_LECTURES_WHEN_NOT_LOGGED_IN = Math.ceil(lectures.length / 3)
   const isLastLecture = position === lectures.length - 1
   const isFirstLecture = position === 0
   const completedLectures =
@@ -124,8 +131,10 @@ const LectureView: React.FC<LectureViewProps> = ({ data, location }) => {
                 </div>
               </div>
 
-              <VideoPlayer
+              <LectureViewer
                 url={url}
+                type={type}
+                content={content}
                 lectureStrapiId={strapiId}
                 courseStrapiId={courseStrapiId}
                 showFeedback={showFeedback}
@@ -149,9 +158,9 @@ const LectureView: React.FC<LectureViewProps> = ({ data, location }) => {
         {relatedCourses.edges.length !== 0 && (
           <div className="rounded shadow-lg bg-gray-200 my-6 py-2">
             <div className=" px-6 py-3 bg-gray-800">
-              <h1 className="text-white font-semibold text-lg text-center">
+              <div className="text-white font-semibold text-lg text-center">
                 {t('relatedCourses')}
-              </h1>
+              </div>
             </div>
             <div className="grid md:grid-cols-3 sm:grid-cols-1 gap-4 my-6 mx-3">
               {relatedCourses.edges.map(({ node: course }) => {
@@ -191,6 +200,8 @@ export const pageQuery = graphql`
       created_at
       title
       position
+      type
+      content
     }
 
     strapiCourse(slug: { eq: $courseSlug }) {
@@ -228,6 +239,7 @@ export const pageQuery = graphql`
         duration
         url
         created_at
+        type
       }
       resources {
         type

src/types/api.types.ts

@@ -124,6 +124,8 @@ export type Lecture = {
   position: number
   slug: string
   created_at: string
+  type: string
+  content: string
 }
 
 export type Course = {