fixed: Seed video duration to the database without JSON

package.json

@@ -41,6 +41,7 @@
     "@types/jsonwebtoken": "^9.0.5",
     "axios": "^1.6.2",
     "bcrypt": "^5.1.1",
+    "canvas": "^2.11.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dayjs": "^1.11.10",
@@ -56,9 +57,11 @@
     "next-themes": "^0.2.1",
     "node-fetch": "^3.3.2",
     "notion-client": "^6.16.0",
+    "pdf-lib": "^1.17.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.50.1",
+    "react-icons": "^5.1.0",
     "react-notion-x": "^6.16.0",
     "react-resizable-panels": "^1.0.7",
     "recoil": "^0.7.7",
@@ -89,6 +92,6 @@
     "prisma": "^5.6.0",
     "tailwindcss": "^3.3.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5"
+    "typescript": "5.3.3"
   }
 }

src/app/api/video/route.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from 'next/server';
+import db from '@/db';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+
+export async function PUT(req: NextRequest) {
+  const { contentId, duration } = await req.json();
+  const session = await getServerSession(authOptions);
+  if (!session || !session?.user) {
+    return NextResponse.json(
+      { message: 'Authentication Failed' },
+      { status: 401 },
+    );
+  }
+  try {
+    await db.videoMetadata.update({
+      where: { contentId },
+      data: { duration },
+    });
+
+    return NextResponse.json({ success: true }, { status: 200 });
+  } catch (error) {
+    return NextResponse.json({ success: false }, { status: 400 });
+  }
+}

src/components/VideoPlayerSegment.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React, { FunctionComponent, useRef } from 'react';
+import React, { FunctionComponent, useEffect, useRef, useState } from 'react';
 import { VideoPlayer } from '@/components/VideoPlayer2';
 
 import {
@@ -21,6 +21,7 @@ interface VideoProps {
   setQuality: React.Dispatch<React.SetStateAction<string>>;
   thumbnails: Thumbnail[];
   segments: Segment[];
+  duration: number;
   subtitles: string;
   videoJsOptions: any;
   contentId: number;
@@ -30,12 +31,14 @@ interface VideoProps {
 export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
   setQuality,
   contentId,
+  duration,
   subtitles,
   segments,
   videoJsOptions,
   onVideoEnd,
 }) => {
   const playerRef = useRef<Player | null>(null);
+  const [currentDuration, setCurrentDuration] = useState(0);
 
   const thumbnailPreviewRef = useRef<HTMLDivElement>(null);
 
@@ -83,11 +86,34 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
   };
   const handlePlayerReady = async (player: Player) => {
     playerRef.current = player;
-
+    setCurrentDuration(player.cache_.duration);
     createSegmentMarkersWithoutDuration(player, segments);
     overrideUpdateTime(player);
   };
 
+  async function addVideoDuration() {
+    const duration1 = +currentDuration.toFixed(0);
+    await fetch('/api/video', {
+      method: 'PUT',
+
+      body: JSON.stringify({
+        contentId,
+        duration: duration1,
+      }),
+
+      headers: {
+        'Content-type': 'application/json',
+      },
+    });
+  }
+  useEffect(() => {
+    if (currentDuration) {
+      if (duration !== +currentDuration.toFixed(0)) {
+        addVideoDuration();
+      }
+    }
+  }, [currentDuration]);
+
   return (
     <div className="mb-6">
       <div className="flex-1 relative">

src/components/admin/ContentRenderer.tsx

@@ -39,6 +39,7 @@ export const getMetadata = async (contentId: number) => {
     slides: metadata['slides'],
     //@ts-ignore
     segments: metadata['segments'],
+    duration: metadata['duration'],
   };
   return {
     //@ts-ignore

src/components/admin/ContentRendererClient.tsx

@@ -96,6 +96,7 @@ export const ContentRendererClient = ({
           subtitles={metadata.subtitles}
           thumbnails={[]}
           segments={metadata?.segments || []}
+          duration={metadata.duration}
           videoJsOptions={{
             playbackrates: [0.5, 1, 1.25, 1.5, 1.75, 2],
             controls: true,

tsconfig.json

@@ -15,14 +15,14 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "@public/*": ["./public/*"],
-    },
+      "@public/*": ["./public/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }