From b14e244d0990b31a4b4d240ef379d60374cb36c4 Mon Sep 17 00:00:00 2001 From: KitsuneKode Date: Wed, 26 Feb 2025 04:07:57 +0530 Subject: [PATCH 1/3] add build fixes and all the features of interactive video --- package.json | 11 +- pnpm-lock.yaml | 90 ++++++------ .../migration.sql | 5 + prisma/schema.prisma | 6 + src/app/(main)/(pages)/watch-history/page.tsx | 2 +- src/app/api/notion/route.ts | 11 ++ src/components/FilterContent.tsx | 4 +- src/components/NotionRenderer.tsx | 7 +- src/components/ResizeBar.tsx | 71 ++++++++++ src/components/VideoPlayer2.tsx | 17 +++ src/components/admin/ContentRenderer.tsx | 2 + .../admin/ContentRendererClient.tsx | 133 ++++++++++++++++-- src/components/admin/UpdateVideoClient.tsx | 18 ++- src/store/atoms/filterContent.ts | 8 +- src/store/atoms/trigger.ts | 5 + 15 files changed, 327 insertions(+), 63 deletions(-) create mode 100644 prisma/migrations/20250225124531_add_slides_type/migration.sql create mode 100644 src/components/ResizeBar.tsx diff --git a/package.json b/package.json index 31bdc5ddf..2ac6d728c 100644 --- a/package.json +++ b/package.json @@ -104,8 +104,17 @@ "prisma": "^5.18.0", "tailwindcss": "^3.3.0", "ts-node": "^10.9.2", - "typescript": "^5.4.5", + "typescript": "^5.3.3", "vitest": "^1.6.0", "vitest-mock-extended": "^1.3.1" + }, + "pnpm": { + "onlyBuiltDependencies": [ + "@prisma/client", + "@prisma/engines", + "bcrypt", + "esbuild", + "prisma" + ] } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d65c62289..d6dcd5676 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -178,7 +178,7 @@ importers: version: 2.5.2 tailwindcss-animate: specifier: ^1.0.7 - version: 1.0.7(tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.5.4))) + version: 1.0.7(tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.3.3))) vaul: specifier: ^0.8.9 version: 0.8.9(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -221,10 +221,10 @@ importers: version: 18.3.0 '@typescript-eslint/eslint-plugin': specifier: ^6.20.0 - version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4) + version: 6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3) '@typescript-eslint/parser': specifier: ^6.20.0 - version: 6.21.0(eslint@8.57.0)(typescript@5.5.4) + version: 6.21.0(eslint@8.57.0)(typescript@5.3.3) eslint: specifier: ^8.56.0 version: 8.57.0 @@ -239,19 +239,19 @@ importers: version: 5.18.0 tailwindcss: specifier: ^3.3.0 - version: 3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.5.4)) + version: 3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.3.3)) ts-node: specifier: ^10.9.2 - version: 10.9.2(@types/node@20.16.0)(typescript@5.5.4) + version: 10.9.2(@types/node@20.16.0)(typescript@5.3.3) typescript: - specifier: ^5.4.5 - version: 5.5.4 + specifier: ^5.3.3 + version: 5.3.3 vitest: specifier: ^1.6.0 version: 1.6.0(@types/node@20.16.0)(jsdom@24.1.1)(terser@5.31.6) vitest-mock-extended: specifier: ^1.3.1 - version: 1.3.2(typescript@5.5.4)(vitest@1.6.0(@types/node@20.16.0)(jsdom@24.1.1)(terser@5.31.6)) + version: 1.3.2(typescript@5.3.3)(vitest@1.6.0(@types/node@20.16.0)(jsdom@24.1.1)(terser@5.31.6)) packages: @@ -4118,8 +4118,8 @@ packages: resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==} engines: {node: '>=10'} - typescript@5.5.4: - resolution: {integrity: sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==} + typescript@5.3.3: + resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==} engines: {node: '>=14.17'} hasBin: true @@ -5577,13 +5577,13 @@ snapshots: '@types/warning@3.0.3': {} - '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.4))(eslint@8.57.0)(typescript@5.5.4)': + '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.3.3))(eslint@8.57.0)(typescript@5.3.3)': dependencies: '@eslint-community/regexpp': 4.11.0 - '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.5.4) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@5.3.3) '@typescript-eslint/scope-manager': 6.21.0 - '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.5.4) - '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.5.4) + '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3) '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.6 eslint: 8.57.0 @@ -5591,22 +5591,22 @@ snapshots: ignore: 5.3.2 natural-compare: 1.4.0 semver: 7.6.3 - ts-api-utils: 1.3.0(typescript@5.5.4) + ts-api-utils: 1.3.0(typescript@5.3.3) optionalDependencies: - typescript: 5.5.4 + typescript: 5.3.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.5.4)': + '@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.3.3)': dependencies: '@typescript-eslint/scope-manager': 6.21.0 '@typescript-eslint/types': 6.21.0 - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.5.4) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3) '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.6 eslint: 8.57.0 optionalDependencies: - typescript: 5.5.4 + typescript: 5.3.3 transitivePeerDependencies: - supports-color @@ -5615,21 +5615,21 @@ snapshots: '@typescript-eslint/types': 6.21.0 '@typescript-eslint/visitor-keys': 6.21.0 - '@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.5.4)': + '@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@5.3.3)': dependencies: - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.5.4) - '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.5.4) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@5.3.3) debug: 4.3.6 eslint: 8.57.0 - ts-api-utils: 1.3.0(typescript@5.5.4) + ts-api-utils: 1.3.0(typescript@5.3.3) optionalDependencies: - typescript: 5.5.4 + typescript: 5.3.3 transitivePeerDependencies: - supports-color '@typescript-eslint/types@6.21.0': {} - '@typescript-eslint/typescript-estree@6.21.0(typescript@5.5.4)': + '@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3)': dependencies: '@typescript-eslint/types': 6.21.0 '@typescript-eslint/visitor-keys': 6.21.0 @@ -5638,20 +5638,20 @@ snapshots: is-glob: 4.0.3 minimatch: 9.0.3 semver: 7.6.3 - ts-api-utils: 1.3.0(typescript@5.5.4) + ts-api-utils: 1.3.0(typescript@5.3.3) optionalDependencies: - typescript: 5.5.4 + typescript: 5.3.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.5.4)': + '@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@5.3.3)': dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@types/json-schema': 7.0.15 '@types/semver': 7.5.8 '@typescript-eslint/scope-manager': 6.21.0 '@typescript-eslint/types': 6.21.0 - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.5.4) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.3.3) eslint: 8.57.0 semver: 7.6.3 transitivePeerDependencies: @@ -7834,13 +7834,13 @@ snapshots: camelcase-css: 2.0.1 postcss: 8.4.41 - postcss-load-config@4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.5.4)): + postcss-load-config@4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.3.3)): dependencies: lilconfig: 3.1.2 yaml: 2.5.0 optionalDependencies: postcss: 8.4.41 - ts-node: 10.9.2(@types/node@20.16.0)(typescript@5.5.4) + ts-node: 10.9.2(@types/node@20.16.0)(typescript@5.3.3) postcss-nested@6.2.0(postcss@8.4.41): dependencies: @@ -8558,11 +8558,11 @@ snapshots: tailwind-merge@2.5.2: {} - tailwindcss-animate@1.0.7(tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.5.4))): + tailwindcss-animate@1.0.7(tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.3.3))): dependencies: - tailwindcss: 3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.5.4)) + tailwindcss: 3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.3.3)) - tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.5.4)): + tailwindcss@3.4.10(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.3.3)): dependencies: '@alloc/quick-lru': 5.2.0 arg: 5.0.2 @@ -8581,7 +8581,7 @@ snapshots: postcss: 8.4.41 postcss-import: 15.1.0(postcss@8.4.41) postcss-js: 4.0.1(postcss@8.4.41) - postcss-load-config: 4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.5.4)) + postcss-load-config: 4.0.2(postcss@8.4.41)(ts-node@10.9.2(@types/node@20.16.0)(typescript@5.3.3)) postcss-nested: 6.2.0(postcss@8.4.41) postcss-selector-parser: 6.1.2 resolve: 1.22.8 @@ -8661,19 +8661,19 @@ snapshots: trough@2.2.0: {} - ts-api-utils@1.3.0(typescript@5.5.4): + ts-api-utils@1.3.0(typescript@5.3.3): dependencies: - typescript: 5.5.4 + typescript: 5.3.3 ts-easing@0.2.0: {} - ts-essentials@10.0.2(typescript@5.5.4): + ts-essentials@10.0.2(typescript@5.3.3): optionalDependencies: - typescript: 5.5.4 + typescript: 5.3.3 ts-interface-checker@0.1.13: {} - ts-node@10.9.2(@types/node@20.16.0)(typescript@5.5.4): + ts-node@10.9.2(@types/node@20.16.0)(typescript@5.3.3): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.11 @@ -8687,7 +8687,7 @@ snapshots: create-require: 1.1.1 diff: 4.0.2 make-error: 1.3.6 - typescript: 5.5.4 + typescript: 5.3.3 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 @@ -8703,7 +8703,7 @@ snapshots: type-fest@0.20.2: {} - typescript@5.5.4: {} + typescript@5.3.3: {} ufo@1.5.4: {} @@ -8903,10 +8903,10 @@ snapshots: fsevents: 2.3.3 terser: 5.31.6 - vitest-mock-extended@1.3.2(typescript@5.5.4)(vitest@1.6.0(@types/node@20.16.0)(jsdom@24.1.1)(terser@5.31.6)): + vitest-mock-extended@1.3.2(typescript@5.3.3)(vitest@1.6.0(@types/node@20.16.0)(jsdom@24.1.1)(terser@5.31.6)): dependencies: - ts-essentials: 10.0.2(typescript@5.5.4) - typescript: 5.5.4 + ts-essentials: 10.0.2(typescript@5.3.3) + typescript: 5.3.3 vitest: 1.6.0(@types/node@20.16.0)(jsdom@24.1.1)(terser@5.31.6) vitest@1.6.0(@types/node@20.16.0)(jsdom@24.1.1)(terser@5.31.6): diff --git a/prisma/migrations/20250225124531_add_slides_type/migration.sql b/prisma/migrations/20250225124531_add_slides_type/migration.sql new file mode 100644 index 000000000..0c8282ed8 --- /dev/null +++ b/prisma/migrations/20250225124531_add_slides_type/migration.sql @@ -0,0 +1,5 @@ +-- CreateEnum +CREATE TYPE "SlidesType" AS ENUM ('NOTION', 'NOT_NOTION'); + +-- AlterTable +ALTER TABLE "VideoMetadata" ADD COLUMN "slidesType" "SlidesType" DEFAULT 'NOTION'; diff --git a/prisma/schema.prisma b/prisma/schema.prisma index ca8e4431c..cc825a456 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -118,6 +118,7 @@ model VideoMetadata { segments Json? content Content @relation(fields: [contentId], references: [id]) slides String? // link to slides + slidesType SlidesType? @default(NOTION) thumbnail_mosiac_url String? duration Int? migration_status MigrationStatus @default(NOT_MIGRATED) @@ -361,3 +362,8 @@ enum MigrationStatus { MIGRATED MIGRATION_ERROR } + +enum SlidesType { + NOTION + NOT_NOTION +} diff --git a/src/app/(main)/(pages)/watch-history/page.tsx b/src/app/(main)/(pages)/watch-history/page.tsx index aba4163c2..32cc3676e 100644 --- a/src/app/(main)/(pages)/watch-history/page.tsx +++ b/src/app/(main)/(pages)/watch-history/page.tsx @@ -90,7 +90,7 @@ async function getWatchHistory() { updatedAt: 'desc', }, }); - +//@ts-ignore const filteruserVideoProgress: TWatchHistory[] = userVideoProgress .map((videoProgress) => { const filteredCourse = videoProgress?.content?.parent?.courses.filter( diff --git a/src/app/api/notion/route.ts b/src/app/api/notion/route.ts index 0e4dddde6..e2cefdff0 100644 --- a/src/app/api/notion/route.ts +++ b/src/app/api/notion/route.ts @@ -8,6 +8,17 @@ export async function GET(req: NextRequest) { const searchParams = new URLSearchParams(url.search); // @ts-ignore const contentId: number = parseInt(searchParams.get('id'), 10); + + // @ts-ignore + const notionIdFromParams: string = searchParams.get('id')?.toString(); + + if (!contentId && notionIdFromParams) { + const recordMap = await notion.getPage(notionIdFromParams); + return NextResponse.json({ + recordMap, + }); + } + const notionMetadata = await db.notionMetadata.findFirst({ where: { contentId, diff --git a/src/components/FilterContent.tsx b/src/components/FilterContent.tsx index 8f3917ef4..1fbddb7c9 100644 --- a/src/components/FilterContent.tsx +++ b/src/components/FilterContent.tsx @@ -4,7 +4,7 @@ import { Check, ChevronsUpDown } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { useRecoilState } from 'recoil'; -import { selectFilter } from '@/store/atoms/filterContent'; +import { FilterType, selectFilter } from '@/store/atoms/filterContent'; import { Command, CommandGroup, @@ -59,7 +59,7 @@ export const FilterContent = forwardRef( value={filters.value} className={`px-4 ${props.className || ''}`} onSelect={(currentValue) => { - setValue(currentValue === value ? '' : currentValue); + setValue(currentValue === value ? 'all' as FilterType : currentValue as FilterType); setOpen(false); }} > diff --git a/src/components/NotionRenderer.tsx b/src/components/NotionRenderer.tsx index bed2adad1..806de9441 100644 --- a/src/components/NotionRenderer.tsx +++ b/src/components/NotionRenderer.tsx @@ -31,12 +31,13 @@ export const NotionRenderer = ({ courseId, }: { id: string; - courseId: number; + courseId?: number; }) => { const { resolvedTheme } = useTheme(); const [data, setData] = useState(null); async function main() { + console.log(id); const res = await fetch(`/api/notion?id=${id}`); const json = await res.json(); setData(json.recordMap); @@ -46,7 +47,9 @@ export const NotionRenderer = ({ main(); return () => { - handleMarkAsCompleted(true, courseId); + if (courseId) { + handleMarkAsCompleted(true, courseId); + } }; }, [id]); diff --git a/src/components/ResizeBar.tsx b/src/components/ResizeBar.tsx new file mode 100644 index 000000000..a1b561a8f --- /dev/null +++ b/src/components/ResizeBar.tsx @@ -0,0 +1,71 @@ + +"use client"; +import React, { useRef, useState } from 'react'; + +interface ResizeBarProps { + isResized: React.MutableRefObject; +} + +const ResizeBar = ({ isResized }: ResizeBarProps) => { + const [mouseY, setMouseY] = useState(null); + const handleRef = useRef(null); + + const handleMouseMove = (e: React.MouseEvent) => { + if (handleRef.current) { + const rect = handleRef.current.getBoundingClientRect(); + setMouseY(e.clientY - rect.top); + } + }; + + const handleMouseLeave = () => { + setMouseY(null); + }; + + return ( +
+ + {/* Resize handle */} +
{isResized.current = true;}} + onMouseMove={handleMouseMove} + onMouseLeave={handleMouseLeave} + > + {/* Vertical dots pattern - centered */} +
+ {[...Array(3)].map((_, i) => ( +
+ ))} +
+ + {/* Localized glow effect that follows mouse */} + {mouseY !== null && ( +
+ )} + + {/* Vertical borders */} +
+
+ +
+
+ ); +}; + +export default ResizeBar; \ No newline at end of file diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx index 7e52d6a05..21c1b91d5 100644 --- a/src/components/VideoPlayer2.tsx +++ b/src/components/VideoPlayer2.tsx @@ -17,6 +17,8 @@ import { toast } from 'sonner'; import { createRoot } from 'react-dom/client'; import { PictureInPicture2 } from 'lucide-react'; import { AppxVideoPlayer } from './AppxVideoPlayer'; +import { useRecoilState } from 'recoil'; +import { pipTrigger } from '@/store/atoms/trigger'; // todo correct types interface VideoPlayerProps { @@ -47,6 +49,7 @@ export const VideoPlayer: FunctionComponent = ({ const [player, setPlayer] = useState(null); const searchParams = useSearchParams(); const vidUrl = options.sources[0].src; + const [pip_Trigger, setPip_Trigger] = useRecoilState(pipTrigger); const togglePictureInPicture = async () => { try { @@ -63,6 +66,7 @@ export const VideoPlayer: FunctionComponent = ({ error.name !== 'NotSupportedError' ) { console.error('Failed to toggle Picture-in-Picture mode:', error); + setPip_Trigger(false); toast.error('Failed to toggle Picture-in-Picture mode.'); } } @@ -145,6 +149,19 @@ export const VideoPlayer: FunctionComponent = ({ } }, [contentId, player]); + useEffect(() => { + if (pip_Trigger) { + togglePictureInPicture(); + } + const handleLeavePictureInPicture = () => { + setPip_Trigger(false); + }; + document.addEventListener('leavepictureinpicture', handleLeavePictureInPicture); + return () => { + document.removeEventListener('leavepictureinpicture', handleLeavePictureInPicture); + }; + }, [pip_Trigger]); + useEffect(() => { if (!player) { return; diff --git a/src/components/admin/ContentRenderer.tsx b/src/components/admin/ContentRenderer.tsx index eb5b1663e..516b3f5e9 100644 --- a/src/components/admin/ContentRenderer.tsx +++ b/src/components/admin/ContentRenderer.tsx @@ -88,6 +88,7 @@ export const getMetadata = async (contentId: number) => { segments: metadata['segments'], thumbnails: metadata['thumbnail_mosiac_url'], appxVideoJSON: metadata['appxVideoJSON'], + slidesType: metadata['slidesType'], }; if (user?.bunnyProxyEnabled) { @@ -106,6 +107,7 @@ export const getMetadata = async (contentId: number) => { segments: metadata['segments'], thumbnails: metadata['thumbnail_mosiac_url'], appxVideoJSON: metadata['appxVideoJSON'], + slidesType: metadata['slidesType'], }; const isHighestQualityUrlAccessible = await isUrlAccessible(mainUrls['1080']); diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx index f73c0422e..4eb38f1fe 100644 --- a/src/components/admin/ContentRendererClient.tsx +++ b/src/components/admin/ContentRendererClient.tsx @@ -1,11 +1,15 @@ 'use client'; -import { useSearchParams, useRouter } from 'next/navigation'; import { VideoPlayerSegment } from '@/components/VideoPlayerSegment'; -import VideoContentChapters from '../VideoContentChapters'; import { ChevronDown, ChevronUp } from 'lucide-react'; -import { useMemo, useState } from 'react'; -import { Button } from '../ui/button'; import Link from 'next/link'; +import { useRouter, useSearchParams } from 'next/navigation'; +import { useEffect, useMemo, useRef, useState } from 'react'; +import { useSetRecoilState } from 'recoil'; +import { pipTrigger } from '@/store/atoms/trigger'; +import { NotionRenderer } from '@/components/NotionRenderer'; +import ResizeBar from '@/components/ResizeBar'; +import { Button } from '@/components/ui/button'; +import VideoContentChapters from '@/components/VideoContentChapters'; export const ContentRendererClient = ({ metadata, @@ -32,10 +36,18 @@ export const ContentRendererClient = ({ const [showChapters, setShowChapters] = useState( metadata?.segments?.length > 0, ); + + const setPipTrigger = useSetRecoilState(pipTrigger); + + const [isDualView, setIsDualView]= useState(false); + const searchParams = useSearchParams(); + const screenWidth = useRef(1000); const router = useRouter(); + const [width, setWidth] = useState(screenWidth.current * 0.5); + //@ts-ignore const [quality, setQuality] = useState( searchParams.get('quality') ?? '1080', @@ -73,10 +85,80 @@ export const ContentRendererClient = ({ setShowChapters((prev) => !prev); }; + const isResized = useRef(false); + + useEffect(() => { + screenWidth.current = window.innerWidth; + const minWidth = screenWidth.current * 0.1; // 10% of screen width + const maxWidth = screenWidth.current * 0.65; // % of screen width + const defaultWidth = screenWidth.current * 0.5; // 50% of screen width + + console.log(defaultWidth,maxWidth, minWidth); + // window.addEventListener('touchstart', (e) => { + // if (!isResized.current) { + // return; + // } + + // setWidth((previousWidth) => { + // const newWidth = previousWidth + e.touches[0].clientX; + + // if (newWidth <= minWidth) { + // setPipTrigger(true); + // return minWidth; + // } else if (newWidth >=maxWidth) { + // setIsDualView(false); + // isResized.current=false; + // } + + // const isWidthInRange = newWidth >= minWidth && newWidth <= maxWidth; + + // return isWidthInRange ? newWidth : previousWidth; + // }); + // }); + + window.addEventListener('mousemove', (e) => { + if (!isResized.current) { + return; + } + + setWidth((previousWidth) => { + const newWidth = previousWidth + e.movementX/2; + + if (newWidth < minWidth) { + setPipTrigger(true); + return minWidth + 25; + } else if (newWidth >=maxWidth) { + setIsDualView(false); + isResized.current=false; + } + + const isWidthInRange = newWidth >= minWidth && newWidth <= maxWidth; + + return isWidthInRange ? newWidth : previousWidth; + }); + }); + + window.addEventListener("mouseup", () => { + isResized.current = false; + }); + + return () => { +//cleanups + }; + }, []); + return (
- + + < div + className={`h-full flex flex-row min-w-full w-full`} + style={isDualView ? { width: `${width /16}rem` } : { width: '100%'}} +> +
+ + { }} /> +
+ + {isDualView && } +
+ {isDualView && (
+ {metadata.slidesType === "NOT_NOTION" && } + + {metadata.slidesType === "NOTION" && + } +
+)} + +
-
+

