diff --git a/app/views/asciicasts/_player.html.erb b/app/views/asciicasts/_player.html.erb index 7650e71..4d82cbb 100644 --- a/app/views/asciicasts/_player.html.erb +++ b/app/views/asciicasts/_player.html.erb @@ -9,19 +9,19 @@ var model = new Asciinema.Asciicast(<%= asciicast.to_json.gsub('); function createPlayer() { - var source = new asciinema.HttpArraySource(model.get('stdout_frames_url'), <%= options.speed %>); - var snapshot = model.get('snapshot'); - var movie = new asciinema.Movie(model.get('width'), model.get('height'), source, snapshot, model.get('duration')); - - React.renderComponent( - asciinema.Player({ - fontSize: '<%= options.size %>', + asciinema.CreatePlayer( + $('.player')[0], + model.get('width'), model.get('height'), + model.get('stdout_frames_url'), + model.get('duration'), + { + snapshot: model.get('snapshot'), + speed: <%= options.speed %>, autoPlay: <%= options.autoplay %>, loop: <%= options.loop %>, - movie: movie, - theme: '<%= h options.theme %>', - }), - $('.player')[0] + fontSize: '<%= options.size %>', + theme: '<%= h options.theme %>' + } ); } diff --git a/vendor/assets/javascripts/asciinema-player.js b/vendor/assets/javascripts/asciinema-player.js index 32b22ba..df7a0b3 100644 --- a/vendor/assets/javascripts/asciinema-player.js +++ b/vendor/assets/javascripts/asciinema-player.js @@ -712,7 +712,7 @@ (function(exports) { var dom = React.DOM; - exports.Player = React.createClass({ displayName: 'Player', + var Player = React.createClass({ displayName: 'Player', // props: movie, autoPlay, fontSize, theme, loop getInitialState: function() { @@ -927,6 +927,8 @@ }, }); + exports.Player = Player; + exports.mergeChanges = function(dest, src) { if (src.lines) { dest.lines = dest.lines || {}; @@ -945,6 +947,23 @@ } } + exports.CreatePlayer = function(parent, width, height, dataUrl, totalTime, options) { + var options = options || {}; + var source = new asciinema.HttpArraySource(dataUrl, options.speed); + var movie = new asciinema.Movie(width, height, source, options.snapshot, totalTime); + + React.renderComponent( + Player({ + movie: movie, + autoPlay: options.autoPlay, + loop: options.loop, + fontSize: options.fontSize, + theme: options.theme + }), + parent + ); + } + })(window.asciinema = window.asciinema || {}); (function(exports) {