Skip to content

Commit 9a3186e

Browse files
KitsuneKodeKitsuneKode
committed
ui fixes, added seed logic
1 parent b14e244 commit 9a3186e

File tree

6 files changed

+245
-158
lines changed

6 files changed

+245
-158
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
"nextjs-toploader": "^1.6.11",
6868
"notion-client": "^6.16.0",
6969
"pdf-lib": "^1.17.1",
70+
"prettier-plugin-tailwindcss": "^0.6.11",
7071
"prismjs": "^1.29.0",
7172
"qs": "^6.13.0",
7273
"react": "^18",

‎prisma/seed.ts

+58-12
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,25 @@ async function seedContent() {
133133
},
134134
{
135135
type: 'video',
136-
title: 'test video for week 1',
136+
title: 'test video for week 1 - notion slides',
137+
hidden: false,
138+
thumbnail:
139+
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
140+
parentId: folderId,
141+
commentsCount: 0,
142+
},
143+
{
144+
type: 'video',
145+
title: 'test video 2 for week 1 - pdf slides',
146+
hidden: false,
147+
thumbnail:
148+
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
149+
parentId: folderId,
150+
commentsCount: 0,
151+
},
152+
{
153+
type: 'video',
154+
title: 'test video 2 for week 1 - projects.100xdevs.com slides',
137155
hidden: false,
138156
thumbnail:
139157
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/images/week-1-orientation.jpg',
@@ -179,12 +197,22 @@ async function seedNotionMetadata() {
179197
}
180198
}
181199

