feat: support lower framerate

src/Project.ts

@@ -23,7 +23,7 @@ export class Project extends Stage {
   public readonly foreground: Layer;
   public readonly center: Vector2d;
   public threadsCallback: ThreadsCallback;
-  public framesPerSeconds = 60;
+  public framesPerSeconds = 30;
   public frame: number = 0;
 
   public get time(): number {

src/hot.ts

@@ -18,7 +18,7 @@ export function hot(player: Player, root: typeof module) {
     }
 
     player.project.reload(runners);
-    player.requestSeek(player.project.frame);
+    player.reload();
   };
 
   const scenePaths = require.cache[root.id].children.filter(name =>

src/player/Player.ts

@@ -46,6 +46,8 @@ export class Player {
 
   private readonly audio: HTMLAudioElement = null;
   private startTime: number;
+  private renderTime: number = 0;
+  private requestId: number = null;
   private audioError = false;
 
   private state: PlayerState = {
@@ -109,6 +111,13 @@ export class Player {
     this.request();
   }
 
+  public reload() {
+    this.requestSeek(this.project.frame);
+    if (this.requestId === null) {
+      this.request();
+    }
+  }
+
   public requestNextFrame(): void {
     this.commands.seek = this.state.frame + 1;
   }
@@ -258,13 +267,17 @@ export class Player {
   }
 
   private request() {
-    requestAnimationFrame(async () => {
-      try {
-        // this.updateState({loading: true});
-        await this.run();
-        // this.updateState({loading: false});
-      } catch (e) {
-        console.error(e);
+    this.requestId = requestAnimationFrame(async time => {
+      if (time - this.renderTime >= 990 / this.project.framesPerSeconds) {
+        this.renderTime = time;
+        try {
+          await this.run();
+        } catch (e) {
+          this.requestId = null;
+          console.error(e);
+        }
+      } else {
+        this.request();
       }
     });
   }