added icon and category to videocontent

src/components/EditVideo/EditVideo.tsx

@@ -751,7 +751,7 @@ export const EditVideo = () => {
             dispatch(updateInHashMap(clonedCopy));
             dispatch(
               setNotification({
-                msg: "Video updated",
+                msg: "File updated",
                 alertType: "success",
               })
             );

src/components/UploadVideo/UploadVideo.tsx

@@ -674,7 +674,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
             setPlaylistSetting(null);
             dispatch(
               setNotification({
-                msg: "Videos published",
+                msg: "Files published",
                 alertType: "success",
               })
             );

src/constants/index.ts

@@ -1,6 +1,9 @@
 import softwareIcon from '../assets/icons/software.webp'
 import gamingIcon from '../assets/icons/gaming.webp'
 import mediaIcon from '../assets/icons/media.webp'
+import audioIcon from '../assets/icons/audio.webp'
+import videoIcon from '../assets/icons/video.webp'
+import documentIcon from '../assets/icons/document.webp'
 
 
 const useTestIdentifiers = false;
@@ -227,5 +230,8 @@ export const subCategories3: CategoryMap = {
 export const icons = {
     1: softwareIcon,
     2: gamingIcon,
-    3: mediaIcon
+    3: mediaIcon,
+    302: videoIcon,
+    301: audioIcon,
+    304: documentIcon
 }

src/pages/Home/VideoList.tsx

@@ -682,6 +682,18 @@ export const VideoList = ({ mode }: VideoListProps) => {
                 hasHash = true;
               }
 
+              const category = categories?.find(item => item?.id === videoObj?.category);
+              const subcategory = subCategories[category?.id]?.find(item => item?.id === videoObj?.subcategory);
+              const subcategory2 = subCategories2[subcategory?.id]?.find(item => item.id === videoObj?.subcategory2);
+              const subcategory3 = subCategories3[subcategory2?.id]?.find(item => item.id === videoObj?.subcategory3);
+              
+              const catId = category?.id || null;
+              const subId = subcategory?.id || null;
+              const sub2Id = subcategory2?.id || null;
+              const sub3Id = subcategory3?.id || null;
+              
+              const icon = icons[sub3Id] || icons[sub2Id] || icons[subId] || icons[catId] || null;
+              
              
             
            
@@ -753,7 +765,7 @@ export const VideoList = ({ mode }: VideoListProps) => {
                       gap: '25px',
                       alignItems: 'center'
                     }}>
-                      {icons[videoObj?.category] ? <img src={icons[videoObj?.category]} width="50px" style={{
+                      {icon ? <img src={icon} width="50px" style={{
                         borderRadius: '5px'
                       }}/> : (
                          <AttachFileIcon />

src/pages/VideoContent/VideoContent.tsx

@@ -33,7 +33,7 @@ import {
   CrowdfundSubTitle,
   CrowdfundSubTitleRow,
 } from "../../components/UploadVideo/Upload-styles";
-import { QTUBE_VIDEO_BASE } from "../../constants";
+import { QTUBE_VIDEO_BASE, categories, subCategories, subCategories2, subCategories3 } from "../../constants";
 import { Playlists } from "../../components/Playlists/Playlists";
 import { DisplayHtml } from "../../components/common/TextEditor/DisplayHtml";
 import FileElement from "../../components/common/FileElement";
@@ -277,7 +277,18 @@ export const VideoContent = () => {
     }
   }, [videoData]); 
 
+  const categoriesDisplay = useMemo(()=> {
+    const category = categories?.find((item)=> item?.id === videoData?.category)
+    if(!category) return null
+    const subcategory = subCategories[category?.id]?.find(item=> item?.id === videoData?.subcategory)
+    if(!subcategory) return category?.name
 
+    const subcategory2 = subCategories2[subcategory?.id]?.find(item => item.id === videoData?.subcategory2)
+    if(!subcategory2) return `${category?.name} > ${subcategory?.name}`
+    const subcategory3 = subCategories3[subcategory2?.id]?.find(item => item.id === videoData?.subcategory3)
+    if(!subcategory3) return `${category?.name} > ${subcategory?.name} > ${subcategory2?.name}`
+    return  `${category?.name} > ${subcategory?.name} > ${subcategory2?.name} > ${subcategory3?.name}`
+  }, [videoData])
   
 
   return (
@@ -354,6 +365,14 @@ export const VideoContent = () => {
           </StyledCardHeaderComment>
         </Box>
         <Spacer height="15px" />
+        <Box>
+          <Typography sx={{
+            fontWeight: 'bold',
+            fontSize: '16px',
+            userSelect: 'none'
+          }}>{categoriesDisplay}</Typography>
+        </Box>
+        <Spacer height="15px" />
         <Box
           sx={{
             background: "#333333",