tr]:last:border-b-0",
48 | className
49 | )}
50 | {...props}
51 | />
52 | )
53 | }
54 |
55 | function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
56 | return (
57 | |
65 | )
66 | }
67 |
68 | function TableHead({ className, ...props }: React.ComponentProps<"th">) {
69 | return (
70 | [role=checkbox]]:translate-y-[2px]",
74 | className
75 | )}
76 | {...props}
77 | />
78 | )
79 | }
80 |
81 | function TableCell({ className, ...props }: React.ComponentProps<"td">) {
82 | return (
83 | | [role=checkbox]]:translate-y-[2px]",
87 | className
88 | )}
89 | {...props}
90 | />
91 | )
92 | }
93 |
94 | function TableCaption({
95 | className,
96 | ...props
97 | }: React.ComponentProps<"caption">) {
98 | return (
99 |
104 | )
105 | }
106 |
107 | export {
108 | Table,
109 | TableHeader,
110 | TableBody,
111 | TableFooter,
112 | TableHead,
113 | TableRow,
114 | TableCell,
115 | TableCaption,
116 | }
117 |
--------------------------------------------------------------------------------
/src/db/schema.ts:
--------------------------------------------------------------------------------
1 | import { relations } from "drizzle-orm";
2 | import { integer, pgEnum, pgTable, text, timestamp, uniqueIndex, uuid } from "drizzle-orm/pg-core";
3 |
4 | import { createInsertSchema, createSelectSchema, createUpdateSchema } from "drizzle-zod";
5 |
6 | export const users = pgTable(
7 | "users",
8 | {
9 | id: uuid("id").primaryKey().defaultRandom(),
10 | clerkId: text("clerk_id").unique().notNull(),
11 | name: text("name").notNull(),
12 | // Todo: add banner fields
13 | imageUrl: text("image_url").notNull(),
14 | createdAt: timestamp("created_at").defaultNow().notNull(),
15 | updatedAt: timestamp("updated_at").defaultNow().notNull(),
16 | },
17 | (t) => [uniqueIndex("clerk_id_idx").on(t.clerkId)]
18 | );
19 |
20 | export const userRelations = relations(users, ({ many }) => ({
21 | videos: many(videos),
22 | }));
23 |
24 | export const categories = pgTable(
25 | "categories",
26 | {
27 | id: uuid("id").primaryKey().defaultRandom(),
28 | name: text("name").notNull().unique(),
29 | description: text("description"),
30 | createdAt: timestamp("created_at").defaultNow().notNull(),
31 | updatedAt: timestamp("updated_at").defaultNow().notNull(),
32 | },
33 | (t) => [uniqueIndex("name_idx").on(t.name)]
34 | );
35 |
36 | export const categoryRelations = relations(categories, ({ many }) => ({
37 | videos: many(videos),
38 | }));
39 |
40 | export const videoVisibility = pgEnum("video_visibility", ["public", "private"]);
41 |
42 | export const videos = pgTable("videos", {
43 | id: uuid("id").primaryKey().defaultRandom(),
44 | title: text("title").notNull(),
45 | description: text("description"),
46 | muxStatus: text("mux_status"),
47 | muxAssetId: text("mux_asset_id").unique(),
48 | muxUploadId: text("mux_upload_id").unique(),
49 | muxPlaybackId: text("mux_playback_id").unique(),
50 | muxTrackId: text("mux_track_id").unique(),
51 | muxTrackStatus: text("mux_track_status"),
52 | thumbnailUrl: text("thumbnail_url"),
53 | thumbnailKey: text("thumbnail_key"),
54 | previewUrl: text("preview_url"),
55 | previewKey: text("preview_key"),
56 | duration: integer("duration").default(0).notNull(),
57 | visibility: videoVisibility("visibility").notNull().default("private"),
58 | userId: uuid("user_id")
59 | .references(() => users.id, { onDelete: "cascade" })
60 | .notNull(),
61 | categoryId: uuid("category_id").references(() => categories.id, {
62 | onDelete: "set null",
63 | }),
64 | createdAt: timestamp("created_at").defaultNow().notNull(),
65 | updatedAt: timestamp("updated_at").defaultNow().notNull(),
66 | });
67 |
68 | export const videoInsertSchema = createInsertSchema(videos);
69 | export const videoUpdateSchema = createUpdateSchema(videos);
70 | export const videoSelectSchema = createSelectSchema(videos);
71 |
72 | export const videoRelations = relations(videos, ({ one }) => ({
73 | user: one(users, {
74 | fields: [videos.userId],
75 | references: [users.id],
76 | }),
77 | category: one(categories, {
78 | fields: [videos.categoryId],
79 | references: [categories.id],
80 | }),
81 | }));
82 |
--------------------------------------------------------------------------------
/src/components/filter-carousel.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { cn } from "@/lib/utils";
4 | import { useEffect, useState } from "react";
5 | import { Badge } from "./ui/badge";
6 | import { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "./ui/carousel";
7 | import { Skeleton } from "./ui/skeleton";
8 |
9 | interface FilterCarouselProps {
10 | value?: string | null;
11 | isLoading?: boolean;
12 | onSelect: (value: string | null) => void;
13 | data: {
14 | value: string;
15 | label: string;
16 | }[];
17 | }
18 |
19 | export const FilterCarousel = ({ value, isLoading, onSelect, data }: FilterCarouselProps) => {
20 | const [api, setApi] = useState();
21 | const [current, setCurrent] = useState(0);
22 | const [count, setCount] = useState(0);
23 |
24 | useEffect(() => {
25 | if (!api) return;
26 | setCount(api.scrollSnapList().length);
27 | setCurrent(api.selectedScrollSnap() + 1);
28 | api.on("select", () => {
29 | setCurrent(api.selectedScrollSnap() + 1);
30 | });
31 | }, [api]);
32 |
33 | return (
34 |
35 | {/* Left fade */}
36 |
42 |
43 |
51 |
52 | {!isLoading && (
53 | onSelect(null)}>
54 |
58 | All
59 |
60 |
61 | )}
62 | {isLoading &&
63 | Array.from({ length: 14 }).map((_, index) => (
64 |
65 |
66 |
67 | ))}
68 |
69 | {!isLoading &&
70 | data.map((item) => (
71 | onSelect(item.value)}>
72 | onSelect(item.value)}
76 | >
77 | {item.label}
78 |
79 |
80 | ))}
81 |
82 |
83 |
84 |
85 |
86 | {/* Right fade */}
87 |
93 |
153 | {body}
154 |
155 | )
156 | }
157 |
158 | export {
159 | useFormField,
160 | Form,
161 | FormItem,
162 | FormLabel,
163 | FormControl,
164 | FormDescription,
165 | FormMessage,
166 | FormField,
167 | }
168 |
--------------------------------------------------------------------------------
/src/components/ui/drawer.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { Drawer as DrawerPrimitive } from "vaul"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | function Drawer({
9 | ...props
10 | }: React.ComponentProps) {
11 | return
12 | }
13 |
14 | function DrawerTrigger({
15 | ...props
16 | }: React.ComponentProps) {
17 | return
18 | }
19 |
20 | function DrawerPortal({
21 | ...props
22 | }: React.ComponentProps) {
23 | return
24 | }
25 |
26 | function DrawerClose({
27 | ...props
28 | }: React.ComponentProps) {
29 | return
30 | }
31 |
32 | function DrawerOverlay({
33 | className,
34 | ...props
35 | }: React.ComponentProps) {
36 | return (
37 |
45 | )
46 | }
47 |
48 | function DrawerContent({
49 | className,
50 | children,
51 | ...props
52 | }: React.ComponentProps) {
53 | return (
54 |
55 |
56 |
68 |
69 | {children}
70 |
71 |
72 | )
73 | }
74 |
75 | function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
76 | return (
77 |
82 | )
83 | }
84 |
85 | function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
86 | return (
87 |
92 | )
93 | }
94 |
95 | function DrawerTitle({
96 | className,
97 | ...props
98 | }: React.ComponentProps) {
99 | return (
100 |
105 | )
106 | }
107 |
108 | function DrawerDescription({
109 | className,
110 | ...props
111 | }: React.ComponentProps) {
112 | return (
113 |
118 | )
119 | }
120 |
121 | export {
122 | Drawer,
123 | DrawerPortal,
124 | DrawerOverlay,
125 | DrawerTrigger,
126 | DrawerClose,
127 | DrawerContent,
128 | DrawerHeader,
129 | DrawerFooter,
130 | DrawerTitle,
131 | DrawerDescription,
132 | }
133 |
--------------------------------------------------------------------------------
/src/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 | import { X } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 |
10 | const Sheet = SheetPrimitive.Root
11 |
12 | const SheetTrigger = SheetPrimitive.Trigger
13 |
14 | const SheetClose = SheetPrimitive.Close
15 |
16 | const SheetPortal = SheetPrimitive.Portal
17 |
18 | const SheetOverlay = React.forwardRef<
19 | React.ElementRef,
20 | React.ComponentPropsWithoutRef
21 | >(({ className, ...props }, ref) => (
22 |
30 | ))
31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
32 |
33 | const sheetVariants = cva(
34 | "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
35 | {
36 | variants: {
37 | side: {
38 | top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
39 | bottom:
40 | "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
41 | left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
42 | right:
43 | "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
44 | },
45 | },
46 | defaultVariants: {
47 | side: "right",
48 | },
49 | }
50 | )
51 |
52 | interface SheetContentProps
53 | extends React.ComponentPropsWithoutRef,
54 | VariantProps {}
55 |
56 | const SheetContent = React.forwardRef<
57 | React.ElementRef,
58 | SheetContentProps
59 | >(({ side = "right", className, children, ...props }, ref) => (
60 |
61 |
62 |
67 |
68 |
69 | Close
70 |
71 | {children}
72 |
73 |
74 | ))
75 | SheetContent.displayName = SheetPrimitive.Content.displayName
76 |
77 | const SheetHeader = ({
78 | className,
79 | ...props
80 | }: React.HTMLAttributes) => (
81 |
88 | )
89 | SheetHeader.displayName = "SheetHeader"
90 |
91 | const SheetFooter = ({
92 | className,
93 | ...props
94 | }: React.HTMLAttributes) => (
95 |
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 |
105 | const SheetTitle = React.forwardRef<
106 | React.ElementRef,
107 | React.ComponentPropsWithoutRef
108 | >(({ className, ...props }, ref) => (
109 |
114 | ))
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName
116 |
117 | const SheetDescription = React.forwardRef<
118 | React.ElementRef,
119 | React.ComponentPropsWithoutRef
120 | >(({ className, ...props }, ref) => (
121 |
126 | ))
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName
128 |
129 | export {
130 | Sheet,
131 | SheetPortal,
132 | SheetOverlay,
133 | SheetTrigger,
134 | SheetClose,
135 | SheetContent,
136 | SheetHeader,
137 | SheetFooter,
138 | SheetTitle,
139 | SheetDescription,
140 | }
141 |
--------------------------------------------------------------------------------
/src/modules/videos/server/procedures.ts:
--------------------------------------------------------------------------------
1 | import { db } from "@/db";
2 | import { videos, videoUpdateSchema } from "@/db/schema";
3 | import { mux } from "@/lib/mux";
4 | import { createTRPCRouter, protectedProcedure } from "@/trpc/init";
5 | import { TRPCError } from "@trpc/server";
6 | import { and, eq } from "drizzle-orm";
7 | import { UTApi } from "uploadthing/server";
8 | import z from "zod";
9 |
10 | const ensureMuxCredentials = () => {
11 | if (!process.env.MUX_TOKEN_ID || !process.env.MUX_TOKEN_SECRET) {
12 | throw new TRPCError({
13 | code: "INTERNAL_SERVER_ERROR",
14 | message: "Missing Mux credentials. Set MUX_TOKEN_ID and MUX_TOKEN_SECRET.",
15 | });
16 | }
17 | };
18 |
19 | export const videosRouter = createTRPCRouter({
20 | restoreThumbnail: protectedProcedure
21 | .input(z.object({ id: z.uuid() }))
22 | .mutation(async ({ ctx, input }) => {
23 | const { id: userId } = ctx.user;
24 |
25 | const [existingVideo] = await db
26 | .select()
27 | .from(videos)
28 | .where(and(eq(videos.id, input.id), eq(videos.userId, userId)));
29 |
30 | if (!existingVideo) {
31 | throw new TRPCError({ code: "NOT_FOUND" });
32 | }
33 |
34 | if (!existingVideo.muxPlaybackId) {
35 | throw new TRPCError({ code: "BAD_REQUEST" });
36 | }
37 |
38 | const tempthumbnailUrl = `https://image.mux.com/${existingVideo.muxPlaybackId}/thumbnail.png`;
39 |
40 | const utapi = new UTApi();
41 | const uploadedThumbnail = await utapi.uploadFilesFromUrl(tempthumbnailUrl);
42 |
43 | if (!uploadedThumbnail.data) {
44 | throw new TRPCError({ code: "BAD_REQUEST" });
45 | }
46 |
47 | const { key: thumbnailKey, ufsUrl: thumbnailUrl } = uploadedThumbnail.data;
48 |
49 | const [updatedVideo] = await db
50 | .update(videos)
51 | .set({ thumbnailUrl, thumbnailKey })
52 | .where(and(eq(videos.id, input.id), eq(videos.userId, userId)))
53 | .returning();
54 |
55 | return updatedVideo;
56 | }),
57 |
58 | remove: protectedProcedure.input(z.object({ id: z.uuid() })).mutation(async ({ ctx, input }) => {
59 | const { id: userId } = ctx.user;
60 |
61 | const [removeVideo] = await db
62 | .delete(videos)
63 | .where(and(eq(videos.id, input.id), eq(videos.userId, userId)))
64 | .returning();
65 |
66 | if (!removeVideo) {
67 | throw new TRPCError({ code: "NOT_FOUND" });
68 | }
69 |
70 | return removeVideo;
71 | }),
72 | update: protectedProcedure.input(videoUpdateSchema).mutation(async ({ ctx, input }) => {
73 | const { id: userId } = ctx.user;
74 |
75 | if (!input.id) {
76 | throw new TRPCError({ code: "BAD_REQUEST" });
77 | }
78 |
79 | const [updatedVideo] = await db
80 | .update(videos)
81 | .set({
82 | title: input.title,
83 | description: input.description,
84 | categoryId: input.categoryId,
85 | visibility: input.visibility,
86 | updatedAt: new Date(),
87 | })
88 | .where(and(eq(videos.id, input.id), eq(videos.userId, userId)))
89 | .returning();
90 |
91 | if (!updatedVideo) {
92 | throw new TRPCError({ code: "NOT_FOUND" });
93 | }
94 |
95 | return updatedVideo;
96 | }),
97 | create: protectedProcedure.mutation(async ({ ctx }) => {
98 | const { id: userId } = ctx.user;
99 |
100 | try {
101 | ensureMuxCredentials();
102 |
103 | const upload = await mux.video.uploads.create({
104 | new_asset_settings: {
105 | passthrough: userId,
106 | playback_policies: ["public"],
107 | static_renditions: [
108 | {
109 | resolution: "highest",
110 | },
111 | {
112 | resolution: "audio-only",
113 | },
114 | ],
115 | input: [
116 | {
117 | generated_subtitles: [
118 | {
119 | language_code: "en",
120 | name: "English",
121 | },
122 | ],
123 | },
124 | ],
125 | },
126 | cors_origin: "*", // TODO: In production this should be restricted to the domain of the app
127 | });
128 |
129 | const [video] = await db
130 | .insert(videos)
131 | .values({
132 | userId,
133 | title: "Untitled",
134 | muxStatus: "waiting",
135 | muxUploadId: upload.id,
136 | })
137 | .returning();
138 |
139 | return {
140 | video,
141 | url: upload.url,
142 | };
143 | } catch (error) {
144 | console.error("Failed to create Mux upload", error);
145 | throw new TRPCError({
146 | code: "INTERNAL_SERVER_ERROR",
147 | message: "Unable to create upload. Check your Mux credentials and quota.",
148 | });
149 | }
150 | }),
151 | });
152 |
--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
5 |
6 | import { cn } from "@/lib/utils"
7 | import { buttonVariants } from "@/components/ui/button"
8 |
9 | const AlertDialog = AlertDialogPrimitive.Root
10 |
11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
12 |
13 | const AlertDialogPortal = AlertDialogPrimitive.Portal
14 |
15 | const AlertDialogOverlay = React.forwardRef<
16 | React.ElementRef,
17 | React.ComponentPropsWithoutRef
18 | >(({ className, ...props }, ref) => (
19 |
27 | ))
28 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
29 |
30 | const AlertDialogContent = React.forwardRef<
31 | React.ElementRef,
32 | React.ComponentPropsWithoutRef
33 | >(({ className, ...props }, ref) => (
34 |
35 |
36 |
44 |
45 | ))
46 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
47 |
48 | const AlertDialogHeader = ({
49 | className,
50 | ...props
51 | }: React.HTMLAttributes) => (
52 |
59 | )
60 | AlertDialogHeader.displayName = "AlertDialogHeader"
61 |
62 | const AlertDialogFooter = ({
63 | className,
64 | ...props
65 | }: React.HTMLAttributes) => (
66 |
73 | )
74 | AlertDialogFooter.displayName = "AlertDialogFooter"
75 |
76 | const AlertDialogTitle = React.forwardRef<
77 | React.ElementRef,
78 | React.ComponentPropsWithoutRef
79 | >(({ className, ...props }, ref) => (
80 |
85 | ))
86 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
87 |
88 | const AlertDialogDescription = React.forwardRef<
89 | React.ElementRef,
90 | React.ComponentPropsWithoutRef
91 | >(({ className, ...props }, ref) => (
92 |
97 | ))
98 | AlertDialogDescription.displayName =
99 | AlertDialogPrimitive.Description.displayName
100 |
101 | const AlertDialogAction = React.forwardRef<
102 | React.ElementRef,
103 | React.ComponentPropsWithoutRef
104 | >(({ className, ...props }, ref) => (
105 |
110 | ))
111 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
112 |
113 | const AlertDialogCancel = React.forwardRef<
114 | React.ElementRef,
115 | React.ComponentPropsWithoutRef
116 | >(({ className, ...props }, ref) => (
117 |
126 | ))
127 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
128 |
129 | export {
130 | AlertDialog,
131 | AlertDialogPortal,
132 | AlertDialogOverlay,
133 | AlertDialogTrigger,
134 | AlertDialogContent,
135 | AlertDialogHeader,
136 | AlertDialogFooter,
137 | AlertDialogTitle,
138 | AlertDialogDescription,
139 | AlertDialogAction,
140 | AlertDialogCancel,
141 | }
142 |
--------------------------------------------------------------------------------
/src/components/ui/command.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import { type DialogProps } from "@radix-ui/react-dialog"
5 | import { Command as CommandPrimitive } from "cmdk"
6 | import { Search } from "lucide-react"
7 |
8 | import { cn } from "@/lib/utils"
9 | import { Dialog, DialogContent } from "@/components/ui/dialog"
10 |
11 | const Command = React.forwardRef<
12 | React.ElementRef,
13 | React.ComponentPropsWithoutRef
14 | >(({ className, ...props }, ref) => (
15 |
23 | ))
24 | Command.displayName = CommandPrimitive.displayName
25 |
26 | const CommandDialog = ({ children, ...props }: DialogProps) => {
27 | return (
28 |
35 | )
36 | }
37 |
38 | const CommandInput = React.forwardRef<
39 | React.ElementRef,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, ...props }, ref) => (
42 |
43 |
44 |
52 |
53 | ))
54 |
55 | CommandInput.displayName = CommandPrimitive.Input.displayName
56 |
57 | const CommandList = React.forwardRef<
58 | React.ElementRef,
59 | React.ComponentPropsWithoutRef
60 | >(({ className, ...props }, ref) => (
61 |
66 | ))
67 |
68 | CommandList.displayName = CommandPrimitive.List.displayName
69 |
70 | const CommandEmpty = React.forwardRef<
71 | React.ElementRef,
72 | React.ComponentPropsWithoutRef
73 | >((props, ref) => (
74 |
79 | ))
80 |
81 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
82 |
83 | const CommandGroup = React.forwardRef<
84 | React.ElementRef,
85 | React.ComponentPropsWithoutRef
86 | >(({ className, ...props }, ref) => (
87 |
95 | ))
96 |
97 | CommandGroup.displayName = CommandPrimitive.Group.displayName
98 |
99 | const CommandSeparator = React.forwardRef<
100 | React.ElementRef,
101 | React.ComponentPropsWithoutRef
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
110 |
111 | const CommandItem = React.forwardRef<
112 | React.ElementRef,
113 | React.ComponentPropsWithoutRef
114 | >(({ className, ...props }, ref) => (
115 |
123 | ))
124 |
125 | CommandItem.displayName = CommandPrimitive.Item.displayName
126 |
127 | const CommandShortcut = ({
128 | className,
129 | ...props
130 | }: React.HTMLAttributes) => {
131 | return (
132 |
139 | )
140 | }
141 | CommandShortcut.displayName = "CommandShortcut"
142 |
143 | export {
144 | Command,
145 | CommandDialog,
146 | CommandInput,
147 | CommandList,
148 | CommandEmpty,
149 | CommandGroup,
150 | CommandItem,
151 | CommandShortcut,
152 | CommandSeparator,
153 | }
154 |
--------------------------------------------------------------------------------
/src/components/ui/navigation-menu.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
3 | import { cva } from "class-variance-authority"
4 | import { ChevronDown } from "lucide-react"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const NavigationMenu = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, children, ...props }, ref) => (
12 |
20 | {children}
21 |
22 |
23 | ))
24 | NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
25 |
26 | const NavigationMenuList = React.forwardRef<
27 | React.ElementRef,
28 | React.ComponentPropsWithoutRef
29 | >(({ className, ...props }, ref) => (
30 |
38 | ))
39 | NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
40 |
41 | const NavigationMenuItem = NavigationMenuPrimitive.Item
42 |
43 | const navigationMenuTriggerStyle = cva(
44 | "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50"
45 | )
46 |
47 | const NavigationMenuTrigger = React.forwardRef<
48 | React.ElementRef,
49 | React.ComponentPropsWithoutRef
50 | >(({ className, children, ...props }, ref) => (
51 |
56 | {children}{" "}
57 |
61 |
62 | ))
63 | NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
64 |
65 | const NavigationMenuContent = React.forwardRef<
66 | React.ElementRef,
67 | React.ComponentPropsWithoutRef
68 | >(({ className, ...props }, ref) => (
69 |
77 | ))
78 | NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
79 |
80 | const NavigationMenuLink = NavigationMenuPrimitive.Link
81 |
82 | const NavigationMenuViewport = React.forwardRef<
83 | React.ElementRef,
84 | React.ComponentPropsWithoutRef
85 | >(({ className, ...props }, ref) => (
86 |
87 |
95 |
96 | ))
97 | NavigationMenuViewport.displayName =
98 | NavigationMenuPrimitive.Viewport.displayName
99 |
100 | const NavigationMenuIndicator = React.forwardRef<
101 | React.ElementRef,
102 | React.ComponentPropsWithoutRef
103 | >(({ className, ...props }, ref) => (
104 |
112 |
113 |
114 | ))
115 | NavigationMenuIndicator.displayName =
116 | NavigationMenuPrimitive.Indicator.displayName
117 |
118 | export {
119 | navigationMenuTriggerStyle,
120 | NavigationMenu,
121 | NavigationMenuList,
122 | NavigationMenuItem,
123 | NavigationMenuContent,
124 | NavigationMenuTrigger,
125 | NavigationMenuLink,
126 | NavigationMenuIndicator,
127 | NavigationMenuViewport,
128 | }
129 |
--------------------------------------------------------------------------------
/docs/WEBHOOK_TROUBLESHOOTING.md:
--------------------------------------------------------------------------------
1 | # Webhook Troubleshooting Guide
2 |
3 | ## Problemas Resueltos
4 |
5 | ### 1. Error 500 en `/api/videos/webhook`
6 |
7 | #### Problemas Identificados y Corregidos:
8 |
9 | 1. **❌ Falta de `break` en el switch statement**
10 |
11 | - El caso `video.asset.created` no tenía `break`, causando que el código continuara ejecutándose en los siguientes casos
12 | - **Solución**: Agregado `break` al final de cada caso
13 |
14 | 2. **❌ Falta de configuración de Route Segment para Next.js 15**
15 |
16 | - Next.js 15 requiere configuraciones explícitas para rutas dinámicas
17 | - **Solución**: Agregadas las siguientes exportaciones:
18 | ```typescript
19 | export const dynamic = "force-dynamic";
20 | export const runtime = "nodejs";
21 | ```
22 |
23 | 3. **❌ Middleware de Clerk interfiriendo con webhooks**
24 |
25 | - El middleware intentaba autenticar las peticiones de webhook
26 | - **Solución**: Agregada excepción para rutas de webhook en `middleware.ts`
27 |
28 | 4. **❌ Falta de manejo de errores**
29 | - No había captura de errores global, dificultando el debugging
30 | - **Solución**: Agregado try-catch global con logging detallado
31 |
32 | ## Verificación de Variables de Entorno
33 |
34 | Asegúrate de tener las siguientes variables configuradas en tu archivo `.env`:
35 |
36 | ```env
37 | # Mux
38 | MUX_TOKEN_ID=your_token_id
39 | MUX_TOKEN_SECRET=your_token_secret
40 | MUX_WEBHOOK_SECRET=your_webhook_secret
41 |
42 | # UploadThing
43 | UPLOADTHING_TOKEN=your_uploadthing_token
44 |
45 | # Database
46 | DATABASE_URL=your_database_url
47 |
48 | # Clerk
49 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_key
50 | CLERK_SECRET_KEY=your_clerk_secret
51 | ```
52 |
53 | ## Cómo Probar el Webhook Localmente
54 |
55 | ### 1. Usar ngrok para exponer tu servidor local
56 |
57 | ```bash
58 | # Iniciar tu servidor de desarrollo
59 | npm run dev
60 |
61 | # En otra terminal, exponer el puerto con ngrok
62 | ngrok http 3000
63 | ```
64 |
65 | ### 2. Configurar el webhook en Mux
66 |
67 | 1. Ve a [Mux Dashboard](https://dashboard.mux.com/)
68 | 2. Navega a Settings > Webhooks
69 | 3. Agrega tu URL de ngrok: `https://your-ngrok-url.ngrok.io/api/videos/webhook`
70 | 4. Selecciona los eventos:
71 | - `video.asset.created`
72 | - `video.asset.ready`
73 | - `video.asset.errored`
74 | - `video.asset.deleted`
75 | - `video.asset.track.ready`
76 |
77 | ### 3. Verificar los logs
78 |
79 | El webhook ahora incluye logging detallado:
80 |
81 | ```typescript
82 | console.log("Webhook received:", payload.type);
83 | console.log("Video asset created:", data.id);
84 | console.log("Video asset ready:", data.id);
85 | console.error("Video asset errored:", data.id, data.errors);
86 | ```
87 |
88 | Observa la consola de tu servidor para ver estos mensajes.
89 |
90 | ## Debugging Común
91 |
92 | ### Error: "Mux signature is not set"
93 |
94 | **Causa**: Mux no está enviando el header de firma o no está llegando correctamente.
95 |
96 | **Solución**:
97 |
98 | - Verifica que la URL del webhook esté correctamente configurada en Mux
99 | - Asegúrate de que no haya proxies intermedios que eliminen headers
100 |
101 | ### Error: "Invalid signature"
102 |
103 | **Causa**: La firma del webhook no coincide.
104 |
105 | **Solución**:
106 |
107 | - Verifica que `MUX_WEBHOOK_SECRET` en tu `.env` coincida con el secreto en Mux Dashboard
108 | - Asegúrate de que el body de la petición no esté siendo modificado antes de la verificación
109 |
110 | ### Error: "Upload ID is not set"
111 |
112 | **Causa**: El video no se está creando correctamente en la base de datos.
113 |
114 | **Solución**:
115 |
116 | - Verifica que el procedimiento `create` en `videos/server/procedures.ts` esté funcionando
117 | - Asegúrate de que el `muxUploadId` se esté guardando correctamente
118 |
119 | ### Error: "Failed to upload thumbnails"
120 |
121 | **Causa**: UploadThing no puede subir las imágenes desde Mux.
122 |
123 | **Solución**:
124 |
125 | - Verifica que `UPLOADTHING_TOKEN` esté configurado
126 | - Asegúrate de que la URL de Mux sea accesible: `https://image.mux.com/${playbackId}/thumbnail.png`
127 | - Revisa los logs de UploadThing en su dashboard
128 |
129 | ## Flujo Completo de Subida de Video
130 |
131 | 1. **Usuario sube video**: Se llama al procedimiento `create` en tRPC
132 | 2. **Mux crea upload**: Se obtiene una URL de subida de Mux
133 | 3. **Video se guarda en DB**: Con `muxUploadId` y status `"waiting"`
134 | 4. **Webhook `video.asset.created`**: Actualiza `muxAssetId` y `muxStatus`
135 | 5. **Webhook `video.asset.ready`**:
136 | - Obtiene `playbackId`
137 | - Descarga thumbnail y preview de Mux
138 | - Sube a UploadThing
139 | - Actualiza DB con todas las URLs y duración
140 | 6. **Video listo**: El usuario puede visualizarlo
141 |
142 | ## Comandos Útiles
143 |
144 | ```bash
145 | # Desarrollo con ngrok
146 | npm run dev:all
147 |
148 | # Solo desarrollo
149 | npm run dev
150 |
151 | # Solo webhook/ngrok
152 | npm run dev:webhook
153 |
154 | # Ver base de datos
155 | npm run drizzle:studio
156 |
157 | # Ver logs en tiempo real
158 | # En terminal del servidor de desarrollo
159 | ```
160 |
161 | ## Checklist de Verificación
162 |
163 | - [ ] Variables de entorno configuradas
164 | - [ ] Webhook configurado en Mux Dashboard
165 | - [ ] ngrok funcionando (para desarrollo local)
166 | - [ ] Middleware permite acceso público al webhook
167 | - [ ] Base de datos tiene la tabla `videos` con todas las columnas necesarias
168 | - [ ] UploadThing configurado correctamente
169 |
170 | ## Recursos Adicionales
171 |
172 | - [Mux Webhooks Documentation](https://docs.mux.com/guides/listen-for-webhooks)
173 | - [Next.js 15 Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers)
174 | - [UploadThing Documentation](https://docs.uploadthing.com/)
175 |
176 | ## Contacto
177 |
178 | Si sigues teniendo problemas después de seguir esta guía, revisa:
179 |
180 | 1. Los logs de la consola del servidor
181 | 2. Los logs en Mux Dashboard > Webhooks
182 | 3. Los logs en UploadThing Dashboard
183 |
--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | @plugin 'tailwindcss-animate';
3 |
4 | @import "uploadthing/tw/v4";
5 | @source "../../node_modules/@uploadthing/react/dist"
6 |
7 | @custom-variant dark (&:is(.dark *));
8 |
9 | *,
10 | ::after,
11 | ::before,
12 | ::backdrop,
13 | html,
14 | body {
15 | scrollbar-width: none;
16 | -ms-overflow-style: none;
17 | }
18 |
19 | @theme {
20 | --color-background: hsl(var(--background));
21 | --color-foreground: hsl(var(--foreground));
22 |
23 | --color-card: hsl(var(--card));
24 | --color-card-foreground: hsl(var(--card-foreground));
25 |
26 | --color-popover: hsl(var(--popover));
27 | --color-popover-foreground: hsl(var(--popover-foreground));
28 |
29 | --color-primary: hsl(var(--primary));
30 | --color-primary-foreground: hsl(var(--primary-foreground));
31 |
32 | --color-secondary: hsl(var(--secondary));
33 | --color-secondary-foreground: hsl(var(--secondary-foreground));
34 |
35 | --color-muted: hsl(var(--muted));
36 | --color-muted-foreground: hsl(var(--muted-foreground));
37 |
38 | --color-accent: hsl(var(--accent));
39 | --color-accent-foreground: hsl(var(--accent-foreground));
40 |
41 | --color-destructive: hsl(var(--destructive));
42 | --color-destructive-foreground: hsl(var(--destructive-foreground));
43 |
44 | --color-border: hsl(var(--border));
45 | --color-input: hsl(var(--input));
46 | --color-ring: hsl(var(--ring));
47 |
48 | --color-chart-1: hsl(var(--chart-1));
49 | --color-chart-2: hsl(var(--chart-2));
50 | --color-chart-3: hsl(var(--chart-3));
51 | --color-chart-4: hsl(var(--chart-4));
52 | --color-chart-5: hsl(var(--chart-5));
53 |
54 | --color-sidebar: hsl(var(--sidebar-background));
55 | --color-sidebar-foreground: hsl(var(--sidebar-foreground));
56 | --color-sidebar-primary: hsl(var(--sidebar-primary));
57 | --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
58 | --color-sidebar-accent: hsl(var(--sidebar-accent));
59 | --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
60 | --color-sidebar-border: hsl(var(--sidebar-border));
61 | --color-sidebar-ring: hsl(var(--sidebar-ring));
62 |
63 | --radius-lg: var(--radius);
64 | --radius-md: calc(var(--radius) - 2px);
65 | --radius-sm: calc(var(--radius) - 4px);
66 |
67 | --animate-accordion-down: accordion-down 0.2s ease-out;
68 | --animate-accordion-up: accordion-up 0.2s ease-out;
69 |
70 | @keyframes accordion-down {
71 | from {
72 | height: 0;
73 | }
74 | to {
75 | height: var(--radix-accordion-content-height);
76 | }
77 | }
78 | @keyframes accordion-up {
79 | from {
80 | height: var(--radix-accordion-content-height);
81 | }
82 | to {
83 | height: 0;
84 | }
85 | }
86 | }
87 |
88 | /*
89 | The default border color has changed to `currentColor` in Tailwind CSS v4,
90 | so we've added these compatibility styles to make sure everything still
91 | looks the same as it did with Tailwind CSS v3.
92 |
93 | If we ever want to remove these styles, we need to add an explicit border
94 | color utility to any element that depends on these defaults.
95 | */
96 | @layer base {
97 | *,
98 | ::after,
99 | ::before,
100 | ::backdrop,
101 | ::file-selector-button {
102 | border-color: var(--color-gray-200, currentColor);
103 | }
104 | }
105 |
106 | @layer utilities {
107 | body {
108 | font-family: Arial, Helvetica, sans-serif;
109 | }
110 | }
111 |
112 | @layer base {
113 | :root {
114 | --background: 0 0% 100%;
115 | --foreground: 0 0% 3.9%;
116 | --card: 0 0% 100%;
117 | --card-foreground: 0 0% 3.9%;
118 | --popover: 0 0% 100%;
119 | --popover-foreground: 0 0% 3.9%;
120 | --primary: 0 0% 9%;
121 | --primary-foreground: 0 0% 98%;
122 | --secondary: 0 0% 96.1%;
123 | --secondary-foreground: 0 0% 9%;
124 | --muted: 0 0% 96.1%;
125 | --muted-foreground: 0 0% 45.1%;
126 | --accent: 0 0% 96.1%;
127 | --accent-foreground: 0 0% 9%;
128 | --destructive: 0 84.2% 60.2%;
129 | --destructive-foreground: 0 0% 98%;
130 | --border: 0 0% 89.8%;
131 | --input: 0 0% 89.8%;
132 | --ring: 0 0% 3.9%;
133 | --chart-1: 12 76% 61%;
134 | --chart-2: 173 58% 39%;
135 | --chart-3: 197 37% 24%;
136 | --chart-4: 43 74% 66%;
137 | --chart-5: 27 87% 67%;
138 | --radius: 0.5rem;
139 | --sidebar-background: 0 0% 98%;
140 | --sidebar-foreground: 240 5.3% 26.1%;
141 | --sidebar-primary: 240 5.9% 10%;
142 | --sidebar-primary-foreground: 0 0% 98%;
143 | --sidebar-accent: 240 4.8% 95.9%;
144 | --sidebar-accent-foreground: 240 5.9% 10%;
145 | --sidebar-border: 220 13% 91%;
146 | --sidebar-ring: 217.2 91.2% 59.8%;
147 | }
148 | .dark {
149 | --background: 0 0% 3.9%;
150 | --foreground: 0 0% 98%;
151 | --card: 0 0% 3.9%;
152 | --card-foreground: 0 0% 98%;
153 | --popover: 0 0% 3.9%;
154 | --popover-foreground: 0 0% 98%;
155 | --primary: 0 0% 98%;
156 | --primary-foreground: 0 0% 9%;
157 | --secondary: 0 0% 14.9%;
158 | --secondary-foreground: 0 0% 98%;
159 | --muted: 0 0% 14.9%;
160 | --muted-foreground: 0 0% 63.9%;
161 | --accent: 0 0% 14.9%;
162 | --accent-foreground: 0 0% 98%;
163 | --destructive: 0 62.8% 30.6%;
164 | --destructive-foreground: 0 0% 98%;
165 | --border: 0 0% 14.9%;
166 | --input: 0 0% 14.9%;
167 | --ring: 0 0% 83.1%;
168 | --chart-1: 220 70% 50%;
169 | --chart-2: 160 60% 45%;
170 | --chart-3: 30 80% 55%;
171 | --chart-4: 280 65% 60%;
172 | --chart-5: 340 75% 55%;
173 | --sidebar-background: 240 5.9% 10%;
174 | --sidebar-foreground: 240 4.8% 95.9%;
175 | --sidebar-primary: 224.3 76.3% 48%;
176 | --sidebar-primary-foreground: 0 0% 100%;
177 | --sidebar-accent: 240 3.7% 15.9%;
178 | --sidebar-accent-foreground: 240 4.8% 95.9%;
179 | --sidebar-border: 240 3.7% 15.9%;
180 | --sidebar-ring: 217.2 91.2% 59.8%;
181 | }
182 | }
183 |
184 | @layer base {
185 | * {
186 | @apply border-border;
187 | }
188 | body {
189 | @apply bg-background text-foreground;
190 | }
191 | }
192 |
193 | .scroll-hidden {
194 | scrollbar-width: none;
195 | -ms-overflow-style: none;
196 | scrollbar-color: transparent transparent;
197 | scroll-behavior: smooth;
198 | -webkit-overflow-scrolling: touch;
199 | }
200 |
201 | .scroll-hidden::-webkit-scrollbar {
202 | display: none;
203 | }
204 |
205 | .scroll-hidden::-webkit-scrollbar-thumb {
206 | background-color: transparent;
207 | }
208 |
--------------------------------------------------------------------------------
/src/components/ui/carousel.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import useEmblaCarousel, {
5 | type UseEmblaCarouselType,
6 | } from "embla-carousel-react"
7 | import { ArrowLeft, ArrowRight } from "lucide-react"
8 |
9 | import { cn } from "@/lib/utils"
10 | import { Button } from "@/components/ui/button"
11 |
12 | type CarouselApi = UseEmblaCarouselType[1]
13 | type UseCarouselParameters = Parameters
14 | type CarouselOptions = UseCarouselParameters[0]
15 | type CarouselPlugin = UseCarouselParameters[1]
16 |
17 | type CarouselProps = {
18 | opts?: CarouselOptions
19 | plugins?: CarouselPlugin
20 | orientation?: "horizontal" | "vertical"
21 | setApi?: (api: CarouselApi) => void
22 | }
23 |
24 | type CarouselContextProps = {
25 | carouselRef: ReturnType[0]
26 | api: ReturnType[1]
27 | scrollPrev: () => void
28 | scrollNext: () => void
29 | canScrollPrev: boolean
30 | canScrollNext: boolean
31 | } & CarouselProps
32 |
33 | const CarouselContext = React.createContext(null)
34 |
35 | function useCarousel() {
36 | const context = React.useContext(CarouselContext)
37 |
38 | if (!context) {
39 | throw new Error("useCarousel must be used within a ")
40 | }
41 |
42 | return context
43 | }
44 |
45 | function Carousel({
46 | orientation = "horizontal",
47 | opts,
48 | setApi,
49 | plugins,
50 | className,
51 | children,
52 | ...props
53 | }: React.ComponentProps<"div"> & CarouselProps) {
54 | const [carouselRef, api] = useEmblaCarousel(
55 | {
56 | ...opts,
57 | axis: orientation === "horizontal" ? "x" : "y",
58 | },
59 | plugins
60 | )
61 | const [canScrollPrev, setCanScrollPrev] = React.useState(false)
62 | const [canScrollNext, setCanScrollNext] = React.useState(false)
63 |
64 | const onSelect = React.useCallback((api: CarouselApi) => {
65 | if (!api) return
66 | setCanScrollPrev(api.canScrollPrev())
67 | setCanScrollNext(api.canScrollNext())
68 | }, [])
69 |
70 | const scrollPrev = React.useCallback(() => {
71 | api?.scrollPrev()
72 | }, [api])
73 |
74 | const scrollNext = React.useCallback(() => {
75 | api?.scrollNext()
76 | }, [api])
77 |
78 | const handleKeyDown = React.useCallback(
79 | (event: React.KeyboardEvent) => {
80 | if (event.key === "ArrowLeft") {
81 | event.preventDefault()
82 | scrollPrev()
83 | } else if (event.key === "ArrowRight") {
84 | event.preventDefault()
85 | scrollNext()
86 | }
87 | },
88 | [scrollPrev, scrollNext]
89 | )
90 |
91 | React.useEffect(() => {
92 | if (!api || !setApi) return
93 | setApi(api)
94 | }, [api, setApi])
95 |
96 | React.useEffect(() => {
97 | if (!api) return
98 | onSelect(api)
99 | api.on("reInit", onSelect)
100 | api.on("select", onSelect)
101 |
102 | return () => {
103 | api?.off("select", onSelect)
104 | }
105 | }, [api, onSelect])
106 |
107 | return (
108 |
121 |
129 | {children}
130 |
131 |
132 | )
133 | }
134 |
135 | function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
136 | const { carouselRef, orientation } = useCarousel()
137 |
138 | return (
139 |
153 | )
154 | }
155 |
156 | function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
157 | const { orientation } = useCarousel()
158 |
159 | return (
160 |
171 | )
172 | }
173 |
174 | function CarouselPrevious({
175 | className,
176 | variant = "outline",
177 | size = "icon",
178 | ...props
179 | }: React.ComponentProps) {
180 | const { orientation, scrollPrev, canScrollPrev } = useCarousel()
181 |
182 | return (
183 |
201 | )
202 | }
203 |
204 | function CarouselNext({
205 | className,
206 | variant = "outline",
207 | size = "icon",
208 | ...props
209 | }: React.ComponentProps) {
210 | const { orientation, scrollNext, canScrollNext } = useCarousel()
211 |
212 | return (
213 |
231 | )
232 | }
233 |
234 | export {
235 | type CarouselApi,
236 | Carousel,
237 | CarouselContent,
238 | CarouselItem,
239 | CarouselPrevious,
240 | CarouselNext,
241 | }
242 |
--------------------------------------------------------------------------------
/src/components/ui/select.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as SelectPrimitive from "@radix-ui/react-select"
5 | import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | function Select({
10 | ...props
11 | }: React.ComponentProps) {
12 | return
13 | }
14 |
15 | function SelectGroup({
16 | ...props
17 | }: React.ComponentProps) {
18 | return
19 | }
20 |
21 | function SelectValue({
22 | ...props
23 | }: React.ComponentProps) {
24 | return
25 | }
26 |
27 | function SelectTrigger({
28 | className,
29 | size = "default",
30 | children,
31 | ...props
32 | }: React.ComponentProps & {
33 | size?: "sm" | "default"
34 | }) {
35 | return (
36 |
45 | {children}
46 |
47 |
48 |
49 |
50 | )
51 | }
52 |
53 | function SelectContent({
54 | className,
55 | children,
56 | position = "popper",
57 | ...props
58 | }: React.ComponentProps) {
59 | return (
60 |
61 |
72 |
73 |
80 | {children}
81 |
82 |
83 |
84 |
85 | )
86 | }
87 |
88 | function SelectLabel({
89 | className,
90 | ...props
91 | }: React.ComponentProps) {
92 | return (
93 |
98 | )
99 | }
100 |
101 | function SelectItem({
102 | className,
103 | children,
104 | ...props
105 | }: React.ComponentProps) {
106 | return (
107 |
115 |
116 |
117 |
118 |
119 |
120 | {children}
121 |
122 | )
123 | }
124 |
125 | function SelectSeparator({
126 | className,
127 | ...props
128 | }: React.ComponentProps) {
129 | return (
130 |
135 | )
136 | }
137 |
138 | function SelectScrollUpButton({
139 | className,
140 | ...props
141 | }: React.ComponentProps) {
142 | return (
143 |
151 |
152 |
153 | )
154 | }
155 |
156 | function SelectScrollDownButton({
157 | className,
158 | ...props
159 | }: React.ComponentProps) {
160 | return (
161 |
169 |
170 |
171 | )
172 | }
173 |
174 | export {
175 | Select,
176 | SelectContent,
177 | SelectGroup,
178 | SelectItem,
179 | SelectLabel,
180 | SelectScrollDownButton,
181 | SelectScrollUpButton,
182 | SelectSeparator,
183 | SelectTrigger,
184 | SelectValue,
185 | }
186 |
--------------------------------------------------------------------------------
/src/modules/studio/ui/sections/videos-section.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import { InfiniteScroll } from "@/components/infinite-scroll";
3 | import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
4 | import { DEFAULT_LIMIT } from "@/constants";
5 | import { snakeCaseToTitleCase } from "@/lib/utils";
6 | import { VideoThumbnail } from "@/modules/videos/ui/components/video-thumbnail";
7 | import { useTRPC } from "@/trpc/client";
8 | import { useSuspenseInfiniteQuery } from "@tanstack/react-query";
9 | import { format } from "date-fns";
10 | import { ErrorBoundary } from "react-error-boundary";
11 |
12 | import { Skeleton } from "@/components/ui/skeleton";
13 | import { GlobeIcon, LockIcon } from "lucide-react";
14 | import Link from "next/link";
15 | import { Suspense, useEffect } from "react";
16 |
17 | export const VideosSection = () => {
18 | return (
19 | }>
20 | Error...}>
21 |
22 |
23 |
24 | );
25 | };
26 |
27 | const VideoSectionSkeleton = () => {
28 | return (
29 | <>
30 |
31 |
32 |
33 |
34 | Video
35 | Visibility
36 | Status
37 | Date
38 | Views
39 | Comments
40 | Likes
41 |
42 |
43 |
44 | {Array.from({ length: 4 }).map((_, index) => (
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
57 |
58 | Public
59 |
60 |
61 | Ready
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 | ))}
76 |
77 |
78 |
125 |
126 |
127 |
128 |
129 | Video
130 | Visibility
131 | Status
132 | Date
133 | Views
134 | Comments
135 | Likes
136 |
137 |
138 |
139 | {videos.pages
140 | .flatMap((page) => page.items)
141 | .map((video) => (
142 |
143 |
144 |
145 |
146 |
147 |
153 |
154 |
155 |
156 | {video.title}
157 |
158 |
159 | {video.description || "No description"}
160 |
161 |
162 |
167 | {video.visibility === "private" ? (
168 |
169 | ) : (
170 |
171 | )}
172 | {snakeCaseToTitleCase(video.visibility)}
173 |
174 |
175 |
176 |
177 | {snakeCaseToTitleCase(video.muxStatus || "error loading")}
178 |
179 |
180 | {format(video.createdAt, "d MMM yyyy")}
181 | Views
182 | Comments
183 | Likes
184 |
185 | ))}
186 |
187 |
188 |
189 |
195 | |