Use new player and its new API

app/views/asciicasts/_player.html.erb

@@ -9,19 +9,19 @@
     var model = new Asciinema.Asciicast(<%= asciicast.to_json.gsub('</', '<\/').html_safe %>);
 
     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 %>'
+        }
       );
     }
 

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) {