diff --git a/src/components/EditVideo/EditVideo.tsx b/src/components/EditVideo/EditVideo.tsx index 79567d3..84162db 100644 --- a/src/components/EditVideo/EditVideo.tsx +++ b/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([]); + const [publishes, setPublishes] = useState(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, diff --git a/src/components/UploadVideo/UploadVideo.tsx b/src/components/UploadVideo/UploadVideo.tsx index 134c5eb..8636f46 100644 --- a/src/components/UploadVideo/UploadVideo.tsx +++ b/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(null); const [playlistSetting, setPlaylistSetting] = useState(null); - const [publishes, setPublishes] = useState([]); + const [publishes, setPublishes] = useState(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; diff --git a/src/components/common/ListSuperLikes/ListSuperLikes.tsx b/src/components/common/ListSuperLikes/ListSuperLikes.tsx index a526a3d..eed29d5 100644 --- a/src/components/common/ListSuperLikes/ListSuperLikes.tsx +++ b/src/components/common/ListSuperLikes/ListSuperLikes.tsx @@ -65,10 +65,12 @@ export default function ListSuperLikes({ superlikes }) { } }} > - + { + 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 ( + + + {publishes?.resources?.map((publish: any) => { + const unpublished = listOfUnsuccessfulPublishes.map(item => item?.identifier) + return ( + + {publish?.title} + {!isPublishing && hasStarted.current && ( + <> + {!unpublished.includes(publish.identifier) ? ( + + ) : ( + + )} + + )} + + + ); + })} + {!isPublishing && listOfUnsuccessfulPublishes.length > 0 && ( + <> + 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 + + + )} + + + + ); +}; diff --git a/src/constants/index.ts b/src/constants/index.ts index 5afe1c8..ebf276c 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,4 +1,4 @@ -const useTestIdentifiers = false; +const useTestIdentifiers = true; export const QTUBE_VIDEO_BASE = useTestIdentifiers ? "MYTEST_vid_" diff --git a/src/pages/Home/VideoList-styles.tsx b/src/pages/Home/VideoList-styles.tsx index dcfd932..095b22c 100644 --- a/src/pages/Home/VideoList-styles.tsx +++ b/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 diff --git a/src/pages/PlaylistContent/PlaylistContent.tsx b/src/pages/PlaylistContent/PlaylistContent.tsx index 03b3308..8c6ef2f 100644 --- a/src/pages/PlaylistContent/PlaylistContent.tsx +++ b/src/pages/PlaylistContent/PlaylistContent.tsx @@ -393,6 +393,8 @@ export const PlaylistContent = () => { getComments(videoData?.id, nameAddress); }, [getComments, videoData?.id, nameAddress]); + + return (