@capillarytech/creatives-library 8.0.130 → 8.0.131

package/v2Containers/MobilePushNew/hooks/useUpload.js

@@ -0,0 +1,740 @@
+import { useState, useCallback, useEffect } from 'react';
+import { getCdnUrl } from '../../../utils/cdnTransformation';
+import {
+  MOBILE_PUSH_CHANNEL,
+  MPUSH_IMG_SIZE,
+  MPUSH_VIDEO_SIZE,
+  ALLOWED_IMAGE_EXTENSIONS_REGEX,
+  ALLOWED_EXTENSIONS_VIDEO_REGEX,
+  ALLOWED_GIF_REGEX,
+  ANDROID,
+  MPUSH_GIF_SIZE,
+  IMAGE,
+  VIDEO,
+  GIF,
+  CAROUSEL,
+} from '../constants';
+import messages from '../messages';
+
+// Helper function to get video properties
+const getVideoProperties = (isAndroid = false) => ({
+  videoSrc: isAndroid ? 'androidVideoSrc' : 'iosVideoSrc',
+  videoPreview: isAndroid ? 'androidVideoPreview' : 'iosVideoPreview',
+  videoDuration: isAndroid ? 'androidVideoDuration' : 'iosVideoDuration',
+});
+
+const useUpload = (mobilePushActions, editData = {}, _uploadedAssetData0 = {}, _uploadedAssetData1 = {}, _uploadAssetSuccess = false, sameContent = false, setAndroidContent, setIosContent, activeTab, _androidContent, _iosContent, formatMessage) => {
+  // Asset list state - make platform-specific to prevent cross-platform bleeding
+  const [androidAssetList, updateAndroidAssetList] = useState([]);
+  const [iosAssetList, updateIosAssetList] = useState([]);
+  const [mpushVideoSrcAndPreview, setMpushVideoSrcAndPreview] = useState({
+    mpushVideoSrc: "",
+    mpushVideoPreviewImg: "",
+    duration: 0,
+  });
+
+  // Image state for non-carousel media types (IMAGE, VIDEO, GIF)
+  const [imageSrc, setImageSrc] = useState({
+    androidImageSrc: "",
+    iosImageSrc: "",
+  });
+
+  // Video state for platform-specific video/GIF uploads
+  const [videoState, setVideoState] = useState({
+    androidVideoSrc: "",
+    iosVideoSrc: "",
+    androidVideoPreview: "",
+    iosVideoPreview: "",
+    androidVideoDuration: 0,
+    iosVideoDuration: 0,
+  });
+
+  const [uploadErrors, setUploadErrors] = useState({});
+
+  // Add assetList state for test assertions
+  const [assetList, setAssetList] = useState([]);
+
+  // Patch updateAndroidAssetList and updateIosAssetList to also update assetList for test visibility
+  const updateAndroidAssetListPatched = (data) => {
+    setAssetList(data);
+    updateAndroidAssetList(data);
+  };
+  const updateIosAssetListPatched = (data) => {
+    setAssetList(data);
+    updateIosAssetList(data);
+  };
+
+  // File validation functions
+  const validateImageFile = useCallback((file) => {
+    const errors = [];
+
+    // File size validation
+    if (file?.size > MPUSH_IMG_SIZE) {
+      errors.push(formatMessage(messages.fileSizeError, { size: MPUSH_IMG_SIZE / 1000000 }));
+    }
+
+    // File type validation
+    if (!ALLOWED_IMAGE_EXTENSIONS_REGEX.test(file?.name)) {
+      errors.push(formatMessage(messages.imageFileTypeError));
+    }
+
+    return errors;
+  }, [formatMessage]);
+
+  const validateVideoFile = useCallback((file) => {
+    const errors = [];
+
+    // File size validation
+    if (file?.size > MPUSH_VIDEO_SIZE) {
+      errors.push(formatMessage(messages.fileSizeError, { size: MPUSH_VIDEO_SIZE / 1000000 }));
+    }
+
+    // File type validation for video
+    if (!ALLOWED_EXTENSIONS_VIDEO_REGEX.test(file?.name)) {
+      errors.push(formatMessage(messages.videoFileTypeError));
+    }
+
+    return errors;
+  }, [formatMessage]);
+
+  const validateGifFile = useCallback((file) => {
+    const errors = [];
+
+    // File size validation
+    if (file?.size > MPUSH_GIF_SIZE) {
+      errors.push(formatMessage(messages.fileSizeError, { size: MPUSH_GIF_SIZE / 1000000 }));
+    }
+
+    // File type validation for GIF
+    if (!ALLOWED_GIF_REGEX.test(file?.name)) {
+      errors.push(formatMessage(messages.gifFileTypeError));
+    }
+
+    return errors;
+  }, [formatMessage]);
+
+  // Upload asset function with validation
+  const uploadMpushAsset = useCallback((file, type, fileParams) => {
+    let validationErrors = [];
+
+    // Validate based on file type
+    if (type === IMAGE.toLowerCase()) {
+      validationErrors = validateImageFile(file);
+    } else if (type === VIDEO.toLowerCase()) {
+      validationErrors = validateVideoFile(file);
+    } else if (type === GIF.toLowerCase()) {
+      validationErrors = validateGifFile(file);
+    }
+
+    // If validation fails, set errors and don't upload
+    if (validationErrors?.length > 0) {
+      setUploadErrors({
+        [activeTab === ANDROID ? 0 : 1]: validationErrors,
+      });
+      return;
+    }
+
+    // Clear previous errors and proceed with upload
+    setUploadErrors({});
+
+    // Use "video" as assetType for both video and gif uploads
+    // since backend treats them the same way
+    const assetType = (type === GIF.toLowerCase()) ? VIDEO.toLowerCase() : type;
+
+    const mobilePushParams = {
+      source: MOBILE_PUSH_CHANNEL.toLowerCase(),
+      channel: MOBILE_PUSH_CHANNEL,
+    };
+    mobilePushActions.uploadAsset(file, assetType, fileParams, activeTab === ANDROID ? 0 : 1, mobilePushParams);
+  }, [mobilePushActions, validateImageFile, validateVideoFile, validateGifFile, activeTab]);
+
+  // Clear media data when switching media types
+  const clearImageDataByMediaType = useCallback((mediaType) => {
+    if (mediaType === IMAGE) {
+      if (sameContent) {
+        // When sync is enabled, clear both platforms
+        setImageSrc({
+          androidImageSrc: "",
+          iosImageSrc: "",
+        });
+      } else {
+        // When sync is disabled, only clear the current platform
+        const platform = activeTab === ANDROID ? 'androidImageSrc' : 'iosImageSrc';
+        setImageSrc((prevState) => ({
+          ...prevState,
+          [platform]: "",
+        }));
+      }
+    } else if (mediaType === VIDEO || mediaType === GIF) {
+      if (sameContent) {
+        // When sync is enabled, clear both platforms
+        setVideoState({
+          androidVideoSrc: "",
+          iosVideoSrc: "",
+          androidVideoPreview: "",
+          iosVideoPreview: "",
+          androidVideoDuration: 0,
+          iosVideoDuration: 0,
+        });
+
+        // Clear video data from both platform contents
+        const clearVideoData = {
+          videoSrc: "",
+          videoPreview: "",
+          videoDuration: 0,
+        };
+        setAndroidContent((prevContent) => ({
+          ...prevContent,
+          ...clearVideoData,
+        }));
+        setIosContent((prevContent) => ({
+          ...prevContent,
+          ...clearVideoData,
+        }));
+
+        // Clear Redux uploadedAssetData for both platforms
+        mobilePushActions.clearAsset(0);
+        mobilePushActions.clearAsset(1);
+      } else {
+        // When sync is disabled, only clear the current platform
+        const platformIndex = activeTab === ANDROID ? 0 : 1;
+        const isAndroid = activeTab === ANDROID;
+        const videoProps = getVideoProperties(isAndroid);
+
+        setVideoState((prevState) => ({
+          ...prevState,
+          [videoProps.videoSrc]: "",
+          [videoProps.videoPreview]: "",
+          [videoProps.videoDuration]: 0,
+        }));
+
+        // Clear video data from current platform content only
+        const clearVideoData = {
+          videoSrc: "",
+          videoPreview: "",
+          videoDuration: 0,
+        };
+        if (isAndroid) {
+          setAndroidContent((prevContent) => ({
+            ...prevContent,
+            ...clearVideoData,
+          }));
+        } else {
+          setIosContent((prevContent) => ({
+            ...prevContent,
+            ...clearVideoData,
+          }));
+        }
+
+        // Clear Redux uploadedAssetData for current platform only
+        mobilePushActions.clearAsset(platformIndex);
+      }
+    }
+  }, [setVideoState, mobilePushActions, sameContent, activeTab, setAndroidContent, setIosContent]);
+
+  useEffect(() => {
+    if (sameContent) {
+      // When sync is enabled, update both platforms with the same image
+      const sharedImageSrc = imageSrc?.androidImageSrc || imageSrc?.iosImageSrc;
+      setAndroidContent((prevAndroidContent) => ({
+        ...prevAndroidContent,
+        imageSrc: sharedImageSrc,
+      }));
+      setIosContent((prevIosContent) => ({
+        ...prevIosContent,
+        imageSrc: sharedImageSrc,
+      }));
+    } else {
+      // When sync is disabled, update only the respective platform
+      setAndroidContent((prevAndroidContent) => ({
+        ...prevAndroidContent,
+        imageSrc: imageSrc?.androidImageSrc,
+      }));
+      setIosContent((prevIosContent) => ({
+        ...prevIosContent,
+        imageSrc: imageSrc?.iosImageSrc,
+      }));
+    }
+  }, [imageSrc?.androidImageSrc, imageSrc?.iosImageSrc, sameContent]);
+
+  useEffect(() => {
+    if (sameContent) {
+      // When sync is enabled, update both platforms with the same video
+      const sharedVideoSrc = videoState?.androidVideoSrc || videoState?.iosVideoSrc;
+      const sharedVideoPreview = videoState?.androidVideoPreview || videoState?.iosVideoPreview;
+      const sharedVideoDuration = videoState?.androidVideoDuration || videoState?.iosVideoDuration;
+
+      setAndroidContent((prevAndroidContent) => ({
+        ...prevAndroidContent,
+        videoSrc: sharedVideoSrc,
+        videoPreview: sharedVideoPreview,
+        videoDuration: sharedVideoDuration,
+      }));
+      setIosContent((prevIosContent) => ({
+        ...prevIosContent,
+        videoSrc: sharedVideoSrc,
+        videoPreview: sharedVideoPreview,
+        videoDuration: sharedVideoDuration,
+      }));
+    } else {
+      // When sync is disabled, update only the respective platform
+      setAndroidContent((prevAndroidContent) => ({
+        ...prevAndroidContent,
+        videoSrc: videoState?.androidVideoSrc,
+        videoPreview: videoState?.androidVideoPreview,
+        videoDuration: videoState?.androidVideoDuration,
+      }));
+      setIosContent((prevIosContent) => ({
+        ...prevIosContent,
+        videoSrc: videoState?.iosVideoSrc,
+        videoPreview: videoState?.iosVideoPreview,
+        videoDuration: videoState?.iosVideoDuration,
+      }));
+    }
+  }, [videoState?.androidVideoSrc, videoState?.iosVideoSrc, videoState?.androidVideoPreview, videoState?.iosVideoPreview, videoState?.androidVideoDuration, videoState?.iosVideoDuration, sameContent]);
+
+  // Sync imageSrc state for both platforms when sameContent is toggled ON
+  useEffect(() => {
+    if (sameContent) {
+      // Determine which image to use (prefer activeTab, fallback to either)
+      let currentImageSrc = '';
+      if (activeTab === ANDROID) {
+        currentImageSrc = imageSrc?.androidImageSrc || imageSrc?.iosImageSrc;
+      } else {
+        currentImageSrc = imageSrc?.iosImageSrc || imageSrc?.androidImageSrc;
+      }
+      if (currentImageSrc && (imageSrc?.androidImageSrc !== currentImageSrc || imageSrc?.iosImageSrc !== currentImageSrc)) {
+        setImageSrc({
+          androidImageSrc: currentImageSrc,
+          iosImageSrc: currentImageSrc,
+        });
+      }
+    }
+    // Only run when sameContent or activeTab changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sameContent, activeTab]);
+
+  // Sync videoState for both platforms when sameContent is toggled ON
+  useEffect(() => {
+    if (sameContent) {
+      // Determine which video to use (prefer activeTab, fallback to either)
+      let currentVideoSrc = '';
+      let currentVideoPreview = '';
+      let currentVideoDuration = 0;
+      if (activeTab === ANDROID) {
+        currentVideoSrc = videoState?.androidVideoSrc || videoState?.iosVideoSrc;
+        currentVideoPreview = videoState?.androidVideoPreview || videoState?.iosVideoPreview;
+        currentVideoDuration = videoState?.androidVideoDuration || videoState?.iosVideoDuration;
+      } else {
+        currentVideoSrc = videoState?.iosVideoSrc || videoState?.androidVideoSrc;
+        currentVideoPreview = videoState?.iosVideoPreview || videoState?.androidVideoPreview;
+        currentVideoDuration = videoState?.iosVideoDuration || videoState?.androidVideoDuration;
+      }
+      if (
+        currentVideoSrc && (
+          videoState?.androidVideoSrc !== currentVideoSrc
+          || videoState?.iosVideoSrc !== currentVideoSrc
+          || videoState?.androidVideoPreview !== currentVideoPreview
+          || videoState?.iosVideoPreview !== currentVideoPreview
+          || videoState?.androidVideoDuration !== currentVideoDuration
+          || videoState?.iosVideoDuration !== currentVideoDuration
+        )
+      ) {
+        setVideoState({
+          androidVideoSrc: currentVideoSrc,
+          iosVideoSrc: currentVideoSrc,
+          androidVideoPreview: currentVideoPreview,
+          iosVideoPreview: currentVideoPreview,
+          androidVideoDuration: currentVideoDuration,
+          iosVideoDuration: currentVideoDuration,
+        });
+      }
+    }
+    // Only run when sameContent or activeTab changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sameContent, activeTab]);
+
+  // Image upload handlers
+  const updateOnMpushImageReUpload = useCallback(() => {
+    if (sameContent) {
+      // When sync is enabled, set image for both platforms
+      setImageSrc({
+        androidImageSrc: "",
+        iosImageSrc: "",
+      });
+    } else {
+      const platform = activeTab === ANDROID ? 'androidImageSrc' : 'iosImageSrc';
+      setImageSrc((prevState) => ({
+        ...prevState,
+        [platform]: "",
+      }));
+    }
+  }, [sameContent, activeTab]);
+
+  const setUpdateMpushImageSrc = useCallback((filePath, index, mediaType = IMAGE) => {
+    // Handle both non-carousel and carousel media types
+    if (mediaType === CAROUSEL) {
+      // For carousel images, we need to set them in the Redux state for the uploader to recognize
+      // This is needed when initializing carousel images from template data
+      if (sameContent) {
+        // When sync is enabled, set image for both platforms
+        setImageSrc({
+          androidImageSrc: filePath,
+          iosImageSrc: filePath,
+        });
+      } else {
+        // When sync is disabled, set only for the specific platform using the passed index
+        const platform = index === 0 ? 'androidImageSrc' : 'iosImageSrc';
+        setImageSrc((prevState) => ({
+          ...prevState,
+          [platform]: filePath,
+        }));
+      }
+      // Don't clear assets for carousel initialization
+      return;
+    }
+
+    if (sameContent) {
+      // When sync is enabled, set image for both platforms
+      setImageSrc({
+        androidImageSrc: filePath,
+        iosImageSrc: filePath,
+      });
+    } else {
+      // When sync is disabled, set only for the specific platform using the passed index
+      const platform = index === 0 ? 'androidImageSrc' : 'iosImageSrc';
+      setImageSrc((prevState) => ({
+        ...prevState,
+        [platform]: filePath,
+      }));
+    }
+
+    mobilePushActions.clearAsset(index);
+  }, [mobilePushActions, sameContent, setImageSrc]);
+
+  // Video re-upload handler - clear video data based on platform and sync settings
+  const updateOnMpushVideoReUpload = useCallback(() => {
+    // Clear shared video preview state (kept for backward compatibility)
+    setMpushVideoSrcAndPreview({
+      mpushVideoSrc: "",
+      mpushVideoPreviewImg: "",
+      duration: 0,
+    });
+
+    // Clear asset list to remove uploaded video data
+    updateAndroidAssetListPatched([]);
+    updateIosAssetListPatched([]);
+
+    // Clear platform-specific video data
+    if (sameContent) {
+      // When sync is enabled, clear both platforms
+      setVideoState({
+        androidVideoSrc: "",
+        iosVideoSrc: "",
+        androidVideoPreview: "",
+        iosVideoPreview: "",
+        androidVideoDuration: 0,
+        iosVideoDuration: 0,
+      });
+
+      // Clear Redux uploadedAssetData for both platforms
+      mobilePushActions.clearAsset(0);
+      mobilePushActions.clearAsset(1);
+    } else {
+      // When sync is disabled, only clear the current platform
+      const platformIndex = activeTab === ANDROID ? 0 : 1;
+      const isAndroid = activeTab === ANDROID;
+
+      setVideoState((prevState) => ({
+        ...prevState,
+        [isAndroid ? 'androidVideoSrc' : 'iosVideoSrc']: "",
+        [isAndroid ? 'androidVideoPreview' : 'iosVideoPreview']: "",
+        [isAndroid ? 'androidVideoDuration' : 'iosVideoDuration']: 0,
+      }));
+
+      // Clear Redux uploadedAssetData for current platform only
+      mobilePushActions.clearAsset(platformIndex);
+    }
+  }, [setVideoState, mobilePushActions, sameContent, activeTab]);
+
+  // Video upload handlers - platform-specific video/GIF uploads
+  const setUpdateMpushVideoSrc = useCallback((index, data, isInitialization = false) => {
+    const {
+      videoSrc = "", previewUrl = "", videoDuration = 0, videoName = "", fileHandle = "",
+    } = data;
+
+    // Update the shared video preview state (kept for backward compatibility)
+    setMpushVideoSrcAndPreview({
+      mpushVideoSrc: videoSrc,
+      mpushVideoPreviewImg: previewUrl,
+      duration: videoDuration,
+    });
+
+    // Update platform-specific video state
+    if (sameContent) {
+      // When sync is enabled, set video for both platforms (for GIF or VIDEO)
+      setVideoState({
+        androidVideoSrc: videoSrc,
+        iosVideoSrc: videoSrc,
+        androidVideoPreview: previewUrl,
+        iosVideoPreview: previewUrl,
+        androidVideoDuration: videoDuration,
+        iosVideoDuration: videoDuration,
+      });
+    } else {
+      // When sync is disabled, set only for the specific platform using the passed index
+      const isAndroid = index === 0;
+      const videoProps = getVideoProperties(isAndroid);
+
+      setVideoState((prevState) => ({
+        ...prevState,
+        [videoProps.videoSrc]: videoSrc,
+        [videoProps.videoPreview]: previewUrl,
+        [videoProps.videoDuration]: videoDuration,
+      }));
+    }
+
+    // Update asset list with complete data
+    const assetData = {
+      videoSrc,
+      previewUrl,
+      videoDuration,
+      videoName,
+      fileHandle,
+      ...data, // Include any additional data passed
+    };
+    if (sameContent) {
+      updateAndroidAssetListPatched(assetData);
+      updateIosAssetListPatched(assetData);
+    } else if (index === 0) {
+      updateAndroidAssetListPatched(assetData);
+    } else {
+      updateIosAssetListPatched(assetData);
+    }
+
+    // Only clear Redux asset data during actual uploads, not during initialization
+    if (!isInitialization) {
+      mobilePushActions.clearAsset(index);
+    }
+  }, [mobilePushActions, sameContent]);
+
+  // Get CDN URL for images/videos
+  const getCdnImageUrl = useCallback((imageUrl) => {
+    if (!imageUrl) return "";
+    return getCdnUrl({
+      url: imageUrl,
+      channelName: MOBILE_PUSH_CHANNEL,
+    });
+  }, []);
+
+  const getCdnVideoUrl = useCallback((videoUrl) => {
+    if (!videoUrl) return "";
+    return getCdnUrl({
+      url: videoUrl,
+      channelName: MOBILE_PUSH_CHANNEL,
+    });
+  }, []);
+
+  // Generate payload for API calls
+  const getMediaPayload = useCallback((mediaType, tabParam) => {
+    const currentImageSrc = tabParam === ANDROID ? imageSrc?.androidImageSrc : imageSrc?.iosImageSrc;
+    const videoProps = getVideoProperties(tabParam === ANDROID);
+    const currentVideoSrc = videoState?.[videoProps.videoSrc];
+    const currentVideoPreview = videoState?.[videoProps.videoPreview];
+    const currentVideoDuration = videoState?.[videoProps.videoDuration];
+
+    switch (mediaType) {
+      case IMAGE:
+        return currentImageSrc ? {
+          imageUrl: getCdnImageUrl(currentImageSrc),
+        } : {};
+
+      case VIDEO:
+        return currentVideoSrc ? {
+          videoUrl: getCdnVideoUrl(currentVideoSrc),
+          videoPreviewImg: currentVideoPreview
+            ? getCdnImageUrl(currentVideoPreview) : "",
+          duration: currentVideoDuration,
+        } : {};
+
+      case GIF:
+        return currentVideoSrc ? {
+          gifUrl: getCdnVideoUrl(currentVideoSrc),
+          gifPreviewImg: currentVideoPreview
+            ? getCdnImageUrl(currentVideoPreview) : "",
+        } : {};
+
+      default:
+        return {};
+    }
+  }, [imageSrc, videoState, getCdnImageUrl, getCdnVideoUrl]);
+
+  // Generate preview data for template preview component
+  const getPreviewData = useCallback((mediaType, tabParam) => {
+    const currentImageSrc = tabParam === ANDROID ? imageSrc?.androidImageSrc : imageSrc?.iosImageSrc;
+    const videoProps = getVideoProperties(tabParam === ANDROID);
+    const currentVideoSrc = videoState?.[videoProps.videoSrc];
+    const currentVideoPreview = videoState?.[videoProps.videoPreview];
+    const currentVideoDuration = videoState?.[videoProps.videoDuration];
+
+    switch (mediaType) {
+      case IMAGE:
+        return {
+          imageSrc: currentImageSrc,
+        };
+
+      case VIDEO:
+        return {
+          videoSrc: currentVideoSrc,
+          videoPreviewImg: currentVideoPreview,
+          duration: currentVideoDuration,
+        };
+
+      case GIF:
+        return {
+          gifSrc: currentVideoSrc,
+          gifPreviewImg: currentVideoPreview,
+        };
+
+      default:
+        return {};
+    }
+  }, [imageSrc, videoState]);
+
+  // Check if media is uploaded for validation
+  const isMediaUploaded = useCallback((mediaType, tabParam) => {
+    switch (mediaType) {
+      case IMAGE: {
+        const currentImageSrc = tabParam === ANDROID ? imageSrc?.androidImageSrc : imageSrc?.iosImageSrc;
+        return !!currentImageSrc;
+      }
+
+      case VIDEO:
+      case GIF: {
+        const currentVideoSrc = tabParam === ANDROID ? videoState?.androidVideoSrc : videoState?.iosVideoSrc;
+        return !!currentVideoSrc;
+      }
+
+      default:
+        return true; // For TEXT or NONE media types
+    }
+  }, [imageSrc, videoState]);
+
+  // Reset function to clear all upload states
+  const resetUploadStates = useCallback(() => {
+    setImageSrc({
+      androidImageSrc: "",
+      iosImageSrc: "",
+    });
+    setMpushVideoSrcAndPreview({
+      mpushVideoSrc: "",
+      mpushVideoPreviewImg: "",
+      duration: 0,
+    });
+    setVideoState({
+      androidVideoSrc: "",
+      iosVideoSrc: "",
+      androidVideoPreview: "",
+      iosVideoPreview: "",
+      androidVideoDuration: 0,
+      iosVideoDuration: 0,
+    });
+    updateAndroidAssetListPatched([]);
+    updateIosAssetListPatched([]);
+  }, []);
+
+  // Initialize from edit data
+  useEffect(() => {
+    if (editData?.templateDetails) {
+      const { versions = {} } = editData.templateDetails;
+      const editContent = versions?.base?.content || {};
+
+      if (editContent.ANDROID) {
+        const { expandableDetails = {} } = editContent.ANDROID;
+        if (expandableDetails.image) {
+          setImageSrc((prev) => ({
+            ...prev,
+            androidImageSrc: expandableDetails.image,
+          }));
+        }
+        if (expandableDetails.video) {
+          // Update shared state for backward compatibility
+          setMpushVideoSrcAndPreview((prev) => ({
+            ...prev,
+            mpushVideoSrc: expandableDetails.video,
+            mpushVideoPreviewImg: expandableDetails.videoPreview || "",
+          }));
+
+          // Update platform-specific video state
+          setVideoState((prev) => ({
+            ...prev,
+            androidVideoSrc: expandableDetails.video,
+            androidVideoPreview: expandableDetails.videoPreview || "",
+            androidVideoDuration: expandableDetails.videoDuration || 0,
+          }));
+        }
+      }
+
+      if (editContent.IOS) {
+        const { expandableDetails = {} } = editContent.IOS;
+        if (expandableDetails.image) {
+          setImageSrc((prev) => ({
+            ...prev,
+            iosImageSrc: expandableDetails.image,
+          }));
+        }
+        if (expandableDetails.video) {
+          // Update platform-specific video state for iOS
+          setVideoState((prev) => ({
+            ...prev,
+            iosVideoSrc: expandableDetails.video,
+            iosVideoPreview: expandableDetails.videoPreview || "",
+            iosVideoDuration: expandableDetails.videoDuration || 0,
+          }));
+        }
+      }
+    }
+  }, [editData]);
+
+  return {
+    // States
+    androidAssetList,
+    iosAssetList,
+    mpushVideoSrcAndPreview,
+    imageSrc,
+    videoState,
+    uploadErrors,
+    assetList, // Expose for test assertions
+
+    // Functions
+    uploadMpushAsset,
+    updateOnMpushImageReUpload,
+    updateOnMpushVideoReUpload,
+    setUpdateMpushImageSrc,
+    setUpdateMpushVideoSrc,
+    resetUploadStates,
+    clearImageDataByMediaType,
+
+    // Validation functions
+    validateImageFile,
+    validateVideoFile,
+    validateGifFile,
+
+    // Utility functions
+    getMediaPayload,
+    getPreviewData,
+    isMediaUploaded,
+    getCdnImageUrl,
+    getCdnVideoUrl,
+
+    // State setters (for direct manipulation if needed)
+    updateAndroidAssetList,
+    updateIosAssetList,
+    setMpushVideoSrcAndPreview,
+    setImageSrc,
+    setVideoState,
+    setUploadErrors,
+  };
+};
+
+export default useUpload;