Add "loop" option for embedded player

app/models/playback_options.rb

@@ -5,6 +5,7 @@ class PlaybackOptions
   attribute :speed,     Float,   default: 1.0
   attribute :size,      String,  default: 'small'
   attribute :autoplay,  Boolean, default: false
+  attribute :loop,      Boolean, default: false
   attribute :benchmark, Boolean, default: false
   attribute :theme,     String,  default: Theme::DEFAULT
 

app/views/api/asciicasts/show.js.erb

@@ -32,9 +32,13 @@
       params = params.concat(['speed=' + speed]);
     }
     var autoplay = script.getAttribute('data-autoplay');
-    if (autoplay === '1') {
+    if (autoplay) {
       params = params.concat(['autoplay=' + autoplay]);
     }
+    var loop = script.getAttribute('data-loop');
+    if (loop) {
+      params = params.concat(['loop=' + loop]);
+    }
     var theme = script.getAttribute('data-theme');
     if (theme) {
       params = params.concat(['theme=' + theme]);

app/views/asciicasts/_player.html.slim

@@ -16,6 +16,7 @@ javascript:
         asciinema.Player({
           fontSize: '#{options.size}',
           autoPlay: #{options.autoplay},
+          loop: #{options.loop},
           movie: movie,
           theme: '#{h options.theme}',
         }),

app/views/docs/embedding.html.slim

@@ -58,9 +58,21 @@ markdown:
   The `autoplay` option allows for automatic playback start when the player
   loads. Accepted values:
 
-  * 0 - do not start playback automatically (default)
-  * 1 - start playback automatically
+  * 0 / false - do not start playback automatically (default)
+  * 1 / true - start playback automatically
 
   For example, to make the asciicast auto play:
 
-      <script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async data-autoplay="1"></script>
+      <script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async data-autoplay="true"></script>
+
+  ### loop
+
+  The `loop` option allows for looping the playback. This option is usually
+  combined with `autoplay` option. Accepted values:
+
+  * 0 / false - disable looping (default)
+  * 1 / true - enable looping
+
+  For example, to make the asciicast play infinitely:
+
+      <script type="text/javascript" src="https://asciinema.org/a/14.js" id="asciicast-14" async data-loop="true"></script>

vendor/assets/javascripts/asciinema-player.js

@@ -349,15 +349,29 @@
     this.totalTime = totalTime;
   }
 
-  Movie.prototype.start = function(onFrame, onFinish, setTime, setLoading) {
+  Movie.prototype.start = function(onFrame, onFinish, setTime, setLoading, loop) {
     var timeIntervalId;
 
+    var controller = {};
+
     function onSourceFinish() {
-      clearInterval(timeIntervalId);
-      onFinish();
+      if (loop) {
+        start();
+      } else {
+        clearInterval(timeIntervalId);
+        onFinish();
+      }
+    }
+
+    function start() {
+      var ctrl = this.source.start(onFrame, onSourceFinish, setLoading);
+
+      for (prop in ctrl) {
+        controller[prop] = ctrl[prop];
+      }
     }
 
-    var controller = this.source.start(onFrame, onSourceFinish, setLoading);
+    start();
 
     timeIntervalId = setInterval(function() {
       setTime(controller.time());
@@ -685,7 +699,7 @@
   var dom = React.DOM;
 
   exports.Player = React.createClass({ displayName: 'Player',
-    // props: movie, autoPlay, fontSize, theme
+    // props: movie, autoPlay, fontSize, theme, loop
 
     getInitialState: function() {
       var lines = this.props.movie.snapshot || [];
@@ -800,7 +814,7 @@
 
     start: function() {
       this.setState({ state: 'playing' });
-      this.movieController = this.props.movie.start(this.onFrame, this.onFinish, this.setTime, this.setLoading);
+      this.movieController = this.props.movie.start(this.onFrame, this.onFinish, this.setTime, this.setLoading, this.props.loop);
     },
 
     onFinish: function() {