react-native-custom-ota 1.0.1 → 1.0.3

package/lib/module/ProgressModal.js

@@ -0,0 +1,155 @@
+import React from "react";
+import { Modal, StyleSheet, Text, View, ActivityIndicator } from "react-native";
+export function formatBytes(bytes, decimals = 1) {
+    if (!bytes || bytes <= 0)
+        return "0 B";
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+export const OTAProgressModal = ({ visible, progress, title = "Cập nhật ứng dụng", statusText = "Đang tải bản cập nhật...", version }) => {
+    // Chuẩn hóa dữ liệu tiến độ
+    let percent = 0;
+    let receivedBytes = 0;
+    let totalBytes = 0;
+    if (typeof progress === "number") {
+        percent = Math.min(100, Math.max(0, Math.round(progress * 100)));
+    }
+    else if (progress && typeof progress === "object") {
+        percent = Math.min(100, Math.max(0, Math.round(progress.percentage || 0)));
+        receivedBytes = progress.receivedBytes || 0;
+        totalBytes = progress.totalBytes || 0;
+    }
+    const bytesInfo = totalBytes > 0
+        ? `${formatBytes(receivedBytes)} / ${formatBytes(totalBytes)}`
+        : "";
+    return (React.createElement(Modal, { transparent: true, animationType: "fade", visible: visible, statusBarTranslucent: true },
+        React.createElement(View, { style: styles.overlay },
+            React.createElement(View, { style: styles.card },
+                React.createElement(View, { style: styles.header },
+                    React.createElement(View, { style: styles.iconContainer },
+                        React.createElement(Text, { style: styles.iconText }, "\u26A1")),
+                    React.createElement(View, { style: styles.headerTextContainer },
+                        React.createElement(Text, { style: styles.title }, title),
+                        version ? (React.createElement(Text, { style: styles.versionBadge },
+                            "Phi\u00EAn b\u1EA3n v",
+                            version)) : null)),
+                React.createElement(Text, { style: styles.statusText }, statusText),
+                React.createElement(View, { style: styles.progressBarTrack },
+                    React.createElement(View, { style: [styles.progressBarFill, { width: `${percent}%` }] })),
+                React.createElement(View, { style: styles.detailsRow },
+                    React.createElement(Text, { style: styles.percentageText },
+                        percent,
+                        "%"),
+                    bytesInfo ? (React.createElement(Text, { style: styles.bytesText }, bytesInfo)) : null),
+                React.createElement(View, { style: styles.footer },
+                    React.createElement(ActivityIndicator, { size: "small", color: "#38bdf8", style: { marginRight: 8 } }),
+                    React.createElement(Text, { style: styles.footerText }, "Vui l\u00F2ng kh\u00F4ng \u0111\u00F3ng \u1EE9ng d\u1EE5ng..."))))));
+};
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.72)",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 24
+    },
+    card: {
+        width: "100%",
+        maxWidth: 380,
+        backgroundColor: "#0f172a",
+        borderRadius: 20,
+        padding: 24,
+        borderWidth: 1,
+        borderColor: "rgba(255, 255, 255, 0.12)",
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 12 },
+        shadowOpacity: 0.5,
+        shadowRadius: 20,
+        elevation: 16
+    },
+    header: {
+        flexDirection: "row",
+        alignItems: "center",
+        marginBottom: 16
+    },
+    iconContainer: {
+        width: 44,
+        height: 44,
+        borderRadius: 12,
+        backgroundColor: "rgba(56, 189, 248, 0.15)",
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: 14,
+        borderWidth: 1,
+        borderColor: "rgba(56, 189, 248, 0.3)"
+    },
+    iconText: {
+        fontSize: 22
+    },
+    headerTextContainer: {
+        flex: 1
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: "700",
+        color: "#f8fafc",
+        letterSpacing: 0.2
+    },
+    versionBadge: {
+        fontSize: 12,
+        color: "#38bdf8",
+        fontWeight: "600",
+        marginTop: 2
+    },
+    statusText: {
+        fontSize: 14,
+        color: "#94a3b8",
+        marginBottom: 16,
+        lineHeight: 20
+    },
+    progressBarTrack: {
+        height: 10,
+        backgroundColor: "rgba(255, 255, 255, 0.08)",
+        borderRadius: 999,
+        overflow: "hidden",
+        marginBottom: 10
+    },
+    progressBarFill: {
+        height: "100%",
+        backgroundColor: "#38bdf8",
+        borderRadius: 999
+    },
+    detailsRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: 20
+    },
+    percentageText: {
+        fontSize: 16,
+        fontWeight: "800",
+        color: "#38bdf8"
+    },
+    bytesText: {
+        fontSize: 13,
+        color: "#64748b",
+        fontWeight: "500"
+    },
+    footer: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingTop: 12,
+        borderTopWidth: 1,
+        borderTopColor: "rgba(255, 255, 255, 0.06)"
+    },
+    footerText: {
+        fontSize: 12,
+        color: "#64748b",
+        fontWeight: "500"
+    }
+});
+export default OTAProgressModal;

