posts: show length of videos and animations in thumbnails.

Show the length of videos and animated posts in the thumbnail. The
length is shown the top left corner in MM:SS format. This replaces the
play button icon.

Show a speaker icon instead of a music note icon for posts with sound.

Doing this requires doing `.includes(:media_asset)` in a bunch of
places to avoid N+1 queries when we access the post's duration.

app/helpers/application_helper.rb

@@ -102,6 +102,20 @@ module ApplicationHelper
     end
   end
 
+  def duration_to_hhmmss(seconds)
+    hh = seconds.div(1.hour).to_s
+    mm = seconds.div(1.minute).to_s
+    ss = "%.2d" % (seconds.round % 1.minute)
+
+    if seconds >= 1.hour
+      "#{hh}:#{mm}:#{ss}"
+    elsif seconds >= 1.second
+      "#{mm}:#{ss}"
+    else
+      "0:01"
+    end
+  end
+
   def humanized_number(number)
     if number >= 1_000_000
       format("%.1fM", number / 1_000_000.0)

app/helpers/components_helper.rb

@@ -4,6 +4,7 @@ module ComponentsHelper
   end
 
   def post_previews_html(posts, **options)
+    posts = posts.includes(:media_asset) if posts.is_a?(ActiveRecord::Relation)
     render PostPreviewComponent.with_collection(posts, **options)
   end
 

app/helpers/icon_helper.rb

@@ -4,9 +4,9 @@ module IconHelper
     tag.i(class: "icon #{icon_class} #{klass}", **options)
   end
 
-  def svg_icon_tag(type, path, class: nil, **options)
+  def svg_icon_tag(type, path, class: nil, viewbox: "0 0 448 512", **options)
     klass = binding.local_variable_get(:class)
-    tag.svg(class: "icon svg-icon #{type} #{klass}", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", **options) do
+    tag.svg(class: "icon svg-icon #{type} #{klass}", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: viewbox, **options) do
       tag.path(fill: "currentColor", d: path)
     end
   end
@@ -158,6 +158,11 @@ module IconHelper
     icon_tag("fas fa-plus", **options)
   end
 
+  # https://fontawesome.com/v6.0/icons/volume-high
+  def sound_icon(**options)
+    svg_icon_tag("sound-icon", "M412.6 182c-10.28-8.334-25.41-6.867-33.75 3.402c-8.406 10.24-6.906 25.35 3.375 33.74C393.5 228.4 400 241.8 400 255.1c0 14.17-6.5 27.59-17.81 36.83c-10.28 8.396-11.78 23.5-3.375 33.74c4.719 5.806 11.62 8.802 18.56 8.802c5.344 0 10.75-1.779 15.19-5.399C435.1 311.5 448 284.6 448 255.1S435.1 200.4 412.6 182zM473.1 108.2c-10.22-8.334-25.34-6.898-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C476.6 172.1 496 213.3 496 255.1s-19.44 82.1-53.31 110.7c-10.25 8.396-11.75 23.5-3.344 33.74c4.75 5.775 11.62 8.771 18.56 8.771c5.375 0 10.75-1.779 15.22-5.431C518.2 366.9 544 313 544 255.1S518.2 145 473.1 108.2zM534.4 33.4c-10.22-8.334-25.34-6.867-33.78 3.34c-8.406 10.24-6.906 25.35 3.344 33.74C559.9 116.3 592 183.9 592 255.1s-32.09 139.7-88.06 185.5c-10.25 8.396-11.75 23.5-3.344 33.74C505.3 481 512.2 484 519.2 484c5.375 0 10.75-1.779 15.22-5.431C601.5 423.6 640 342.5 640 255.1S601.5 88.34 534.4 33.4zM301.2 34.98c-11.5-5.181-25.01-3.076-34.43 5.29L131.8 160.1H48c-26.51 0-48 21.48-48 47.96v95.92c0 26.48 21.49 47.96 48 47.96h83.84l134.9 119.8C272.7 477 280.3 479.8 288 479.8c4.438 0 8.959-.9314 13.16-2.835C312.7 471.8 320 460.4 320 447.9V64.12C320 51.55 312.7 40.13 301.2 34.98z", viewbox: "0 0 640 512", **options)
+  end
+
   def globe_icon(**options)
     icon_tag("fas fa-globe", **options)
   end