Make .txt version and .gif instructions discoverable via Download dro…

…pdown
asciinema · Oct 17, 2023 · 5b6fccd · 5b6fccd
1 parent 05f5d8d
commit 5b6fccd
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 54 deletions.
diff --git a/assets/css/_base.scss b/assets/css/_base.scss
@@ -182,6 +182,11 @@ body pre {
   border-color: #ddd;
 }
 
+.modal-dialog pre {
+  background-color: #f7f7f7;
+  margin-bottom: 1rem;
+}
+
 .has-error .form-control {
   border-color: #dc3545;
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

diff --git a/lib/asciinema_web/templates/recording/_download_modal.html.eex b/lib/asciinema_web/templates/recording/_download_modal.html.eex
@@ -24,13 +24,13 @@
         <h2>Replay in terminal</h2>
 
         <p>
-          You can replay this recording in your terminal with <code>asciinema play</code> command:
+          You can replay the downloaded recording in your terminal using the <code>asciinema play</code> command:
         </p>
 
         <pre><code>asciinema play <%= download_filename(@asciicast) %></code></pre>
 
         <p>
-          If you don't have asciinema cli installed then <a href="<%= Routes.doc_path(@conn, :show, :installation) %>">see installation instructions</a>.
+          If you don't have asciinema CLI installed then <a href="<%= Routes.doc_path(@conn, :show, :installation) %>">see installation instructions</a>.
         </p>
 
         <h2>Use with stand-alone player on your website</h2>
@@ -50,7 +50,7 @@
   &lt;script src="asciinema-player.min.js">&lt;/script>
   &lt;script>
     AsciinemaPlayer.create(
-      '<%= download_filename(@asciicast) %>',
+      '/assets/<%= download_filename(@asciicast) %>',
       document.getElementById('player'),
       { cols: <%= cols(@asciicast) %>, rows: <%= rows(@asciicast) %> }
     );

diff --git a/lib/asciinema_web/templates/recording/_gif_modal.html.heex b/lib/asciinema_web/templates/recording/_gif_modal.html.heex
@@ -0,0 +1,33 @@
+<div class="modal fade" id="gif-modal" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Generate GIF from this recording</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+
+      <div class="modal-body">
+        <p>
+          While this site doesn't offer GIF conversion at the moment, you can
+          still do it yourself with the help of asciinema GIF generator utility - <a href="https://github.com/asciinema/agg">agg</a>.
+        </p>
+
+        <p>Once you have it installed run the following command to create GIF file:</p>
+
+        <pre><code>agg <%= url(~p"/a/#{@asciicast}") %> <%= @asciicast.id %>.gif</code></pre>
+
+        <p>Or, if you already downloaded the recording file:</p>
+
+        <pre><code>agg <%= download_filename(@asciicast) %> <%= @asciicast.id %>.gif</code></pre>
+
+        <p>Check <code>agg --help</code> for all available options. You can change font
+          family and size, select color theme, adjust speed and more.</p>
+
+        <p>See <a href="https://github.com/asciinema/agg">agg README</a> for
+          full usage instructions.</p>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/lib/asciinema_web/templates/recording/show.html.heex b/lib/asciinema_web/templates/recording/show.html.heex
@@ -37,74 +37,98 @@
       </div>
 
       <div class="col-md-4 col-xs-12 text-right actions">
-        <div class="dropdown actions-dropdown pull-right">
-          <.link
-            href="#"
-            class="btn btn-sm btn-secondary"
-            id="share-link"
-            data-toggle="modal"
-            data-target="#share-modal"
-          >
-            <.share_mini_icon /> Share
-          </.link>
-
-          <%= if download_filename(@asciicast) do %>
+        <div class="btn-group pull-right">
+          <div>
             <.link
               href="#"
               class="btn btn-sm btn-secondary"
-              id="download-link"
+              id="share-link"
               data-toggle="modal"
-              data-target="#download-modal"
+              data-target="#share-modal"
             >
-              <.download_mini_icon /> Download
+              <.share_mini_icon /> Share
             </.link>
-          <% end %>
+          </div>
 
-          <%= if length(@actions) > 0 do %>
+          <div class="dropdown actions-dropdown">
             <button
               class="btn btn-sm btn-secondary dropdown-toggle"
               type="button"
               data-toggle="dropdown"
             >
-              <.cog_8_tooth_mini_icon />
+              <.download_mini_icon /> Download
             </button>
 
             <div class="dropdown-menu">
               <.link
-                :if={:edit in @actions}
-                navigate={~p"/a/#{@asciicast}/edit"}
+                href="#"
                 class="dropdown-item"
+                id="download-link"
+                data-toggle="modal"
+                data-target="#download-modal"
               >
-                Settings
+                <strong>.<%= filename_ext(@asciicast) %></strong> - original recording
               </.link>
-
               <.link
-                :if={:make_private in @actions}
-                href={~p"/a/#{@asciicast}?asciicast[private]=1"}
+                navigate={~p"/a/#{@asciicast}" <> ".txt"}
                 class="dropdown-item"
-                method="put"
+                rel="nofollow"
               >
-                Make it secret
+                <strong>.txt</strong> - pure text version
               </.link>
-
-              <.link
-                :if={:make_public in @actions}
-                href={~p"/a/#{@asciicast}?asciicast[private]=0"}
-                class="dropdown-item"
-                method="put"
-              >
-                Make it public
+              <.link href="#" class="dropdown-item" data-toggle="modal" data-target="#gif-modal">
+                <strong>.gif</strong> - animated GIF
               </.link>
+            </div>
+          </div>
 
-              <.link
-                :if={:delete in @actions}
-                href={~p"/a/#{@asciicast}"}
-                class="dropdown-item text-danger"
-                method="delete"
-                data-confirm="Are you sure you want to delete this recording?"
+          <%= if length(@actions) > 0 do %>
+            <div class="dropdown actions-dropdown">
+              <button
+                class="btn btn-sm btn-secondary dropdown-toggle"
+                type="button"
+                data-toggle="dropdown"
               >
-                Delete
-              </.link>
+                <.cog_8_tooth_mini_icon />
+              </button>
+
+              <div class="dropdown-menu">
+                <.link
+                  :if={:edit in @actions}
+                  navigate={~p"/a/#{@asciicast}/edit"}
+                  class="dropdown-item"
+                >
+                  Settings
+                </.link>
+
+                <.link
+                  :if={:make_private in @actions}
+                  href={~p"/a/#{@asciicast}?asciicast[private]=1"}
+                  class="dropdown-item"
+                  method="put"
+                >
+                  Make it secret
+                </.link>
+
+                <.link
+                  :if={:make_public in @actions}
+                  href={~p"/a/#{@asciicast}?asciicast[private]=0"}
+                  class="dropdown-item"
+                  method="put"
+                >
+                  Make it public
+                </.link>
+
+                <.link
+                  :if={:delete in @actions}
+                  href={~p"/a/#{@asciicast}"}
+                  class="dropdown-item text-danger"
+                  method="delete"
+                  data-confirm="Are you sure you want to delete this recording?"
+                >
+                  Delete
+                </.link>
+              </div>
             </div>
           <% end %>
         </div>
@@ -168,10 +192,8 @@
 </section>
 
 <%= render("_share_modal.html", conn: @conn, asciicast: @asciicast) %>
-
-<%= if download_filename(@asciicast) do %>
-  <%= render("_download_modal.html", conn: @conn, asciicast: @asciicast) %>
-<% end %>
+<%= render("_download_modal.html", conn: @conn, asciicast: @asciicast) %>
+<%= render("_gif_modal.html", conn: @conn, asciicast: @asciicast) %>
 
 <script>
   window.addEventListener('load', async function() {

diff --git a/lib/asciinema_web/views/recording_view.ex b/lib/asciinema_web/views/recording_view.ex
@@ -85,13 +85,12 @@ defmodule AsciinemaWeb.RecordingView do
   end
 
   def download_filename(asciicast) do
-    case asciicast.version do
-      1 -> "#{asciicast.id}.json"
-      2 -> "#{asciicast.id}.cast"
-      _ -> nil
-    end
+    "#{asciicast.id}.#{filename_ext(asciicast)}"
   end
 
+  def filename_ext(%{version: 1}), do: "json"
+  def filename_ext(%{version: 2}), do: "cast"
+
   @csi_init "\x1b["
   @sgr_reset "\x1b[0m"