Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,468 Bytes
f42b4a1 1185ec1 e4d3d8a f42b4a1 bde82a3 e4d3d8a 38d787b e4d3d8a 38d787b e4d3d8a 38d787b e4d3d8a 38d787b e4d3d8a 38d787b e4d3d8a 38d787b e4d3d8a 38d787b 1c60115 38d787b e4d3d8a 38d787b e4d3d8a 38d787b bde82a3 38d787b e4d3d8a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 |
import { cn } from "@/lib/utils/cn"
import { CommentInfo } from "@/types/general"
import { useEffect, useState } from "react"
import { DefaultAvatar } from "../default-avatar"
import { formatTimeAgo } from "@/lib/formatters/formatTimeAgo"
import { CommentWithTimeSeeks } from "./time-seeker"
export function CommentCard({
comment,
replies = []
}: {
comment?: CommentInfo,
replies: CommentInfo[]
}) {
const isLongContent = (comment?.message.length || 0) > 370
const [userThumbnail, setUserThumbnail] = useState(comment?.userInfo?.thumbnail || "")
const [isExpanded, setExpanded] = useState(false)
useEffect(() => {
setUserThumbnail(comment?.userInfo?.thumbnail || "")
}, [comment?.userInfo?.thumbnail])
if (!comment) { return null }
const handleBadUserThumbnail = () => {
try {
if (userThumbnail) {
setUserThumbnail("")
}
} catch (err) {
}
}
return (
<div className={cn(
`flex flex-col w-full`,
)}>
{/* THE COMMENT INFO - HORIZONTAL */}
<div className={cn(
`flex flex-row w-full`,
// `space-x-3`
)}>
<div
// className="flex flex-col w-10 pr-13 overflow-hidden"
className="flex flex-none flex-col w-10 pr-13 overflow-hidden">
{
userThumbnail ?
<div className="flex w-9 rounded-full overflow-hidden">
<img
src={userThumbnail}
onError={handleBadUserThumbnail}
/>
</div>
: <DefaultAvatar
name={comment?.userInfo?.userName}
color="#fde047"
fgColor="#1c1917"
size="36"
round
/>}
</div>
{/* USER INFO AND ACTUAL MESSAGE */}
<div
className={cn(
`flex flex-col items-start justify-center`,
`space-y-1.5`,
)}
>
<div className="flex flex-row space-x-3">
<div className="text-xs font-medium text-zinc-100">@{comment?.userInfo?.userName}</div>
<div className="text-xs font-medium text-neutral-400">{formatTimeAgo(comment.updatedAt)}</div>
</div>
<CommentWithTimeSeeks
className={cn(
`text-sm font-normal`,
`shrink`,
`overflow-hidden break-words`,
isExpanded ? `` : `line-clamp-4`
)}
linkClassName="font-medium text-neutral-400 cursor-pointer hover:underline"
onSeek={(timeInSec) => {
try {
const videoElement: HTMLVideoElement | undefined = (document.getElementsByClassName("tuby-container")?.[0]?.children?.[0] as any)
if (videoElement) {
videoElement.currentTime = timeInSec
}
} catch (err) {
//
}
}}>{
comment.message
}</CommentWithTimeSeeks>
{isLongContent &&
<div className={cn(
`flex`,
`text-sm font-medium text-neutral-400`,
`cursor-pointer`,
`hover:underline`
)}
onClick={() => {
setExpanded(!isExpanded)
}}
>
{isExpanded ? 'Read less' : 'Read more'}
</div>}
</div>
</div>
{/* THE REPLIES */}
{/* TODO */}
</div>
)
} |