Use latest player

vendor/assets/javascripts/asciinema-player.js

@@ -42,7 +42,7 @@
         icon = asciinema.ExpandIcon();
       }
 
-      return dom.span({ className: "fullscreen-button", onClick: this.handleClick }, icon);
+      return dom.span({ className: "fullscreen-button", onClick: this.handleClick, title: 'Toggle full screen mode (f)' }, icon);
     },
 
     handleClick: function(event) {
@@ -752,9 +752,25 @@
         });
       }.bind(this), true);
 
+      $(this.getDOMNode()).on('keypress', this.onKeyPress);
+
       requestAnimationFrame(this.applyChanges);
     },
 
+    componentWillUnmount: function() {
+      $(this.getDOMNode()).off('keypress', this.onKeyPress);
+    },
+
+    onKeyPress: function(event) {
+      if (event.which == 32) { // space bar
+        event.preventDefault();
+        this.togglePlay();
+      } else if (event.which == 102) { // 'f'
+        event.preventDefault();
+        this.toggleFullscreen();
+      }
+    },
+
     render: function() {
       var overlay;
 
@@ -765,7 +781,7 @@
       }
 
       return (
-        dom.div({ className: 'asciinema-player-wrapper' },
+        dom.div({ className: 'asciinema-player-wrapper', tabIndex: -1 },
           dom.div({ ref: 'player', className: this.playerClassName(), style: this.playerStyle() },
 
             asciinema.Terminal({
@@ -855,6 +871,16 @@
       }
     },
 
+    togglePlay: function() {
+      if (this.isNotStarted()) {
+        this.start();
+      } else if (this.isPlaying()) {
+        this.pause();
+      } else {
+        this.resume();
+      }
+    },
+
     seek: function(time) {
       if (this.movieController.seek && this.movieController.seek(time)) {
         this.setState({ state: 'playing', currentTime: time });
@@ -922,6 +948,10 @@
       return this.state.state === 'playing';
     },
 
+    isPaused: function() {
+      return this.state.state === 'paused';
+    },
+
     isFinished: function() {
       return this.state.state === 'finished';
     },

vendor/assets/stylesheets/asciinema-player.css

@@ -1,5 +1,6 @@
 .asciinema-player-wrapper {
-  text-align: center; }
+  text-align: center;
+  outline: none; }
   .asciinema-player-wrapper:fullscreen {
     background-color: #000;
     width: 100%;
@@ -102,20 +103,25 @@
         .asciinema-terminal .font-sample.font-big .line span {
           height: 32px; }
 
-svg.icon path {
-  fill: #fff; }
-
+.asciinema-player:hover .control-bar {
+  color: #fff; }
+  .asciinema-player:hover .control-bar .progressbar .bar .gutter span {
+    background-color: #fff; }
+  .asciinema-player:hover .control-bar svg.icon path {
+    fill: #fff; }
 .asciinema-player .control-bar {
   width: 100%;
   height: 32px;
   background-color: #000;
-  color: #fff;
+  color: #bbb;
   border-top: 1px solid #222;
   box-sizing: content-box;
   line-height: 1; }
   .asciinema-player .control-bar * {
     box-sizing: inherit;
     font-size: 0; }
+  .asciinema-player .control-bar svg.icon path {
+    fill: #bbb; }
   .asciinema-player .control-bar .playback-button {
     display: block;
     float: left;
@@ -164,7 +170,7 @@ svg.icon path {
         .asciinema-player .control-bar .progressbar .bar .gutter span {
           display: inline-block;
           height: 100%;
-          background-color: #fff;
+          background-color: #bbb;
           border-radius: 3px; }
   .asciinema-player .control-bar .fullscreen-button {
     display: block;