{content.title}

{metadata.slides ? ( - - +
+ + + + +{!isDualView ? ( + <> + {metadata.slidesType === "NOT_NOTION" ? ( + + + + ) : ( + + )} + +) : ( + +)} + +
) : null}
diff --git a/src/components/admin/UpdateVideoClient.tsx b/src/components/admin/UpdateVideoClient.tsx index 9d8046a4d..6fc516a22 100644 --- a/src/components/admin/UpdateVideoClient.tsx +++ b/src/components/admin/UpdateVideoClient.tsx @@ -12,6 +12,7 @@ import { Input } from '../ui/input'; import { Button } from '../ui/button'; import { Label } from '../ui/label'; import { toast } from 'sonner'; +import { RadioGroup, RadioGroupItem } from '../ui/radio-group'; export const UpdateVideoClient = ({ content, @@ -28,6 +29,7 @@ export const UpdateVideoClient = ({ const [link1080, setLink1080] = useState(''); const [link720, setLink720] = useState(''); const [link360, setLink360] = useState(''); + const [slidesType, setSlidesType] = useState('NOTION'); const [link1080_mp4, setLink1080_mp4] = useState(''); const [link720_mp4, setLink720_mp4] = useState(''); @@ -183,7 +185,20 @@ export const UpdateVideoClient = ({ type="text" placeholder="Admin password" onChange={(e) => setAdminPassword(e.target.value)} - /> + /> + Slides Type + + setSlidesType(value)}> +
+ + +
+
+ + +
+ + - +
+ + + -{!isDualView ? ( - <> - {metadata.slidesType === "NOT_NOTION" ? ( - - - - ) : ( - - )} - -) : ( - -)} - + {!isDualView ? ( + <> + {metadata.slidesType === 'NOT_NOTION' ? ( + + + + ) : ( + + )} + + ) : ( + + )}
) : null}
From 48bbf55395613691eea159a54e352f4756a5d963 Mon Sep 17 00:00:00 2001 From: Sargam Date: Sun, 9 Mar 2025 15:10:46 +0530 Subject: [PATCH 3/3] Update src/components/admin/ContentRendererClient.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/components/admin/ContentRendererClient.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx index bb9fa6f4a..7f0090b5a 100644 --- a/src/components/admin/ContentRendererClient.tsx +++ b/src/components/admin/ContentRendererClient.tsx @@ -93,7 +93,6 @@ export const ContentRendererClient = ({ const maxWidth = screenWidth.current * 0.65; // % of screen width const defaultWidth = screenWidth.current * 0.5; // 50% of screen width - console.log(defaultWidth, maxWidth, minWidth); // window.addEventListener('touchstart', (e) => { // if (!isResized.current) { // return;