feat: implement youtube backend and partial front

This commit is contained in:
swve 2023-05-14 15:02:09 +00:00
parent cdd1ca46d3
commit 77d4f5fa1c
6 changed files with 51 additions and 20 deletions

View file

@ -11,7 +11,7 @@ import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChapters
import { useRouter } from "next/navigation";
import NewChapterModal from "@components/Modals/Chapters/NewChapter";
import NewActivityModal from "@components/Modals/Activities/Create/NewActivity";
import { createActivity, createFileActivity, createYouTubeVideoActivity } from "@services/courses/activities";
import { createActivity, createFileActivity, createExternalVideoActivity } from "@services/courses/activities";
import { getOrganizationContextInfo } from "@services/organizations/orgs";
import Modal from "@components/UI/Modal/Modal";
import { denyAccessToUser } from "@services/utils/react/middlewares/views";
@ -96,9 +96,10 @@ function CourseEdit(params: any) {
};
// Submit YouTube Video Upload
const submitVideoYouTubeActivity = async (data : any, activity: any, chapterId: string) => {
const submitExternalVideo = async (external_video_data : any, activity: any, chapterId: string) => {
console.log("submitExternalVideo", external_video_data);
await updateChaptersMetadata(courseid, data);
await createYouTubeVideoActivity(data, activity, chapterId);
await createExternalVideoActivity(external_video_data , activity, chapterId);
await getCourseChapters();
setNewActivityModal(false);
};
@ -275,6 +276,7 @@ function CourseEdit(params: any) {
dialogContent={<NewActivityModal
closeModal={closeNewActivityModal}
submitFileActivity={submitFileActivity}
submitExternalVideo={submitExternalVideo}
submitActivity={submitActivity}
chapterId={newActivityModalData}
></NewActivityModal>}

View file

@ -9,7 +9,7 @@ import VideoModal from "./NewActivityModal/Video";
import Image from "next/image";
import DocumentPdfModal from "./NewActivityModal/DocumentPdf";
function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chapterId }: any) {
function NewActivityModal({ closeModal, submitActivity, submitFileActivity, submitExternalVideo, chapterId }: any) {
const [selectedView, setSelectedView] = useState("home");
@ -43,7 +43,8 @@ function NewActivityModal({ closeModal, submitActivity, submitFileActivity, chap
)}
{selectedView === "video" && (
<VideoModal submitFileActivity={submitFileActivity} chapterId={chapterId} />
<VideoModal submitFileActivity={submitFileActivity} submitExternalVideo={submitExternalVideo}
chapterId={chapterId} />
)}
{selectedView === "documentpdf" && (

View file

@ -4,7 +4,14 @@ import * as Form from '@radix-ui/react-form';
import BarLoader from "react-spinners/BarLoader";
import { Youtube } from "lucide-react";
function VideoModal({ submitFileActivity, chapterId }: any) {
interface ExternalVideoObject {
name: string,
type: string,
uri: string
}
function VideoModal({ submitFileActivity, submitExternalVideo, chapterId }: any) {
const [video, setVideo] = React.useState(null) as any;
const [isSubmitting, setIsSubmitting] = useState(false);
const [name, setName] = React.useState("");
@ -26,15 +33,21 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
const handleSubmit = async (e: any) => {
e.preventDefault();
setIsSubmitting(true);
if (selectedView === "file") {
let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
setIsSubmitting(false);
setIsSubmitting(false);
}
if (selectedView === "youtube") {
let status = await submitFileActivity(video, "video", { name, type: "video" }, chapterId);
setIsSubmitting(false);
let external_video_object: ExternalVideoObject = {
name,
type: "youtube",
uri: youtubeUrl
}
let status = await submitExternalVideo(external_video_object, 'activity' ,chapterId);
setIsSubmitting(false);
}
};
/* TODO : implement some sort of progress bar for file uploads, it is not possible yet because i'm not using axios.
@ -69,7 +82,6 @@ function VideoModal({ submitFileActivity, chapterId }: any) {
</FormField>
</div>)}
{selectedView === "youtube" && (
<div className="p-4 justify-center m-auto align-middle">
<FormField name="video-activity-file">
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>

View file

@ -36,8 +36,12 @@ export async function createFileActivity(file: File, type: string, data: any, ch
return res;
}
export async function createYouTubeVideoActivity(data: any, activity: any, chapter_id: any) {
const result = await fetch(`${getAPIUrl()}activities/youtubevideo?coursechapter_id=${chapter_id}`, RequestBody("POST", data));
export async function createExternalVideoActivity(data: any, activity: any, chapter_id: any) {
// add coursechapter_id to data
data.coursechapter_id = chapter_id;
data.activity_id = activity.id;
const result = await fetch(`${getAPIUrl()}activities/external_video?coursechapter_id=${chapter_id}`, RequestBody("POST", data));
const res = await result.json();
return res;
}