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/components/post_preview_component.rb

@@ -5,7 +5,9 @@ class PostPreviewComponent < ApplicationComponent
 
   attr_reader :post, :tags, :show_deleted, :show_cropped, :link_target, :pool, :similarity, :recommended, :compact, :size, :current_user, :options
 
-  delegate :external_link_to, :time_ago_in_words_tagged, :empty_heart_icon, to: :helpers
+  delegate :external_link_to, :time_ago_in_words_tagged, :duration_to_hhmmss, :empty_heart_icon, :sound_icon, to: :helpers
+  delegate :image_width, :image_height, :file_ext, :file_size, :duration, :is_animated?, to: :media_asset
+  delegate :media_asset, to: :post
 
   def initialize(post:, tags: "", show_deleted: false, show_cropped: true, link_target: post, pool: nil, similarity: nil, recommended: nil, compact: nil, size: nil, current_user: CurrentUser.user, **options)
     super
@@ -67,7 +69,7 @@ class PostPreviewComponent < ApplicationComponent
   def data_attributes
     attributes = {
       "data-id" => post.id,
-      "data-has-sound" => post.has_tag?("sound"),
+      "data-has-sound" => has_sound?,
       "data-tags" => post.tag_string,
       "data-approver-id" => post.approver_id,
       "data-rating" => post.rating,
@@ -96,4 +98,8 @@ class PostPreviewComponent < ApplicationComponent
 
     attributes
   end
+
+  def has_sound?
+    post.has_tag?("sound")
+  end
 end

app/components/post_preview_component/post_preview_component.html.erb

@@ -1,5 +1,18 @@
 <%= tag.article id: "post_#{post.id}", **article_attrs do -%>
   <%= link_to polymorphic_path(link_target, q: tags) do -%>
+    <% if is_animated? || has_sound? %>
+      <div class="post-animation-icon absolute top-0.5 left-0.5 p-0.5 leading-none text-xs">
+        <% if is_animated? %>
+          <span class="post-duration align-middle">
+            <%= duration_to_hhmmss(duration) %>
+          </span>
+        <% end %>
+        <% if has_sound? %>
+          <%= sound_icon(class: "h-3 mx-0.5") -%>
+        <% end %>
+      </div>
+    <% end %>
+
     <%= tag.picture do -%>
       <%= tag.source media: "(max-width: 660px)", srcset: cropped_url -%>
       <%= tag.source media: "(min-width: 660px)", srcset: post.preview_file_url -%>

app/components/post_preview_component/post_preview_component.scss

@@ -11,6 +11,12 @@ article.post-preview {
 
   a {
     display: inline-block;
+    position: relative;
+
+    .post-animation-icon {
+      color: var(--preview-icon-color);
+      background: var(--preview-icon-background);
+    }
   }
 
   &.captioned {
@@ -31,14 +37,6 @@ article.post-preview {
   img {
     margin: auto;
   }
-
-  &[data-tags~=animated]::before, &[data-file-ext=swf]::before, &[data-file-ext=webm]::before, &[data-file-ext=mp4]::before, &[data-file-ext=zip]::before {
-    @include animated-icon;
-  }
-
-  &[data-has-sound=true]::before {
-    @include sound-icon;
-  }
 }
 
 /* Avoid dead space around thumbnails in tables. */