Format duration

lib/music_library_web/components/record_components.ex

@@ -319,6 +319,44 @@ defmodule MusicLibraryWeb.RecordComponents do
   defp packaging_label("None"), do: gettext("Digital download")
   defp packaging_label(other), do: other
 
+  def format_duration(milliseconds) do
+    milliseconds
+    |> System.convert_time_unit(:millisecond, :second)
+    |> format_seconds()
+  end
+
+  defp format_seconds(seconds) when seconds <= 59 do
+    "0:#{zero_pad(seconds)}"
+  end
+
+  defp format_seconds(seconds) do
+    minutes = div(seconds, 60)
+    remaining_seconds = rem(seconds, 60)
+
+    format_minutes(minutes, remaining_seconds)
+  end
+
+  defp format_minutes(minutes, seconds) when minutes <= 59 do
+    "#{minutes}:#{zero_pad(seconds)}"
+  end
+
+  defp format_minutes(minutes, seconds) do
+    hours = div(minutes, 60)
+    remaining_minutes = rem(minutes, 60)
+
+    format_hours(hours, remaining_minutes, seconds)
+  end
+
+  defp format_hours(hours, minutes, seconds) do
+    "#{hours}:#{zero_pad(minutes)}:#{zero_pad(seconds)}"
+  end
+
+  defp zero_pad(integer) do
+    integer
+    |> to_string()
+    |> String.pad_leading(2, "0")
+  end
+
   def toggle_actions_menu(record_id) do
     JS.toggle(to: "#actions-#{record_id}")
     |> JS.toggle_class("pointer-events-none", to: "#records > li")

lib/music_library_web/live/collection_live/show.ex

@@ -7,7 +7,8 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
       close_actions_menu: 1,
       format_label: 1,
       type_label: 1,
-      selected_release_label: 1
+      selected_release_label: 1,
+      format_duration: 1
     ]
 
   alias MusicLibrary.Records

lib/music_library_web/live/collection_live/show.html.heex

@@ -312,8 +312,10 @@
           >
             <div class="table-row">
               <span class="table-cell text-xs text-right pr-1">{track.position}</span>
-              <span class="table-cell text-sm font-medium leading-6">{track.title}</span>
-              <span class="table-cell text-xs text-right pl-1">{track.length}</span>
+              <span class="table-cell text-xs font-medium leading-8">{track.title}</span>
+              <span class="table-cell text-xs text-right pl-2">
+                {format_duration(track.length)}
+              </span>
             </div>
             <div :if={release_with_tracks.artists !== track.artists} class="table-row text-xs">
               <span class="table-cell" />