From d8a55bd62b664f7a8f01e846785455b3e7d7707a Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 2 Nov 2021 02:53:42 -0500
Subject: [PATCH] comments: fix video duration not being shown on thumbnails

Fix the video duration not being shown on thumbnails on the
https://danbooru.donmai.us/comments page.

BUG: this introduces duplicate HTML ids on the comments page. Post
thumbnails and post comment containers both have the same html ID.
---
 app/javascript/src/styles/common/messages.scss   |  3 ++-
 app/javascript/src/styles/common/utilities.scss  |  1 +
 app/javascript/src/styles/specific/comments.scss | 12 ------------
 app/views/comments/_index_by_comment.html.erb    | 10 ++++------
 app/views/comments/_index_by_post.html.erb       |  8 +++-----
 test/functional/comments_controller_test.rb      |  6 +++---
 6 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/app/javascript/src/styles/common/messages.scss b/app/javascript/src/styles/common/messages.scss
index a8f3f9323..db2ba5578 100644
--- a/app/javascript/src/styles/common/messages.scss
+++ b/app/javascript/src/styles/common/messages.scss
@@ -1,9 +1,10 @@
 div.list-of-messages {
   margin: 1em 0;
 
+  > * + * { margin-top: 2em; }
+
   article.message {
     display: flex;
-    margin-top: 2em;
     word-wrap: break-word;
     padding: 5px;
 
diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss
index fc9485a33..2b5a2f4e7 100644
--- a/app/javascript/src/styles/common/utilities.scss
+++ b/app/javascript/src/styles/common/utilities.scss
@@ -68,6 +68,7 @@ $spacer: 0.25rem; /* 4px */
 .align-top { vertical-align: top; }
 .align-middle { vertical-align: middle; }
 
+.flex-1 { flex: 1 1 0%; }
 .flex-auto { flex: 1 1 auto; }
 .items-center { align-items: center; }
 .justify-center { justify-content: center; }
diff --git a/app/javascript/src/styles/specific/comments.scss b/app/javascript/src/styles/specific/comments.scss
index 3cc16479d..4530c5b9f 100644
--- a/app/javascript/src/styles/specific/comments.scss
+++ b/app/javascript/src/styles/specific/comments.scss
@@ -17,18 +17,6 @@ div#c-comments {
     div.post {
       display: flex;
       margin-bottom: 4em;
-
-      div.preview {
-        width: 154px;
-        height: 154px;
-        margin-right: 30px;
-        overflow: hidden;
-        text-align: center;
-      }
-
-      div.comment-section {
-        flex: 1;
-      }
     }
   }
 }
diff --git a/app/views/comments/_index_by_comment.html.erb b/app/views/comments/_index_by_comment.html.erb
index 206ba5a98..8e58bae78 100644
--- a/app/views/comments/_index_by_comment.html.erb
+++ b/app/views/comments/_index_by_comment.html.erb
@@ -3,12 +3,10 @@
     <% dtext_data = DText.preprocess(@comments.map(&:body)) %>
 
     <% @comments.each do |comment| %>
-      <%= tag.div id: "post_#{comment.post.id}", **PostPreviewComponent.new(post: comment.post).article_attrs("post") do %>
-        <div class="preview">
-          <% if policy(comment.post).visible? %>
-            <%= link_to(image_tag(comment.post.preview_file_url), post_path(comment.post)) %>
-          <% end %>
-        </div>
+      <%= tag.div id: "post_#{comment.post.id}", **PostPreviewComponent.new(post: comment.post).article_attrs("post space-x-4") do %>
+        <% if policy(comment.post).visible? %>
+          <%= post_preview(comment.post, show_deleted: true) %>
+        <% end %>
 
         <%= render_comment(comment, dtext_data: dtext_data, context: :index_by_comment, current_user: CurrentUser.user) %>
       <% end %>
diff --git a/app/views/comments/_index_by_post.html.erb b/app/views/comments/_index_by_post.html.erb
index 1e976ab28..f3ffffb46 100644
--- a/app/views/comments/_index_by_post.html.erb
+++ b/app/views/comments/_index_by_post.html.erb
@@ -4,12 +4,10 @@
   <% end %>
 
   <% @posts.select(&:visible?).each do |post| %>
-    <%= tag.div id: "post_#{post.id}", **PostPreviewComponent.new(post: post).article_attrs("post") do %>
-      <div class="preview">
-        <%= link_to(image_tag(post.preview_file_url), post_path(post)) %>
-      </div>
+    <%= tag.div id: "post_#{post.id}", **PostPreviewComponent.new(post: post).article_attrs("post space-x-4") do %>
+      <%= post_preview(post, show_deleted: true) %>
 
-      <div class="comment-section">
+      <div class="flex-1">
         <%= render "comments/partials/index/header", post: post %>
         <%= render_comment_section(post, limit: 6, current_user: CurrentUser.user) %>
       </div>
diff --git a/test/functional/comments_controller_test.rb b/test/functional/comments_controller_test.rb
index 13608c82f..43cf2bacc 100644
--- a/test/functional/comments_controller_test.rb
+++ b/test/functional/comments_controller_test.rb
@@ -31,9 +31,9 @@ class CommentsControllerTest < ActionDispatch::IntegrationTest
           get comments_path(group_by: "post")
 
           assert_response :success
-          assert_select "#post_#{@post.id}", 1
-          assert_select "#post_#{@post.id} .comment", 1
-          assert_select "#post_#{@post.id} .show-all-comments-link", 0
+          assert_select "div#post_#{@post.id}", 1
+          assert_select "div#post_#{@post.id} .comment", 1
+          assert_select "div#post_#{@post.id} .show-all-comments-link", 0
         end
 
         should "not bump posts with nonbumping comments" do