.player

p.processing-info style="display: none"
  | This recording is being pre-processed at the moment. It will open automatically in a few seconds.

javascript:
  $(function() {
    var model = new Asciinema.Asciicast(#{asciicast.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}',
          autoPlay: #{options.autoplay},
          loop: #{options.loop},
          movie: movie,
          theme: '#{h options.theme}',
        }),
        $('.player')[0]
      );
    }

    function tryCreatePlayer() {
      if (model.get('stdout_frames_url')) {
        $('.processing-info').remove();
        createPlayer();
      } else {
        $('.processing-info').show();
        setTimeout(function() {
          model.fetch({ success: tryCreatePlayer });
        }, 2000);
      }
    }

    tryCreatePlayer();
  });