feat: add popular comments viewing to the release page

app/components/Comments/Comments.Comment.tsx

@@ -0,0 +1,97 @@
+import { unixToDate } from "#/api/utils";
+import { useEffect, useState } from "react";
+import { ENDPOINTS } from "#/api/config";
+
+export const CommentsComment = (props: {
+  profile: { login: string; avatar: string; id: number };
+  comment: {
+    id: number;
+    timestamp: number;
+    message: string;
+    likes: number;
+    reply_count: number;
+  };
+  isSubComment?: boolean;
+}) => {
+  const [replies, setReplies] = useState([]);
+  useEffect(() => {
+    async function _fetchReplies() {
+      await fetch(
+        `${ENDPOINTS.release.info}/comment/replies/${props.comment.id}/0?sort=2`
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          setReplies(data.content);
+        });
+    }
+    if (!props.isSubComment && props.comment.reply_count > 0) {
+      _fetchReplies();
+    }
+  }, []);
+
+  return (
+    <article className="p-6 text-base bg-white rounded-lg dark:bg-gray-900">
+      <footer className="flex items-center justify-between mb-2">
+        <div className="flex items-center">
+          <p className="inline-flex items-center mr-3 text-sm font-semibold text-gray-900 dark:text-white">
+            <img
+              className="w-6 h-6 mr-2 rounded-full"
+              src={props.profile.avatar}
+              alt={props.profile.login}
+            />
+            {props.profile.login}
+          </p>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            <time
+              dateTime={props.comment.timestamp.toString()}
+              title={unixToDate(props.comment.timestamp, "full")}
+            >
+              {unixToDate(props.comment.timestamp)}
+            </time>
+          </p>
+        </div>
+      </footer>
+      <p className="text-gray-500 whitespace-pre-wrap dark:text-gray-400">
+        {props.comment.message}
+      </p>
+      <div className="flex items-center mt-4 space-x-4">
+        <button
+          type="button"
+          className="flex items-center text-sm font-medium text-gray-500 hover:underline dark:text-gray-400"
+        >
+          <svg
+            className="mr-1.5 w-3.5 h-3.5"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 20 18"
+          >
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M5 5h5M5 8h2m6-3h2m-5 3h6m2-7H2a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h3v5l5-5h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1Z"
+            />
+          </svg>
+          Ответить
+        </button>
+      </div>
+      {replies.length > 0 &&
+        replies.map((comment: any) => (
+          <CommentsComment
+            key={comment.id}
+            profile={comment.profile}
+            comment={{
+              id: comment.id,
+              timestamp: comment.timestamp,
+              message: comment.message,
+              likes: comment.likes_count,
+              reply_count: comment.reply_count,
+            }}
+            isSubComment={true}
+          />
+        ))}
+    </article>
+  );
+};

app/components/Comments/Comments.Main.tsx

@@ -0,0 +1,64 @@
+import { Card, Button } from "flowbite-react";
+import { CommentsComment } from "./Comments.Comment";
+export const CommentsMain = (props: {
+  release_id: number;
+  token: string | null;
+  comments: any;
+}) => {
+  return (
+    <Card className="antialiased">
+      <div className="max-w-2xl px-4 mx-auto">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex flex-col gap-1">
+            <h2 className="text-lg font-bold text-gray-900 lg:text-2xl dark:text-white">
+              Комментарии
+            </h2>
+            <p className="text-sm font-bold text-gray-600 dark:text-gray-300">
+              Популярные и актуальные
+            </p>
+          </div>
+          <Button
+            size={"sm"}
+            className="text-gray-500 border border-gray-600 rounded-full"
+            color="inline"
+          >
+            Показать все
+          </Button>
+        </div>
+        <form className="mb-6">
+          <div className="px-4 py-2 mb-4 bg-white border border-gray-200 rounded-lg rounded-t-lg dark:bg-gray-800 dark:border-gray-700">
+            <label htmlFor="comment" className="sr-only">
+              Ваш комментарий
+            </label>
+            <textarea
+              id="comment"
+              rows={4}
+              className="w-full px-0 text-sm text-gray-900 border-0 focus:ring-0 focus:outline-none dark:text-white dark:placeholder-gray-400 dark:bg-gray-800"
+              placeholder="Написать комментарий..."
+              required
+            ></textarea>
+          </div>
+          <Button
+            type="submit"
+            color="blue"
+          >
+            Оставить комментарий
+          </Button>
+        </form>
+        {props.comments.map((comment: any) => (
+          <CommentsComment
+            key={comment.id}
+            profile={comment.profile}
+            comment={{
+              id: comment.id,
+              timestamp: comment.timestamp,
+              message: comment.message,
+              likes: comment.likes_count,
+              reply_count: comment.reply_count,
+            }}
+          />
+        ))}
+      </div>
+    </Card>
+  );
+};

app/components/ReleasePlayer/ReleasePlayer.tsx

@@ -97,7 +97,7 @@ export const ReleasePlayer = (props: { id: number }) => {
   return (
     <Card>
       {!voiceoverInfo || !sourcesInfo || !episodeInfo ? (
-        <div className="flex items-center justify-center w-full aspect-[16/12]">
+        <div className="flex items-center justify-center w-full aspect-video">
           <Spinner />
         </div>
       ) : (