feat: upload video to lesson from src link

2026-10-11 10:19:22 +03:00 · 2022-06-12 19:56:54 +03:00 · 2022-06-12 19:56:54 +03:00 · f098b2d096
commit f098b2d096
parent b4a94e3da5
13 changed files with 135 additions and 65 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -31,7 +31,7 @@
        "react-player": "^2.9.0",
        "react-router-dom": "^5.2.0",
        "react-spinners": "^0.11.0",
-        "react-virtuoso": "^2.2.8",
+        "react-virtuoso": "^2.13.1",
        "socket.io-client": "^4.4.1",
        "validator": "^13.6.0",
        "yup": "^0.32.9"
@ -1988,11 +1988,11 @@
      }
    },
    "node_modules/@virtuoso.dev/react-urx": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.8.tgz",
-      "integrity": "sha512-QV9ZJ9Yla88ySgN+DuHLDYoQa0UDRrEq88sLqQESZUWzLughrkpg1BLmQT7FuiU2M78A+rQ9DR3GBlWrJIx+Bw==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz",
+      "integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==",
      "dependencies": {
-        "@virtuoso.dev/urx": "^0.2.8"
+        "@virtuoso.dev/urx": "^0.2.13"
      },
      "engines": {
        "node": ">=10"
@ -2002,9 +2002,9 @@
      }
    },
    "node_modules/@virtuoso.dev/urx": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.8.tgz",
-      "integrity": "sha512-40uiTn5z1J/7at9Ao/aesyFhE7sS1cpb2MrbP/JSS6dcLMsQJcAZGedCY3bKkyjANH9DX/ciUpkpmT3TXmUBOQ=="
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz",
+      "integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw=="
    },
    "node_modules/@vitejs/plugin-react": {
      "version": "1.0.4",
@ -4849,18 +4849,19 @@
      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
    },
    "node_modules/react-virtuoso": {
-      "version": "2.2.8",
-      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.2.8.tgz",
-      "integrity": "sha512-DArJ29ZrhdygdLKdXs/GB3VNDxaAF7YjdgIjlWPuK6UsV848hNmtw9px3LPdcQBErxaz7XCtHNfc7yInX+/M7g==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.13.1.tgz",
+      "integrity": "sha512-Wek6hYPYU7W1r9fGEF1/sMrFOH8VV8PW64fCRxx9OSSlq5q+5Cp0uf+7eP0jFWqpZtC2DrqFoj+seZXjkiyHrA==",
      "dependencies": {
-        "@virtuoso.dev/react-urx": "^0.2.8",
-        "@virtuoso.dev/urx": "^0.2.8"
+        "@virtuoso.dev/react-urx": "^0.2.12",
+        "@virtuoso.dev/urx": "^0.2.12"
      },
      "engines": {
        "node": ">=10"
      },
      "peerDependencies": {
-        "react": ">=16"
+        "react": ">=16 || >=17 || >= 18",
+        "react-dom": ">=16 || >=17 || >= 18"
      }
    },
    "node_modules/redux": {
@ -7131,17 +7132,17 @@
      }
    },
    "@virtuoso.dev/react-urx": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.8.tgz",
-      "integrity": "sha512-QV9ZJ9Yla88ySgN+DuHLDYoQa0UDRrEq88sLqQESZUWzLughrkpg1BLmQT7FuiU2M78A+rQ9DR3GBlWrJIx+Bw==",
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/react-urx/-/react-urx-0.2.13.tgz",
+      "integrity": "sha512-MY0ugBDjFb5Xt8v2HY7MKcRGqw/3gTpMlLXId2EwQvYJoC8sP7nnXjAxcBtTB50KTZhO0SbzsFimaZ7pSdApwA==",
      "requires": {
-        "@virtuoso.dev/urx": "^0.2.8"
+        "@virtuoso.dev/urx": "^0.2.13"
      }
    },
    "@virtuoso.dev/urx": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.8.tgz",
