mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: format with prettier
This commit is contained in:
swve
parent
03fb09c3d6
commit
a147ad6610
164 changed files with 11257 additions and 8154 deletions
|
|
@ -1,67 +1,87 @@
|
|||
import FormLayout, { ButtonBlack, Flex, FormField, FormLabel, FormMessage, Input } from "@components/StyledElements/Form/Form";
|
||||
import React, { useState } from "react";
|
||||
import * as Form from '@radix-ui/react-form';
|
||||
import BarLoader from "react-spinners/BarLoader";
|
||||
import { Youtube } from "lucide-react";
|
||||
import FormLayout, {
|
||||
ButtonBlack,
|
||||
Flex,
|
||||
FormField,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
Input,
|
||||
} from '@components/StyledElements/Form/Form'
|
||||
import React, { useState } from 'react'
|
||||
import * as Form from '@radix-ui/react-form'
|
||||
import BarLoader from 'react-spinners/BarLoader'
|
||||
import { Youtube } from 'lucide-react'
|
||||
|
||||
interface ExternalVideoObject {
|
||||
name: string,
|
||||
type: string,
|
||||
name: string
|
||||
type: string
|
||||
uri: string
|
||||
chapter_id: string
|
||||
}
|
||||
|
||||
|
||||
function VideoModal({ submitFileActivity, submitExternalVideo, chapterId, course }: any) {
|
||||
const [video, setVideo] = React.useState(null) as any;
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [name, setName] = React.useState("");
|
||||
const [youtubeUrl, setYoutubeUrl] = React.useState("");
|
||||
const [selectedView, setSelectedView] = React.useState("file") as any;
|
||||
function VideoModal({
|
||||
submitFileActivity,
|
||||
submitExternalVideo,
|
||||
chapterId,
|
||||
course,
|
||||
}: any) {
|
||||
const [video, setVideo] = React.useState(null) as any
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [name, setName] = React.useState('')
|
||||
const [youtubeUrl, setYoutubeUrl] = React.useState('')
|
||||
const [selectedView, setSelectedView] = React.useState('file') as any
|
||||
|
||||
const handleVideoChange = (event: React.ChangeEvent<any>) => {
|
||||
setVideo(event.target.files[0]);
|
||||
};
|
||||
setVideo(event.target.files[0])
|
||||
}
|
||||
|
||||
const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setName(event.target.value);
|
||||
};
|
||||
setName(event.target.value)
|
||||
}
|
||||
|
||||
const handleYoutubeUrlChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setYoutubeUrl(event.target.value);
|
||||
};
|
||||
const handleYoutubeUrlChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>
|
||||
) => {
|
||||
setYoutubeUrl(event.target.value)
|
||||
}
|
||||
|
||||
const handleSubmit = async (e: any) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
if (selectedView === "file") {
|
||||
let status = await submitFileActivity(video, "video", {
|
||||
name: name,
|
||||
chapter_id: chapterId,
|
||||
activity_type: "TYPE_VIDEO",
|
||||
activity_sub_type: "SUBTYPE_VIDEO_HOSTED",
|
||||
published_version: 1,
|
||||
version: 1,
|
||||
course_id: course.id,
|
||||
}, chapterId);
|
||||
if (selectedView === 'file') {
|
||||
let status = await submitFileActivity(
|
||||
video,
|
||||
'video',
|
||||
{
|
||||
name: name,
|
||||
chapter_id: chapterId,
|
||||
activity_type: 'TYPE_VIDEO',
|
||||
activity_sub_type: 'SUBTYPE_VIDEO_HOSTED',
|
||||
published_version: 1,
|
||||
version: 1,
|
||||
course_id: course.id,
|
||||
},
|
||||
chapterId
|
||||
)
|
||||
|
||||
setIsSubmitting(false);
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
if (selectedView === "youtube") {
|
||||
if (selectedView === 'youtube') {
|
||||
let external_video_object: ExternalVideoObject = {
|
||||
name,
|
||||
type: "youtube",
|
||||
type: 'youtube',
|
||||
uri: youtubeUrl,
|
||||
chapter_id: chapterId
|
||||
chapter_id: chapterId,
|
||||
}
|
||||
|
||||
|
||||
let status = await submitExternalVideo(external_video_object, 'activity', chapterId);
|
||||
setIsSubmitting(false);
|
||||
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.
|
||||
and the actual upload isn't happening here anyway, it's in the submitFileActivity function */
|
||||
|
|
@ -71,7 +91,9 @@ function VideoModal({ submitFileActivity, submitExternalVideo, chapterId, course
|
|||
<FormField name="video-activity-name">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel>Video name</FormLabel>
|
||||
<FormMessage match="valueMissing">Please provide a name for your video activity</FormMessage>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a name for your video activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input onChange={handleNameChange} type="text" required />
|
||||
|
|
@ -80,29 +102,67 @@ function VideoModal({ submitFileActivity, submitExternalVideo, chapterId, course
|
|||
<div className="flex flex-col rounded-md bg-gray-50 outline-dashed outline-gray-200">
|
||||
<div className="">
|
||||
<div className="flex m-4 justify-center space-x-2 mb-0">
|
||||
<div onClick={() => { setSelectedView("file") }} className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700 ">Video upload</div>
|
||||
<div onClick={() => { setSelectedView("youtube") }} className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700">YouTube Video</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelectedView('file')
|
||||
}}
|
||||
className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700 "
|
||||
>
|
||||
Video upload
|
||||
</div>
|
||||
<div
|
||||
onClick={() => {
|
||||
setSelectedView('youtube')
|
||||
}}
|
||||
className="rounded-full bg-slate-900 text-zinc-50 py-2 px-4 text-sm drop-shadow-md hover:cursor-pointer hover:bg-slate-700"
|
||||
>
|
||||
YouTube Video
|
||||
</div>
|
||||
</div>
|
||||
{selectedView === "file" && (<div className="p-4 justify-center m-auto align-middle">
|
||||
<FormField name="video-activity-file">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel>Video file</FormLabel>
|
||||
<FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<input type="file" onChange={handleVideoChange} required />
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
</div>)}
|
||||
{selectedView === "youtube" && (
|
||||
{selectedView === 'file' && (
|
||||
<div className="p-4 justify-center m-auto align-middle">
|
||||
<FormField name="video-activity-file">
|
||||
<Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
|
||||
<FormLabel className="flex justify-center align-middle"><Youtube className="m-auto pr-1" /><span className="flex">YouTube URL</span></FormLabel>
|
||||
<FormMessage match="valueMissing">Please provide a video for your activity</FormMessage>
|
||||
<Flex
|
||||
css={{
|
||||
alignItems: 'baseline',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<FormLabel>Video file</FormLabel>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a video for your activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input className="bg-white" onChange={handleYoutubeUrlChange} type="text" required />
|
||||
<input type="file" onChange={handleVideoChange} required />
|
||||
</Form.Control>
|
||||
</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',
|
||||
}}
|
||||
>
|
||||
<FormLabel className="flex justify-center align-middle">
|
||||
<Youtube className="m-auto pr-1" />
|
||||
<span className="flex">YouTube URL</span>
|
||||
</FormLabel>
|
||||
<FormMessage match="valueMissing">
|
||||
Please provide a video for your activity
|
||||
</FormMessage>
|
||||
</Flex>
|
||||
<Form.Control asChild>
|
||||
<Input
|
||||
className="bg-white"
|
||||
onChange={handleYoutubeUrlChange}
|
||||
type="text"
|
||||
required
|
||||
/>
|
||||
</Form.Control>
|
||||
</FormField>
|
||||
</div>
|
||||
|
|
@ -112,13 +172,25 @@ function VideoModal({ submitFileActivity, submitExternalVideo, chapterId, course
|
|||
|
||||
<Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
|
||||
<Form.Submit asChild>
|
||||
<ButtonBlack className="bg-black" type="submit" css={{ marginTop: 10 }}>
|
||||
{isSubmitting ? <BarLoader cssOverride={{ borderRadius: 60, }} width={60} color="#ffffff" /> : "Create activity"}
|
||||
<ButtonBlack
|
||||
className="bg-black"
|
||||
type="submit"
|
||||
css={{ marginTop: 10 }}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<BarLoader
|
||||
cssOverride={{ borderRadius: 60 }}
|
||||
width={60}
|
||||
color="#ffffff"
|
||||
/>
|
||||
) : (
|
||||
'Create activity'
|
||||
)}
|
||||
</ButtonBlack>
|
||||
</Form.Submit>
|
||||
</Flex>
|
||||
</FormLayout>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default VideoModal;
|
||||
export default VideoModal
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue