feat: cli and examples (#308)

* feat: cli serves editor

* chore: deps

* feat: update examples

* feat: new default example

packages/cli/package.json

@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "@revideo/renderer": "0.5.10",
+    "@revideo/vite-plugin": "0.5.10",
     "@revideo/telemetry": "0.5.10",
     "chokidar": "^3.5.3",
     "commander": "^12.0.0",

packages/cli/src/editor.ts

@@ -0,0 +1,27 @@
+import motionCanvas from '@revideo/vite-plugin';
+import {createServer} from 'vite';
+
+export async function launchEditor(projectPath: string, port: string) {
+  const server = await createServer({
+    configFile: false,
+    plugins: [
+      motionCanvas({
+        project: projectPath,
+        buildForEditor: false,
+      }),
+    ],
+    build: {
+      minify: false,
+      rollupOptions: {
+        output: {
+          entryFileNames: '[name].js',
+        },
+      },
+    },
+    server: {
+      port: parseInt(port),
+    },
+  });
+
+  return server.listen();
+}

packages/cli/src/index.ts

@@ -2,6 +2,7 @@
 
 import {EventName, sendEvent} from '@revideo/telemetry';
 import {Command} from 'commander';
+import {launchEditor} from './editor';
 import {createServer} from './server/index';
 
 const program = new Command();
@@ -14,8 +15,7 @@ program
 program
   .command('serve')
   .description(
-    'UNSTABLE (still WIP): Start the revideo server in development mode. Watches for changes ' +
-      'in the project directory and re-builds the player on each change.',
+    'Exposes a render endpoint to render videos from a project file. Automatically rebuilds the project when the project file changes. Use for local development.',
   )
   .option(
     '--projectFile <path>',
@@ -36,4 +36,18 @@ program
     });
   });
 
+program
+  .command('editor')
+  .description('Start the revideo editor')
+  .option(
+    '--projectFile <path>',
+    'Path to the project file',
+    './src/project.ts',
+  )
+  .option('--port <number>', 'Port on which to start the server', '9000')
+  .action(async options => {
+    await launchEditor(options.projectFile, options.port);
+    console.log(`Editor running on port ${options.port}`);
+  });
+
 program.parse(process.argv);

packages/player-react/src/controls.tsx

@@ -38,7 +38,7 @@ function VolumeSlider({
 
   return (
     <div
-      className="p-flex p-items-center p-space-x-2 p-relative"
+      className="flex items-center space-x-2 relative"
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => {
         if (!isInteracting) {
@@ -47,16 +47,16 @@ function VolumeSlider({
       }}
     >
       <div
-        className="p-w-6 p-h-6 p-flex p-items-center p-justify-center p-cursor-pointer"
+        className="w-6 h-6 flex items-center justify-center cursor-pointer"
         onClick={handleIconClick}
       >
         {volume === 0 ? <MutedSoundIcon /> : <SoundIcon />}
       </div>
       {(isHovering || isInteracting) && (
-        <div className="p-flex p-items-center p-h-1.5 p-whitespace-nowrap">
-          <div className="p-relative p-w-20 p-h-1.5 p-bg-gray-300 p-rounded-full">
+        <div className="flex items-center h-1.5 whitespace-nowrap">
+          <div className="relative w-20 h-1.5 bg-gray-300 rounded-full">
             <div
-              className="p-absolute p-top-0 p-left-0 p-h-full p-bg-gray-100 p-rounded-full"
+              className="absolute top-0 left-0 h-full bg-gray-100 rounded-full"
               style={{width: `${volume * 100}%`}}
             />
             <input
@@ -75,7 +75,7 @@ function VolumeSlider({
               onMouseDown={() => setIsInteracting(true)}
               onMouseUp={() => setIsInteracting(false)}
               onMouseLeave={() => setIsInteracting(false)}
-              className="p-absolute p-top-0 p-left-0 p-w-full p-h-full p-opacity-0 p-cursor-pointer"
+              className="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
             />
           </div>
         </div>
@@ -137,15 +137,15 @@ export function Controls({
     <div className="text-white p-4 flex-col space-y-2 bg-gradient-to-t from-gray-500 to-transparent">
       <div className="flex items-center space-x-2">
         <PlayPause playing={playing} setPlaying={setPlaying} />
-        <div className="p-flex p-items-center p-space-x-2">
+        <div className="flex items-center space-x-2">
           <VolumeSlider volume={volume} setVolume={setVolume} />
           <div>
             <span>
               {getFormattedTime(currentTime, duration, timeDisplayFormat)}
             </span>
           </div>
         </div>
-        <div className="p-flex-grow" />
+        <div className="flex-grow" />
       </div>
       <Timeline
         currentTime={currentTime}