提交: ae1a5286be825e690fa13ca4fa35676d11109f4d - cammy (git)

A categorical programming language

Commit MetaInfo

• 修訂: ae1a5286be825e690fa13ca4fa35676d11109f4d (tree)
• 時間: 2022-11-01 05:00:12
• 作者: Corbin <cds@corb...>
• Commiter: Corbin

Log Message

Allow pausing and unpausing videos.

Change Summary

• modified: honey/static/honey.js

差異

--- a/honey/static/honey.js
+++ b/honey/static/honey.js
@@ -176,23 +176,31 @@ function CammyImage({ drawer }) {
 
 class CammyAnimation extends Component {
     #frameRequest;
-    state = null;
+    state = { frames: 0, isPlaying: false };
 
-    componentDidMount() {
-        // Reset frame count and timestamp to keep FPS accurate.
-        this.setState({ frames: 0 });
+    componentDidMount() { this.play(); }
+    componentWillUnmount() { this.pause(); }
+
+    play() {
+        this.setState({ isPlaying: true });
         this.#frameRequest = window.requestAnimationFrame(this.stepFrame.bind(this));
     }
 
-    componentWillUnmount() {
+    pause() {
+        // Reset frame count and timestamp to keep FPS accurate.
+        this.setState({ start: null, frames: 0, isPlaying: false });
         window.cancelAnimationFrame(this.#frameRequest);
         this.#frameRequest = null;
     }
 
+    playPause() {
+        if (this.state.isPlaying) { this.pause(); } else { this.play(); }
+    }
+
     stepFrame(timestamp) {
         const start = this.state.start || timestamp;
         this.setState({ start, timestamp, frames: this.state.frames + 1 });
-        setTimeout(() => window.requestAnimationFrame(this.stepFrame.bind(this)), 50);
+        this.#frameRequest = window.requestAnimationFrame(this.stepFrame.bind(this));
     }
 
     render({ drawer }) {
@@ -207,6 +215,9 @@ class CammyAnimation extends Component {
 
         return h("div", {},
             h("canvas", { ref: canvas, width: 100, height: 100 }),
+            h("label", {},
+                h("input", { type: "checkbox", checked: this.state.isPlaying, onClick: this.playPause.bind(this) }),
+                "Play/Pause"),
             h("p", {}, `${fps} frames/s`),
         );
     }