WP-FIGMA-REELS-PIXEL-01 — Tab Reels pixel vs Figma

Domain: D-SOCIAL · Surface: CON · Status: IMP · Date: 2026-08-18

Design

JPG 9a1118d49f291e77473812.jpg — màn Reels full-bleed (tab 2). Figma MCP rate-limit lúc implement → bám JPG.

Change

Mục	Trước	Sau
Media	Ảnh thumbnail cover	Video `expo-av` loop khi đang xem; fallback ảnh
Header	`welife` + tab `\|` + FAB cam	WELIFE + Đang theo dõi / Dành cho bạn (gạch xanh) + camera + kính lúp
Cột phải	Tim/cmt/Lưu chữ/share	Avatar + plus đỏ · tim · cmt · bookmark số · Chia sẻ · đĩa nhạc quay
Caption	Handle + place text	`@user` · pin địa điểm `- 1.2km` · caption + hashtag · `Nhạc nền · …`
Paging	`WIN_H - inset.top` (lệch tab)	Chiều cao scene tab · chỉ play reel đang focus

Files

mobile/src/features/social/screens/ReelsFeedScreen.tsx
mobile/src/features/social/components/ReelPage.tsx
mobile/src/features/social/reelsMedia.ts
mobile/src/services/api.ts (SocialReel + lat/lng/title/saveCount)

N/A

Tab bar mockup «Bạn bè / Đăng tin» — CON giữ 5 tab Map · Reels · Social · Contact · Tài khoản
Field nhạc riêng trên BE — dùng title hoặc tên tác giả
Pixel Figma live MCP — Wave JPG (rate-limit)

Verify

Tab Reels → video full màn, vuốt dọc reel kế.
Header WELIFE / Đang theo dõi / Dành cho bạn / search.
Tim · bình luận · lưu (số) · chia sẻ · plus theo dõi · đĩa nhạc.
Caption @handle + pin địa điểm + hashtag.