fix video stutter

apparently using innerText on long texts lags like hell?? ignore manifest.json, i it's a failed attempt at a PWA
spessasus · May 26, 2024 · cce4fb6 · cce4fb6
1 parent e260041
commit cce4fb6
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -7,13 +7,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <!-- for search engines -->
-  <meta name='description' content='SpessaSynth MIDI player online demo'>
+  <meta name='description' content='SpessaSynth SoundFont MIDI player online demo'>
   <meta name='author' content='spessasus'>
   <meta name='keywords' content='midi, soundfont, sf2, synth, player, sf3'>
 
-  <title>SpessaSynth SoundFont MIDI Player Online</title>
+  <title>SpessaSynth SoundFont MIDI Player</title>
   <link rel="stylesheet" href='src/website/css/style.css'>
   <link rel='icon' type='image/png' href='src/website/spessasynth_logo_rounded.png'>
+  <link rel='manifest' href='src/website/manifest.json'>
   <style>
     #github_page{
       color: yellowgreen;

diff --git a/src/spessasynth_lib/sequencer/sequencer.js b/src/spessasynth_lib/sequencer/sequencer.js
@@ -187,6 +187,25 @@ export class Sequencer {
         }
     }
 
+    setTimeTicks(ticks)
+    {
+        this.stop();
+        if(this.onTimeChange)
+        {
+            this.onTimeChange(this.currentTime);
+        }
+        this.playingNotes = [];
+        this.pausedTime = undefined;
+        this._playTo(0, ticks);
+        this.absoluteStartTime = this.now - this.playedTime / this.playbackRate;
+        this.play();
+        if(this.renderer)
+        {
+            this.renderer.noteStartTime = this.absoluteStartTime;
+            this.resetRendererIndexes();
+        }
+    }
+
     resetRendererIndexes()
     {
         this.renderer.noteTimes.forEach(n => n.renderStartIndex = 0);
@@ -645,25 +664,6 @@ export class Sequencer {
         setInterval( () =>this.noteOnsPerS = 0, 100);
     }
 
-    setTimeTicks(ticks)
-    {
-        this.stop();
-        this.playingNotes = [];
-        this.pausedTime = undefined;
-        this._playTo(0, ticks);
-        this.absoluteStartTime = this.now - this.playedTime / this.playbackRate;
-        this.play();
-        if(this.renderer)
-        {
-            this.renderer.noteStartTime = this.absoluteStartTime;
-            this.resetRendererIndexes();
-        }
-        if(this.onTimeChange)
-        {
-            this.onTimeChange(this.currentTime);
-        }
-    }
-
     /**
      * Processes a single tick
      * @private

diff --git a/src/website/manifest.json b/src/website/manifest.json
@@ -0,0 +1,15 @@
+{
+  "name": "SpessaSynth",
+  "short_name": "SpessaSynth",
+  "lang": "en",
+  "icons": [
+    {
+      "src": "spessasynth_logo_rounded.png",
+      "type": "image/png",
+      "sizes": "930x930"
+    }
+  ],
+  "start_url": "../../index.html",
+  "display": "fullscreen",
+  "description": "index.html"
+}
diff --git a/src/website/ui/sequencer_ui/sequencer_ui.js b/src/website/ui/sequencer_ui/sequencer_ui.js
@@ -32,6 +32,7 @@ export class SequencerUI{
         this.decoder = new TextDecoder(this.encoding);
         this.encoder = new TextEncoder(this.encoding);
         this.text = "";
+        this.requiresTextUpdate = false;
         this.rawText = [];
         this.titles = [""];
         this.mode = "dark";
@@ -179,11 +180,13 @@ export class SequencerUI{
             }
             const text = this.decoder.decode(data.buffer);
             this.text += text + end;
+            this.requiresTextUpdate = true;
             this.rawText.push(...data, ...this.encoder.encode(end));
             if(end === "")
             {
                 // instantly append if lyrics and 100ms batches otherwise, to avoid that initial setup text spam (looking at you, touhou midis)
-                this.lyricsElement.text.innerText = this.text
+                this.lyricsElement.text.innerText = this.text;
+                this.requiresTextUpdate = false;
             }
             this.lyricsElement.mainDiv.scrollTo(0, this.lyricsElement.text.scrollHeight);
         }
@@ -270,9 +273,7 @@ export class SequencerUI{
         this.lyricsElement.mainDiv = mainLyricsDiv;
         this.lyricsElement.selector = encodingSelector;
         this.controls.appendChild(mainLyricsDiv);
-        setInterval(() => {
-            if(this.lyricsElement.text.innerText !== this.text) this.lyricsElement.text.innerText = this.text;
-        }, 100);
+        this.requiresTextUpdate = true;
 
 
         // background bar
@@ -454,6 +455,10 @@ export class SequencerUI{
             const time = formatTime(this.seq.currentTime);
             const total = formatTime(this.seq.duration);
             this.progressTime.innerText = `${time.time} / ${total.time}`;
+            if(this.requiresTextUpdate) {
+                this.lyricsElement.text.innerText = this.text;
+                this.requiresTextUpdate = false;
+            }
         }, 100);
     }
 }