Add correct upload video

src/App.scss

@@ -548,9 +548,9 @@ main {
   max-width: 500px;
   min-width: 320px;
   max-height: 500px;
-  padding: 15px 0;
+  // padding: 15px 0;
   overflow-y: auto;
-  color: black;
+ background-color: var(--modal-color);
 }
 .Search {
   padding: 10px;
@@ -594,7 +594,6 @@ main {
   font-weight: bold;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   color: var(--font-color);
-  color: var(--font-color);
   .ModalAvatar {
     width: 50px;
     height: 50px;

src/actions/query/aboutUserQuery.js

@@ -25,7 +25,7 @@ export const actionAllPostsUser = (userId, skip) =>
     gql(
       `query allPosts($userId:String!){
 PostFind(query:$userId){
-       owner{_id} _id title text images{_id url}
+       owner{_id} _id title text images{_id url originalFileName}
 }
 }`,
       {

src/actions/query/commentQuery.js

@@ -34,9 +34,9 @@ export const actionOnePost = (_id) =>
           images{_id url originalFileName}
           comments {
               _id createdAt text 
-              likes { _id owner {_id login nick avatar {url} }}   
+              likes { _id owner {_id login nick avatar {_id url} }}   
               owner {_id login nick
-                      avatar {url}
+                      avatar {_id url}
                   }
               answers{
                   _id  
@@ -46,11 +46,11 @@ export const actionOnePost = (_id) =>
               likes{
                 _id
                 owner{				
-                   _id login avatar {url}
+                   _id login avatar {_id url}
                   }
             }
           owner {_id login nick
-              avatar {url}
+              avatar {_id url}
               }
           }
       }

src/actions/query/exploreQuery.js

@@ -8,7 +8,7 @@ export const actionExplorePosts = (skip) =>
       ` query PostsFeed($_id:String){
       PostFind(query:$_id){
       owner{_id login avatar{url}}
-      images{_id url} title text
+      images{_id url originalFileName} title text
       _id likesCount 
 
         likes{

src/actions/query/postFeedQuery.js

@@ -8,7 +8,7 @@ export const actionPostsFeed = (myFollowing, skip) =>
       `query PostsFeed($ownerId:String){
         PostFind(query:$ownerId){
         owner{_id login avatar{url}}
-        images{_id url} title text
+        images{_id url originalFileName} title text
         _id likesCount 
           likes{
                 _id

src/actions/query/postQuery.js

@@ -52,7 +52,9 @@ export const actionPostUpsert = (post, postId) =>
       `
 mutation PostUpsert($post:PostInput){
   PostUpsert(post:$post){
-    _id title text images{_id url}
+    _id title text images{_id url 
+      originalFileName
+    }
   }
 }`,
       {
@@ -60,6 +62,7 @@ mutation PostUpsert($post:PostInput){
           ...post,
           _id: postId,
           images: post.images.map(({ _id }) => ({ _id })),
+         
         },
       },
     ),

src/actions/query/searchUserQuery.js

@@ -6,7 +6,7 @@ export const actionSearchUser = (userName) =>
     'searchUser',
     gql(
       `
-query gf($query: String){
+query searchUser($query: String){
     UserFind(query: $query){
         _id, login avatar{url}
     }

src/actions/query/uploadFilesQuery.js

@@ -9,7 +9,8 @@ export const uploadFile = (file) => {
       ? { Authorization: 'Bearer ' + localStorage.authToken }
       : {},
     body: myForm,
-  }).then((result) => result.json())
+  })
+    .then((result) => result.json())
 }
 
 export const actionUploadFile = (file) =>

src/components/LinkToUser.jsx

@@ -8,45 +8,34 @@ export const LinkToUser = ({
   _id,
   avatar,
   login,
-  size,
-  // font = '15px',
   padding = '10px',
   onClick,
   key,
 }) => {
   return (
-    <Row style={{ marginBottom:'5px'}}>
+    <Row style={{ marginBottom: '5px' }}>
       <Link
         to={`/profile/${_id}`}
         style={{
-          // display: 'flex',
           padding: padding,
-          // flexDirection: 'row',
-          // fontSize: font,
-          // fontWeight: 'bold',
-          // color: 'black'
         }}
         className="ModalLink"
+        
         onClick={onClick}
         key={key}
       >
         <Col offset={1} className="gutter-row">
           {avatar ? (
             <Avatar
-              className='ModalAvatar'
-              src={backendURL+'/' + avatar?.url}
-             
+              className="ModalAvatar"
+              src={backendURL + '/' + avatar?.url}
             />
           ) : (
-              <Avatar  className='ModalAvatar' src={user}
-                // style={{ marginRight: '3px' }}
-              />
+            <Avatar className="ModalAvatar" src={user} />
           )}
         </Col>
         <Col offset={3} style={{ marginTop: '5px' }}>
-        
-          <h3 className="ModalLink"
-          > {login || 'Anon'}</h3>
+          <h3 className="ModalLink"> {login || 'Anon'}</h3>
         </Col>
       </Link>
     </Row>
@@ -58,8 +47,6 @@ export const LinkWithSubscribe = ({
   avatar,
   login,
   size,
-  // font = '15px',
-  // padding = '10px',
   onClick,
   key,
   myId,
@@ -67,9 +54,8 @@ export const LinkWithSubscribe = ({
   return (
     <Row style={{ margin: '10px', marginBottom: '20px' }}>
       <Link
-        to={`/profile/${_id}`} 
-
-       className="ModalLink"
+        to={`/profile/${_id}`}
+        className="ModalLink"
         onClick={onClick}
         key={key}
       >
@@ -77,7 +63,7 @@ export const LinkWithSubscribe = ({
           {avatar ? (
             <Avatar
               size={size}
-              src={backendURL+'/' + avatar?.url}
+              src={backendURL + '/' + avatar?.url}
               style={{ marginRight: '3px' }}
             />
           ) : (
@@ -85,7 +71,7 @@ export const LinkWithSubscribe = ({
           )}
         </Col>
         <Col offset={2} style={{ marginTop: '5px' }}>
-          <h3 className='ModalLink'> {login || 'Anon'}</h3>
+          <h3 className="ModalLink"> {login || 'Anon'}</h3>
         </Col>
       </Link>
 

src/components/Search_Users.jsx

@@ -13,8 +13,7 @@ export const ResultUserFind = ({ userFind = [], handleCancel }) => {
           _id={_id}
           login={login}
           avatar={avatar}
-          size={40}
-          padding={'0px'}
+          padding={'5px'}
           onClick={handleCancel}
           key={_id}
         />

src/components/Sortable.jsx

@@ -4,11 +4,17 @@ import {
 } from 'react-sortable-hoc'
 import { Button} from 'antd'
 import backendURL  from '../helpers/backendUrl'
-
-export const SortableItem = SortableElement(({ url, onRemoveImage, _id }) => {
+import { videoRegex } from '../helpers'
+export const SortableItem = SortableElement(({ url,onRemoveImage, _id,originalFileName }) => {
   return (
-    <>
-      <img className="Preview" src={backendURL+'/' + url} />
+    <>{originalFileName?.match(videoRegex) ?
+      <video className="Preview">
+        <source src={backendURL + '/' + url} />
+      </video>
+     
+      :
+      <img className="Preview" src={backendURL + '/' + url} />
+    }
       <Button
         type="primary"
         danger

src/components/UploadFiles.jsx

@@ -13,6 +13,7 @@ export function Dropzone({ onLoad }) {
   useEffect(() => {
     if (acceptedFiles) onLoad(acceptedFiles)
   }, [acceptedFiles])
+  
   return (
     <section className="container">
       <div {...getRootProps({ className: 'Dropzone' })}>

src/components/comment/AddComment.jsx

@@ -4,8 +4,6 @@ import React, { useState } from 'react'
 import { Input, Col, Button } from 'antd'
 import { SmileOutlined, SmileFilled, SendOutlined } from '@ant-design/icons'
 import styles from '../../index.css'
-
-console.log('styles', styles)
 const AddComment = ({ addComment, postId, style, className, width }) => {
   const [text, setComment] = useState('')
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)

src/components/comment/Reply.jsx

@@ -22,8 +22,6 @@ export const CommentAction = ({ commentId }) => {
 
 const CommentForReply = ({ addCommentReply, commentId }) => {
   const [newResult, setComment] = useState('')
-
-  console.log('comment', newResult)
   return (
     <>
       <div

src/components/like/LikeList.jsx

@@ -1,6 +1,5 @@
 import { LinkWithSubscribe } from '../LinkToUser'
 const LikeList = ({ likes, myId }) => {
-  console.log('likes ', likes)
   return (
     <>
       <div className="Modal">

src/components/post/Carousel.jsx

@@ -2,7 +2,7 @@ import { Carousel } from 'antd'
 import { LeftCircleFilled, RightCircleFilled } from '@ant-design/icons'
 import defaultPhoto from '../../materials/default-photo.png'
 import backendURL from '../../helpers/backendUrl'
-
+import { videoRegex } from '../../helpers'
 const SampleNextArrow = (props) => {
   const { onClick } = props
   return (
@@ -23,6 +23,7 @@ const SamplePrevArrow = (props) => {
 
 export const MyCarousel = ({ images = [], carouselWidth, carouselHeight }) => {
   return (
+   
     <>
       <div className="MyCarousel">
         <Carousel
@@ -31,10 +32,26 @@ export const MyCarousel = ({ images = [], carouselWidth, carouselHeight }) => {
           nextArrow={<SampleNextArrow />}
           prevArrow={<SamplePrevArrow />}
         >
-          {images ? (
+          {
+
+            images ? (
+            
             images?.map(
               (i, index) =>
+                
                 i?.url && (
+                  i?.originalFileName?.match(videoRegex) ?
+                    
+                    <div key={index}>
+                      <video 
+                        className="PostImage"
+                        muted="muted"  controls loop preload="true" >
+  <source src={backendURL + '/' + i?.url}/>
+                        </video>
+
+                
+                </div>
+                    :
                   <div key={index}>
                     <img
                       key={index}
@@ -43,7 +60,9 @@ export const MyCarousel = ({ images = [], carouselWidth, carouselHeight }) => {
                     />
                   </div>
                 ),
-            )
+                )
+                // :
+
           ) : (
             <div>
               <img className="PostImage" src={defaultPhoto} />

src/components/post/PostCard.jsx

@@ -1,28 +1,55 @@
 import defaultPhoto from '../../materials/default-photo.png'
 import { Link } from 'react-router-dom'
 import galery from '../../materials/gallery-icon.png'
-import backendURL  from '../../helpers/backendUrl'
+import backendURL from '../../helpers/backendUrl'
+import { videoRegex } from '../../helpers'
+const GalleryCard = ({ post = {} }) => (
+  <div className="Wrapper">
+    <img src={galery} className="Gallery" />
+    <img className="Card" src={backendURL + '/' + post.images[0].url} />
+  </div>
+)
+
+const ImageCard = ({ post = {} }) => (
+  <div className="Wrapper">
+    <img className="Card" src={backendURL + '/' + post.images[0].url} />
+  </div>
+)
 
-export const Card = ({ post }) => (
-  <>
-    <Link key={post?._id} to={`/post/${post?._id}`}>
-      {post?.images && post?.images.length > 1 ? (
-        <div className="Wrapper">
-          <img src={galery} className="Gallery" />
-          <img className="Card" src={backendURL + '/' +
-            post.images[0].url} />
-        </div>
-      ) : post?.images && post?.images[0] && post.images[0]?.url ? (
-        <div className="Wrapper">
-            <img className="Card" src={backendURL + '/'
-              + post.images[0].url} />
-        </div>
-      ) : (
-        <div className="Wrapper">
-              <img className="Card"
-                src={defaultPhoto} />
-        </div>
-      )}
-    </Link>
-  </>
+const VideoCard = ({ post = {} }) => (
+  <div className="Wrapper">
+    <video className="Card">
+      <source src={backendURL + '/' + post?.images[0]?.url} />
+    </video>
+  </div>
 )
+
+export const Card = ({ post }) => {
+  return (
+    <>
+      <Link key={post?._id} to={`/post/${post?._id}`}>
+        {post?.images && post?.images.length > 1 ? (
+          post?.images &&
+          post?.images[0] &&
+          post?.images[0]?.originalFileName?.match(videoRegex) ? (
+            <>
+              <VideoCard post={post} />
+            </>
+          ) : (
+            <GalleryCard post={post} />
+          )
+        ) : post?.images &&
+          post?.images[0] &&
+          post?.images[0]?.originalFileName?.match(videoRegex) ? (
+          <VideoCard post={post} />
+        ) : post?.images && post?.images[0] && post?.images[0]?.url ? (
+          <ImageCard post={post} />
+        ) : (
+          <div className="Wrapper">
+            <img className="Card" src={defaultPhoto} />
+          </div>
+        )}
+      </Link>
+    </>
+  )
+}

src/components/toggle/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import styles from './index.module.scss'
-  console.log('styles ttt, ',styles)
 const Toggle = ({ value, onChange }) => (
 
     <label className={styles.switch}

src/helpers/index.js

@@ -2,7 +2,7 @@ import { Modal,Button } from 'antd'
 import { useDropzone } from 'react-dropzone'
 import React, {useEffect } from 'react'
 import { UploadOutlined } from '@ant-design/icons'
-
+export const videoRegex = (/\.(mp4|mov|avi|wmv|avchd|webm|mpeg-2|3gpp|mp2|flv|3gp|mpg)$/i)
 export const ConstructorModal = ({
   title,
   children,
@@ -37,7 +37,6 @@ export function Dropzone({ onLoad }) {
       {file.path} - {file.size} bytes
     </li>
   ))
-  console.log('acceptedFiles', acceptedFiles)
   useEffect(() => {
     acceptedFiles[0] && onLoad(acceptedFiles[0])
   }, [acceptedFiles])

src/pages/createAndEditPost/index.js

@@ -27,6 +27,7 @@ const PostEditor = ({
     text: post?.text || '',
     images: post?.images || [],
   }
+
   const [state, setState] = useState(post)
   useEffect(() => {
     if (fileStatus?.status === 'FULFILLED' && fileStatus?.payload != [])
@@ -36,7 +37,7 @@ const PostEditor = ({
       })
     else if (fileStatus?.status === 'REJECTED') message.error('Error')
   }, [fileStatus])
-
+console.log('state images ', state?.images)
   const onSortEnd = ({ oldIndex, newIndex }) => {
     setState({
       ...state,
@@ -71,7 +72,7 @@ const PostEditor = ({
       state['images'] = []
       return false
     } else {
-      return <h2 className="NumberPosts"> {state?.images.length} / 8</h2>
+      return <p className="NumberPosts"> {state?.images.length} / 8</p>
     }
   }
 
@@ -81,13 +82,14 @@ const PostEditor = ({
       <div style={{}}>
         <SortableContainer onSortEnd={onSortEnd}>
           {state?.images?.length <= 8 &&
-            (state?.images || []).map(({ _id, url }, index) => (
+            (state?.images || []).map(({_id, url, originalFileName }, index) => (
               <SortableItem
                 key={`item-${_id}`}
                 url={url}
                 index={index}
                 onRemoveImage={onRemoveImage}
                 _id={_id}
+                originalFileName={originalFileName}
               />
             ))}
         </SortableContainer>

src/pages/search/index.js

@@ -8,7 +8,6 @@ import LinkToUser from '../../components/LinkToUser'
 export const ResultUserFind = ({ userFind, handleCancel }) => {
   return (
     <div className="ResultUserFindMobile">
-      {console.log('userfind ', userFind)}
      
       {typeof userFind === 'undefined' 
       

src/pages/setting/index.js

@@ -85,7 +85,6 @@ const EditSetting = ({
         setIsModalVisibleEdit(false)
     }
   }
-  console.log('save pass', changePass?.login != info?.login)
   return (
     <div>
       <EditAccount showModalEdit={showModalEdit} />

src/providers/ThemeProvider.js

@@ -19,10 +19,10 @@ const ThemeProvider = ({ children }) => {
     document.documentElement.dataset.theme = theme
     localStorage.setItem('theme', theme)
   }, [theme])
-  console.log('theme ', theme)
 
   document.documentElement.classList.add('theme-transition')
   document.documentElement.setAttribute('data-theme', theme)
+  
   window.setTimeout(function() {
     document.documentElement.classList.remove('theme-transition')
   }, 100)

src/redux/saga/myProfile/index.js

@@ -50,7 +50,6 @@ function* setAvatarWorker({ file }) {
     },
   } = yield select()
   const setAvatar = yield call(promiseWorker, actionAvatar(file, _id))
-  console.log('setAvatar', setAvatar)
   const { avatar } = yield call(promiseWorker, actionGetAvatar(_id))
   if (setAvatar) {
     yield call(fullPageAboutUserWorker, { _id })

src/redux/saga/subscribe/index.js

@@ -15,9 +15,6 @@ function* changeSubscribeWorker({ followId, checkFollowId }) {
       aboutMe: { _id, following },
     },
   } = yield select()
-  console.log('my following', following)
-  console.log('check follow id', checkFollowId)
-  console.log('my id', _id)
 
   const oldFollowing = checkFollowId
     ? {