all multiple publish upload and edit

src/components/EditVideo/EditVideo.tsx

@@ -43,7 +43,7 @@ import {
 } from "../../state/features/videoSlice";
 import ImageUploader from "../common/ImageUploader";
 import { QTUBE_VIDEO_BASE, categories, subCategories } from "../../constants";
-import { MultiplePublish } from "../common/MultiplePublish/MultiplePublish";
+import { MultiplePublish } from "../common/MultiplePublish/MultiplePublishAll";
 import { TextEditor } from "../common/TextEditor/TextEditor";
 import { extractTextFromHTML } from "../common/TextEditor/utils";
 
@@ -75,7 +75,7 @@ export const EditVideo = () => {
   const editVideoProperties = useSelector(
     (state: RootState) => state.video.editVideoProperties
   );
-  const [publishes, setPublishes] = useState<any[]>([]);
+  const [publishes, setPublishes] = useState<any>(null);
   const [isOpenMultiplePublish, setIsOpenMultiplePublish] = useState(false);
   const [videoPropertiesToSetToRedux, setVideoPropertiesToSetToRedux] =
     useState(null);
@@ -315,7 +315,11 @@ export const EditVideo = () => {
         listOfPublishes.push(requestBodyVideo);
       }
 
-      setPublishes(listOfPublishes);
+      const multiplePublish = {
+        action: "PUBLISH_MULTIPLE_QDN_RESOURCES",
+        resources: [...listOfPublishes],
+      };
+      setPublishes(multiplePublish);
       setIsOpenMultiplePublish(true);
       setVideoPropertiesToSetToRedux({
         ...editVideoProperties,

src/components/UploadVideo/UploadVideo.tsx

@@ -48,7 +48,7 @@ import {
   categories,
   subCategories,
 } from "../../constants";
-import { MultiplePublish } from "../common/MultiplePublish/MultiplePublish";
+import { MultiplePublish } from "../common/MultiplePublish/MultiplePublishAll";
 import {
   CrowdfundSubTitle,
   CrowdfundSubTitleRow,
@@ -110,7 +110,7 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
     useState<any>(null);
 
   const [playlistSetting, setPlaylistSetting] = useState<null | string>(null);
-  const [publishes, setPublishes] = useState<any[]>([]);
+  const [publishes, setPublishes] = useState<any>(null);
   const [isCheckTitleByFile, setIsCheckTitleByFile] = useState(false)
   const [isCheckSameCoverImage, setIsCheckSameCoverImage] = useState(false)
   const [isCheckDescriptionIsTitle, setIsCheckDescriptionIsTitle] = useState(false)
@@ -440,8 +440,11 @@ export const UploadVideo = ({ editId, editContent }: NewCrowdfundProps) => {
           throw new Error("cannot get playlist data");
         }
       }
-
-      setPublishes(listOfPublishes);
+      const multiplePublish = {
+        action: "PUBLISH_MULTIPLE_QDN_RESOURCES",
+        resources: [...listOfPublishes],
+      };
+      setPublishes(multiplePublish);
       setIsOpenMultiplePublish(true);
     } catch (error: any) {
       let notificationObj: any = null;

src/components/common/ListSuperLikes/ListSuperLikes.tsx

@@ -65,10 +65,12 @@ export default function ListSuperLikes({ superlikes }) {
                 }
               }}
             >
-              <Box>
+              <Box sx={{
+                    width: '100%'
+              }}>
               <ListItem
               sx={{
-                padding: '0px'
+                padding: '0px',
               }}
               alignItems="flex-start"
              

src/components/common/MultiplePublish/MultiplePublishAll.tsx

@@ -0,0 +1,149 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Modal,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import { ModalBody } from "../../UploadVideo/Upload-styles";
+import { CircleSVG } from "../../../assets/svgs/CircleSVG";
+import { EmptyCircleSVG } from "../../../assets/svgs/EmptyCircleSVG";
+
+export const MultiplePublish = ({ publishes, isOpen,  onSubmit }) => {
+  const theme = useTheme();
+  const listOfSuccessfulPublishesRef = useRef([])
+  const [listOfSuccessfulPublishes, setListOfSuccessfulPublishes] = useState<
+    any[]
+  >([]);
+  const [listOfUnsuccessfulPublishes, setListOfUnSuccessfulPublishes] = useState<
+  any[]
+>([]);
+  const [currentlyInPublish, setCurrentlyInPublish] = useState(null);
+  const hasStarted = useRef(false);
+  const publish = useCallback(async (pub: any) => {
+    const lengthOfResources = pub?.resources?.length
+    const lengthOfTimeout = lengthOfResources * 30000
+    return await qortalRequestWithTimeout(pub, lengthOfTimeout);
+  }, []);
+  const [isPublishing, setIsPublishing] = useState(true)
+
+  const handlePublish = useCallback(
+    async (pub: any) => {
+      try {
+        setCurrentlyInPublish(pub?.identifier);
+        setIsPublishing(true)
+        const res = await publish(pub);
+ 
+          onSubmit()
+          setListOfUnSuccessfulPublishes([])
+       
+      } catch (error) {
+        const unsuccessfulPublishes = error?.error?.unsuccessfulPublishes || []
+        console.log({ error });
+        
+        
+        if(unsuccessfulPublishes?.length > 0){
+          setListOfUnSuccessfulPublishes(unsuccessfulPublishes)
+          
+        }
+      } finally {
+      
+        setIsPublishing(false)
+      }
+    },
+    [publish]
+  );
+
+  const retry = ()=> {
+    let newlistOfMultiplePublishes = [];
+    listOfUnsuccessfulPublishes?.forEach((item)=> {
+            const findPub = publishes?.resources.find((res)=> res?.identifier === item.identifier)
+            if(findPub){
+              newlistOfMultiplePublishes.push(findPub)
+            }
+          })
+          const multiplePublish = {
+            action: "PUBLISH_MULTIPLE_QDN_RESOURCES",
+            resources: newlistOfMultiplePublishes
+          };
+          handlePublish(multiplePublish)
+  }
+
+  const startPublish = useCallback(
+    async (pubs: any) => {
+      await handlePublish(pubs);
+    },
+    [handlePublish, onSubmit, listOfSuccessfulPublishes, publishes]
+  );
+
+  useEffect(() => {
+    if (publishes && !hasStarted.current) {
+      hasStarted.current = true;
+      startPublish(publishes);
+    }
+  }, [startPublish, publishes, listOfSuccessfulPublishes]);
+
+  
+  return (
+    <Modal
+      open={isOpen}
+      aria-labelledby="modal-title"
+      aria-describedby="modal-description"
+    >
+      <ModalBody
+        sx={{
+          minHeight: "50vh",
+        }}
+      >
+        {publishes?.resources?.map((publish: any) => {
+          const unpublished = listOfUnsuccessfulPublishes.map(item => item?.identifier)
+          return (
+            <Box
+              sx={{
+                display: "flex",
+                gap: "20px",
+                justifyContent: "space-between",
+                alignItems: "center",
+              }}
+            >
+              <Typography>{publish?.title}</Typography>
+              {!isPublishing && hasStarted.current && (
+                <>
+                  {!unpublished.includes(publish.identifier) ? (
+                <CircleSVG
+                  color={theme.palette.text.primary}
+                  height="24px"
+                  width="24px"
+                />
+              ) : (
+                <EmptyCircleSVG
+                  color={theme.palette.text.primary}
+                  height="24px"
+                  width="24px"
+                />
+              )}
+                </>
+              )}
+              
+            </Box>
+          );
+        })}
+      {!isPublishing && listOfUnsuccessfulPublishes.length > 0 && (
+        <>
+           <Typography sx={{
+            marginTop: '20px',
+            fontSize: '16px'
+           }}>Some files were not published. Please try again. It's important that all the files get published. Maybe wait a couple minutes if the error keeps occurring</Typography>
+        <Button variant="contained" onClick={()=> {
+          retry()
+        }}>Try again</Button>
+        </>
+      )}
+       
+      </ModalBody>
+    </Modal>
+  );
+};

src/constants/index.ts

@@ -1,4 +1,4 @@
-const useTestIdentifiers = false;
+const useTestIdentifiers = true;
 
 export const QTUBE_VIDEO_BASE = useTestIdentifiers
   ? "MYTEST_vid_"

src/pages/Home/VideoList-styles.tsx

@@ -40,6 +40,7 @@ export const VideoCardContainer = styled('div')(({ theme }) => ({
 }));
 
 export const VideoCardCol = styled('div')({
+  position: 'relative',
   minWidth: '250px', // Minimum width of each item
   maxWidth: '1fr',   // Maximum width, allowing the item to fill the column
   // ... other styles

src/pages/PlaylistContent/PlaylistContent.tsx

@@ -393,6 +393,8 @@ export const PlaylistContent = () => {
     getComments(videoData?.id, nameAddress);
   }, [getComments, videoData?.id, nameAddress]);
 
+ 
+
   return (
     <Box
       sx={{