fix: add timeline on mobile post (#1863)

* fix: add selected timeline id on import post, remove view details timeline on post

* fix: add video upload on mobile

* fix: add timeline id on mobile

src/components/ExperienceTimelineCard/Experience.tsx

@@ -284,14 +284,6 @@ export const Experience: React.FC<ExperienceProps> = props => {
                     ? 'Custom'
                     : capitalize(userExperience.experience.visibility)}
                 </Typography>
-                <Link
-                  href={`/experience/[experienceId]`}
-                  as={`/experience/${experienceId}`}
-                  passHref>
-                  <Typography variant="body2" color="primary">
-                    {i18n.t('Experience.List.Menu.View')}
-                  </Typography>
-                </Link>
               </div>
             </CardContent>
           </Grid>

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,
       },

src/components/PostCreate/PostCreate.tsx

@@ -265,7 +265,7 @@ export const PostCreate: React.FC<PostCreateProps> = props => {
           selectedUserIds: post.selectedUserIds,
           NSFWTag: post.NSFWTag,
           visibility: post.visibility ?? PostVisibility.PUBLIC,
-          selectedTimelineIds: post.selectedTimelineIds,
+          selectedTimelineIds: timelineId,
         });
       }
     }

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 (
+    <div style={{ width: '150px', height: 'auto', margin: '10px' }}>
+      <video
+        controls
+        style={{ width: '150px', height: 'auto', maxHeight: '75px' }}>
+        <source src={videoURL} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </div>
+  );
+};
+
 export const Editor: React.FC<EditorProps> = 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<EditorProps> = 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 (
     <div
       className={`${styles.root} ${styles.large}`}
@@ -91,6 +124,36 @@ export const Editor: React.FC<EditorProps> = props => {
           console.error({ event, editor });
         }}
       />
+
+      <Button
+        variant="contained"
+        color="primary"
+        size="small"
+        fullWidth
+        onClick={handleUploadButtonClick}
+        style={{ margin: '10px auto' }}>
+        Upload Video
+      </Button>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(2, 150px)',
+          gridGap: '10px',
+        }}>
+        {uploadedVideos.map((videoURL, index) => (
+          <VideoPreview key={index} videoURL={videoURL} />
+        ))}
+      </div>
+
+      {modalOpen && (
+        <MediaEmbedToolbarButton
+          userId={userId} // Pass the required props to the MediaEmbedToolbarButton component
+          onFileSelected={handleFileSelected}
+          modalOpen={modalOpen}
+          onClose={() => setModalOpen(false)}
+        />
+      )}
     </div>
   );
 };

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 (
+    <Modal
+      title={i18n.t('Post_Create.Upload.Video.Title')}
+      align="left"
+      titleSize="small"
+      maxWidth="xl"
+      open={open}
+      onClose={() => setOpen(false)}>
+      <Upload
+        type="video"
+        progress={progress}
+        loading={progress > 0}
+        onFileSelected={handleFileSelected}
+        accept={['video/mp4', 'video/x-m4v', 'video/*']}
+        maxSize={100}
+        placeholder={i18n.t('Post_Create.Upload.Video.Placeholder')}
+        usage="post"
+      />
+    </Modal>
+  );
+};

src/lib/api/upload.ts

@@ -86,3 +86,23 @@ export const video = async (
 
   return data;
 };
+
+export const videoMobile = async (
+  file: File,
+  options: UploadOptions,
+): Promise<ResponseFileUpload> => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const { data } = await MyriadAPI().request<ResponseFileUpload>({
+    url: `/upload/video`,
+    method: 'POST',
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    data: formData,
+    onUploadProgress: options.onUploadProgress,
+  });
+
+  return data;
+};