package/lib/module/hoc.js

@@ -1,11 +1,40 @@
-import React, { useEffect } from "react";
-import { AppState } from "react-native";
+import React, { useEffect, useState } from "react";
+import { AppState, View } from "react-native";
 import { CustomOTAManager } from "./manager";
-import { CheckFrequency } from "./types";
+import { CheckFrequency, DetailedStatus } from "./types";
+import { OTAProgressModal } from "./ProgressModal";
 export function withCustomOTA(options) {
     return function (WrappedComponent) {
         return function CustomOTAWrapper(props) {
+            const [isDownloading, setIsDownloading] = useState(false);
+            const [progress, setProgress] = useState({
+                totalBytes: 0,
+                receivedBytes: 0,
+                percentage: 0,
+                progress: 0
+            });
+            const [statusText, setStatusText] = useState("Đang tải bản cập nhật...");
             useEffect(() => {
+                let removeProg;
+                let removeStatus;
+                if (options.showProgressModal) {
+                    removeProg = CustomOTAManager.addProgressListener((p) => {
+                        setProgress(p);
+                        setIsDownloading(true);
+                    });
+                    removeStatus = CustomOTAManager.addDetailedStatusListener((s, msg) => {
+                        if (msg)
+                            setStatusText(msg);
+                        if (s === DetailedStatus.DOWNLOADING ||
+                            s === DetailedStatus.VERIFYING ||
+                            s === DetailedStatus.INSTALLING) {
+                            setIsDownloading(true);
+                        }
+                        else if (s === DetailedStatus.COMPLETED || s === DetailedStatus.ERROR) {
+                            setIsDownloading(false);
+                        }
+                    });
+                }
                 // Tự động kiểm tra cập nhật khi app khởi động
                 if (options.checkFrequency !== CheckFrequency.MANUAL) {
                     CustomOTAManager.sync(options);
@@ -19,10 +48,19 @@ export function withCustomOTA(options) {
                     });
                     return () => {
                         subscription.remove();
+                        removeProg?.();
+                        removeStatus?.();
                     };
                 }
+                return () => {
+                    removeProg?.();
+                    removeStatus?.();
+                };
             }, []);
-            return React.createElement(WrappedComponent, { ...props });
+            return (React.createElement(View, { style: { flex: 1 } },
+                React.createElement(WrappedComponent, { ...props }),
+                options.showProgressModal && (React.createElement(OTAProgressModal, { visible: isDownloading, progress: progress, statusText: statusText }))));
         };
     };
 }
+export default withCustomOTA;

package/lib/module/index.js

@@ -1,9 +1,13 @@
 import { CustomOTAManager } from "./manager";
 import { withCustomOTA } from "./hoc";
+import { OTAProgressModal } from "./ProgressModal";
+import { useCustomOTA } from "./useCustomOTA";
 export * from "./types";
 export * from "./manager";
 export * from "./hoc";
 export * from "./storage";
