mediacms/frontend-tools/chapters-editor/vite.chapters-editor.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path, { dirname } from 'path';
import { fileURLToPath } from 'url';
import { copyFileSync, mkdirSync } from 'fs';

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

// Plugin to copy audio-poster.jpg to build output
const copyAudioPoster = () => {
    return {
        name: 'copy-audio-poster',
        closeBundle() {
            const outDir = path.resolve(__dirname, '../../../static/video_editor');
            const sourceFile = path.resolve(__dirname, 'client/public/audio-poster.jpg');
            const destFile = path.resolve(outDir, 'audio-poster.jpg');

            try {
                mkdirSync(outDir, { recursive: true });
                copyFileSync(sourceFile, destFile);
                console.log('✓ Copied audio-poster.jpg to build output');
            } catch (error) {
                console.error('Error copying audio-poster.jpg:', error);
            }
        },
    };
};

export default defineConfig({
    plugins: [react(), copyAudioPoster()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'client', 'src'),
        },
    },
    root: path.resolve(__dirname, 'client'),
    define: {
        'process.env': {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production'),
        },
    },
    build: {
        minify: true,
        sourcemap: true,
        lib: {
            entry: path.resolve(__dirname, 'client/src/main.tsx'),
            name: 'ChaptersEditor',
            formats: ['iife'],
            fileName: () => 'chapters-editor.js',
        },
        rollupOptions: {
            output: {
                assetFileNames: (assetInfo) => {
                    if (assetInfo.name === 'style.css') return 'chapters-editor.css';
                    return assetInfo.name;
                },
                globals: {
                    react: 'React',
                    'react-dom': 'ReactDOM',
                },
            },
        },
        // Output to Django's static directory
        outDir: '../../../static/video_editor',
        emptyOutDir: true,
        external: ['react', 'react-dom'],
    },
});