File previews

[juliusknorr]

It would be great to generate some previews, certainly nothing for the first iteration

[juliusknorr]

@hweihwang Could you check what options we would have to generate a preview image of a whiteboard? We would need to implement a PHP provider for the preview files but could issue a request to the whiteboard server to handle the whiteboard to image conversion in node.js. Maybe you can evaluate how this could be implemented and give an effort estimation

[hweihwang]

Thanks @juliusknorr

I mainly think of 2 ways:

1. Client-Side Rendering: The user's browser would generate the preview each time they make a change. We can use Excalidraw's exportToBlob API to create an image and save it directly within the file. PHP can then easily access this image for previews.

• Pros: Simple implementation, accurate image rendering.
• Cons:
  • Slightly impact on network and frontend performance (though Excalidraw already renders to canvas, so the conversion to blob shouldn't be too heavy).
  • Possible inconsistencies if not handled carefully.
  • Previews only update when changes are reflected in the user's browser (no automatic server-side generation).

2. Server-Side Rendering: Headless browser (Puppeteer) would generate the preview, either on PHP or Node side but preferred on the Node.js for simple and native. The preview can be saved directly to the file upon changes (within Node.js) or generated on demand.

• Pros: More consistent previews, can be generated on demand or periodically without user interaction, allows customization (size, format, etc.).
• Cons:
  • More complex setup and management of Puppeteer. (Puppeteer might need authenticate too)
  • Consumes server resources for the headless browser and rendering.
  • Might require tweaking to ensure accurate image capture (tweaking the viewport or interacting with Excalidraw via Puppeteer).