added this.toggle() and this.isPlaying

I just needed some state to indicate if the simulation is running or
not. During the initialization phase I setup the play button to the
starting state (show the play symbol) since I assume runway-browser does
not init to a running sim, furthermore I call toggle(cb) on every click
and check the sim state within toggle to start or stop the sim. I call
the callback with the playing state (true is running, false is stopped) to
take care of updating the UI.

Author: vidbina

dist/index.html

@@ -64,11 +64,6 @@
 
       <div>
         <div class="control">
-          <div style="display: none">
-            <!-- #playback is relied on in the codebase, so I just hid it -->
-            Playback
-            <input type="checkbox" id="playback" />
-          </div>
           <div class="btn-group" role="group" aria-label="playbackgroup">
             <button id="slower" class="btn btn-default">
               <span class="glyphicon glyphicon-minus"></span>&nbsp;

lib/web.js

@@ -313,20 +313,21 @@ class Playback {
     jQuery('body > div')
       .addClass('paused');
 
-    jQuery('#playback').change(() => {
-      if (jQuery('#playback')[0].checked) {
-        this.start();
-        jQuery('#playbutton .play').hide();
-        jQuery('#playbutton .pause').show();
-      } else {
-        this.stop();
-        jQuery('#playbutton .pause').hide();
-        jQuery('#playbutton .play').show();
-      }
+    jQuery('#playbutton .play').show();
+    jQuery('#playbutton .pause').hide();
+
+    jQuery('#playbutton').click(_ => {
+      this.toggle(playing => {
+        if (playing == true) {
+          jQuery('#playbutton .play').show();
+          jQuery('#playbutton .pause').hide();
+        } else {
+          jQuery('#playbutton .pause').show();
+          jQuery('#playbutton .play').hide();
+        }
+      });
     });
 
-    jQuery('#playbutton').click(() => jQuery('#playback')[0].click());
-
     jQuery('#details').click(() => {
       if (jQuery('#tabs').is(':visible')) {
         jQuery('#tabs').hide();
@@ -340,10 +341,10 @@ class Playback {
     window.cancelAnimationFrame(this.animationId);
     this.animationId = undefined;
     pageLoaded.then(() => {
-      jQuery('#playback')[0].checked = false;
       jQuery('body > div')
         .addClass('paused')
         .removeClass('playback');
+      this.isPlaying = false;
     });
   }
 
@@ -362,17 +363,26 @@ class Playback {
       when => this.onAnimationFrame(when));
   }
 
+  toggle(cb) {
+    if(this.isPlaying == true) {
+      this.stop();
+    } else {
+      this.start();
+    }
+    cb(this.isPlaying);
+  }
+
   start() {
     if (this.animationId !== undefined) {
       return;
     }
     this.animationId = window.requestAnimationFrame(
       when => this.onAnimationFrame(when));
     pageLoaded.then(() => {
-      jQuery('#playback')[0].checked = true;
       jQuery('body > div')
         .addClass('playback')
         .removeClass('paused');
+      this.isPlaying = true;
     });
   }