182-
async function seedVideoMetadata() {
200+
async function seedVideoMetadata({
201+
slides,
202+
slidesType,
203+
id,
204+
contentId,
205+
}: {
206+
slides: string;
207+
slidesType: 'NOTION' | 'NOT_NOTION';
208+
contentId: number;
209+
id: number;
210+
}) {
183211
try {
184212
await db.videoMetadata.create({
185213
data: {
186-
id: 1,
187-
contentId: 3,
214+
id,
215+
contentId,
188216
video_1080p_mp4_1: 'https://www.w3schools.com/html/mov_bbb.mp4',
189217
video_1080p_mp4_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
190218
video_1080p_mp4_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
@@ -209,13 +237,13 @@ async function seedVideoMetadata() {
209237
video_360p_2: 'https://www.w3schools.com/html/mov_bbb.mp4',
210238
video_360p_3: 'https://www.w3schools.com/html/mov_bbb.mp4',
211239
video_360p_4: 'https://www.w3schools.com/html/mov_bbb.mp4',
212-
slides:
213-
'https://appx-recordings.s3.ap-south-1.amazonaws.com/drm/100x/slides/Loops%2C+callbacks.pdf',
214-
segments: [
215-
{ title: "Introduction", start: 0, end: 3 },
216-
{ title: "Chapter 1", start: 3, end: 7 },
217-
{ title: "Conclusion", start: 7, end: 10 }
218-
]
240+
slides,
241+
segments: [
242+
{ title: 'Introduction', start: 0, end: 3 },
243+
{ title: 'Chapter 1', start: 3, end: 7 },
244+
{ title: 'Conclusion', start: 7, end: 10 },
245+
],
246+
slidesType,
219247
},
220248
});
221249
} catch (error) {
@@ -294,7 +322,25 @@ async function seedDatabase() {
294322
await seedContent();
295323
await seedCourseContent();
296324
await seedNotionMetadata();
297-
await seedVideoMetadata();
325+
await seedVideoMetadata({
326+
id: 1,
327+
contentId: 3,
328+
slides: '39298af78c0f4c4ea780fd448551bad3',
329+
slidesType: 'NOTION',
330+
});
331+
await seedVideoMetadata({
332+
id: 2,
333+
contentId: 4,
334+
slides:
335+
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf',
336+
slidesType: 'NOT_NOTION',
337+
});
338+
await seedVideoMetadata({
339+
id: 3,
340+
contentId: 5,
341+
slides: 'https://projects.100xdevs.com',
342+
slidesType: 'NOT_NOTION',
343+
});
298344
await seedPurchases();
299345
await addClassesFromAugustToMay();
300346
} catch (error) {

‎src/app/api/notion/route.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ export async function GET(req: NextRequest) {
1010
const contentId: number = parseInt(searchParams.get('id'), 10);
1111

1212
// @ts-ignore
13-
const notionIdFromParams: string = searchParams.get('id')?.toString();
14-
15-
if (!contentId && notionIdFromParams) {
13+
const notionIdFromParams: string = searchParams.get('notionId')?.toString();
14+
15+
if (notionIdFromParams) {
1616
const recordMap = await notion.getPage(notionIdFromParams);
1717
return NextResponse.json({
1818
recordMap,
1919
});
2020
}
21-
21+
2222
const notionMetadata = await db.notionMetadata.findFirst({
2323
where: {
2424
contentId,

‎src/components/NotionRenderer.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,17 @@ import { handleMarkAsCompleted } from '@/lib/utils';
2929
export const NotionRenderer = ({
3030
id,
3131
courseId,
32+
notionId,
3233
}: {
3334
id: string;
3435
courseId?: number;
36+
notionId?: string;
3537
}) => {
3638
const { resolvedTheme } = useTheme();
3739

3840
const [data, setData] = useState(null);
3941
async function main() {
40-
console.log(id);
41-
const res = await fetch(`/api/notion?id=${id}`);
42+
const res = await fetch(`/api/notion?id=${id}&notionId=${notionId}`);
4243
const json = await res.json();
4344
setData(json.recordMap);
4445
}

‎src/components/ResizeBar.tsx

+52-45
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
2-
"use client";
1+
'use client';
32
import React, { useRef, useState } from 'react';
43

54
interface ResizeBarProps {
65
isResized: React.MutableRefObject<boolean>;
76
}
8-
97
const ResizeBar = ({ isResized }: ResizeBarProps) => {
108
const [mouseY, setMouseY] = useState<number | null>(null);
119
const handleRef = useRef<HTMLDivElement>(null);
1210

11+
const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
12+
isResized.current = true;
13+
e.preventDefault(); // Prevent text selection during drag
14+
};
15+
1316
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
1417
if (handleRef.current) {
1518
const rect = handleRef.current.getBoundingClientRect();
@@ -20,52 +23,56 @@ const ResizeBar = ({ isResized }: ResizeBarProps) => {
2023
const handleMouseLeave = () => {
2124
setMouseY(null);
2225
};
26+
const handleMouseUp = () => {
27+
isResized.current = false;
28+
};
2329

2430
return (
25-
<div className="min-h-[60vh] flex items-center justify-center">
26-
27-
{/* Resize handle */}
28-
<div
29-
ref={handleRef}
30-
className="w-4 h-full cursor-col-resize relative flex items-center justify-center"
31-
onMouseDown={() => {isResized.current = true;}}
32-
onMouseMove={handleMouseMove}
33-
onMouseLeave={handleMouseLeave}
34-
>
35-
{/* Vertical dots pattern - centered */}
36-
<div className="flex flex-col gap-1 relative z-10">
37-
{[...Array(3)].map((_, i) => (
38-
<div
39-
key={i}
40-
className="w-1 h-1 rounded-full bg-gray-400 transition-transform duration-200"
41-
style={{
42-
transform: mouseY && Math.abs(mouseY - (i * 16 + 358)) < 20
43-
? 'scale(2)'
44-
: 'scale(1)'
45-
}}
46-
/>
47-
))}
48-
</div>
49-
50-
{/* Localized glow effect that follows mouse */}
51-
{mouseY !== null && (
52-
<div
53-
className="absolute w-full h-12 pointer-events-none"
54-
style={{
55-
top: Math.max(0, mouseY - 24),
56-
background: 'radial-gradient(circle at center, rgba(96, 165, 250, 0.2) 0%, rgba(255, 255, 255, 0) 70%)',
57-
filter: 'blur(4px)'
58-
}}
31+
<div className="flex min-h-[60vh] items-center justify-center">
32+
{/* Resize handle */}
33+
<div
34+
ref={handleRef}
35+
className="relative flex h-full w-4 cursor-col-resize items-center justify-center"
36+
onMouseDown={handleMouseDown}
37+
onMouseMove={handleMouseMove}
38+
onMouseLeave={handleMouseLeave}
39+
onMouseUp={handleMouseUp}
40+
>
41+
{/* Vertical dots pattern - centered */}
42+
<div className="relative z-10 flex flex-col gap-1">
43+
{[...Array(3)].map((_, i) => (
44+
<div
45+
key={i}
46+
className="h-1 w-1 rounded-full bg-gray-400 transition-transform duration-200"
47+
style={{
48+
transform:
49+
mouseY && Math.abs(mouseY - (i * 16 + 358)) < 20
50+
? 'scale(2)'
51+
: 'scale(1)',
52+
}}
5953
/>
60-
)}
61-
62-
{/* Vertical borders */}
63-
<div className="absolute inset-y-0 -left-px w-px bg-slate-800"/>
64-
<div className="absolute inset-y-0 -right-px w-px bg-slate-800"/>
54+
))}
55+
</div>
56+
57+
{/* Localized glow effect that follows mouse */}
58+
{mouseY !== null && (
59+
<div
60+
className="pointer-events-none absolute h-12 w-full"
61+
style={{
62+
top: Math.max(0, mouseY - 24),
63+
background:
64+
'radial-gradient(circle at center, rgba(96, 165, 250, 0.2) 0%, rgba(255, 255, 255, 0) 70%)',
65+
filter: 'blur(4px)',
66+
}}
67+
/>
68+
)}
6569

66-
</div>
67-
</div>
70+
{/* Vertical borders */}
71+
<div className="absolute inset-y-0 -left-px w-px bg-slate-800" />
72+
<div className="absolute inset-y-0 -right-px w-px bg-slate-800" />
73+
</div>
74+
</div>
6875
);
6976
};
7077

71-
export default ResizeBar;
78+
export default ResizeBar;

0 commit comments

Comments
 (0)