"use client"; import Image from "next/image"; import Link from "next/link"; import { useEffect, useRef, useState, useCallback } from "react"; import { useRouter } from "next/navigation"; import { useAppDispatch, useAppSelector } from "@/store/hooks"; import { fetchFeed, deleteFeed, uploadFeed, uploadFeedContent, selectFeedItems, selectFeedsLoading, selectFeedsHasMore, selectFeedsPage, selectFeedsPosting, } from "@/store/slices/feedsSlice"; import { getStoredUser } from "@/lib/utils/persistAuth"; import { useToast } from "@/lib/toast"; import CommentDrawer from "@/features/common/components/CommentDrawer"; import ReportModal from "@/features/common/components/ReportModal"; import type { FeedItem, FeedContentItem } from "@/types/api/feeds.types"; // ── Helpers ─────────────────────────────────────────────────────────────────── function isValidImg(url?: string) { return !!url && !url.includes("no_img"); } function fmtRelTime(d: string) { const diff = Date.now() - new Date(d).getTime(); const m = Math.floor(diff / 60_000); const h = Math.floor(m / 60); if (m < 1) return "just now"; if (m < 60) return `${m}m`; if (h < 24) return `${h}h`; return `${Math.floor(h / 24)}d`; } async function callLikeUnlike(contentId: number, userId: number): Promise { const { default: apiClient } = await import("@/services/api.client"); const { API_ENDPOINTS } = await import("@/lib/constants/apiEndpoints"); const { data } = await apiClient.post<{ status: number; message: string; result: unknown[] }>( API_ENDPOINTS.LIKE_UNLIKE, { user_id: userId, type: 6, content_id: contentId, video_id: 0 }, ); return data.message ?? ""; } // ── Media Grid ──────────────────────────────────────────────────────────────── function MediaGrid({ items }: { items: FeedContentItem[] }) { if (!items.length) return null; const count = Math.min(items.length, 4); const cellStyle = (idx: number): React.CSSProperties => ({ position: "relative", borderRadius: count === 1 ? 10 : 0, overflow: "hidden", background: "#0f172a", gridColumn: count === 3 && idx === 0 ? "1 / span 2" : undefined, minHeight: count === 1 ? 220 : count === 3 && idx === 0 ? 180 : 130, }); const gridTemplate = count === 1 ? "1fr" : count === 2 ? "1fr 1fr" : count === 3 ? "1fr 1fr" : "1fr 1fr"; return (
{items.slice(0, 4).map((item, idx) => (
{item.content_type === 2 && item.video ? ( /* Video */
))}
); } // ── Feed Card ───────────────────────────────────────────────────────────────── function FeedCard({ feed, userId }: { feed: FeedItem; userId: number }) { const dispatch = useAppDispatch(); const { success, error: showError } = useToast(); const [menuOpen, setMenuOpen] = useState(false); const [liked, setLiked] = useState(feed.is_user_like === 1); const [likeCount, setLikeCount] = useState(feed.total_like); const [commentOpen, setCommentOpen] = useState(false); const [reportOpen, setReportOpen] = useState(false); const isChannel = feed.type === 2; const isOwn = !isChannel && feed.user_id === userId; const authorName = isChannel ? (feed.channel_name ?? "Channel") : (feed.user_name ?? "User"); const authorImg = isChannel ? feed.channel_image : feed.user_image; async function handleLike() { if (!userId) { showError("Sign in to like"); const r = typeof window !== 'undefined' && window.location; window.location.href = '/login'; return; } const next = !liked; setLiked(next); setLikeCount((c) => c + (next ? 1 : -1)); try { const msg = await callLikeUnlike(feed.id, userId); success(msg || (next ? "Like Added" : "Unliked Content")); } catch { setLiked(!next); setLikeCount((c) => c + (!next ? 1 : -1)); showError("Failed to update like"); } } async function handleDelete() { const res = await dispatch(deleteFeed({ feedId: feed.id })); if (deleteFeed.fulfilled.match(res)) { success("Post deleted"); } else { showError("Failed to delete post"); } setMenuOpen(false); } return ( <>
{/* ── Header ── */}
{/* Author avatar + name — clickable */} {(() => { const authorHref = isChannel ? `/channel/${feed.channel_id}` : isOwn ? `/profile` : `/user/${feed.user_id}`; const avatarAndName = ( <>
{isValidImg(authorImg) ? : {authorName.charAt(0).toUpperCase()} }
{authorName} {feed.is_verified === 1 && ( )} {isChannel && ( Channel )}
{fmtRelTime(feed.created_at)}
); return authorHref ? ( {avatarAndName} ) : (
{avatarAndName}
); })()} {/* ── Menu ── */}
{menuOpen && (
{isOwn && ( )}
)}
{/* ── Content ── */} {feed.title && (

{feed.title}

)} {feed.description && feed.description !== feed.title && (

{feed.description}

)} {feed.hasteg.length > 0 && (
{feed.hasteg.map((h) => ( #{h.name.trim()} ))}
)} {/* ── Media ── */} {/* ── Action bar ── */}
{/* Like */} {/* Comment */} {/* Share */}
{/* Comment drawer */} setCommentOpen(false)} type={6} contentId={feed.id} videoId={0} title={feed.title} /> {/* Report modal (not applicable for Feed type 6 — report applies to Articles/Clips/Shows) */} setReportOpen(false)} type={1} contentId={feed.id} videoId={0} /> ); } // ── Feed Composer ───────────────────────────────────────────────────────────── function FeedComposer({ userId, onPosted }: { userId: number; onPosted: () => void }) { const dispatch = useAppDispatch(); const isPosting = useAppSelector(selectFeedsPosting); const { success, error: showError } = useToast(); const [open, setOpen] = useState(false); const [title, setTitle] = useState(""); const [desc, setDesc] = useState(""); const [tags, setTags] = useState(""); const [mediaFiles, setMediaFiles] = useState<{ content_type: string; image: string; video: string; preview?: string }[]>([]); const [uploading, setUploading] = useState(false); const fileRef = useRef(null); const VIDEO_CHUNK_SIZE = 2 * 1024 * 1024; // 2 MB per chunk function extractVideoThumbnail(file: File): Promise { return new Promise((resolve, reject) => { const vid = document.createElement("video"); vid.muted = true; vid.playsInline = true; vid.preload = "metadata"; const url = URL.createObjectURL(file); vid.src = url; vid.addEventListener("loadedmetadata", () => { vid.currentTime = Math.min(1, vid.duration / 3); }); vid.addEventListener("seeked", () => { const canvas = document.createElement("canvas"); canvas.width = vid.videoWidth || 640; canvas.height = vid.videoHeight || 360; const ctx = canvas.getContext("2d"); ctx?.drawImage(vid, 0, 0, canvas.width, canvas.height); URL.revokeObjectURL(url); canvas.toBlob( (blob) => blob ? resolve(blob) : reject(new Error("Thumbnail failed")), "image/jpeg", 0.8, ); }); vid.addEventListener("error", () => { URL.revokeObjectURL(url); reject(new Error("Video load error")); }); }); } async function handleFileChange(e: React.ChangeEvent) { const files = Array.from(e.target.files ?? []); if (!files.length) return; setUploading(true); for (const file of files) { const isVideo = file.type.startsWith("video/"); if (!isVideo) { // ── Image upload (single request) ────────────────────────────────── const fd = new FormData(); fd.append("content_type", "1"); fd.append("directory", "feed"); fd.append("image", file); const res = await dispatch(uploadFeedContent({ formData: fd })); if (uploadFeedContent.fulfilled.match(res)) { const r = res.payload; setMediaFiles((prev) => [...prev, { content_type: "1", image: r.file_path, video: "", preview: r.file_path }]); } else { showError("Image upload failed"); } continue; } // ── Video upload (chunk-based) ──────────────────────────────────────── let thumb: Blob; try { thumb = await extractVideoThumbnail(file); } catch { showError("Could not generate video thumbnail"); continue; } const totalChunks = Math.max(1, Math.ceil(file.size / VIDEO_CHUNK_SIZE)); let lastResult = null; let failed = false; for (let i = 0; i < totalChunks; i++) { const start = i * VIDEO_CHUNK_SIZE; const chunk = file.slice(start, Math.min(start + VIDEO_CHUNK_SIZE, file.size)); const fd = new FormData(); fd.append("content_type", "2"); fd.append("directory", "feed"); fd.append("image", thumb, "thumbnail.jpg"); fd.append("chunk_index", String(i)); fd.append("total_chunks", String(totalChunks)); fd.append("file", chunk, `chunk_${i}`); fd.append("video", file, file.name); const res = await dispatch(uploadFeedContent({ formData: fd })); if (uploadFeedContent.fulfilled.match(res)) { lastResult = res.payload; } else { showError(`Video upload failed at chunk ${i + 1}/${totalChunks}`); failed = true; break; } } if (!failed && lastResult) { setMediaFiles((prev) => [...prev, { content_type: "2", image: "", video: lastResult!.file_path, preview: lastResult!.file_path }]); } } setUploading(false); if (fileRef.current) fileRef.current.value = ""; } async function handleSubmit() { if (!title.trim()) { showError("Add a title to post"); return; } const res = await dispatch(uploadFeed({ userId, categoryId: 1, title: title.trim(), description: desc.trim(), hashtag: tags.trim(), feedContent: mediaFiles.map(({ content_type, image, video }) => ({ content_type, image, video })), })); if (uploadFeed.fulfilled.match(res)) { setTitle(""); setDesc(""); setTags(""); setMediaFiles([]); setOpen(false); success("Post published"); onPosted(); } else { showError("Failed to publish post"); } } if (!open) { return ( ); } return (
setTitle(e.target.value)} placeholder="What's happening? *" autoFocus style={{ width: "100%", border: "none", outline: "none", fontSize: "0.9375rem", color: "var(--ink)", background: "transparent", fontFamily: "var(--sans)", fontWeight: 500, marginBottom: "0.375rem" }} />