Use new player via <asciinema-player> tag

app/assets/javascripts/embed.js

@@ -1,2 +1,2 @@
 //= require base
-//= require player
+//= require asciinema-player

app/assets/javascripts/player.js

@@ -1,45 +0,0 @@
-//= require asciinema-player
-
-function tryCreatePlayer(parentNode, asciicast, options) {
-  function createPlayer() {
-    asciinema.player.js.CreatePlayer(
-      parentNode,
-      asciicast.url,
-      {
-        width: asciicast.width,
-        height: asciicast.height,
-        poster: options.poster || asciicast.snapshot,
-        speed: options.speed,
-        autoPlay: options.autoPlay,
-        loop: options.loop,
-        preload: options.preload,
-        startAt: options.startAt,
-        fontSize: options.fontSize,
-        theme: options.theme,
-        title: options.title,
-        author: options.author,
-        authorURL: options.authorURL,
-        authorImgURL: options.authorImgURL
-      }
-    );
-  }
-
-  function fetch() {
-    $.get('/api/asciicasts/' + asciicast.id + '.json', function(data) {
-      asciicast = data;
-      checkReadiness();
-    });
-  }
-
-  function checkReadiness() {
-    if (asciicast.url) {
-      $('.processing-info').remove();
-      createPlayer();
-    } else {
-      $('.processing-info').show();
-      setTimeout(fetch, 2000);
-    }
-  }
-
-  checkReadiness();
-}

app/helpers/asciicasts_helper.rb

@@ -7,6 +7,32 @@ module AsciicastsHelper
       skip_titlebar: skip_titlebar
   end
 
+  def player_tag(asciicast, options, skip_titlebar)
+    opts = {
+      src: asciicast.url,
+      cols: asciicast.width,
+      rows: asciicast.height,
+      poster: 'data:application/json;base64,' + Base64.encode64(asciicast.snapshot.to_json),
+      speed: options.speed,
+      autoplay: options.autoplay,
+      loop: options.loop,
+      'start-at' => options.t,
+      'font-size' => options.size,
+      theme: options.theme,
+    }
+
+    unless skip_titlebar
+      opts.merge!(
+        title: asciicast.title,
+        author: asciicast.author_display_name,
+        'author-url' => asciicast.author_url,
+        'author-img-url' => asciicast.author_avatar_url,
+      )
+    end
+
+    content_tag('asciinema-player', '', opts)
+  end
+
   def screenshot_javascript_tag
     js = assets.find_asset('embed.js').to_s
     content_tag(:script, js.html_safe)

app/models/asciicast.rb

@@ -105,6 +105,10 @@ class Asciicast < ActiveRecord::Base
     data.url(options)
   end
 
+  def ready?
+    data_url && snapshot
+  end
+
   def download_filename
     "asciicast-#{id}.json"
   end

app/serializers/asciicast_serializer.rb

@@ -3,6 +3,8 @@ class AsciicastSerializer < ActiveModel::Serializer
 
   attributes :id, :url, :snapshot, :width, :height
 
+  delegate :private?, :title, :ready?, to: :object
+
   def id
     object.to_param
   end
@@ -21,14 +23,6 @@ class AsciicastSerializer < ActiveModel::Serializer
     end
   end
 
-  def private?
-    object.private?
-  end
-
-  def title
-    object.title
-  end
-
   def author_display_name
     object.user.display_name
   end

app/views/asciicasts/_player.html.erb

@@ -5,28 +5,19 @@
   <% end %>
 <% end %>
 
-<div class="player"></div>
-
-<div class="processing-info" style="display: none">
-  <p>
-    This recording is being pre-processed at the moment. It will open automatically in a few seconds.
-  </p>
-  <p>
-    Feel free to contact <a href="mailto:support@asciinema.org">support@asciinema.org</a> if it takes longer.
-  </p>
-</div>
+<% if asciicast.ready? %>
+  <%= player_tag asciicast, options, skip_titlebar %>
+<% else %>
+  <% content_for(:head) do %>
+    <meta http-equiv="refresh" content="5">
+  <% end %>
 
-<script>
-  $(function() {
-    tryCreatePlayer(
-      $('.player')[0],
-      <%= asciicast.to_json.gsub('</', '<\/').html_safe %>,
-      <%= options.as_json.merge(skip_titlebar ? {} : {
-        title: asciicast.title,
-        author: asciicast.author_display_name,
-        authorURL: asciicast.author_url,
-        authorImgURL: asciicast.author_avatar_url
-      }).to_json.gsub('</', '<\/').html_safe %>
-    );
-  });
-</script>
+  <div class="processing-info">
+    <p>
+      This recording is being pre-processed at the moment. It will open automatically in a few seconds.
+    </p>
+    <p>
+      Feel free to contact <a href="mailto:support@asciinema.org">support@asciinema.org</a> if it takes longer.
+    </p>
+  </div>
+<% end %>

app/views/layouts/application.html.slim

@@ -8,7 +8,7 @@ html[lang="en"]
     = csrf_meta_tags
     = stylesheet_link_tag "application", :media => "all"
     = javascript_include_tag "application"
-    = javascript_include_tag "player"
+    = javascript_include_tag "asciinema-player"
     = favicon_link_tag 'favicon.png'
     = render 'layouts/ga' if Rails.env.production?
     = content_for(:head)

config/initializers/assets.rb

@@ -5,4 +5,4 @@ Rails.application.config.assets.version = '1.0'
 
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
-Rails.application.config.assets.precompile += %w( player.css player.js embed.css embed.js widget.js screenshot.css )
+Rails.application.config.assets.precompile += %w( player.css asciinema-player.js embed.css embed.js widget.js screenshot.css )

spec/api/asciicast_show_spec.rb

@@ -15,7 +15,7 @@ shared_examples_for "asciicast iframe response" do
   end
 
   it "responds with player page using iframe layout" do
-    expect(response.body).to have_selector('body.iframe div.player')
+    expect(response.body).to have_selector('body.iframe asciinema-player')
   end
 end