@needle-tools/engine/plugins/vite/poster.js

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in.

import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export function getPosterPath() {
    return "include/poster.webp";
}

/**
 * @param {import('../types').userSettings} userSettings
 */
export const needlePoster = (command, config, userSettings) => {
    // only relevant for local development
    if (command === 'build') return [];

    if (userSettings.noPoster) return;

    return {
        name: 'needle:poster',
        configureServer(server) {
            server.ws.on('needle:screenshot', async (data, client) => {
                if (userSettings.noPoster) return;
                if (!data?.data) {
                    console.warn("Received empty screenshot data, ignoring");
                    return;
                }

                if (userSettings.posterGenerationMode === "once") {
                    if (fs.existsSync(getPosterPath())) {
                        console.log("Poster already exists, ignoring screenshot");
                        return;
                    }
                }
                try {
                    const targetPath = "./" + getPosterPath();
                    console.debug(`Received poster, saving to ${targetPath}`);
                    // remove data:image/png;base64, from the beginning of the string
                    if (targetPath.endsWith(".webp"))
                        data.data = data.data.replace(/^data:image\/webp;base64,/, "");
                    else
                        data.data = data.data.replace(/^data:image\/png;base64,/, "");
                    const dir = path.dirname(targetPath);
                    if (!fs.existsSync(dir)) {
                        fs.mkdirSync(dir, { recursive: true })
                    }
                    fs.writeFileSync(targetPath, Buffer.from(data.data, "base64"));
                    console.debug("Saved poster to file");
                }
                catch (err) {
                    console.error("Failed to save poster", err.message);
                }
            });
        },
        transformIndexHtml: {
            order: 'pre',
            handler(html, ctx) {
                const file = path.join(__dirname, 'poster-client.js');
                let scriptContent = fs.readFileSync(file, 'utf8');
                switch (userSettings.posterFormat) {
                    case "image/png":
                        scriptContent = scriptContent.replace("image/webp", "image/png");
                        break;
                }
                return [
                    {
                        tag: 'script',
                        attrs: {
                            type: 'module',
                        },
                        children: scriptContent,
                        injectTo: 'body',
                    },
                ];
            },
        },
    }
};