Initial work on html player

src/main.js

@@ -3345,6 +3345,10 @@ async function render() {
         name: 'APNG files (.png)',
         extensions: ['png'],
       },
+      {
+        name: 'Packed HTML player (.html)',
+        extensions: ['html'],
+      }
     ],
     defaultPath: await join(await documentDir(), "untitled.png")
   });
@@ -3359,48 +3363,77 @@ async function render() {
     // fileExportPath = path
     // console.log("wrote SVG")
 
+    const ext = path.split('.').pop().toLowerCase();
     
-    const frames = [];
+    switch (ext) {
-    const canvas = document.createElement('canvas');
+      case 'html':
-    canvas.width = config.fileWidth;  // Set desired width
+        fetch('/player.html')
-    canvas.height = config.fileHeight; // Set desired height
+        .then(response => {
-    let exportContext = {
+          if (!response.ok) {
-      ...context,
+            throw new Error('Network response was not ok');
-      ctx: canvas.getContext('2d'),
+          }
-      selectionRect: undefined,
+          return response.text(); // Read the response body as a string
-      selection: [],
+        })
-      shapeselection: []
+        .then(data => {
+          // TODO: strip out the stuff tauri injects
+          let json = JSON.stringify({
+            fileWidth: config.fileWidth,
+            fileHeight: config.fileHeight,
+            root: root.toJSON()
+          })
+          data = data.replace('"${file}"', json)
+          console.log(data); // The content of the file as a string
+        })
+        .catch(error => {
+          // TODO: alert
+          console.error('There was a problem with the fetch operation:', error);
+        });
+
+        break;
+      case 'png':
+        const frames = [];
+        const canvas = document.createElement('canvas');
+        canvas.width = config.fileWidth;  // Set desired width
+        canvas.height = config.fileHeight; // Set desired height
+        let exportContext = {
+          ...context,
+          ctx: canvas.getContext('2d'),
+          selectionRect: undefined,
+          selection: [],
+          shapeselection: []
+        }
+
+      
+        for (let i = 0; i < root.maxFrame; i++) {
+          
+          root.currentFrameNum = i
+          exportContext.ctx.fillStyle = "white"
+          exportContext.ctx.rect(0,0,config.fileWidth, config.fileHeight)
+          exportContext.ctx.fill()
+          await root.draw(exportContext)
+
+          // Convert the canvas content to a PNG image (this is the "frame" we add to the APNG)
+          const imageData = exportContext.ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+        // Step 2: Create a frame buffer (Uint8Array) from the image data
+          const frameBuffer = new Uint8Array(imageData.data.buffer);
+          
+          frames.push(frameBuffer); // Add the frame buffer to the frames array
+        }
+      
+        // Step 3: Use UPNG.js to create the animated PNG
+        const apng = UPNG.encode(frames, canvas.width, canvas.height, 0, parseInt(100/config.framerate));
+      
+        // Step 4: Save the APNG file (in Tauri, use writeFile or in the browser, download it)
+        const apngBlob = new Blob([apng], { type: 'image/png' });
+      
+        // If you're using Tauri:
+        await writeFile(
+          path, // The destination file path for saving
+          new Uint8Array(await apngBlob.arrayBuffer())
+        );
+        break;
     }
-
-  
-    for (let i = 0; i < root.maxFrame; i++) {
-      
-      root.currentFrameNum = i
-      exportContext.ctx.fillStyle = "white"
-      exportContext.ctx.rect(0,0,config.fileWidth, config.fileHeight)
-      exportContext.ctx.fill()
-      await root.draw(exportContext)
-
-      // Convert the canvas content to a PNG image (this is the "frame" we add to the APNG)
-      const imageData = exportContext.ctx.getImageData(0, 0, canvas.width, canvas.height);
-
-    // Step 2: Create a frame buffer (Uint8Array) from the image data
-      const frameBuffer = new Uint8Array(imageData.data.buffer);
-      
-      frames.push(frameBuffer); // Add the frame buffer to the frames array
-    }
-  
-    // Step 3: Use UPNG.js to create the animated PNG
-    const apng = UPNG.encode(frames, canvas.width, canvas.height, 0, parseInt(100/config.framerate));
-  
-    // Step 4: Save the APNG file (in Tauri, use writeFile or in the browser, download it)
-    const apngBlob = new Blob([apng], { type: 'image/png' });
-  
-    // If you're using Tauri:
-    await writeFile(
-      path, // The destination file path for saving
-      new Uint8Array(await apngBlob.arrayBuffer())
-    );
   }
   document.querySelector("body").style.cursor = "default"
 }

src/player.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+const _file = "${file}"
+function _render() {
+
+    requestAnimationFrame(_render)
+}
+function __setup__() {
+    const cvs = document.getElementById("cvs")
+    cvs.width = _file.fileWidth
+    cvs.height = _file.fileHeight
+    cvs.style.width = `${_file.fileWidth}px`
+    cvs.style.height = `${_file.fileHeight}px`
+
+    _render()
+}
+</script>
+</head>
+<body>
+    <canvas id="cvs"></canvas>
+    <script>__setup__()</script>
+</body>
+</html>