Button instead of checkbox for playback

@andi-tmh complained about the buttons not being user-friendly which
explains why I introduced a regular "play" button which should make it
easier to click.

Author: vidbina

dist/index.html

@@ -64,10 +64,23 @@
 
       <div>
         <div class="control">
-          Playback
-          <input type="checkbox" id="playback" />
-          <button id="slower" class="btn btn-default">-</button>
-          <button id="faster" class="btn btn-default">+</button>
+          <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;
+            </button>
+            <button id="playbutton" class="btn btn-default">
+              <span class="glyphicon glyphicon-play play"></span>&nbsp;
+              <span class="glyphicon glyphicon-pause pause" style="display: none"></span>&nbsp;
+            </button>
+            <button id="faster" class="btn btn-default">
+              <span class="glyphicon glyphicon-plus"></span>&nbsp;
+            </button>
+          </div>
           <button id="details" class="btn btn-default">
             <span class="glyphicon glyphicon-blackboard"></span>
             Details

lib/web.js

@@ -316,11 +316,17 @@ class Playback {
     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').click(() => jQuery('#playback').click());
+
     jQuery('#details').click(() => {
       if (jQuery('#tabs').is(':visible')) {
         jQuery('#tabs').hide();