EC10-10 replace mux library to react-player

components/CourseCard.tsx

@@ -21,8 +21,8 @@ const CourseCard = ({ course, isAdmin }: Props) => {
           {course.lessons[0]?.video?.publicPlaybackId && (
             <Image
               className="w-full"
-              src={`https://image.mux.com/${course.lessons[0]?.video?.publicPlaybackId}/thumbnail.jpg?width=640`}
-              alt={`Video thumbnail preview for ${course.lessons[0]?.video?.publicPlaybackId}`}
+              src={`https://img.youtube.com/vi/${course.lessons[0]?.video?.publicPlaybackId}/0.jpg`}
+              alt={`Video thumbnail preview for ${course.lessons[0]?.name}`}
               width={320}
               height={240}
             />

components/CourseOverview.tsx

@@ -29,7 +29,7 @@ const CourseOverview = ({ course }: Props) => {
           <div key={lesson.id} className='flex flex-col md:flex-row gap-6 mb-8'>
             {lesson.video?.publicPlaybackId && (
               <Image
-                src={`https://image.mux.com/${lesson.video.publicPlaybackId}/thumbnail.jpg?width=640`}
+                src={`https://img.youtube.com/vi/${lesson.video.publicPlaybackId}/0.jpg`}
                 alt={`Video thumbnail preview for ${lesson.name}`}
                 width={320}
                 height={240}

components/CourseViewer.tsx

@@ -4,7 +4,7 @@ import Image from 'next/future/image'
 import type { Course, Lesson, Video } from "@prisma/client"
 import Heading from 'components/Heading'
 import EmptyState from 'components/EmptyState'
-import MuxPlayer from "@mux/mux-player-react/lazy";
+import VideoPlayer from 'components/VideoPlayer'
 import formatDuration from 'utils/formatDuration'
 import clsx from 'clsx';
 import type { UserLessonProgress } from '@prisma/client'
@@ -27,7 +27,6 @@ const CourseViewer = ({ course, lessonProgress = [], setLessonProgress }: Props)
   const [activeLesson, setActiveLesson] = useState(course.lessons[lessonIndex]);
   const playbackId = activeLesson?.video?.publicPlaybackId
   const videoReady = activeLesson?.video?.status === "ready"
-  const placeholder = activeLesson?.video?.placeholder
 
   useEffect(() => {
     const lessonIndex = course.lessons.findIndex(lesson => lesson.id === activeLesson.id) + 1
@@ -60,17 +59,12 @@ const CourseViewer = ({ course, lessonProgress = [], setLessonProgress }: Props)
     <div className='px-5 grid lg:grid-cols-[70%_30%]'>
       <div>
         {playbackId && videoReady ? (
-          <MuxPlayer
-            className='mb-6 w-full aspect-video'
-            streamType="on-demand"
+          <VideoPlayer
             playbackId={playbackId}
-            placeholder={placeholder}
-            onEnded={markLessonCompleted}
-            metadata={{
-              video_series: activeLesson.courseId,
-              video_title: activeLesson.name,
-              player_name: "Video Course Starter Kit",
-            }}
+            courseId={activeLesson.courseId}
+            lessonName={activeLesson.name}
+            videoUrl={`https://www.youtube.com/watch?v=${playbackId}`}
+            thumbnail={`https://img.youtube.com/vi/vi/${playbackId}/0.jpg`}
           />
         ) : (
           <div className='mb-6 w-full aspect-video bg-gray-200' />
@@ -98,7 +92,7 @@ const CourseViewer = ({ course, lessonProgress = [], setLessonProgress }: Props)
 
             {lesson.video?.publicPlaybackId && lesson.video.status === "ready" && (
               <Image
-                src={`https://image.mux.com/${lesson.video.publicPlaybackId}/thumbnail.jpg?width=640`}
+                src={`https://img.youtube.com/vi/${lesson.video.privatePlaybackId}/0.jpg`}
                 alt={`Video thumbnail preview for ${lesson.name}`}
                 width={106}
                 height={60}

components/VideoPlayer.tsx

@@ -0,0 +1,34 @@
+import ReactPlayer from 'react-player';
+
+interface VideoPlayerProps {
+    playbackId: string;
+    courseId: number;
+    lessonName: string;
+    videoUrl: string;
+    thumbnail?: string;
+}
+
+const VideoPlayer: React.FC<VideoPlayerProps> = ({playbackId, courseId, lessonName, videoUrl, thumbnail}) => {
+    const handleMetadata = (): void => {
+        console.log({
+            video_series: courseId,
+            video_title: lessonName,
+            player_name: "Video Course Starter Kit",
+        });
+    };
+
+    return (
+        <div className='mb-6 w-full aspect-video'>
+            <ReactPlayer
+                url={videoUrl}
+                className='react-player'
+                width='100%'
+                height='100%'
+                controls={true}
+                onReady={handleMetadata}
+            />
+        </div>
+    );
+};
+
+export default VideoPlayer;

next.config.js

@@ -3,7 +3,7 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   images: {
-    domains: ['image.mux.com'],
+    domains: ['img.youtube.com'],
   },
 }
 

package.json

@@ -10,10 +10,7 @@
     "db:proxy": "pscale connect video-course-starter-kit main --port 3309"
   },
   "dependencies": {
-    "@mux/blurhash": "^0.1.2",
-    "@mux/mux-node": "^6.3.0",
-    "@mux/mux-player-react": "^1",
-    "@mux/mux-uploader-react": "^1.0.0-beta.0",
+    "react-player": "^2.14.0",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@planetscale/database": "^1.3.0",
     "@prisma/client": "4.3.1",

pages/admin/courses/[courseId]/index.tsx

@@ -69,7 +69,7 @@ const AdminCourseEdit: NextPage<AdminCourseEditPageProps> = ({ course }) => {
                     <a className='flex gap-4 border border-gray-200 rounded-lg mb-6 cursor-pointer'>
                       {lesson.video?.publicPlaybackId && (
                         <Image
-                          src={`https://image.mux.com/${lesson.video.publicPlaybackId}/thumbnail.jpg?width=640`}
+                          src={`https://img.youtube.com/vi/${lesson.video.publicPlaybackId}/0.jpg`}
                           alt={`Video thumbnail preview for ${lesson.name}`}
                           width={180}
                           height={100}

pages/admin/courses/[courseId]/lessons/[lessonId].tsx

@@ -7,7 +7,7 @@ import type { Session } from 'next-auth'
 import type { Lesson, Video } from '@prisma/client'
 import { useRouter } from 'next/router'
 import { SubmitHandler } from "react-hook-form";
-import MuxPlayer from "@mux/mux-player-react/lazy";
+import VideoPlayer from 'components/VideoPlayer';
 import LessonForm, { Inputs } from 'components/forms/LessonForm'
 import Button from 'components/Button'
 import toast from 'react-hot-toast';
@@ -64,15 +64,12 @@ const AdminLessonEdit: NextPage<AdminLessonEditPageProps> = ({ lesson }) => {
       <div className='grid lg:grid-cols-2 gap-6'>
         <div>
           {lesson.video?.status === "ready" && lesson.video.publicPlaybackId ? (
-            <MuxPlayer
-              className='mb-6 w-full aspect-video'
-              streamType="on-demand"
+            <VideoPlayer
               playbackId={lesson.video.publicPlaybackId}
-              metadata={{
-                video_series: lesson.courseId,
-                video_title: lesson.name,
-                player_name: "Video Course Starter Kit",
-              }}
+              courseId={lesson.courseId}
+              lessonName={lesson.name}
+              videoUrl={lesson.video.publicPlaybackId}
+              thumbnail={`https://img.youtube.com/vi/${lesson.video.publicPlaybackId}/0.jpg`}
             />
           ) : (
             <div className='mb-6 w-full aspect-video bg-gray-200' />

pages/api/webhooks/mux.ts

@@ -1,8 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { Readable } from 'node:stream';
 
-import Mux from '@mux/mux-node';
-
 import WEBHOOK_TYPES from "../../../utils/webhooks/mux/types"
 import get from "lodash.get"
 
@@ -25,7 +23,6 @@ async function buffer(readable: Readable) {
 function verifyWebhookSignature(rawBody: string | Buffer, req: NextApiRequest) {
   if (webhookSecret) {
     // this will raise an error if signature is not valid
-    Mux.Webhooks.verifyHeader(rawBody, req.headers['mux-signature'] as string, webhookSecret);
   } else {
     console.log('Skipping webhook signature verification because no secret is configured'); // eslint-disable-line no-console
   }

pages/courses/[...slug].tsx

@@ -2,7 +2,6 @@ import type { ReactElement } from 'react'
 import { useState } from 'react'
 import type { GetServerSideProps } from 'next'
 import type { Course, Lesson, Video } from "@prisma/client"
-import muxBlurHash from "@mux/blurhash";
 import { prisma } from 'utils/prisma'
 import { authOptions } from 'pages/api/auth/[...nextauth]'
 import { unstable_getServerSession } from "next-auth/next"
@@ -91,8 +90,6 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
   course.lessons = await Promise.all(course.lessons.map(async (lesson) => {
     if (lesson?.video?.publicPlaybackId) {
-      const { blurHashBase64 } = await muxBlurHash(lesson.video.publicPlaybackId);
-      (lesson.video as VideoWithPlaceholder).placeholder = blurHashBase64;
     }
     return lesson
   }))