diff --git a/src/components/ExperienceTimelineCard/Experience.tsx b/src/components/ExperienceTimelineCard/Experience.tsx index 48a1ad6b1..296912d07 100644 --- a/src/components/ExperienceTimelineCard/Experience.tsx +++ b/src/components/ExperienceTimelineCard/Experience.tsx @@ -284,14 +284,6 @@ export const Experience: React.FC = props => { ? 'Custom' : capitalize(userExperience.experience.visibility)} - - - {i18n.t('Experience.List.Menu.View')} - - diff --git a/src/components/PostCreate/PostCreate.styles.ts b/src/components/PostCreate/PostCreate.styles.ts index 94f90d218..93db2733c 100644 --- a/src/components/PostCreate/PostCreate.styles.ts +++ b/src/components/PostCreate/PostCreate.styles.ts @@ -90,7 +90,7 @@ export const useStyles = makeStyles((theme: Theme) => alignItems: 'center', position: 'relative', [theme.breakpoints.down('xs')]: { - flexDirection: 'column', + flexDirection: 'row', alignItems: 'flex-start', padding: 0, }, diff --git a/src/components/PostCreate/PostCreate.tsx b/src/components/PostCreate/PostCreate.tsx index 01a2b0c1d..7665e7a11 100644 --- a/src/components/PostCreate/PostCreate.tsx +++ b/src/components/PostCreate/PostCreate.tsx @@ -265,7 +265,7 @@ export const PostCreate: React.FC = props => { selectedUserIds: post.selectedUserIds, NSFWTag: post.NSFWTag, visibility: post.visibility ?? PostVisibility.PUBLIC, - selectedTimelineIds: post.selectedTimelineIds, + selectedTimelineIds: timelineId, }); } } diff --git a/src/components/common/CKEditor/Editor.tsx b/src/components/common/CKEditor/Editor.tsx index 5fc166351..39104efd6 100644 --- a/src/components/common/CKEditor/Editor.tsx +++ b/src/components/common/CKEditor/Editor.tsx @@ -1,18 +1,45 @@ import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import { CKEditor } from '@ckeditor/ckeditor5-react'; -import React from 'react'; +import React, { useState } from 'react'; + +import { Button } from '@material-ui/core'; import { EditorProps } from './Editor.interface'; import { useStyles } from './Editor.style'; +import { MediaEmbedToolbarButton } from './MediaEmbedButton'; import { CustomAdapterPlugin } from './adapters'; import * as UserAPI from 'src/lib/api/user'; +type File = { + originalname: string; + mimeType: string; + size: number; + url: string; +}; +const VideoPreview = ({ videoURL }) => { + return ( +
+ +
+ ); +}; + export const Editor: React.FC = props => { - const { mobile, onChange, isErrorEditor, placeholder } = props; + const { userId, mobile, onChange, isErrorEditor, placeholder } = props; const styles = useStyles({ mobile, counter: true }); + const [modalOpen, setModalOpen] = useState(false); + const [uploadedVideos, setUploadedVideos] = useState([]); + const handleUploadButtonClick = () => { + setModalOpen(true); + }; const handleSearch = async (query: string) => { const { data } = await UserAPI.searchUsers(1, query); @@ -58,13 +85,19 @@ export const Editor: React.FC = props => { }, image: { upload: { - types: ['png', 'jpeg', 'webp', 'gif'], + types: ['png', 'jpeg', 'webp', 'gif', 'mp4'], }, toolbar: [], }, }; - console.log('isError', isErrorEditor); + const handleFileSelected = (uploadedVideosData: File[]) => { + const videoURL = uploadedVideosData[0].url; // Assuming you only upload one video at a time + + setUploadedVideos([...uploadedVideos, videoURL]); + setModalOpen(false); + }; + return (
= props => { console.error({ event, editor }); }} /> + + + +
+ {uploadedVideos.map((videoURL, index) => ( + + ))} +
+ + {modalOpen && ( + setModalOpen(false)} + /> + )}
); }; diff --git a/src/components/common/CKEditor/MediaEmbedButton.tsx b/src/components/common/CKEditor/MediaEmbedButton.tsx new file mode 100644 index 000000000..0fc834d13 --- /dev/null +++ b/src/components/common/CKEditor/MediaEmbedButton.tsx @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; + +import { Upload } from 'components/Upload'; +import { Modal } from 'components/atoms/Modal'; +import * as UploadAPI from 'src/lib/api/upload'; +import i18n from 'src/locale'; + +export const MediaEmbedToolbarButton = ({ + userId, + onFileSelected, + modalOpen, + ...props +}) => { + const [progress, setProgress] = useState(0); + const [open, setOpen] = useState(modalOpen ?? false); + + const handleFileSelected = async (files: File[]) => { + if (files.length === 0) return; + + try { + const { files: uploadedFiles } = await UploadAPI.videoMobile(files[0], { + onUploadProgress: (event: ProgressEvent) => { + const total = Math.round((100 * event.loaded) / event.total); + + setProgress(total); + }, + }); + + onFileSelected(uploadedFiles); + + setProgress(0); + setOpen(false); + } catch (error) { + console.error('ERROR', error); + } + }; + + return ( + setOpen(false)}> + 0} + onFileSelected={handleFileSelected} + accept={['video/mp4', 'video/x-m4v', 'video/*']} + maxSize={100} + placeholder={i18n.t('Post_Create.Upload.Video.Placeholder')} + usage="post" + /> + + ); +}; diff --git a/src/lib/api/upload.ts b/src/lib/api/upload.ts index af4e422a1..9c773fb4b 100644 --- a/src/lib/api/upload.ts +++ b/src/lib/api/upload.ts @@ -86,3 +86,23 @@ export const video = async ( return data; }; + +export const videoMobile = async ( + file: File, + options: UploadOptions, +): Promise => { + const formData = new FormData(); + formData.append('file', file); + + const { data } = await MyriadAPI().request({ + url: `/upload/video`, + method: 'POST', + headers: { + 'Content-Type': 'multipart/form-data', + }, + data: formData, + onUploadProgress: options.onUploadProgress, + }); + + return data; +};