diff --git a/app/models/playback_options.rb b/app/models/playback_options.rb index eecbeab..f775fb9 100644 --- a/app/models/playback_options.rb +++ b/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 diff --git a/app/views/api/asciicasts/show.js.erb b/app/views/api/asciicasts/show.js.erb index 21272e5..2945e7a 100644 --- a/app/views/api/asciicasts/show.js.erb +++ b/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]); diff --git a/app/views/asciicasts/_player.html.slim b/app/views/asciicasts/_player.html.slim index 3050d74..6249943 100644 --- a/app/views/asciicasts/_player.html.slim +++ b/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}', }), diff --git a/app/views/docs/embedding.html.slim b/app/views/docs/embedding.html.slim index 290a381..f7f8b85 100644 --- a/app/views/docs/embedding.html.slim +++ b/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: - + + + ### 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: + + diff --git a/vendor/assets/javascripts/asciinema-player.js b/vendor/assets/javascripts/asciinema-player.js index 05b5502..0dbfd7e 100644 --- a/vendor/assets/javascripts/asciinema-player.js +++ b/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() {