download assets

src/modules/editor/components/CompUI/basicUI/Image2/component.tsx

@@ -16,7 +16,7 @@ export const Component = defineComponent({
   },
   setup(props) {
     const comp = useCompData<CompImageObj>(props.compId);
-
+   
     const { actions, helper, store, controls } = useEditor();
     const ctx = useCtx();
     function setImageSize(url: string) {
@@ -36,7 +36,7 @@ export const Component = defineComponent({
         helper.extendStreamCard(controls.pageCtrl.currStreamCardId);
       };
     }
-
+    controls.pageCtrl.saveAssetsLocal(comp);
     async function changeVal() {
       try {
         const url = await controls.pickCtrl.pickOneImage();
@@ -66,6 +66,7 @@ export const Component = defineComponent({
       if (ctx.prjCtrl.isLocalUrl(value.url)) {
         value.url = ctx.prjCtrl.getHttpAbsoluteUri(value.url);
       }
+      
       const scale = value.s || 1;
       const ox = value?.x || 0;
       const oy = value?.y || 0;
@@ -112,15 +113,15 @@ export const Component = defineComponent({
             ]}
           >
             <img
-                  crossorigin="anonymous"
-                  class={"w-1/1 h-1/1 object-cover"}
-                  style={styleObj as any}
-                  src={
-                    value.url?.startsWith("data:image/png")
-                      ? value.url
-                      : value.url + "?editMode=" + store.isEditMode
-                  }
-              />
+              crossorigin="anonymous"
+              class={"w-1/1 h-1/1 object-cover"}
+              style={styleObj as any}
+              src={
+                value.url?.startsWith("data:image/png")
+                  ? value.url
+                  : value.url + "?editMode=" + store.isEditMode
+              }
+            />
           </div>
         </View>
       );

src/modules/editor/components/CompUI/basicUI/Video/component.tsx

@@ -28,7 +28,7 @@ export const Component = defineComponent({
         console.log(error);
       }
     }
-
+    controls.pageCtrl.saveAssetsLocal(comp);
     function updateSize() {
       const { videoWidth, videoHeight } = videoRef.value as HTMLVideoElement;
       if (videoHeight == 0 || videoWidth == 0) return;

src/modules/editor/controllers/PageCtrl/index.ts

@@ -59,7 +59,9 @@ export class PageCtrl extends ModuleControl<EditorModule> {
 
   designData = {} as DesignTemp;
   compPids = {} as Record<string, string>;
-
+  saveTimeout = null as any;
+  saveAssets = [] as any;
+  repectAssets = {} as any;
   toJson() {
     const out: any = {
       _id: this.designData._id,
@@ -96,45 +98,89 @@ export class PageCtrl extends ModuleControl<EditorModule> {
   get currStreamCard() {
     return this.compMap[this.state.currStreamCardId];
   }
-
   get streamCardIds(): string[] {
     return this.rootPage?.children.default || [];
   }
 
   async saveAssetsLocal(comp: DesignComp) {
-    const { deviceCtrl, prjCtrl } = useCtx();
+    const { prjCtrl } = useCtx();
     const assetUrl = comp.value.url;
     if (!prjCtrl.isLocalUrl(assetUrl)) {
       const assetsName = assetUrl.replace(/(.*\/)*((\S|\s)+\.*)(\?.*)?/g, "$2");
       const assetKey = assetsName.replace(/\s/g, "");
       const fpath = `queen5/assets/${assetsName}`;
       if (this.store.filesCacheUrl[assetKey]) {
-        comp.value.url = fpath;
+        if (!this.saveTimeout) {
+          set(comp, "value.url", fpath);
+        } else {
+          this.repectAssets[comp.id] = fpath;
+        }
         return;
       }
+      if (this.saveTimeout) {
+        clearTimeout(this.saveTimeout);
+        this.saveTimeout = null;
+      }
+      this.store.filesCacheUrl[assetKey] = "start";
+      this.saveAssets.push({ id: comp.id, url: comp.value.url });
 
-      deviceCtrl.DownloadFile(
-        comp.value.url,
+      this.saveTimeout = setTimeout(() => {
+        this.downLoadFiles();
+      }, 1000);
+    }
+  }
+  downLoadFiles() {
+    const { deviceCtrl, prjCtrl } = useCtx();
+    const savePromises: any = this.saveAssets.map((item: any) => {
+      const assetUrl = item.url;
+      const assetsName = assetUrl.replace(/(.*\/)*((\S|\s)+\.*)(\?.*)?/g, "$2");
+      const assetKey = assetsName.replace(/\s/g, "");
+      const fpath = `queen5/assets/${assetsName}`;
+      return deviceCtrl.DownloadFile(
+        assetUrl,
         prjCtrl.createPath(fpath),
         60 * 10,
-        (status: string, p: any) => {
+        (status: string) => {
           if (status == "succ") {
-            comp.value.url = fpath;
+            const comp = this.helper.findComp(item.id);
+            if (comp) {
+              comp.value.url = fpath;
+            }
+
             if (prjCtrl.isOnlineUrl(assetUrl)) {
               this.store.filesCacheUrl[assetKey] = assetUrl;
             }
-
-            this.localFilesCacheSave();
           }
           if (status == "error") {
-            // this.store.filesCacheUrl[assetKey] = undefined;
+            if (this.store.filesCacheUrl[assetKey]) {
+              delete this.store.filesCacheUrl[assetKey];
+            }
           }
         }
       );
-    }
+    });
+    Promise.all(savePromises).then(() => {
+      clearTimeout(this.saveTimeout);
+      this.saveTimeout = null;
+      this.saveAssets = [];
+      this.localFilesCacheSave();
+      Object.keys(this.repectAssets).map((e) => {
+        const comp = this.helper.findComp(e);
+        if (comp) {
+          comp.value.url = this.repectAssets[e];
+        }
+      });
+      this.repectAssets = {};
+    });
   }
   async localFilesCacheSave() {
     const { deviceCtrl, prjCtrl } = useCtx();
+    Object.keys(this.store.filesCacheUrl).map((e) => {
+      if (this.store.filesCacheUrl[e] == "start") {
+        delete this.store.filesCacheUrl[e];
+      }
+    });
+    debugger;
     const ok = await deviceCtrl.WriteFileText(
       `${prjCtrl.RootDir}/queen5/assets.cache.queen5`,
       JSON.stringify(this.store.filesCacheUrl)

src/modules/editor/module/actions/edit.tsx

@@ -28,12 +28,10 @@ export const editActions = EditorModule.action({
       const temImg: any = await this.helper.loadImage(url);
       const ratio = temImg.width / temImg.height;
       const W = temImg.width > maxW ? maxW : temImg.width;
-      const H = W / ratio;
-      const page = this.controls.pageCtrl;
+      const H = W / ratio;     
       await this.actions.clickCompToDesign("Image", (comp) => {
         comp.setSize(W, H);
-        comp.value.url = url;
-        page.saveAssetsLocal(comp);
+        comp.value.url = url;       
       });
     } catch (e) {
       queenApi.hideLoading();
@@ -61,8 +59,7 @@ export const editActions = EditorModule.action({
       const currComp = createObj({ compKey: "Image" }, false);
       currComp.setSize(W, H);
       currComp.value.url = url;
-      page.designData.compMap[currComp.id] = currComp;
-      page.saveAssetsLocal(page.designData.compMap[currComp.id]);
+      page.designData.compMap[currComp.id] = currComp;     
       // page.setCompPid(currComp.id, page.currStreamCardId);
       const childIds = [...page.currStreamCard.children.default];
       childIds.push(currComp.id);
@@ -97,8 +94,7 @@ export const editActions = EditorModule.action({
       const currComp = createObj({ compKey: "Video" }, false);
       // currComp.setSize(W,  H );
       currComp.value.url = url;
-      page.designData.compMap[currComp.id] = currComp;
-      page.saveAssetsLocal(page.designData.compMap[currComp.id]);
+      page.designData.compMap[currComp.id] = currComp;      
       // page.setCompPid(currComp.id, page.currStreamCardId);
       const childIds = [...page.currStreamCard.children.default];
       childIds.push(currComp.id);
@@ -147,10 +143,7 @@ export const editActions = EditorModule.action({
         page.setCompPid(o.id, currComp.id);
       });
     }
-    page.designData.compMap[currComp.id] = currComp;
-    if (compKey == "Video") {
-      page.saveAssetsLocal(page.designData.compMap[currComp.id]);
-    }
+    page.designData.compMap[currComp.id] = currComp;  
     page.setCompPid(currComp.id, currCard.id);
     const childIds = [...currCard.children.default];
     childIds.push(currComp.id);

src/modules/editor/module/helpers/index.ts

@@ -355,19 +355,8 @@ export const helpers = EditorModule.helper({
       img.src = url;
     });
   },
-  urlToBlob(url: string) {
-    return new Promise((resolve, reject) => {
-      let xhr = new XMLHttpRequest();
-      xhr.open("get", url, true);
-      xhr.responseType = "blob";
-      xhr.onload = function () {
-        if (this.status == 200) {
-          resolve(this.response);
-        } else {
-          reject("error");
-        }
-      };
-      xhr.send();
-    });
+  async urlToBlob(url: string) {
+    let response = await fetch(url + "?t=" + Date.now(), { mode: "cors" });
+    return response.blob();
   },
 });