fix: optimize saving frames to disk (#1007)

motion-canvas · Mar 21, 2024 · d79af91 · d79af91
1 parent bda646a
commit d79af91
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 14 deletions.
diff --git a/packages/core/src/app/ImageExporter.ts b/packages/core/src/app/ImageExporter.ts
@@ -110,13 +110,14 @@ export class ImageExporter implements Exporter {
       this.frameLookup.add(frame);
       import.meta.hot!.send('motion-canvas:export', {
         frame,
-        sceneFrame,
         data: canvas.toDataURL(this.fileType, this.quality),
         mimeType: this.fileType,
         subDirectories: this.groupByScene
           ? [this.projectName, sceneName]
           : [this.projectName],
-        groupByScene: this.groupByScene,
+        name: (this.groupByScene ? sceneFrame : frame)
+          .toString()
+          .padStart(6, '0'),
       });
     }
   }

diff --git a/packages/core/src/app/Renderer.ts b/packages/core/src/app/Renderer.ts
@@ -164,6 +164,7 @@ export class Renderer {
       if (import.meta.hot) {
         import.meta.hot.send('motion-canvas:export', {
           frame,
+          name: frame.toString().padStart(6, '0'),
           data: this.stage.finalBuffer.toDataURL('image/png'),
           mimeType: 'image/png',
           subDirectories: ['still', this.project.name],

diff --git a/packages/core/src/vite-env.d.ts b/packages/core/src/vite-env.d.ts
@@ -11,8 +11,7 @@ declare module 'vite/types/customEvent' {
       subDirectories: string[];
       mimeType: string;
       frame: number;
-      sceneFrame?: number;
-      groupByScene?: boolean;
+      name: string;
     };
     'motion-canvas:export-ack': {frame: number};
     'motion-canvas:assets': {urls: string[]};

diff --git a/packages/vite-plugin/src/partials/exporter.ts b/packages/vite-plugin/src/partials/exporter.ts
@@ -28,13 +28,7 @@ export function exporterPlugin({outputPath}: ExporterPluginConfig): Plugin {
 
       server.ws.on(
         'motion-canvas:export',
-        async (
-          {data, frame, sceneFrame, subDirectories, mimeType, groupByScene},
-          client,
-        ) => {
-          const name = (groupByScene ? sceneFrame : frame)
-            .toString()
-            .padStart(6, '0');
+        async ({data, frame, name, subDirectories, mimeType}, client) => {
           const extension = mime.extension(mimeType);
           const outputFilePath = path.join(
             outputPath,
@@ -48,12 +42,19 @@ export function exporterPlugin({outputPath}: ExporterPluginConfig): Plugin {
           }
 
           const base64Data = data.slice(data.indexOf(',') + 1);
-          await fs.promises.writeFile(outputFilePath, base64Data, {
-            encoding: 'base64',
-          });
+          await writeBase64(outputFilePath, base64Data);
           client.send('motion-canvas:export-ack', {frame});
         },
       );
     },
   };
 }
+
+function writeBase64(filePath: string, base64: string) {
+  return new Promise((resolve, reject) => {
+    fs.createWriteStream(filePath)
+      .on('finish', resolve)
+      .on('error', reject)
+      .end(Buffer.from(base64, 'base64'));
+  });
+}