screen-recorder-angular 0.0.0 → 0.0.2

package/.editorconfig

@@ -10,6 +10,7 @@ trim_trailing_whitespace = true
 
 [*.ts]
 quote_type = single
+ij_typescript_use_double_quotes = false
 
 [*.md]
 max_line_length = off

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

package/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

package/.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+  // For more information, visit: https://angular.dev/ai/mcp
+  "servers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": ["-y", "@angular/cli", "mcp"]
+    }
+  }
+}

package/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "Changes detected"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation (complete|failed)"
+          }
+        }
+      }
+    }
+  ]
+}

package/angular.json

@@ -1,106 +1,74 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": "76b137ab-abca-4ae5-8093-7df70dd46711"
+  },
   "newProjectRoot": "projects",
   "projects": {
     "screen-recorder-angular": {
       "projectType": "application",
-      "schematics": {
-        "@schematics/angular:application": {
-          "strict": true
-        }
-      },
+      "schematics": {},
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/screen-recorder-angular",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "browser": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
             "assets": [
-              "src/favicon.ico",
-              "src/assets"
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
             ],
             "styles": [
               "src/styles.css"
-            ],
-            "scripts": []
+            ]
           },
           "configurations": {
             "production": {
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "fileReplacements": [
-                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.prod.ts"
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
                 }
               ],
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "screen-recorder-angular:build:production"
+              "buildTarget": "screen-recorder-angular:build:production"
             },
             "development": {
-              "browserTarget": "screen-recorder-angular:build:development"
+              "buildTarget": "screen-recorder-angular:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "screen-recorder-angular:build"
-          }
-        },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "src/test.ts",
-            "polyfills": "src/polyfills.ts",
-            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": []
-          }
+          "builder": "@angular/build:unit-test"
         }
       }
     }
-  },
-  "defaultProject": "screen-recorder-angular"
+  }
 }

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="screen-recorder-base/env.d.ts" />

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "screen-recorder-angular",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "scripts": {
+    "predev": "pnpm --filter screen-recorder-base build",
+    "prebuild": "pnpm --filter screen-recorder-base build",
     "ng": "ng",
     "dev": "ng serve",
-    "start": "ng serve",
-    "build": "ng build",
+    "build": "ng build --output-path dist --base-href ./",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
@@ -15,33 +16,36 @@
       "require": "./src/app/screen-recorder/screen-recorder.module.ts"
     }
   },
+  "prettier": {
+    "printWidth": 100,
+    "singleQuote": true,
+    "overrides": [
+      {
+        "files": "*.html",
+        "options": {
+          "parser": "angular"
+        }
+      }
+    ]
+  },
   "dependencies": {
-    "@angular/animations": "~13.0.0",
-    "@angular/common": "~13.0.0",
-    "@angular/compiler": "~13.0.0",
-    "@angular/core": "~13.0.0",
-    "@angular/forms": "~13.0.0",
-    "@angular/platform-browser": "~13.0.0",
-    "@angular/platform-browser-dynamic": "~13.0.0",
-    "@angular/router": "~13.0.0",
-    "@w-xuefeng/bindkey": "^1.0.1",
-    "rxjs": "~7.4.0",
-    "screen-recorder-base": "^0.0.4",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "@angular/common": "^21.1.0",
+    "@angular/compiler": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/forms": "^21.1.0",
+    "@angular/platform-browser": "^21.1.0",
+    "@angular/router": "^21.1.0",
+    "@w-xuefeng/bindkey": "^1.0.3",
+    "screen-recorder-base": "^0.0.8",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.1",
-    "@angular/cli": "~13.0.1",
-    "@angular/compiler-cli": "~13.0.0",
-    "@types/jasmine": "~3.10.0",
-    "@types/node": "^12.11.1",
-    "jasmine-core": "~3.10.0",
-    "karma": "~6.3.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.0.3",
-    "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "~1.7.0",
-    "typescript": "~4.4.3"
+    "@angular/build": "^21.1.1",
+    "@angular/cli": "^21.1.1",
+    "@angular/compiler-cli": "^21.1.0",
+    "jsdom": "^27.1.0",
+    "typescript": "~5.9.2",
+    "vitest": "^4.0.8"
   }
