Merge pull request #412 from asciinema/font-improvements

Font related improvements

assets/css/app.scss

@@ -18,6 +18,8 @@ $primary: #06989a;
 @import "./_user_login.scss";
 @import "./_user_edit.scss";
 @import "./powerline-symbols.css";
+@import "./fonts/fira-code-nerd-font.css";
+@import "./fonts/jetbrains-mono-nerd-font.css";
 @import "~asciinema-player/dist/bundle/asciinema-player.css";
 
 .c-asciicast.a-index {

assets/css/fonts/fira-code-nerd-font.css

@@ -0,0 +1,19 @@
+@font-face {
+    font-family: "FiraCode Nerd Font";
+    src:    local(Fira Code Regular Nerd Font Complete Mono),
+            local(Fira Code Regular Nerd Font Complete),
+            url("../../static/fonts/Fira Code Regular Nerd Font Complete Mono.ttf") format("truetype");
+    font-stretch: normal;
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "FiraCode Nerd Font";
+    src:    local(Fira Code Bold Nerd Font Complete Mono),
+            local(Fira Code Bold Nerd Font Complete),
+            url("../../static/fonts/Fira Code Bold Nerd Font Complete Mono.ttf") format("truetype");
+    font-stretch: normal;
+    font-style: normal;
+    font-weight: 700;
+}

assets/css/fonts/jetbrains-mono-nerd-font.css

@@ -0,0 +1,39 @@
+@font-face {
+    font-family: "JetBrainsMono Nerd Font";
+    src:    local(JetBrains Mono Regular Nerd Font Complete Mono),
+            local(JetBrains Mono Regular Nerd Font Complete),
+            url("../../static/fonts/JetBrains Mono Regular Nerd Font Complete Mono.ttf") format("truetype");
+    font-stretch: normal;
+    font-style: normal;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "JetBrainsMono Nerd Font";
+    src:    local(JetBrains Mono Bold Nerd Font Complete Mono),
+            local(JetBrains Mono Bold Nerd Font Complete),
+            url("../../static/fonts/JetBrains Mono Bold Nerd Font Complete Mono.ttf") format("truetype");
+    font-stretch: normal;
+    font-style: normal;
+    font-weight: 700;
+}
+
+@font-face {
+    font-family: "JetBrainsMono Nerd Font";
+    src:    local(JetBrains Mono Italic Nerd Font Complete Mono),
+            local(JetBrains Mono Italic Nerd Font Complete),
+            url("../../static/fonts/JetBrains Mono Italic Nerd Font Complete Mono.ttf") format("truetype");
+    font-stretch: normal;
+    font-style: italic;
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "JetBrainsMono Nerd Font";
+    src:    local(JetBrains Mono Bold Italic Nerd Font Complete Mono),
+            local(JetBrains Mono Bold Italic Nerd Font Complete),
+            url("../../static/fonts/JetBrains Mono Bold Italic Nerd Font Complete Mono.ttf") format("truetype");
+    font-stretch: normal;
+    font-style: italic;
+    font-weight: 700;
+}

assets/js/app.js

@@ -7,6 +7,22 @@ import { create } from 'asciinema-player';
 
 window.createPlayer = create;
 
+function createPlayer(src, container, opts) {
+  if (opts.customTerminalFontFamily) {
+    opts.terminalFontFamily = `${opts.customTerminalFontFamily},Consolas,Menlo,'Bitstream Vera Sans Mono',monospace,'Powerline Symbols'`;
+
+    document.fonts.load(`1em ${opts.customTerminalFontFamily}`).then(() => {
+      console.log(`loaded font ${opts.customTerminalFontFamily}`);
+      create(src, container, opts);
+    }).catch(error => {
+      console.log(`failed to load font ${opts.customTerminalFontFamily}`, error);
+      create(src, container, opts);
+    });
+  } else {
+    create(src, container, opts);
+  }
+}
+
 $(function() {
   $('input[data-behavior=focus]:first').focus().select();
   $('[data-toggle="popover"]').popover({ html: true });
@@ -22,6 +38,6 @@ $(function() {
   const players = window.players || new Map();
 
   for (const [id, props] of players) {
-    create(props.src, document.getElementById(id), props);
+    createPlayer(props.src, document.getElementById(id), { ...props, logger: console });
   };
 });

lib/asciinema/asciicasts/asciicast.ex

@@ -38,6 +38,8 @@ defmodule Asciinema.Asciicasts.Asciicast do
     field :views_count, :integer, default: 0
     field :archivable, :boolean, default: true
     field :archived_at, :utc_datetime_usec
+    field :terminal_line_height, :float
+    field :terminal_font_family, :string
 
     timestamps()
 
@@ -88,13 +90,26 @@ defmodule Asciinema.Asciicasts.Asciicast do
     |> generate_secret_token
   end
 
-  def update_changeset(struct, attrs) do
+  def update_changeset(struct, attrs, custom_terminal_font_families \\ []) do
     struct
     |> changeset(attrs)
-    |> cast(attrs, [:description, :cols_override, :rows_override, :theme_name, :idle_time_limit])
+    |> cast(attrs, [
+      :description,
+      :cols_override,
+      :rows_override,
+      :theme_name,
+      :idle_time_limit,
+      :terminal_line_height,
+      :terminal_font_family
+    ])
     |> validate_number(:cols_override, greater_than: 0, less_than: 1024)
     |> validate_number(:rows_override, greater_than: 0, less_than: 512)
     |> validate_number(:idle_time_limit, greater_than_or_equal_to: 0.5)
+    |> validate_number(:terminal_line_height,
+      greater_than_or_equal_to: 1.0,
+      less_than_or_equal_to: 2.0
+    )
+    |> validate_inclusion(:terminal_font_family, custom_terminal_font_families)
     |> validate_number(:snapshot_at, greater_than: 0)
   end
 

lib/asciinema/asciicasts/asciicasts.ex

@@ -5,6 +5,11 @@ defmodule Asciinema.Asciicasts do
   alias Asciinema.Asciicasts.{Asciicast, SnapshotUpdater}
   alias Ecto.Changeset
 
+  @custom_terminal_font_families [
+    "FiraCode Nerd Font",
+    "JetBrainsMono Nerd Font"
+  ]
+
   def fetch_asciicast(id) do
     case get_asciicast(id) do
       nil -> {:error, :not_found}
@@ -442,7 +447,7 @@ defmodule Asciinema.Asciicasts do
   end
 
   def update_asciicast(asciicast, attrs \\ %{}) do
-    changeset = Asciicast.update_changeset(asciicast, attrs)
+    changeset = Asciicast.update_changeset(asciicast, attrs, @custom_terminal_font_families)
 
     with {:ok, asciicast} <- Repo.update(changeset) do
       if stale_snapshot?(changeset) do
@@ -664,4 +669,6 @@ defmodule Asciinema.Asciicasts do
     q = from(a in Asciicast, where: a.user_id == ^src_user_id)
     Repo.update_all(q, set: [user_id: dst_user_id, updated_at: Timex.now()])
   end
+
+  def custom_terminal_font_families, do: @custom_terminal_font_families
 end

lib/asciinema_web/templates/asciicast/edit.html.eex

@@ -45,12 +45,29 @@
           </div>
         </div>
 
+        <div class="form-group row">
+          <%= label f, :terminal_line_height, "Terminal line height", class: "col-sm-4 col-md-3 col-lg-3 col-form-label" %>
+          <div class="col-sm-8 col-md-9 col-lg-9">
+            <%= text_input f, :terminal_line_height, class: "form-control", type: "number", min: 1, max: 2, step: "any", placeholder: "1.33333" %>
+            <%= error_tag f, :terminal_line_height %>
+            <small class="form-text text-muted">Relative to font size. Lowering it ~1.1 helps with alignment of block characters like ▀ ▄ █</small>
+          </div>
+        </div>
+
+        <div class="form-group row">
+          <%= label f, :terminal_font_family, "Terminal font family", class: "col-sm-4 col-md-3 col-lg-3 col-form-label" %>
+          <div class="col-sm-8 col-md-9 col-lg-9">
+            <%= select f, :terminal_font_family, terminal_font_family_options(), class: "form-control", prompt: "Default (web safe, platform specific)" %>
+            <small class="form-text text-muted">Choose one of Nerd Font variants if icons or other symbols in your recording are not visible.</small>
+          </div>
+        </div>
+
         <div class="form-group row">
           <%= label f, :snapshot_at, "Thumbnail frame", class: "col-sm-4 col-md-3 col-lg-3 col-form-label" %>
           <div class="col-sm-8 col-md-9 col-lg-9">
             <%= text_input f, :snapshot_at, class: "form-control", type: "number", min: 0, step: "0.1" %>
             <%= error_tag f, :snapshot_at %>
-            <small class="form-text text-muted">Time of the frame to be displayed as snapshot/poster (float, in seconds, for example: 10.5)</small>
+            <small class="form-text text-muted">Time of the frame to be displayed as snapshot/poster. For example: 10.5</small>
           </div>
         </div>
 

lib/asciinema_web/views/asciicast_view.ex

@@ -1,6 +1,7 @@
 defmodule AsciinemaWeb.AsciicastView do
   use AsciinemaWeb, :view
   import Scrivener.HTML
+  alias Asciinema.Asciicasts
   alias AsciinemaWeb.Endpoint
   alias AsciinemaWeb.Router.Helpers.Extra, as: RoutesX
   alias AsciinemaWeb.UserView
@@ -38,6 +39,8 @@ defmodule AsciinemaWeb.AsciicastView do
           cols: cols(asciicast),
           rows: rows(asciicast),
           theme: theme_name(asciicast),
+          terminalLineHeight: asciicast.terminal_line_height,
+          customTerminalFontFamily: asciicast.terminal_font_family,
           poster: poster(asciicast.snapshot),
           idleTimeLimit: asciicast.idle_time_limit,
           title: title(asciicast),
@@ -566,7 +569,16 @@ defmodule AsciinemaWeb.AsciicastView do
   end
 
   def asciicast_gc_days do
-    Asciinema.Asciicasts.gc_days()
+    Asciicasts.gc_days()
+  end
+
+  def terminal_font_family_options do
+    for family <- Asciicasts.custom_terminal_font_families() do
+      case family do
+        "FiraCode Nerd Font" -> {"Nerd Font - Fira Code", family}
+        "JetBrainsMono Nerd Font" -> {"Nerd Font - JetBrains Mono", family}
+      end
+    end
   end
 
   defp cols(asciicast), do: asciicast.cols_override || asciicast.cols

priv/repo/migrations/20230402201325_add_terminal_line_height_to_asciicasts.exs

@@ -0,0 +1,9 @@
+defmodule Asciinema.Repo.Migrations.AddTerminalLineHeightToAsciicasts do
+  use Ecto.Migration
+
+  def change do
+    alter table(:asciicasts) do
+      add :terminal_line_height, :float
+    end
+  end
+end

priv/repo/migrations/20230403182405_add_terminal_font_family_to_asciicasts.exs

@@ -0,0 +1,9 @@
+defmodule Asciinema.Repo.Migrations.AddTerminalFontFamilyToAsciicasts do
+  use Ecto.Migration
+
+  def change do
+    alter table(:asciicasts) do
+      add :terminal_font_family, :string
+    end
+  end
+end