-      "integrity": "sha512-40uiTn5z1J/7at9Ao/aesyFhE7sS1cpb2MrbP/JSS6dcLMsQJcAZGedCY3bKkyjANH9DX/ciUpkpmT3TXmUBOQ=="
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@virtuoso.dev/urx/-/urx-0.2.13.tgz",
+      "integrity": "sha512-iirJNv92A1ZWxoOHHDYW/1KPoi83939o83iUBQHIim0i3tMeSKEh+bxhJdTHQ86Mr4uXx9xGUTq69cp52ZP8Xw=="
    },
    "@vitejs/plugin-react": {
      "version": "1.0.4",
@ -9200,12 +9201,12 @@
      }
    },
    "react-virtuoso": {
-      "version": "2.2.8",
-      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.2.8.tgz",
-      "integrity": "sha512-DArJ29ZrhdygdLKdXs/GB3VNDxaAF7YjdgIjlWPuK6UsV848hNmtw9px3LPdcQBErxaz7XCtHNfc7yInX+/M7g==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-2.13.1.tgz",
+      "integrity": "sha512-Wek6hYPYU7W1r9fGEF1/sMrFOH8VV8PW64fCRxx9OSSlq5q+5Cp0uf+7eP0jFWqpZtC2DrqFoj+seZXjkiyHrA==",
      "requires": {
-        "@virtuoso.dev/react-urx": "^0.2.8",
-        "@virtuoso.dev/urx": "^0.2.8"
+        "@virtuoso.dev/react-urx": "^0.2.12",
+        "@virtuoso.dev/urx": "^0.2.12"
      }
    },
    "redux": {
--- a/package.json
+++ b/package.json
@ -32,7 +32,7 @@
    "react-player": "^2.9.0",
    "react-router-dom": "^5.2.0",
    "react-spinners": "^0.11.0",
-    "react-virtuoso": "^2.2.8",
+    "react-virtuoso": "^2.13.1",
    "socket.io-client": "^4.4.1",
    "validator": "^13.6.0",
    "yup": "^0.32.9"
--- a/src/App.tsx
+++ b/src/App.tsx
@ -18,6 +18,19 @@ import { SocketContext } from './contexts';
 import { HistoryMessageType, UserOnlineListType, UserSeesionType } from './types';
 import { useToast } from '@chakra-ui/react';

+/**
+ * Virtuoso's resize observer can this error,
+ * which is caught by DnD and aborts dragging.
+ */
+window.addEventListener('error', e => {
+  if (
+    e.message === 'ResizeObserver loop completed with undelivered notifications.' ||
+    e.message === 'ResizeObserver loop limit exceeded'
+  ) {
+    e.stopImmediatePropagation();
+  }
+});
+
 const App = () => {
  const {
    userStore,
--- a/src/components/Forms/CourseForm/CourseForm.tsx
+++ b/src/components/Forms/CourseForm/CourseForm.tsx
@ -58,9 +58,10 @@ const CourseForm: React.FC<CourseFormPropsType> = ({ onSubmit, buttonLabel, isLo
   */
  const loadUsersOptions = async (): Promise<OptionType[] | undefined> => {
    try {
-      const users = await UserServiceInstance.fetchAll({ limit: 12, role: UserRoleEnum.TEACHER });
+      const teachers = await UserServiceInstance.fetchAll({ role: UserRoleEnum.TEACHER });
+      const admins = await UserServiceInstance.fetchAll({ role: UserRoleEnum.ADMIN });

-      return users.data.map(user => ({
+      return teachers.data.concat(admins.data).map(user => ({
        label: user.fullname,
        value: user.id,
      }));
--- a/src/components/Forms/LessonForm/CreateLessonForm.tsx
+++ b/src/components/Forms/LessonForm/CreateLessonForm.tsx
@ -27,6 +27,7 @@ const CreateLessonForm: React.FC = () => {
      description: data.description,
      duration: data.duration,
      video: data.video,
+      linked_video_url: data.linked_video_url,
      materials: Array.from(data.materials || []),
      course_id,
    });
--- a/src/components/Forms/LessonForm/EditLessonForm.tsx
+++ b/src/components/Forms/LessonForm/EditLessonForm.tsx
@ -27,6 +27,7 @@ const EditLessonForm: React.FC<EditLessonFormPropsType> = ({ lesson }) => {
      title: lesson.title,
      description: lesson.description,
      duration: lesson.duration,
+      linked_video_url: lesson.linked_video_url || undefined,
      video: undefined,
      materials: undefined,
    },
@ -41,6 +42,7 @@ const EditLessonForm: React.FC<EditLessonFormPropsType> = ({ lesson }) => {
      description: data.description,
      video: data.video,
      duration: data.duration,
+      linked_video_url: data.linked_video_url,
      materials: data.materials?.length !== 0 ? Array.from(data.materials || []) : null,
    });

--- a/src/components/Forms/LessonForm/LessonForm.tsx
+++ b/src/components/Forms/LessonForm/LessonForm.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
  FormControl,
  FormHelperText,
@ -26,6 +26,7 @@ export type InputFields = {
  description: string;
  duration: string;
  video: File;
+  linked_video_url?: string | undefined;
  materials?: FileList | undefined;
 };

@ -53,6 +54,8 @@ const LessonForm: React.FC<LessonFormPropsType> = ({
    formState: { errors, isDirty },
  } = reactHookForm;

+  const [isLinkedVideoUrl, setIsLinkedVideoUrl] = useState<boolean>(false);
+
  const watchDescription = watch('description');

  return (
@ -85,29 +88,43 @@ const LessonForm: React.FC<LessonFormPropsType> = ({
          </Flex>
        </FormControl>

-        <FormControl isRequired id='video'>
-          <FormLabel>Video</FormLabel>
-          <Controller
-            control={control}
-            name='video'
-            render={({ field: { onChange, value: file } }) => (
-              <VideoUploader
-                onChange={file => onChange(file)}
-                file={file}
-                preloadedVideoUrl={preloadedVideo && constants.BACKEND_URL + preloadedVideo.url}
-              />
-            )}
-          />
-          <Text as='small' color='red.500'>
-            {errors.video?.message}
-          </Text>
-          <FormHelperText>
-            Supported formats:{' '}
-            {Object.keys(VideoSupportedFormatsEnum)
-              .map(ext => `${ext.toLowerCase()}`)
-              .join(', ')}
-          </FormHelperText>
-        </FormControl>
+        {isLinkedVideoUrl ? (
+          <FormControl id='linked_video_url'>
+            <FormLabel>Video URL</FormLabel>
+            <Input placeholder='Link to video source. (YouTube, Vimeo, .mp4)' {...register('linked_video_url')} />
+            <Text as='small' color='red.500'>
+              {errors.linked_video_url?.message}
+            </Text>
+            <FormHelperText textDecoration={'underline'} cursor='pointer' onClick={() => setIsLinkedVideoUrl(false)}>
+              choose from files
+            </FormHelperText>
+          </FormControl>
+        ) : (
+          <FormControl id='video'>
+            <FormLabel>Video</FormLabel>
+            <Controller
+              control={control}
+              name='video'
+              render={({ field: { onChange, value: file } }) => (
+                <VideoUploader
+                  onChange={file => onChange(file)}
+                  file={file}
+                  setIsLinkedVideoUrl={setIsLinkedVideoUrl}
+                  preloadedVideoUrl={preloadedVideo && constants.BACKEND_URL + preloadedVideo.url}
+                />
+              )}
+            />
+            <Text as='small' color='red.500'>
+              {errors.video?.message}
+            </Text>
+            <FormHelperText>
+              Supported formats:{' '}
+              {Object.keys(VideoSupportedFormatsEnum)
+                .map(ext => `${ext.toLowerCase()}`)
+                .join(', ')}
+            </FormHelperText>
+          </FormControl>
+        )}

        <FormControl isRequired id='duration'>
          <FormLabel>Video duration</FormLabel>
--- a/src/components/Forms/LessonForm/LessonForm.validator.ts
+++ b/src/components/Forms/LessonForm/LessonForm.validator.ts
@ -18,7 +18,8 @@ const CreateLessonFormSchema = yup
      .test('fileSize', `File size is too large, maximum size is ${helpers.transformBytes(VIDEO_FILE_SIZE)}`, value =>
        !value ? true : value.size <= VIDEO_FILE_SIZE
      )
-      .required('Video field name is required'),
+      .optional(),
+    linked_video_url: yup.string().matches(new RegExp('^(http|https|ftp)://'), 'URL is incorrect'),
    materials: yup
      .mixed<File[]>()
      .test(
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@ -41,7 +41,7 @@ const Select: React.FC<ISelectPropsType> = props => {
        >
          {options?.find(option => option.value === value)?.label || props?.placeholder || 'Select Option'}
        </MenuButton>
-        <MenuList>
+        <MenuList maxH='175px' m='0' p='0' overflowY={'scroll'}>
          {options && options.length !== 0 ? (
            options.map(option => (
              <MenuItem
@ -49,6 +49,9 @@ const Select: React.FC<ISelectPropsType> = props => {
                onClick={() => {
                  props.onChange(option.value);
                }}
+                pb='0'
+                pt='0'
+                minH='35px'
              >
                {option.label}
              </MenuItem>
--- a/src/components/VideoUploader/VideoUploader.tsx
+++ b/src/components/VideoUploader/VideoUploader.tsx
@ -1,6 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 import { Flex, Box, Icon, Text, Button, Input, AspectRatio, useColorModeValue } from '@chakra-ui/react';
-import { MdUpload } from 'react-icons/md';
+import { MdLink, MdUpload } from 'react-icons/md';
 import { VideoSupportedFormatsEnum } from '@educt/enums';
 import { LessonVideoType } from '@educt/types';

@ -8,9 +8,15 @@ type VideoUploaderPropsType = {
  onChange: (file: File) => void;
  file?: File | LessonVideoType | undefined;
  preloadedVideoUrl?: string | undefined;
+  setIsLinkedVideoUrl?: Dispatch<SetStateAction<boolean>>;
 };

-const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file, preloadedVideoUrl }) => {
+const VideoUploader: React.FC<VideoUploaderPropsType> = ({
+  onChange,
+  file,
+  preloadedVideoUrl,
+  setIsLinkedVideoUrl,
+}) => {
  const fileInputRef = useRef<HTMLInputElement>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  const [videoObjectUrl, setVideoObjectUrl] = useState<string | undefined>(undefined);
@ -42,11 +48,23 @@ const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file, prelo
  };

  const ChangeVideoButton = () => (
-    <Button onClick={onSelectFileHandler} leftIcon={<MdUpload />} variant={'outline'} size='sm' mt='2' float='right'>
+    <Button mr='1' onClick={onSelectFileHandler} leftIcon={<MdUpload />} variant={'outline'} size='sm' mt='2'>
      Change video
    </Button>
  );

+  const ChangeUrlVideoButton = () => (
+    <Button
+      onClick={() => setIsLinkedVideoUrl && setIsLinkedVideoUrl(true)}
+      leftIcon={<MdLink />}
+      variant={'outline'}
+      size='sm'
+      mt='2'
+    >
+      From URL
+    </Button>
+  );
+
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.load();
@ -91,9 +109,14 @@ const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file, prelo
              </Text>
            </Text>
          </Box>
-          <Button onClick={onSelectFileHandler} mt='6'>
-            Select file
-          </Button>
+          <Flex mt='4'>
+            <Button size='sm' onClick={onSelectFileHandler} mr='2'>
+              Select file
+            </Button>
+            <Button size='sm' onClick={() => setIsLinkedVideoUrl && setIsLinkedVideoUrl(true)}>
+              From URL
+            </Button>
+          </Flex>
        </Flex>
      ) : (
        <Box>
@ -102,7 +125,10 @@ const VideoUploader: React.FC<VideoUploaderPropsType> = ({ onChange, file, prelo
              <source src={preloadedVideoUrl} />
            </video>
          </AspectRatio>
-          <ChangeVideoButton />
+          <Flex justifyContent={'flex-end'}>
+            <ChangeVideoButton />
+            <ChangeUrlVideoButton />
+          </Flex>
        </Box>
      )}
      <Input
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@ -57,6 +57,7 @@ export interface ILesson {
  progress: LessonProgress;
  content: ILessonContent;
  video?: LessonVideoType | undefined | null;
+  linked_video_url?: string | null;
  created_at: string;
  updated_at: string;
 }
--- a/src/pages/lesson/lesson.tsx
+++ b/src/pages/lesson/lesson.tsx
@ -138,6 +138,8 @@ const LessonPage: React.FC<IPageProps> = () => {

  if (me === null) return <LoadingPage />;

+  const videoURL = lesson.video ? constants.BACKEND_URL + lesson.video.url : lesson.linked_video_url;
+
  return (
    <Page>
      <Helmet>
@ -153,13 +155,13 @@ const LessonPage: React.FC<IPageProps> = () => {
        <Grid templateColumns={{ base: '1fr', xl: '3fr 1fr' }}>
          <GridItem>
            <Box overflowY='hidden'>
-              {lesson.video ? (
+              {lesson.video || lesson.linked_video_url ? (
                <ReactPlayer
                  style={{ backgroundColor: '#000' }}
                  width={'100%'}
                  height={'547px'}
                  controls
-                  url={constants.BACKEND_URL + lesson.video.url}
+                  url={videoURL || ''}
                />
              ) : (
                <Flex h='547px' justifyContent={'center'} alignItems={'center'}>
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@ -207,6 +207,7 @@ export type CreateLessonParamsType = {
  duration: string;
  course_id: string;
  video: File;
+  linked_video_url?: string | undefined;
  materials?: File[] | undefined;
 };

@ -216,6 +217,7 @@ export type UpdateLessonParamsType = {
  duration?: string | undefined;
  course_id?: string | undefined;
  video?: File | undefined;
+  linked_video_url?: string | undefined;
  materials?: File[] | undefined | null;
 };