rrvideo: improve the video quality and add a progress bar for the CLI tool (#1197)

* refactor rrvideo: use playwright rather than puppeteer

* add a progress bar for the tool

* add tests for cli.ts

* fix build error

* add change log

* update readme file

* Apply a scaling method to improve the resolution of the output video

packages/rrvideo/src/cli.ts

@@ -2,6 +2,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import minimist from 'minimist';
+import { ProgressBar } from '@open-tech-world/cli-progress-bar';
 import type { RRwebPlayerOptions } from 'rrweb-player';
 import { transformToVideo } from './index';
 
@@ -24,10 +25,18 @@ if (argv.config) {
   >;
 }
 
+const pBar = new ProgressBar({ prefix: 'Transforming' });
+const onProgressUpdate = (percent: number) => {
+  if (percent < 1) pBar.run({ value: percent * 100, total: 100 });
+  else
+    pBar.run({ value: 100, total: 100, prefix: 'Transformation Completed!' });
+};
+
 transformToVideo({
   input: argv.input as string,
   output: argv.output as string,
   rrwebPlayer: config,
+  onProgressUpdate,
 })
   .then((file) => {
     console.log(`Successfully transformed into "${file}".`);