+export * from "./ProgressModal";
+export * from "./useCustomOTA";
 const CustomOTA = {
     sync: CustomOTAManager.sync.bind(CustomOTAManager),
     checkForUpdate: CustomOTAManager.checkForUpdate.bind(CustomOTAManager),
@@ -11,6 +15,10 @@ const CustomOTA = {
     restartApp: CustomOTAManager.restartApp.bind(CustomOTAManager),
     getUpdateMetadata: CustomOTAManager.getUpdateMetadata.bind(CustomOTAManager),
     markReady: CustomOTAManager.markReady.bind(CustomOTAManager),
-    wrap: withCustomOTA
+    addProgressListener: CustomOTAManager.addProgressListener.bind(CustomOTAManager),
+    addDetailedStatusListener: CustomOTAManager.addDetailedStatusListener.bind(CustomOTAManager),
+    wrap: withCustomOTA,
+    ProgressModal: OTAProgressModal,
+    useCustomOTA: useCustomOTA
 };
 export default CustomOTA;

package/lib/module/manager.js

@@ -2,8 +2,48 @@ import { Alert, Platform } from "react-native";
 import RNFS from "react-native-fs";
 import { OTAUpdater } from "./native";
 import { BACKUP_DIR, CURRENT_DIR, TEMP_DIR, ensureOTADirs, readState, writeState } from "./storage";
-import { InstallMode, SyncStatus } from "./types";
+import { InstallMode, SyncStatus, DetailedStatus } from "./types";
 export class CustomOTAManager {
+    /**
+     * Đăng ký lắng nghe tiến độ tải về toàn cục
+     * @returns Hàm hủy đăng ký (unsubscribe)
+     */
+    static addProgressListener(listener) {
+        this.progressListeners.add(listener);
+        return () => {
+            this.progressListeners.delete(listener);
+        };
+    }
+    /**
+     * Đăng ký lắng nghe trạng thái chi tiết của quá trình OTA
+     * @returns Hàm hủy đăng ký (unsubscribe)
+     */
+    static addDetailedStatusListener(listener) {
+        this.detailedStatusListeners.add(listener);
+        return () => {
+            this.detailedStatusListeners.delete(listener);
+        };
+    }
+    static emitProgress(progress) {
+        for (const listener of this.progressListeners) {
+            try {
+                listener(progress);
+            }
+            catch (e) {
+                console.warn("[CustomOTA] Error in progress listener:", e);
+            }
+        }
+    }
+    static emitDetailedStatus(status, message) {
+        for (const listener of this.detailedStatusListeners) {
+            try {
+                listener(status, message);
+            }
+            catch (e) {
+                console.warn("[CustomOTA] Error in detailed status listener:", e);
+            }
+        }
+    }
     /**
      * Đánh dấu bản build OTA hiện tại đã khởi động thành công.
      * Xóa bản backup trước đó và tắt cờ pending.
@@ -43,7 +83,7 @@ export class CustomOTAManager {
         return readState();
     }
     /**
-     * Kiểm tra xem server có bản cập nhật mới hay không.
+     * Kiểm tra xem có bản cập nhật mới từ OTA Server hay không.
      */
     static async checkForUpdate(options) {
         await ensureOTADirs();
@@ -103,7 +143,7 @@ export class CustomOTAManager {
         return data;
     }
     /**
-     * Tải và cài đặt bản cập nhật.
+     * Tải và cài đặt bản cập nhật với theo dõi tiến độ chi tiết.
      */
     static async downloadAndInstall(update, onProgress, installMode) {
         const version = update.otaVersion || update.version;
@@ -115,30 +155,51 @@ export class CustomOTAManager {
             ].filter(Boolean).join(", ");
             throw new Error(`Invalid update package metadata: missing ${missingFields}`);
         }
+        this.emitDetailedStatus(DetailedStatus.DOWNLOADING, `Bắt đầu tải bản cập nhật v${version}...`);
         const zipPath = `${TEMP_DIR}/update-${version}.zip`;
         await RNFS.unlink(zipPath).catch(() => { });
-        // Download zip file
+        // Download zip file với theo dõi byte chính xác
         const downloadRes = RNFS.downloadFile({
             fromUrl: update.downloadUrl.startsWith("http") ? update.downloadUrl : `${update.downloadUrl}`,
             toFile: zipPath,
             progressDivider: 1,
             progress: ({ bytesWritten, contentLength }) => {
-                if (contentLength > 0 && onProgress) {
-                    onProgress(bytesWritten / contentLength);
+                const total = contentLength > 0 ? contentLength : (update.size || 0);
+                const percent = total > 0 ? Math.min(100, Math.round((bytesWritten / total) * 100)) : 0;
+                const progressVal = total > 0 ? Math.min(1, bytesWritten / total) : 0;
+                const progressObj = {
+                    totalBytes: total,
+                    receivedBytes: bytesWritten,
+                    percentage: percent,
+                    progress: progressVal
+                };
+                if (onProgress) {
+                    // Callback nhận cả object lẫn hỗ trợ kiểu cũ nhận số
+                    try {
+                        onProgress(progressObj, progressVal);
+                    }
+                    catch {
+                        onProgress(progressVal);
+                    }
                 }
+                this.emitProgress(progressObj);
             }
         });
         const res = await downloadRes.promise;
         if (res.statusCode < 200 || res.statusCode >= 300) {
+            this.emitDetailedStatus(DetailedStatus.ERROR, `Tải thất bại với mã lỗi HTTP ${res.statusCode}`);
             throw new Error(`Download failed with status ${res.statusCode}`);
         }
         // SHA-256 verification
+        this.emitDetailedStatus(DetailedStatus.VERIFYING, "Đang kiểm tra tính toàn vẹn (SHA-256)...");
         const actualHash = await RNFS.hash(zipPath, "sha256");
         if (actualHash.toLowerCase() !== update.sha256.toLowerCase()) {
             await RNFS.unlink(zipPath).catch(() => { });
+            this.emitDetailedStatus(DetailedStatus.ERROR, "Mã băm SHA-256 không trùng khớp!");
             throw new Error(`SHA-256 Checksum mismatch! Expected ${update.sha256}, got ${actualHash}`);
         }
         // Unpack temp directory
+        this.emitDetailedStatus(DetailedStatus.INSTALLING, "Đang giải nén và nạp gói cập nhật...");
         const tempDir = `${TEMP_DIR}/${version}`;
         await RNFS.unlink(tempDir).catch(() => { });
         await RNFS.mkdir(tempDir);
@@ -165,6 +226,7 @@ export class CustomOTAManager {
             failedVersions: oldState.failedVersions || []
         });
         await RNFS.unlink(zipPath).catch(() => { });
+        this.emitDetailedStatus(DetailedStatus.COMPLETED, `Đã cài đặt bản cập nhật v${version} thành công!`);
         if (installMode === InstallMode.IMMEDIATE) {
             await this.restartApp();
         }
@@ -251,5 +313,8 @@ CustomOTAManager.defaultDialog = {
     optionalUpdateMessage: "Đã có bản cập nhật ứng dụng mới. Bạn có muốn cài đặt ngay bây giờ?",
     mandatoryUpdateMessage: "Đã có bản cập nhật bắt buộc. Vui lòng cài đặt để tiếp tục sử dụng.",
     optionalInstallButtonLabel: "Cập nhật",
-    optionalIgnoreButtonLabel: "Để sau"
+    optionalIgnoreButtonLabel: "Để sau",
+    showProgressModal: true
 };
+CustomOTAManager.progressListeners = new Set();
+CustomOTAManager.detailedStatusListeners = new Set();

package/lib/module/types.js

@@ -7,6 +7,17 @@ export var SyncStatus;
     SyncStatus[SyncStatus["UPDATE_INSTALLED"] = 4] = "UPDATE_INSTALLED";
     SyncStatus[SyncStatus["ERROR"] = -1] = "ERROR";
 })(SyncStatus || (SyncStatus = {}));
+export var DetailedStatus;
+(function (DetailedStatus) {
+    DetailedStatus["IDLE"] = "IDLE";
+    DetailedStatus["CHECKING"] = "CHECKING";
+    DetailedStatus["UPDATE_AVAILABLE"] = "UPDATE_AVAILABLE";
+    DetailedStatus["DOWNLOADING"] = "DOWNLOADING";
+    DetailedStatus["VERIFYING"] = "VERIFYING";
+    DetailedStatus["INSTALLING"] = "INSTALLING";
+    DetailedStatus["COMPLETED"] = "COMPLETED";
+    DetailedStatus["ERROR"] = "ERROR";
+})(DetailedStatus || (DetailedStatus = {}));
 export var CheckFrequency;
 (function (CheckFrequency) {
     CheckFrequency["ON_APP_START"] = "ON_APP_START";

package/lib/module/useCustomOTA.js

@@ -0,0 +1,116 @@
+import { useEffect, useState, useCallback } from "react";
+import { CustomOTAManager } from "./manager";
+import { SyncStatus, DetailedStatus } from "./types";
+export function useCustomOTA() {
+    const [isChecking, setIsChecking] = useState(false);
+    const [isDownloading, setIsDownloading] = useState(false);
+    const [progress, setProgress] = useState({
+        totalBytes: 0,
+        receivedBytes: 0,
+        percentage: 0,
+        progress: 0
+    });
+    const [syncStatus, setSyncStatus] = useState(SyncStatus.UP_TO_DATE);
+    const [detailedStatus, setDetailedStatus] = useState(DetailedStatus.IDLE);
+    const [statusText, setStatusText] = useState("");
+    const [activeMetadata, setActiveMetadata] = useState(null);
+    const refreshMetadata = useCallback(async () => {
+        try {
+            const meta = await CustomOTAManager.getUpdateMetadata();
+            setActiveMetadata(meta);
+            return meta;
+        }
+        catch {
+            return {
+                currentVersion: "0.0.0",
+                previousVersion: null,
+                pending: false,
+                ready: true,
+                failedVersions: []
+            };
+        }
+    }, []);
+    useEffect(() => {
+        refreshMetadata();
+        // Đăng ký nhận sự kiện tiến độ toàn cục
+        const removeProgressListener = CustomOTAManager.addProgressListener((prog) => {
+            setProgress(prog);
+            setIsDownloading(true);
+            setDetailedStatus(DetailedStatus.DOWNLOADING);
+            setStatusText(`Đang tải bản cập nhật: ${prog.percentage}%`);
+        });
+        const removeStatusListener = CustomOTAManager.addDetailedStatusListener((status, msg) => {
+            setDetailedStatus(status);
+            if (msg)
+                setStatusText(msg);
+            if (status === DetailedStatus.DOWNLOADING) {
+                setIsDownloading(true);
+            }
+            else if (status === DetailedStatus.COMPLETED || status === DetailedStatus.ERROR) {
+                setIsDownloading(false);
+                refreshMetadata();
+            }
+        });
+        return () => {
+            removeProgressListener();
+            removeStatusListener();
+        };
+    }, [refreshMetadata]);
+    const checkForUpdate = useCallback(async (options) => {
+        setIsChecking(true);
+        setDetailedStatus(DetailedStatus.CHECKING);
+        setStatusText("Đang kiểm tra phiên bản mới...");
+        try {
+            const update = await CustomOTAManager.checkForUpdate(options);
+            if (update && update.updateAvailable) {
+                setDetailedStatus(DetailedStatus.UPDATE_AVAILABLE);
+                setStatusText(`Tìm thấy bản cập nhật mới v${update.otaVersion}`);
+            }
+            else {
+                setDetailedStatus(DetailedStatus.IDLE);
+                setStatusText("Ứng dụng đang ở phiên bản mới nhất");
+            }
+            return update;
+        }
+        catch (err) {
+            setDetailedStatus(DetailedStatus.ERROR);
+            setStatusText(err.message || "Lỗi khi kiểm tra cập nhật");
+            throw err;
+        }
+        finally {
+            setIsChecking(false);
+        }
+    }, []);
+    const sync = useCallback(async (options) => {
+        setIsChecking(true);
+        setProgress({ totalBytes: 0, receivedBytes: 0, percentage: 0, progress: 0 });
+        try {
+            const status = await CustomOTAManager.sync(options, (s) => setSyncStatus(s), (prog) => setProgress(prog));
+            setSyncStatus(status);
+            await refreshMetadata();
+            return status;
+        }
+        finally {
+            setIsChecking(false);
+            setIsDownloading(false);
+        }
+    }, [refreshMetadata]);
+    const restartApp = useCallback(async () => {
+        await CustomOTAManager.restartApp();
+    }, []);
+    return {
+        isChecking,
+        isDownloading,
+        progress,
+        syncStatus,
+        detailedStatus,
+        statusText,
+        activeMetadata,
+        activeVersion: activeMetadata?.currentVersion || "0.0.0",
+        checkForUpdate,
+        sync,
+        restartApp,
+        refreshMetadata
+    };
+}
+export default useCustomOTA;

package/lib/typescript/ProgressModal.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { DownloadProgress } from "./types";
+export interface OTAProgressModalProps {
+    /** Trạng thái hiển thị modal */
+    visible: boolean;
+    /** Thông tin tiến độ tải (object hoặc số thập phân 0.0 - 1.0) */
+    progress?: DownloadProgress | number;
+    /** Tiêu đề modal (Mặc định: 'Cập nhật ứng dụng') */
+    title?: string;
+    /** Thông điệp trạng thái hiện tại (vd: 'Đang tải gói cập nhật...') */
+    statusText?: string;
+    /** Phiên bản đang được tải về (vd: '1.0.9') */
+    version?: string;
+}
+export declare function formatBytes(bytes: number, decimals?: number): string;
+export declare const OTAProgressModal: React.FC<OTAProgressModalProps>;
+export default OTAProgressModal;