Clips — Technical Reference

← Back to Clips

Where this lives

Backend

• apps/backend/graphql/types/post.type.js — clips(limit: Int, offset: Int): [Post!]!, documented inline as "Posts of type='clip' (uploaded as a single video, no images) - backs the full-screen vertical Clips feed"
• apps/backend/graphql/resolvers/post.resolver.js — clips resolver calls postManager.getClips; for anonymous callers (!context.user) it passes publicOnly: true
• apps/backend/managers/post-managers/post.manager.js — getClips — delegates to postAccessService.getByType('clip', options)
• apps/backend/data-access-services/post/post.access-service.js — getByType(type, options) — when publicOnly is set (logged-out browsing) it additionally restricts to visibility: 'public', isPublished: true, and excludes posts from private accounts (creator.isPrivate: false)

A clip is not a distinct model — it's a Post with type: 'clip', set at creation time when the post has exactly one video attachment and no images. There is no separate "Clip" GraphQL type; clips returns ordinary Post objects.

Frontend

• apps/frontend-nextjs/src/page-components/ClipsPage.tsx — the authenticated full-screen vertical feed; queries clips, and reuses the same like/save/repost mutations PostCard.tsx uses (hasUserLikedPost/likePost, isPostSaved/savePost, hasUserReposted/repostPost/undoRepost)
• apps/frontend-nextjs/src/page-components/PublicClipsPage.tsx — logged-out view: an infinitely-scrolling grid of public clips (queries clips, relying on the resolver's publicOnly filtering); tapping a tile opens PublicPostViewer, and interactions route to /login
• apps/frontend-nextjs/src/components/public/BrowseGate.tsx — picks ClipsPage vs PublicClipsPage based on useAuth().isAuthenticated
• apps/frontend-nextjs/src/app/clips/page.tsx — /clips route; renders BrowseGate with ClipsPage/PublicClipsPage
• apps/frontend-nextjs/src/components/Navigation.tsx — desktop sidebar link to Clips (ClipIcon), placed right after Explore; also the center item of the mobile bottom bar
• apps/frontend-nextjs/src/components/PostModal.tsx — opened from ClipsPage.tsx to handle commenting on a clip, same modal used by the regular feed
• apps/frontend-nextjs/src/components/stories/CreateClipModal.tsx — a built, working video-first composer (file picker or getUserMedia/MediaRecorder capture, caption, audience picker, calls createPost). Fixed this session: it used to only be imported by a Storybook story (StoriesFeature.stories.tsx), unreachable from any real page (an earlier floating "+" button on ClipsPage.tsx that opened it had been removed, commit 835c2de6, "drop redundant Clips upload FAB", in favor of creating clips through the regular post composer). ClipsPage.tsx now imports it directly and renders it behind a showCreateClip state flag, opened by a "Create clip" FAB (top-right, Plus icon, shown only when authUser is set)

Technical implementation checklist

• clips query — wired end-to-end; ClipsPage.tsx (authenticated) and PublicClipsPage.tsx (logged-out, public-only)
• Like / unlike — wired; shares PostCard.tsx's hasUserLikedPost/likePost mutations
• Save / unsave — wired; shares isPostSaved/savePost mutations
• Repost / undo repost — wired; shares hasUserReposted/repostPost/undoRepost mutations
• Comment — wired via the shared PostModal.tsx
• Dedicated Clips creation UI (record/upload camera flow) — Fixed this session: CreateClipModal.tsx is fully built and now mounted on ClipsPage.tsx behind a "Create clip" FAB; clips can still also be produced by the regular post composer (CreatePostModal.tsx) when a single video is attached

Feed query

query GetClips($limit: Int, $offset: Int) {
  clips(limit: $limit, offset: $offset) {
    id
    text
    userId
    createdAt
    user { id username profilePicture }
    media { id mediaUrl mediaType width height }
  }
}

ClipsPage.tsx follows the same optimistic-toggle pattern as PostCard.tsx for like/save/repost — it queries the current state (hasUserLikedPost, isPostSaved, hasUserReposted) per visible clip and updates local state immediately on tap, before the mutation resolves.