Merge pull request #3 from blopa/feature/use-puppeteer-recorder

add puppeteer recorder
blopa · Jan 2, 2022 · fe9176b · fe9176b
2 parents 5c9d5ee + 666a373
commit fe9176b
Show file tree

Hide file tree

Showing 12 changed files with 629 additions and 431 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,6 +4,5 @@
 node_modules
 node_modules/
 node_modules/*
-frames
 html
 output.mp4
diff --git a/CodeHighlighter.jsx b/CodeHighlighter.jsx
@@ -1,31 +1,31 @@
 import React from 'react';
-import { HEIGHT, WIDTH, SCALE } from "./constants";
+import { HEIGHT, WIDTH, SCALE } from './constants';
 
 function CodeHighlighter({
     codeHtml,
     totalLines,
     currentLine,
 }) {
-    const lines = new Array(totalLines).fill(null).map((v, index) => {
-        return ((
-            <span
-                key={index}
-                style={{
-                    height: '16px',
-                    width: `${8 * (totalLines).toString().length}px`,
-                }}
-            >
-                {index + 1}
-            </span>
-        ));
-    });
+    const lines = new Array(totalLines).fill(null).map((v, index) => ((
+        <span
+            key={index}
+            style={{
+                height: '16px',
+                width: `${8 * (totalLines).toString().length}px`,
+            }}
+        >
+            {index + 1}
+        </span>
+    )));
 
     return (
-        <html>
+        <html lang="en">
             <style
-                dangerouslySetInnerHTML={{__html: `
+                dangerouslySetInnerHTML={{
+                    __html: `
                     body { color: white; }
-                `}}
+                `,
+                }}
             />
             <body
                 style={{

diff --git a/README.md b/README.md
@@ -2,7 +2,9 @@
 
 Create a video file showing line by line of a code file or React component.
 
-![ScreenShot](https://raw.githubusercontent.com/blopa/code-video-creator/main/image.png)
+<img src="/examples/sample.gif?raw=true" width="890px" />
+
+![ScreenShot](https://raw.githubusercontent.com/blopa/code-video-creator/main/examples/image.png)
 
 I have no idea why I made this... but there you go.
 
@@ -18,9 +20,9 @@ npm install
 To install dependencies, then run
 
 ```shell
-npm run generate Test.jsx
+npm run generate test.js
 ```
 
-Where "Test.jsx" should be the path to your file.
+Where "test.js" should be the path to your file.
 
 PS: You need to have `ffmpeg` installed for this to work!
diff --git a/constants.js b/constants.js
@@ -3,3 +3,9 @@ export const WIDTH = Math.floor(1920);
 export const HEIGHT = Math.floor(1080);
 export const SCALE = 4;
 export const MAX_LINES = 16;
+
+export const ADD = 'ADD';
+export const REMOVE = 'REMOVE';
+export const REPLACE = 'REPLACE';
+export const SELECT = 'SELECT';
+export const SKIP_TO = 'SKIP_TO';
diff --git a/examples/Test.jsx b/examples/Test.jsx
@@ -1,7 +1,11 @@
-import { useState } from 'react';
+//# has-script
+//# skip_to,5
+import { useState } from "react";
 
 function Test() {
     const [val, setVal] = useState(1);
+    //# replace,6,true
+    const [val, setVal] = useState(2);
 
     return (
         <div>

diff --git a/image.png → examples/image.png b/image.png → examples/image.png
diff --git a/examples/sample.gif b/examples/sample.gif
diff --git a/examples/test.js b/examples/test.js
@@ -0,0 +1,5 @@
+const text1 = 'this script will transform code';
+const text2 = 'into a video like this one';
+console.log('using Prism.js and React');
+// access the project at:
+// https://github.com/blopa/code-video-creator