Auto seeding video duration to database without manual intervention

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 {
   createSegmentMarkersWithoutDuration,
@@ -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);
 
@@ -84,10 +87,35 @@ 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 newDuration = +currentDuration.toFixed(0);
+    await fetch('/api/video', {
+      method: 'PUT',
+
+      body: JSON.stringify({
+        contentId,
+        duration: newDuration,
+      }),
+
+      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,