-}
+}

package/src/app/app.component.ts

@@ -1,14 +1,30 @@
-import { Component } from '@angular/core';
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { ScreenRecorderComponent } from "./screen-recorder/screen-recorder.component";
+import {
+  EndContentDirective,
+  PreviewContentDirective,
+  StartContentDirective
+} from "./screen-recorder/screen-recorder.props";
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  selector: "app-root",
+  standalone: true,
+  imports: [
+    CommonModule,
+    StartContentDirective,
+    EndContentDirective,
+    PreviewContentDirective,
+    ScreenRecorderComponent,
+  ],
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-  title = "screen-recorder-angular"
+  title = "screen-recorder-angular";
 
-  recording = false
+  recording = false;
 
   videoOptions: MediaTrackConstraints = {
     width: 1920,

package/src/app/screen-recorder/draggable-directive/draggable.directive.ts

@@ -1,6 +1,6 @@
-import { Directive, ElementRef, OnInit, HostListener } from '@angular/core';
+import { Directive, ElementRef, HostListener, OnInit } from '@angular/core';
 
-@Directive({ selector: '[draggable]' })
+@Directive({ selector: '[draggable]', standalone: true })
 export default class DragDirective implements OnInit {
 
   constructor(public el: ElementRef) {
@@ -36,7 +36,22 @@ export default class DragDirective implements OnInit {
 
   ngOnInit() {
     this.el.nativeElement.style.position = 'fixed';
-    this.totalOffsetX = parseFloat(getComputedStyle(this.el.nativeElement).left);
-    this.totalOffsetY = parseFloat(getComputedStyle(this.el.nativeElement).top);
+    const computed = getComputedStyle(this.el.nativeElement);
+    const left = parseFloat(computed.left);
+    const top = parseFloat(computed.top);
+
+    if (Number.isNaN(left) || Number.isNaN(top)) {
+      const rect = this.el.nativeElement.getBoundingClientRect();
+      this.totalOffsetX = rect.left;
+      this.totalOffsetY = rect.top;
+      this.el.nativeElement.style.left = `${this.totalOffsetX}px`;
+      this.el.nativeElement.style.top = `${this.totalOffsetY}px`;
+      this.el.nativeElement.style.right = 'auto';
+      this.el.nativeElement.style.bottom = 'auto';
+      return;
+    }
+
+    this.totalOffsetX = left;
+    this.totalOffsetY = top;
   }
 }

package/src/app/screen-recorder/screen-recorder.component.html

@@ -1,29 +1,29 @@
-<button *ngIf="(!startContent || !startContent.templateRef) && !state.recording" (click)="start()"
-  [style]="defaultBtnStyle + startBtnStyle">
+<button *ngIf="(!startContent || !startContent.templateRef) && !recording()" (click)="start()"
+  [style]="defaultBtnStyle + (startBtnStyle ?? '')">
   {{ startBtnText }}
 </button>
 
-<div *ngIf="startContent && startContent.templateRef && !state.recording">
+<div *ngIf="startContent && startContent.templateRef && !recording()">
   <ng-container [ngTemplateOutlet]="startContent.templateRef" [ngTemplateOutletContext]="startContext">
   </ng-container>
 </div>
 
-<button *ngIf="(!endContent  || !endContent.templateRef)&& state.recording" (click)="end()"
-  [style]="defaultBtnStyle + endBtnStyle">
+<button *ngIf="(!endContent  || !endContent.templateRef)&& recording()" (click)="end()"
+  [style]="defaultBtnStyle + (endBtnStyle ?? '')">
   {{ endBtnText }}
 </button>
 
-<div *ngIf="endContent && endContent.templateRef && state.recording">
+<div *ngIf="endContent && endContent.templateRef && recording()">
   <ng-container [ngTemplateOutlet]="endContent.templateRef" [ngTemplateOutletContext]="endContext">
   </ng-container>
 </div>
 
-<video *ngIf="(!previewContent || !previewContent.templateRef) && preview && state.recording"
-  [srcObject]="previewMediaStream" muted autoplay draggable [width]="previewDefaultWidth"
+<video *ngIf="(!previewContent || !previewContent.templateRef) && preview && recording()"
+  [srcObject]="previewMediaStream()" muted autoplay draggable [width]="previewDefaultWidth"
   style="position: fixed; border: 1px solid #666; z-index: 9999; cursor: move; right: 5px; top: 5px;">
 </video>
 
-<div *ngIf="previewContent && previewContent.templateRef && preview && state.recording && state.screenRecorder">
-  <ng-container [ngTemplateOutlet]="previewContent.templateRef" [ngTemplateOutletContext]="previewContext">
+<div *ngIf="previewContent && previewContent.templateRef && preview && recording() && screenRecorder()">
+  <ng-container [ngTemplateOutlet]="previewContent.templateRef" [ngTemplateOutletContext]="previewContext()">
   </ng-container>
 </div>

package/src/app/screen-recorder/screen-recorder.component.ts

@@ -1,14 +1,25 @@
-import { Component, OnInit } from '@angular/core';
-import { ScreenRecorder, IScreenRecorderOptions, RecordRTC } from 'screen-recorder-base';
-import bindkey from '@w-xuefeng/bindkey'
-import ScreenRecorderProps from './screen-recorder.props';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from "@angular/core";
+import {
+  IScreenRecorderOptions,
+  RecordRTC,
+  ScreenRecorder,
+} from "screen-recorder-base";
+import { CommonModule } from "@angular/common";
+import { bindkey } from "@w-xuefeng/bindkey";
+import ScreenRecorderProps from "./screen-recorder.props";
+import DragDirective from "./draggable-directive/draggable.directive";
 
 @Component({
-  selector: 'app-screen-recorder',
-  templateUrl: './screen-recorder.component.html',
-  styleUrls: ['./screen-recorder.component.css']
+  selector: "app-screen-recorder",
+  standalone: true,
+  imports: [CommonModule, DragDirective],
+  templateUrl: "./screen-recorder.component.html",
+  styleUrls: ["./screen-recorder.component.css"],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ScreenRecorderComponent extends ScreenRecorderProps implements OnInit {
+export class ScreenRecorderComponent extends ScreenRecorderProps
+  implements OnInit, OnDestroy {
+  private boundKeys: string[] = [];
 
   constructor() {
     super();
@@ -17,36 +28,44 @@ export class ScreenRecorderComponent extends ScreenRecorderProps implements OnIn
   ngOnInit(): void {
     const options: IScreenRecorderOptions & RecordRTC.Options = {
       onUnsupported: () => {
-        this.state.unsupported = true;
-        this.state.recording = false;
-        this.state.error = false;
-        this.onRecordingUnsupport.emit()
+        this.unsupported.set(true);
+        this.recording.set(false);
+        this.error.set(false);
+        this.onRecordingUnsupport.emit();
       },
       onRecordStart: (mediaStream: MediaStream) => {
-        this.state.recording = true;
-        this.state.error = false;
+        this.recording.set(true);
+        this.error.set(false);
         this.initPreview(mediaStream);
-        this.onRecordingStart.emit({ mediaStream })
+        this.onRecordingStart.emit({ mediaStream });
       },
       onError: (err: unknown) => {
-        this.state.error = true;
-        this.state.recording = false;
-        this.onRecordingError.emit({ err })
+        this.error.set(true);
+        this.recording.set(false);
+        this.onRecordingError.emit({ err });
       },
       onRecordEnd: (blobUrl: string, fixedBlob: Blob) => {
-        this.state.recording = false;
-        this.state.error = false;
-        this.onRecordingEnd.emit({ url: blobUrl, blob: fixedBlob })
+        this.recording.set(false);
+        this.error.set(false);
+        this.onRecordingEnd.emit({ url: blobUrl, blob: fixedBlob });
       },
       timeSlice: 1000,
       videoOptions: this.videoOptions,
     };
 
-    this.state.screenRecorder = ScreenRecorder.createSR(options);
+    this.screenRecorder.set(ScreenRecorder.createSR(options));
 
-    if (this.shortKey && this.shortKey.toUpperCase() !== 'ESC') {
+    if (this.shortKey && this.shortKey.toUpperCase() !== "ESC") {
       bindkey.add(this.shortKey, this.start);
-      bindkey.add('ESC', this.end);
+      bindkey.add("ESC", this.end);
+      this.boundKeys = [this.shortKey, "ESC"];
     }
   }
+
+  ngOnDestroy(): void {
+    for (const key of this.boundKeys) {
+      bindkey.remove(key);
+    }
+    this.boundKeys = [];
+  }
 }

package/src/app/screen-recorder/screen-recorder.module.ts

@@ -1,26 +1,29 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import DragDirective from './draggable-directive/draggable.directive';
-import { ScreenRecorderComponent } from './screen-recorder.component';
-import { StartContentDirective, EndContentDirective, PreviewContentDirective } from './screen-recorder.props';
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import DragDirective from "./draggable-directive/draggable.directive";
+import { ScreenRecorderComponent } from "./screen-recorder.component";
+import {
+  EndContentDirective,
+  PreviewContentDirective,
+  StartContentDirective,
+} from "./screen-recorder.props";
 
 @NgModule({
-  declarations: [
+  declarations: [],
+  imports: [
+    CommonModule,
     DragDirective,
     StartContentDirective,
     EndContentDirective,
     PreviewContentDirective,
-    ScreenRecorderComponent
-  ],
-  imports: [
-    BrowserModule
+    ScreenRecorderComponent,
   ],
   exports: [
     DragDirective,
     StartContentDirective,
     EndContentDirective,
     PreviewContentDirective,
-    ScreenRecorderComponent
-  ]
+    ScreenRecorderComponent,
+  ],
 })
-export class ScreenRecorderModule { }
+export class ScreenRecorderModule {}

package/src/app/screen-recorder/screen-recorder.props.ts

@@ -4,26 +4,31 @@ import {
   EventEmitter,
   Input,
   Output,
-  TemplateRef
+  TemplateRef,
+  computed,
+  signal
 } from "@angular/core";
 import { ScreenRecorder } from 'screen-recorder-base';
 
 @Directive({
-  selector: '[startContent]'
+  selector: '[startContent]',
+  standalone: true
 })
 export class StartContentDirective {
   constructor(public templateRef: TemplateRef<unknown>) { }
 }
 
 @Directive({
-  selector: '[endContent]'
+  selector: '[endContent]',
+  standalone: true
 })
 export class EndContentDirective {
   constructor(public templateRef: TemplateRef<unknown>) { }
 }
 
 @Directive({
-  selector: '[previewContent]'
+  selector: '[previewContent]',
+  standalone: true
 })
 export class PreviewContentDirective {
   constructor(public templateRef: TemplateRef<unknown>) { }
@@ -49,27 +54,24 @@ export default class ScreenRecorderProps {
   @ContentChild(EndContentDirective) endContent!: EndContentDirective;
   @ContentChild(PreviewContentDirective) previewContent!: PreviewContentDirective;
 
-  state = {
-    error: false,
-    unsupported: false,
-    recording: false,
-    screenRecorder: null as ScreenRecorder | null,
-  }
+  readonly error = signal(false);
+  readonly unsupported = signal(false);
+  readonly recording = signal(false);
+  readonly screenRecorder = signal<ScreenRecorder | null>(null);
 
   previewDefaultWidth = 300;
-  previewMediaStream?: MediaStream
+  readonly previewMediaStream = signal<MediaStream | undefined>(undefined);
 
   initPreview = (mediaStream: MediaStream) => {
-    this.previewMediaStream = mediaStream
-    this.previewContext = { mediaStream }
+    this.previewMediaStream.set(mediaStream);
   }
 
   start = () => {
-    this.state.screenRecorder?.startRecording();
+    this.screenRecorder()?.startRecording();
   };
 
   end = () => {
-    this.state.screenRecorder?.stopRecording();
+    this.screenRecorder()?.stopRecording();
   };
 
   startContext = {
@@ -82,9 +84,9 @@ export default class ScreenRecorderProps {
     endEvent: this.end
   }
 
-  previewContext = {
-    mediaStream: this.state.screenRecorder?.mediaStream
-  }
+  previewContext = computed(() => ({
+    mediaStream: this.previewMediaStream()
+  }));
 
   defaultBtnStyle = `
     margin: 0 16px;

package/src/index.html

@@ -1,13 +1,13 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="zh">
-<head>
-  <meta charset="utf-8">
-  <title>ScreenRecorderAngular</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8">
+    <title>ScreenRecorderAngular</title>
+    <base href="./">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="./favicon.ico">
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
 </html>

package/src/main.ts

@@ -1,12 +1,5 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { bootstrapApplication } from "@angular/platform-browser";
+import { AppComponent } from "./app/app.component";
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+bootstrapApplication(AppComponent)
+  .catch((err) => console.error(err));

package/tsconfig.app.json

@@ -1,17 +1,19 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
     "outDir": "./out-tsc/app",
-    "allowSyntheticDefaultImports": true,
-    "types": []
+    "types": [
+      "screen-recorder-base/env.d.ts"
+    ]
   },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
-    "src/**/*.d.ts",
-    "../../node_modules/screen-recorder-base/src/env.d.ts"
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
   ]
-}
+}

package/tsconfig.json

@@ -1,32 +1,31 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
     "experimentalDecorators": true,
-    "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
-    "module": "es2020",
-    "lib": [
-      "es2020",
-      "dom"
-    ]
+    "target": "ES2022",
+    "module": "preserve"
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
     "strictTemplates": true
-  }
-}
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.spec.json

@@ -1,18 +1,13 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
     "types": [
-      "jasmine"
+      "vitest/globals"
     ]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
   "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
+    "src/**/*.spec.ts"
   ]
-}
+}

package/.browserslistrc

@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR

package/karma.conf.js

@@ -1,44 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/screen-recorder-angular'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
-  });
-};

package/src/app/app.component.spec.ts

@@ -1,31 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'screen-recorder-angular'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('screen-recorder-angular');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('screen-recorder-angular app is running!');
-  });
-});

package/src/app/app.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { ScreenRecorderModule } from './screen-recorder/screen-recorder.module';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    ScreenRecorderModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

package/src/app/screen-recorder/screen-recorder.component.spec.ts

@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ScreenRecorderComponent } from './screen-recorder.component';
-
-describe('ScreenRecorderComponent', () => {
-  let component: ScreenRecorderComponent;
-  let fixture: ComponentFixture<ScreenRecorderComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ScreenRecorderComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ScreenRecorderComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/environments/environment.prod.ts

@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};

package/src/environments/environment.ts

@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
-  production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

package/src/polyfills.ts

@@ -1,53 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes recent versions of Safari, Chrome (including
- * Opera), Edge on the desktop, and iOS and Chrome on mobile.
- *
- * Learn more in https://angular.io/guide/browser-support
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/**
- * By default, zone.js will patch all possible macroTask and DomEvents
- * user can disable parts of macroTask/DomEvents patch by setting following flags
- * because those flags need to be set before `zone.js` being loaded, and webpack
- * will put import in the top of bundle, so user need to create a separate file
- * in this directory (for example: zone-flags.ts), and put the following flags
- * into that file, and then add the following code before importing zone.js.
- * import './zone-flags';
- *
- * The flags allowed in zone-flags.ts are listed here.
- *
- * The following flags will work for all browsers.
- *
- * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
- *
- *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
- *  with the following flag, it will bypass `zone.js` patch for IE/Edge
- *
- *  (window as any).__Zone_enable_cross_context_check = true;
- *
- */
-
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js';  // Included with Angular CLI.
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */

package/src/test.ts

@@ -1,26 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-);
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);