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/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. */