Add asciicast download docs

app/assets/stylesheets/asciicasts.sass

@@ -91,7 +91,7 @@
       h2
         font-size: 20px
 
-  .share-modal
+  .modal-dialog
     max-width: 900px
     width: initial
 

app/presenters/asciicast_page_presenter.rb

@@ -4,6 +4,8 @@ class AsciicastPagePresenter
 
   attr_reader :routes, :asciicast, :current_user, :policy, :playback_options
 
+  delegate :download_filename, to: :asciicast, prefix: true
+
   def self.build(routes, asciicast, current_user, playback_options)
     decorated_asciicast = asciicast.decorate
     policy = Pundit.policy(current_user, asciicast)
@@ -115,6 +117,10 @@ class AsciicastPagePresenter
     asciicast.featured?
   end
 
+  def can_replay_in_terminal?
+    asciicast.version > 0
+  end
+
   private
 
   def author

app/views/asciicasts/_download.html.erb

@@ -0,0 +1,57 @@
+<div class="modal fade" id="download-modal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
+        <h4 class="modal-title" id="myModalLabel">Download this recording</h4>
+      </div>
+      <div class="modal-body">
+        <p>
+          <% if page.can_replay_in_terminal? %>
+            You can download this recording in <a href="https://github.com/asciinema/asciinema/blob/master/doc/asciicast-v1.md">asciicast format</a>, as a .json file:
+          <% else %>
+            You can download this recording as a .json file.
+          <% end %>
+        </p>
+
+        <a href="<%= asciicast_url(format: :json, dl: 1) %>" class="btn btn-primary" download="<%= page.asciicast_download_filename %>" rel="nofollow">Download</a>
+
+        <% if page.can_replay_in_terminal? %>
+          <h2>Replay in terminal</h2>
+          <p>
+            You can replay this recording in your terminal with <code>asciinema play</code> command:
+          </p>
+
+          <pre><code>asciinema play <%= page.asciicast_download_filename %></code></pre>
+
+          <p>
+            If you don't have asciinema cli installed then <a href="https://asciinema.org/docs/installation">see installation instructions</a>.
+          </p>
+
+          <hr>
+        <% end %>
+
+        <h2>Use with stand-alone player on your website</h2>
+
+        <p>
+          Download asciinema player from <a href="https://github.com/asciinema/asciinema-player/releases">player's releases page</a> (you only need <code>.js</code> and <code>.css</code> file), then use it as seen on the following example:
+        </p>
+
+        <pre><code>&lt;html>
+&lt;head>
+  &lt;link rel="stylesheet" type="text/css" href="/asciinema-player.css" />
+  &lt;script src="/asciinema-player.js">&lt;/script>
+&lt;/head>
+&lt;body>
+  &lt;div id="player-container">&lt;/div>
+  &lt;script>
+    asciinema_player.core.CreatePlayer('player-container', '/<%= page.asciicast_download_filename %>');
+  &lt;/script>
+&lt;/body>
+&lt;/html></code></pre>
+
+        <p>See <a href="https://github.com/asciinema/asciinema-player">asciinema player README</a> for full usage instructions.</p>
+      </div>
+    </div>
+  </div>
+</div>

app/views/asciicasts/_share.html.slim

@@ -1,5 +1,5 @@
 .modal.fade id="share-modal" tabindex="-1" role="dialog"
-  .modal-dialog.share-modal
+  .modal-dialog
     .modal-content
       .modal-header
         button type="button" class="close" data-dismiss="modal"

app/views/asciicasts/show.html.slim

@@ -5,6 +5,7 @@
 
 .asciicast-page
   = render 'share', page: page
+  = render 'download', page: page
 
   section.cinema
     .container
@@ -26,7 +27,7 @@
   section.odd.meta
     .container
       .row
-        .col-md-8.col-xs-8
+        .col-md-8.col-xs-6
           ul.meta-list
             li
               span.glyphicon.glyphicon-info-sign
@@ -35,7 +36,7 @@
               span.glyphicon.glyphicon-eye-open
               '  #{page.views_count}
 
-        .col-md-4.col-xs-4
+        .col-md-4.col-xs-6
           - if page.show_admin_dropdown?
             .dropdown.actions-dropdown.pull-right
               button.btn.btn-default.dropdown-toggle[type="button" data-toggle="dropdown"]
@@ -79,6 +80,10 @@
               span.glyphicon.glyphicon-share-alt
               ' 
               a href="#" id="share-link" data-toggle="modal" data-target="#share-modal" Share
+            li
+              span.glyphicon.glyphicon-download
+              ' 
+              a href="#" id="download-link" data-toggle="modal" data-target="#download-modal" Download
 
   - if page.show_description?
     section.odd.description