diff --git a/frontend/src/app/auth/login/page.tsx b/frontend/src/app/auth/login/page.tsx
index 546eed1..6a6cb34 100644
--- a/frontend/src/app/auth/login/page.tsx
+++ b/frontend/src/app/auth/login/page.tsx
@@ -7,7 +7,7 @@ import apiClient from "@/lib/api";
 import { useAuthStore } from "@/store/authStore";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
-import {  Mail, Lock } from "lucide-react";
+import { Mail, Lock } from "lucide-react";
 // import { log } from "console";
 
 export default function LoginPage() {
@@ -25,10 +25,13 @@ export default function LoginPage() {
     try {
       // Determine if identifier is email or username
 
-      console.log("This dumb fuck has identifier lets see what info it has in identifier",identifier);
-      
-      const isEmail = identifier.includes('@');
-      const loginData = isEmail 
+      console.log(
+        "This dumb fuck has identifier lets see what info it has in identifier",
+        identifier,
+      );
+
+      const isEmail = identifier.includes("@");
+      const loginData = isEmail
         ? { email: identifier, password }
         : { username: identifier, password };
 
@@ -66,7 +69,9 @@ export default function LoginPage() {
         <div className="bg-card p-10 rounded-xl border shadow-2xl">
           <form onSubmit={handleSubmit} className="space-y-8">
             <div>
-              <label className="block text-base font-semibold mb-3">Email or Username</label>
+              <label className="block text-base font-semibold mb-3">
+                Email or Username
+              </label>
               <div className="relative">
                 <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                 <input
@@ -81,7 +86,9 @@ export default function LoginPage() {
             </div>
 
             <div>
-              <label className="block text-base font-semibold mb-3">Password</label>
+              <label className="block text-base font-semibold mb-3">
+                Password
+              </label>
               <div className="relative">
                 <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                 <input
@@ -115,7 +122,10 @@ export default function LoginPage() {
           <div className="mt-8 text-center">
             <p className="text-base text-muted-foreground">
               Don&apos;t have an account?{" "}
-              <Link href="/auth/register" className="text-primary hover:underline font-semibold text-lg transition-colors">
+              <Link
+                href="/auth/register"
+                className="text-primary hover:underline font-semibold text-lg transition-colors"
+              >
                 Create Account
               </Link>
             </p>
diff --git a/frontend/src/app/channel/[id]/page.tsx b/frontend/src/app/channel/[id]/page.tsx
index 072efb6..a5d84a0 100644
--- a/frontend/src/app/channel/[id]/page.tsx
+++ b/frontend/src/app/channel/[id]/page.tsx
@@ -1,15 +1,15 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { MainLayout } from '@/components/layout/MainLayout';
-import { Button } from '@/components/ui/button';
-import { useToast } from '@/hooks/use-toast';
-import { useAuthStore } from '@/store/authStore';
-import apiClient from '@/lib/api';
-import { Bell, BellOff, Video, Users, Play, Settings } from 'lucide-react';
-import Image from 'next/image';
-import { VideoGrid } from '@/components/video/VideoGrid';
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { MainLayout } from "@/components/layout/MainLayout";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import { useAuthStore } from "@/store/authStore";
+import apiClient from "@/lib/api";
+import { Bell, BellOff, Video, Users, Play, Settings } from "lucide-react";
+import Image from "next/image";
+import { VideoGrid } from "@/components/video/VideoGrid";
 
 interface Channel {
   _id: string;
@@ -25,7 +25,7 @@ export default function ChannelPage() {
   const router = useRouter();
   const { toast } = useToast();
   const { user } = useAuthStore();
-  
+
   const [channel, setChannel] = useState<Channel | null>(null);
   const [videoCount, setVideoCount] = useState(0);
   const [loading, setLoading] = useState(true);
@@ -47,13 +47,13 @@ export default function ChannelPage() {
       setChannel(channelData);
       setSubscribersCount(channelData.subscribersCount || 0);
     } catch (error: any) {
-      console.error('Error fetching channel:', error);
+      console.error("Error fetching channel:", error);
       toast({
-        title: 'Error loading channel',
-        description: error.response?.data?.message || 'Channel not found',
-        variant: 'destructive',
+        title: "Error loading channel",
+        description: error.response?.data?.message || "Channel not found",
+        variant: "destructive",
       });
-      router.push('/');
+      router.push("/");
     } finally {
       setLoading(false);
     }
@@ -63,10 +63,12 @@ export default function ChannelPage() {
     try {
       const response = await apiClient.get(`/videos?page=1&limit=100`);
       const allVideos = response.data.data || [];
-      const channelVideos = allVideos.filter((v: any) => v.owner?._id === params.id);
+      const channelVideos = allVideos.filter(
+        (v: any) => v.owner?._id === params.id,
+      );
       setVideoCount(channelVideos.length);
     } catch (error) {
-      console.error('Error fetching video count:', error);
+      console.error("Error fetching video count:", error);
     }
   };
 
@@ -75,45 +77,51 @@ export default function ChannelPage() {
     try {
       const response = await apiClient.get(`/subscriptions/u/${user._id}`);
       const subscriptions = response.data.data || [];
-      const subscribed = subscriptions.some((sub: any) => sub.channel._id === params.id);
+      const subscribed = subscriptions.some(
+        (sub: any) => sub.channel._id === params.id,
+      );
       setIsSubscribed(subscribed);
-      
+
       // Also fetch fresh channel data to get accurate subscriber count
-      const channelResponse = await apiClient.get(`/users/channel/${params.id}`);
+      const channelResponse = await apiClient.get(
+        `/users/channel/${params.id}`,
+      );
       setSubscribersCount(channelResponse.data.data.subscribersCount || 0);
     } catch (error) {
-      console.error('Error checking subscription:', error);
+      console.error("Error checking subscription:", error);
     }
   };
 
   const handleSubscribe = async () => {
     if (!user) {
-      router.push('/auth/login');
+      router.push("/auth/login");
       return;
     }
 
     try {
       const wasSubscribed = isSubscribed;
       await apiClient.post(`/subscriptions/c/${params.id}`);
-      
+
       // Toggle subscription state
       setIsSubscribed(!wasSubscribed);
-      
+
       // Update count based on previous state
-      setSubscribersCount(prev => wasSubscribed ? prev - 1 : prev + 1);
-      
+      setSubscribersCount((prev) => (wasSubscribed ? prev - 1 : prev + 1));
+
       toast({
-        title: wasSubscribed ? 'Unsubscribed' : 'Subscribed successfully!',
-        description: wasSubscribed ? 'Channel removed from subscriptions' : 'Channel added to subscriptions',
+        title: wasSubscribed ? "Unsubscribed" : "Subscribed successfully!",
+        description: wasSubscribed
+          ? "Channel removed from subscriptions"
+          : "Channel added to subscriptions",
       });
-      
+
       // Refresh to get accurate count from backend
       setTimeout(() => checkSubscription(), 500);
     } catch (error) {
       toast({
-        title: 'Error',
-        description: 'Failed to update subscription',
-        variant: 'destructive',
+        title: "Error",
+        description: "Failed to update subscription",
+        variant: "destructive",
       });
     }
   };
@@ -160,7 +168,7 @@ export default function ChannelPage() {
               {/* Avatar */}
               <div className="relative">
                 <Image
-                  src={channel.avatar || '/placeholder/user-avatar.png'}
+                  src={channel.avatar || "/placeholder/user-avatar.png"}
                   alt={channel.fullName}
                   width={160}
                   height={160}
@@ -170,7 +178,9 @@ export default function ChannelPage() {
 
               {/* Channel Details */}
               <div className="flex-1 space-y-2">
-                <h1 className="text-3xl md:text-4xl font-bold">{channel.fullName}</h1>
+                <h1 className="text-3xl md:text-4xl font-bold">
+                  {channel.fullName}
+                </h1>
                 <div className="flex flex-wrap items-center gap-4 text-muted-foreground">
                   <span className="text-lg">@{channel.username}</span>
                   <span>•</span>
@@ -192,8 +202,8 @@ export default function ChannelPage() {
                   onClick={handleSubscribe}
                   className={`px-8 py-6 text-lg font-semibold ${
                     isSubscribed
-                      ? 'bg-muted text-foreground hover:bg-muted/80'
-                      : 'bg-gradient-to-r from-orange-500 via-red-500 to-yellow-500 hover:shadow-lg hover:shadow-orange-500/50'
+                      ? "bg-muted text-foreground hover:bg-muted/80"
+                      : "bg-gradient-to-r from-orange-500 via-red-500 to-yellow-500 hover:shadow-lg hover:shadow-orange-500/50"
                   }`}
                 >
                   {isSubscribed ? (
@@ -219,7 +229,9 @@ export default function ChannelPage() {
                 <Play className="w-6 h-6 text-orange-500" />
                 Channel Videos
               </h2>
-              <span className="text-muted-foreground">{videoCount} uploads</span>
+              <span className="text-muted-foreground">
+                {videoCount} uploads
+              </span>
             </div>
 
             {videoCount === 0 ? (
@@ -227,7 +239,9 @@ export default function ChannelPage() {
                 <Video className="w-16 h-16 mx-auto mb-4 text-muted-foreground" />
                 <h3 className="text-xl font-semibold mb-2">No videos yet</h3>
                 <p className="text-muted-foreground">
-                  {isOwnChannel ? 'Upload your first video to get started!' : 'This channel hasn\'t uploaded any videos yet.'}
+                  {isOwnChannel
+                    ? "Upload your first video to get started!"
+                    : "This channel hasn't uploaded any videos yet."}
                 </p>
               </div>
             ) : (
diff --git a/frontend/src/app/history/page.tsx b/frontend/src/app/history/page.tsx
index 680ce82..f51464e 100644
--- a/frontend/src/app/history/page.tsx
+++ b/frontend/src/app/history/page.tsx
@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
-import { MainLayout } from '@/components/layout/MainLayout';
-import { VideoCard } from '@/components/video/VideoCard';
-import apiClient from '@/lib/api';
-import { useAuthStore } from '@/store/authStore';
-import { useRouter } from 'next/navigation';
-import { Loader2, History as HistoryIcon } from 'lucide-react';
+import { useState, useEffect } from "react";
+import { MainLayout } from "@/components/layout/MainLayout";
+import { VideoCard } from "@/components/video/VideoCard";
+import apiClient from "@/lib/api";
+import { useAuthStore } from "@/store/authStore";
+import { useRouter } from "next/navigation";
+import { Loader2, History as HistoryIcon } from "lucide-react";
 
 interface Video {
   _id: string;
@@ -33,20 +33,20 @@ export default function HistoryPage() {
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
-      router.push('/auth/login');
+      router.push("/auth/login");
       return;
     }
 
     const fetchWatchHistory = async () => {
       try {
         setLoading(true);
-        const response = await apiClient.get('/users/history');
+        const response = await apiClient.get("/users/history");
         const historyData = response.data.data;
-        
+
         // Extract videos from watch history
         setVideos(Array.isArray(historyData) ? historyData : []);
       } catch (error) {
-        console.error('Error fetching watch history:', error);
+        console.error("Error fetching watch history:", error);
         setVideos([]);
       } finally {
         setLoading(false);
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index dfa10fc..512ced2 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -9,7 +9,8 @@ const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "Spark - Video Streaming & Messaging Platform",
-  description: "Modern video streaming platform with real-time messaging, video editing, and social features",
+  description:
+    "Modern video streaming platform with real-time messaging, video editing, and social features",
 };
 
 export default function RootLayout({
diff --git a/frontend/src/app/liked/page.tsx b/frontend/src/app/liked/page.tsx
index e91ba0d..8235ab5 100644
--- a/frontend/src/app/liked/page.tsx
+++ b/frontend/src/app/liked/page.tsx
@@ -1,12 +1,12 @@
-'use client';
+"use client";
 
-import { useState, useEffect } from 'react';
-import { MainLayout } from '@/components/layout/MainLayout';
-import { VideoCard } from '@/components/video/VideoCard';
-import apiClient from '@/lib/api';
-import { useAuthStore } from '@/store/authStore';
-import { useRouter } from 'next/navigation';
-import { Loader2, ThumbsUp } from 'lucide-react';
+import { useState, useEffect } from "react";
+import { MainLayout } from "@/components/layout/MainLayout";
+import { VideoCard } from "@/components/video/VideoCard";
+import apiClient from "@/lib/api";
+import { useAuthStore } from "@/store/authStore";
+import { useRouter } from "next/navigation";
+import { Loader2, ThumbsUp } from "lucide-react";
 
 interface Video {
   _id: string;
@@ -33,20 +33,21 @@ export default function LikedVideosPage() {
 
   useEffect(() => {
     if (!isLoading && !isAuthenticated) {
-      router.push('/auth/login');
+      router.push("/auth/login");
       return;
     }
 
     const fetchLikedVideos = async () => {
       try {
         setLoading(true);
-        const response = await apiClient.get('/likes/videos');
-        
+        const response = await apiClient.get("/likes/videos");
+
         // Handle nested response structure
-        const likedData = response.data?.data?.videos || response.data?.data || [];
+        const likedData =
+          response.data?.data?.videos || response.data?.data || [];
         setVideos(Array.isArray(likedData) ? likedData : []);
       } catch (error) {
-        console.error('Error fetching liked videos:', error);
+        console.error("Error fetching liked videos:", error);
         setVideos([]);
       } finally {
         setLoading(false);
diff --git a/frontend/src/app/my-channel/page.tsx b/frontend/src/app/my-channel/page.tsx
index c9e7415..ac126de 100644
--- a/frontend/src/app/my-channel/page.tsx
+++ b/frontend/src/app/my-channel/page.tsx
@@ -11,9 +11,23 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useToast } from "@/hooks/use-toast";
 import apiClient from "@/lib/api";
 import {
-  Play, Eye, Clock, MoreVertical, Trash2, Edit, Globe,
-  Lock, Upload, Video as VideoIcon, TrendingUp, Users, 
-  Settings, Scissors, Sparkles, Download, Share2
+  Play,
+  Eye,
+  Clock,
+  MoreVertical,
+  Trash2,
+  Edit,
+  Globe,
+  Lock,
+  Upload,
+  Video as VideoIcon,
+  TrendingUp,
+  Users,
+  Settings,
+  Scissors,
+  Sparkles,
+  Download,
+  Share2,
 } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
@@ -78,31 +92,39 @@ export default function MyChannelPage() {
   const { toast } = useToast();
 
   const [videos, setVideos] = useState<Video[]>([]);
-  const [stats, setStats] = useState<Stats>({ totalVideos: 0, totalViews: 0, totalSubscribers: 0 });
+  const [stats, setStats] = useState<Stats>({
+    totalVideos: 0,
+    totalViews: 0,
+    totalSubscribers: 0,
+  });
   const [loading, setLoading] = useState(true);
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [processDialogOpen, setProcessDialogOpen] = useState(false);
-  const [editForm, setEditForm] = useState({ title: "", description: "", isPublished: true });
+  const [editForm, setEditForm] = useState({
+    title: "",
+    description: "",
+    isPublished: true,
+  });
   const [activeTab, setActiveTab] = useState("all");
 
   const fetchMyVideos = useCallback(async () => {
     try {
       setLoading(true);
       const response = await apiClient.get("/videos/search", {
-        params: { userId: user?._id }
+        params: { userId: user?._id },
       });
       const videoData = response.data.data;
       // Ensure videos is always an array
       const videoArray = Array.isArray(videoData) ? videoData : [];
       setVideos(videoArray);
-      
+
       // Fetch stats after getting videos
       try {
         const userResponse = await apiClient.get("/users/current-user");
         const userData = userResponse.data.data;
-        
+
         setStats({
           totalVideos: videoArray.length,
           totalViews: videoArray.reduce((acc, v) => acc + v.views, 0),
@@ -136,12 +158,16 @@ export default function MyChannelPage() {
   useEffect(() => {
     if (isAuthenticated && user) {
       const handleVisibilityChange = () => {
-        if (document.visibilityState === 'visible') {
+        if (document.visibilityState === "visible") {
           fetchMyVideos();
         }
       };
-      document.addEventListener('visibilitychange', handleVisibilityChange);
-      return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+      return () =>
+        document.removeEventListener(
+          "visibilitychange",
+          handleVisibilityChange,
+        );
     }
   }, [isAuthenticated, user, fetchMyVideos]);
 
@@ -224,7 +250,8 @@ export default function MyChannelPage() {
       });
       toast({
         title: "Processing started",
-        description: "Your video is being processed. This may take a few minutes.",
+        description:
+          "Your video is being processed. This may take a few minutes.",
       });
       setProcessDialogOpen(false);
     } catch (error) {
@@ -236,7 +263,7 @@ export default function MyChannelPage() {
     }
   };
 
-  const filteredVideos = Array.isArray(videos) 
+  const filteredVideos = Array.isArray(videos)
     ? videos.filter((video) => {
         if (activeTab === "published") return video.isPublished;
         if (activeTab === "unpublished") return !video.isPublished;
@@ -283,13 +310,15 @@ export default function MyChannelPage() {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           <Card>
             <CardHeader className="flex flex-row items-center justify-between pb-2">
-              <CardTitle className="text-sm font-medium">Total Videos</CardTitle>
+              <CardTitle className="text-sm font-medium">
+                Total Videos
+              </CardTitle>
               <VideoIcon className="w-4 h-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
               <div className="text-2xl font-bold">{stats.totalVideos}</div>
               <p className="text-xs text-muted-foreground mt-1">
-                {filteredVideos.filter(v => v.isPublished).length} published
+                {filteredVideos.filter((v) => v.isPublished).length} published
               </p>
             </CardContent>
           </Card>
@@ -300,7 +329,9 @@ export default function MyChannelPage() {
               <Eye className="w-4 h-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold">{formatViewCount(stats.totalViews)}</div>
+              <div className="text-2xl font-bold">
+                {formatViewCount(stats.totalViews)}
+              </div>
               <p className="text-xs text-muted-foreground mt-1">
                 Across all videos
               </p>
@@ -313,7 +344,9 @@ export default function MyChannelPage() {
               <Users className="w-4 h-4 text-muted-foreground" />
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold">{formatViewCount(stats.totalSubscribers)}</div>
+              <div className="text-2xl font-bold">
+                {formatViewCount(stats.totalSubscribers)}
+              </div>
               <p className="text-xs text-muted-foreground mt-1">
                 Total followers
               </p>
@@ -326,10 +359,10 @@ export default function MyChannelPage() {
           <TabsList className="grid w-full max-w-md grid-cols-3">
             <TabsTrigger value="all">All ({videos.length})</TabsTrigger>
             <TabsTrigger value="published">
-              Published ({videos.filter(v => v.isPublished).length})
+              Published ({videos.filter((v) => v.isPublished).length})
             </TabsTrigger>
             <TabsTrigger value="unpublished">
-              Unpublished ({videos.filter(v => !v.isPublished).length})
+              Unpublished ({videos.filter((v) => !v.isPublished).length})
             </TabsTrigger>
           </TabsList>
 
@@ -356,7 +389,10 @@ export default function MyChannelPage() {
                   <Card key={video._id} className="overflow-hidden">
                     <div className="flex flex-col md:flex-row gap-4 p-4">
                       {/* Thumbnail */}
-                      <Link href={`/video/${video._id}`} className="relative w-full md:w-64 aspect-video shrink-0">
+                      <Link
+                        href={`/video/${video._id}`}
+                        className="relative w-full md:w-64 aspect-video shrink-0"
+                      >
                         <Image
                           src={video.thumbnail}
                           alt={video.title}
@@ -380,7 +416,7 @@ export default function MyChannelPage() {
                                 {video.title}
                               </h3>
                             </Link>
-                            
+
                             {/* Actions Dropdown */}
                             <DropdownMenu>
                               <DropdownMenuTrigger asChild>
@@ -389,13 +425,19 @@ export default function MyChannelPage() {
                                 </Button>
                               </DropdownMenuTrigger>
                               <DropdownMenuContent align="end" className="w-56">
-                                <DropdownMenuLabel>Video Actions</DropdownMenuLabel>
+                                <DropdownMenuLabel>
+                                  Video Actions
+                                </DropdownMenuLabel>
                                 <DropdownMenuSeparator />
-                                <DropdownMenuItem onClick={() => handleEditClick(video)}>
+                                <DropdownMenuItem
+                                  onClick={() => handleEditClick(video)}
+                                >
                                   <Edit className="w-4 h-4 mr-2" />
                                   Edit Details
                                 </DropdownMenuItem>
-                                <DropdownMenuItem onClick={() => handleTogglePublish(video)}>
+                                <DropdownMenuItem
+                                  onClick={() => handleTogglePublish(video)}
+                                >
                                   {video.isPublished ? (
                                     <>
                                       <Lock className="w-4 h-4 mr-2" />
@@ -408,12 +450,14 @@ export default function MyChannelPage() {
                                     </>
                                   )}
                                 </DropdownMenuItem>
-                                <DropdownMenuItem onClick={() => handleProcessVideo(video)}>
+                                <DropdownMenuItem
+                                  onClick={() => handleProcessVideo(video)}
+                                >
                                   <Sparkles className="w-4 h-4 mr-2" />
                                   Process Video
                                 </DropdownMenuItem>
                                 <DropdownMenuSeparator />
-                                <DropdownMenuItem 
+                                <DropdownMenuItem
                                   onClick={() => handleDeleteClick(video)}
                                   className="text-destructive focus:text-destructive"
                                 >
@@ -423,11 +467,11 @@ export default function MyChannelPage() {
                               </DropdownMenuContent>
                             </DropdownMenu>
                           </div>
-                          
+
                           <p className="text-sm text-muted-foreground mt-2 line-clamp-2">
                             {video.description}
                           </p>
-                          
+
                           <div className="flex items-center gap-4 mt-3 text-sm text-muted-foreground">
                             <span className="flex items-center gap-1">
                               <Eye className="w-4 h-4" />
@@ -443,12 +487,16 @@ export default function MyChannelPage() {
                               {video.isPublished ? (
                                 <>
                                   <Globe className="w-4 h-4 text-green-500" />
-                                  <span className="text-green-500">Published</span>
+                                  <span className="text-green-500">
+                                    Published
+                                  </span>
                                 </>
                               ) : (
                                 <>
                                   <Lock className="w-4 h-4 text-orange-500" />
-                                  <span className="text-orange-500">Private</span>
+                                  <span className="text-orange-500">
+                                    Private
+                                  </span>
                                 </>
                               )}
                             </span>
@@ -457,24 +505,24 @@ export default function MyChannelPage() {
 
                         {/* Quick Actions */}
                         <div className="flex gap-2 mt-4">
-                          <Button 
-                            variant="outline" 
-                            size="sm" 
+                          <Button
+                            variant="outline"
+                            size="sm"
                             onClick={() => router.push(`/video/${video._id}`)}
                           >
                             <Play className="w-4 h-4 mr-1" />
                             Watch
                           </Button>
-                          <Button 
-                            variant="outline" 
+                          <Button
+                            variant="outline"
                             size="sm"
                             onClick={() => handleEditClick(video)}
                           >
                             <Edit className="w-4 h-4 mr-1" />
                             Edit
                           </Button>
-                          <Button 
-                            variant="outline" 
+                          <Button
+                            variant="outline"
                             size="sm"
                             onClick={() => handleProcessVideo(video)}
                           >
@@ -506,7 +554,9 @@ export default function MyChannelPage() {
                 <Input
                   id="title"
                   value={editForm.title}
-                  onChange={(e) => setEditForm({ ...editForm, title: e.target.value })}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, title: e.target.value })
+                  }
                   placeholder="Enter video title"
                 />
               </div>
@@ -515,7 +565,9 @@ export default function MyChannelPage() {
                 <Textarea
                   id="description"
                   value={editForm.description}
-                  onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
+                  onChange={(e) =>
+                    setEditForm({ ...editForm, description: e.target.value })
+                  }
                   placeholder="Enter video description"
                   rows={4}
                 />
@@ -530,12 +582,17 @@ export default function MyChannelPage() {
                 <Switch
                   id="publish"
                   checked={editForm.isPublished}
-                  onCheckedChange={(checked) => setEditForm({ ...editForm, isPublished: checked })}
+                  onCheckedChange={(checked) =>
+                    setEditForm({ ...editForm, isPublished: checked })
+                  }
                 />
               </div>
             </div>
             <DialogFooter>
-              <Button variant="outline" onClick={() => setEditDialogOpen(false)}>
+              <Button
+                variant="outline"
+                onClick={() => setEditDialogOpen(false)}
+              >
                 Cancel
               </Button>
               <Button onClick={handleEditSubmit}>Save Changes</Button>
@@ -549,8 +606,9 @@ export default function MyChannelPage() {
             <AlertDialogHeader>
               <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
               <AlertDialogDescription>
-                This action cannot be undone. This will permanently delete your video
-                &quot;{selectedVideo?.title}&quot; and remove it from our servers.
+                This action cannot be undone. This will permanently delete your
+                video &quot;{selectedVideo?.title}&quot; and remove it from our
+                servers.
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
@@ -571,7 +629,8 @@ export default function MyChannelPage() {
             <DialogHeader>
               <DialogTitle>Process Video</DialogTitle>
               <DialogDescription>
-                Choose a processing action for &quot;{selectedVideo?.title}&quot;
+                Choose a processing action for &quot;{selectedVideo?.title}
+                &quot;
               </DialogDescription>
             </DialogHeader>
             <div className="grid grid-cols-2 gap-4 py-4">
@@ -609,7 +668,10 @@ export default function MyChannelPage() {
               </Button>
             </div>
             <DialogFooter>
-              <Button variant="outline" onClick={() => setProcessDialogOpen(false)}>
+              <Button
+                variant="outline"
+                onClick={() => setProcessDialogOpen(false)}
+              >
                 Cancel
               </Button>
             </DialogFooter>
diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index 48fe813..ad27410 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -6,14 +6,30 @@ import { MainLayout } from "@/components/layout/MainLayout";
 import { useAuthStore } from "@/store/authStore";
 import { useChannelStore } from "@/store/channelStore";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import {
-  User, Video, Heart, Users, Settings, Plus, 
-  TrendingUp, Upload, Edit, BarChart3, Film, Tv
+  User,
+  Video,
+  Heart,
+  Users,
+  Settings,
+  Plus,
+  TrendingUp,
+  Upload,
+  Edit,
+  BarChart3,
+  Film,
+  Tv,
 } from "lucide-react";
 import { channelApi } from "@/lib/api/channel";
 import { CreateChannelModal } from "@/components/channel/CreateChannelModal";
@@ -30,7 +46,11 @@ import { cn } from "@/lib/utils";
 export default function ProfilePage() {
   const router = useRouter();
   const { user, isAuthenticated, isLoading } = useAuthStore();
-  const { channels, setChannels, setLoading: setChannelLoading } = useChannelStore();
+  const {
+    channels,
+    setChannels,
+    setLoading: setChannelLoading,
+  } = useChannelStore();
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("overview");
   const [showEmail, setShowEmail] = useState(false);
@@ -94,31 +114,31 @@ export default function ProfilePage() {
                   {user.fullName?.[0]?.toUpperCase()}
                 </AvatarFallback>
               </Avatar>
-              
+
               <div className="flex-1 space-y-2">
                 <div>
                   <h1 className="text-3xl font-bold">{user.fullName}</h1>
                   <p className="text-muted-foreground">@{user.username}</p>
                 </div>
-                
+
                 <div className="flex items-center gap-4 flex-wrap">
-                  {showEmail?user.email : maskEmail(user.email) && (
-                    <Badge variant="secondary" className="text-sm">
-                      {user.email}
-                    </Badge>
-                  )}
+                  {showEmail
+                    ? user.email
+                    : maskEmail(user.email) && (
+                        <Badge variant="secondary" className="text-sm">
+                          {user.email}
+                        </Badge>
+                      )}
                   {user.isVerified && (
-                    <Badge className="text-sm">
-                      ✓ Verified
-                    </Badge>
+                    <Badge className="text-sm">✓ Verified</Badge>
                   )}
                 </div>
               </div>
 
               <div className="flex flex-col gap-2">
                 {!hasChannel && (
-                  <Button 
-                    size="lg" 
+                  <Button
+                    size="lg"
                     onClick={() => setIsCreateModalOpen(true)}
                     className="gap-2"
                   >
@@ -145,9 +165,12 @@ export default function ProfilePage() {
                 <Tv className="w-12 h-12 text-primary" />
               </div>
               <div className="text-center space-y-2">
-                <h3 className="text-2xl font-semibold">Start Your Creator Journey</h3>
+                <h3 className="text-2xl font-semibold">
+                  Start Your Creator Journey
+                </h3>
                 <p className="text-muted-foreground max-w-md">
-                  Create your channel to upload videos, build an audience, and share your content with the world.
+                  Create your channel to upload videos, build an audience, and
+                  share your content with the world.
                 </p>
               </div>
               <Button
@@ -164,11 +187,16 @@ export default function ProfilePage() {
 
         {/* Tabs */}
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-          <TabsList className={cn(
-            "grid w-full max-w-4xl mx-auto mb-8 h-auto",
-            hasChannel ? "grid-cols-7" : "grid-cols-4"
-          )}>
-            <TabsTrigger value="overview" className="flex items-center gap-2 py-3">
+          <TabsList
+            className={cn(
+              "grid w-full max-w-4xl mx-auto mb-8 h-auto",
+              hasChannel ? "grid-cols-7" : "grid-cols-4",
+            )}
+          >
+            <TabsTrigger
+              value="overview"
+              className="flex items-center gap-2 py-3"
+            >
               <User className="w-4 h-4" />
               <span className="hidden sm:inline">Overview</span>
             </TabsTrigger>
@@ -176,27 +204,42 @@ export default function ProfilePage() {
               <Heart className="w-4 h-4" />
               <span className="hidden sm:inline">Liked</span>
             </TabsTrigger>
-            <TabsTrigger value="subscribed" className="flex items-center gap-2 py-3">
+            <TabsTrigger
+              value="subscribed"
+              className="flex items-center gap-2 py-3"
+            >
               <Users className="w-4 h-4" />
               <span className="hidden sm:inline">Subscribed</span>
             </TabsTrigger>
-            <TabsTrigger value="settings" className="flex items-center gap-2 py-3">
+            <TabsTrigger
+              value="settings"
+              className="flex items-center gap-2 py-3"
+            >
               <Settings className="w-4 h-4" />
               <span className="hidden sm:inline">Settings</span>
             </TabsTrigger>
-            
+
             {/* Studio Tabs - Only show if user has channel */}
             {hasChannel && (
               <>
-                <TabsTrigger value="studio" className="flex items-center gap-2 py-3">
+                <TabsTrigger
+                  value="studio"
+                  className="flex items-center gap-2 py-3"
+                >
                   <BarChart3 className="w-4 h-4" />
                   <span className="hidden sm:inline">Studio</span>
                 </TabsTrigger>
-                <TabsTrigger value="content" className="flex items-center gap-2 py-3">
+                <TabsTrigger
+                  value="content"
+                  className="flex items-center gap-2 py-3"
+                >
                   <Video className="w-4 h-4" />
                   <span className="hidden sm:inline">Content</span>
                 </TabsTrigger>
-                <TabsTrigger value="analytics" className="flex items-center gap-2 py-3">
+                <TabsTrigger
+                  value="analytics"
+                  className="flex items-center gap-2 py-3"
+                >
                   <TrendingUp className="w-4 h-4" />
                   <span className="hidden sm:inline">Analytics</span>
                 </TabsTrigger>
diff --git a/frontend/src/app/upload/page.tsx b/frontend/src/app/upload/page.tsx
index 5d0ca18..f4edaf5 100644
--- a/frontend/src/app/upload/page.tsx
+++ b/frontend/src/app/upload/page.tsx
@@ -1,14 +1,21 @@
-'use client';
+"use client";
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { MainLayout } from '@/components/layout/MainLayout';
-import { Button } from '@/components/ui/button';
-import { useToast } from '@/hooks/use-toast';
-import { Upload, Video, Image as ImageIcon, X, CheckCircle, Sparkles } from 'lucide-react';
-import Image from 'next/image';
-import apiClient from '@/lib/api';
-import { ThumbnailGeneratorModal } from '@/components/video/ThumbnailGeneratorModal';
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { MainLayout } from "@/components/layout/MainLayout";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Upload,
+  Video,
+  Image as ImageIcon,
+  X,
+  CheckCircle,
+  Sparkles,
+} from "lucide-react";
+import Image from "next/image";
+import apiClient from "@/lib/api";
+import { ThumbnailGeneratorModal } from "@/components/video/ThumbnailGeneratorModal";
 
 export default function UploadPage() {
   const router = useRouter();
@@ -16,67 +23,73 @@ export default function UploadPage() {
   const [isUploading, setIsUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
-  
+
   const [formData, setFormData] = useState<{
     title: string;
     description: string;
     videoFile: File | null;
     thumbnail: File | null;
   }>({
-    title: '',
-    description: '',
+    title: "",
+    description: "",
     videoFile: null,
     thumbnail: null,
   });
-  
+
   const [previews, setPreviews] = useState<{
     video: string;
     thumbnail: string;
   }>({
-    video: '',
-    thumbnail: '',
+    video: "",
+    thumbnail: "",
   });
 
   const handleVideoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
-      setFormData(prev => ({ ...prev, videoFile: file }));
-      
+      setFormData((prev) => ({ ...prev, videoFile: file }));
+
       const videoUrl = URL.createObjectURL(file);
-      setPreviews(prev => ({ ...prev, video: videoUrl }));
+      setPreviews((prev) => ({ ...prev, video: videoUrl }));
     }
   };
 
   const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files[0]) {
       const file = e.target.files[0];
-      setFormData(prev => ({ ...prev, thumbnail: file }));
-      setPreviews(prev => ({ ...prev, thumbnail: URL.createObjectURL(file) }));
+      setFormData((prev) => ({ ...prev, thumbnail: file }));
+      setPreviews((prev) => ({
+        ...prev,
+        thumbnail: URL.createObjectURL(file),
+      }));
     }
   };
 
   const handleThumbnailGenerated = (thumbnailFile: File) => {
-    setFormData(prev => ({ ...prev, thumbnail: thumbnailFile }));
-    setPreviews(prev => ({ ...prev, thumbnail: URL.createObjectURL(thumbnailFile) }));
+    setFormData((prev) => ({ ...prev, thumbnail: thumbnailFile }));
+    setPreviews((prev) => ({
+      ...prev,
+      thumbnail: URL.createObjectURL(thumbnailFile),
+    }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!formData.title.trim() || !formData.description.trim()) {
       toast({
-        title: 'Missing information',
-        description: 'Please provide title and description',
-        variant: 'destructive',
+        title: "Missing information",
+        description: "Please provide title and description",
+        variant: "destructive",
       });
       return;
     }
 
     if (!formData.videoFile || !formData.thumbnail) {
       toast({
-        title: 'Missing files',
-        description: 'Please select both video and thumbnail',
-        variant: 'destructive',
+        title: "Missing files",
+        description: "Please select both video and thumbnail",
+        variant: "destructive",
       });
       return;
     }
@@ -86,59 +99,62 @@ export default function UploadPage() {
 
     try {
       const formDataToSend = new FormData();
-      formDataToSend.append('title', formData.title);
-      formDataToSend.append('description', formData.description);
-      formDataToSend.append('videoFile', formData.videoFile);
-      formDataToSend.append('thumbnail', formData.thumbnail);
+      formDataToSend.append("title", formData.title);
+      formDataToSend.append("description", formData.description);
+      formDataToSend.append("videoFile", formData.videoFile);
+      formDataToSend.append("thumbnail", formData.thumbnail);
 
-      console.log('Uploading to:', apiClient.defaults.baseURL + '/videos');
-      console.log('Form data:', {
+      console.log("Uploading to:", apiClient.defaults.baseURL + "/videos");
+      console.log("Form data:", {
         title: formData.title,
         description: formData.description,
         videoFileName: formData.videoFile.name,
         thumbnailName: formData.thumbnail.name,
       });
 
-      const response = await apiClient.post('/videos', formDataToSend, {
+      const response = await apiClient.post("/videos", formDataToSend, {
         headers: {
-          'Content-Type': 'multipart/form-data',
+          "Content-Type": "multipart/form-data",
         },
         onUploadProgress: (progressEvent) => {
           const percentCompleted = Math.round(
-            (progressEvent.loaded * 100) / (progressEvent.total || 1)
+            (progressEvent.loaded * 100) / (progressEvent.total || 1),
           );
           setUploadProgress(percentCompleted);
         },
       });
 
-      console.log('Upload successful:', response.data);
+      console.log("Upload successful:", response.data);
 
       toast({
-        title: 'Upload Complete! 🎉',
-        description: 'Your video is now live and visible on your channel.',
+        title: "Upload Complete! 🎉",
+        description: "Your video is now live and visible on your channel.",
       });
 
       // Clear form
       setFormData({
-        title: '',
-        description: '',
+        title: "",
+        description: "",
         videoFile: null,
         thumbnail: null,
       });
-      setPreviews({ video: '', thumbnail: '' });
+      setPreviews({ video: "", thumbnail: "" });
 
       // Redirect to my-channel with refresh
       setTimeout(() => {
-        router.push('/my-channel');
+        router.push("/my-channel");
         router.refresh();
       }, 1500);
     } catch (error: any) {
-      console.error('Upload error:', error);
-      const errorMessage = error.response?.data?.message || error.message || 'Something went wrong';
+      console.error("Upload error:", error);
+      const errorMessage =
+        error.response?.data?.message ||
+        error.message ||
+        "Something went wrong";
       toast({
-        title: 'Upload Failed',
+        title: "Upload Failed",
         description: errorMessage,
-        variant: 'destructive',
+        variant: "destructive",
       });
       setUploadProgress(0);
     } finally {
@@ -147,13 +163,13 @@ export default function UploadPage() {
   };
 
   const clearVideo = () => {
-    setFormData(prev => ({ ...prev, videoFile: null }));
-    setPreviews(prev => ({ ...prev, video: '' }));
+    setFormData((prev) => ({ ...prev, videoFile: null }));
+    setPreviews((prev) => ({ ...prev, video: "" }));
   };
 
   const clearThumbnail = () => {
-    setFormData(prev => ({ ...prev, thumbnail: null }));
-    setPreviews(prev => ({ ...prev, thumbnail: '' }));
+    setFormData((prev) => ({ ...prev, thumbnail: null }));
+    setPreviews((prev) => ({ ...prev, thumbnail: "" }));
   };
 
   return (
@@ -172,13 +188,17 @@ export default function UploadPage() {
             <label className="block text-xl font-semibold mb-4">
               Video File <span className="text-destructive">*</span>
             </label>
-            
+
             {!formData.videoFile ? (
               <label className="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer hover:border-primary transition-colors bg-muted/20">
                 <div className="flex flex-col items-center justify-center pt-5 pb-6">
                   <Video className="w-16 h-16 mb-4 text-muted-foreground" />
-                  <p className="mb-2 text-lg font-semibold">Click to upload video</p>
-                  <p className="text-base text-muted-foreground">MP4, WebM, or OGG (MAX. 10GB)</p>
+                  <p className="mb-2 text-lg font-semibold">
+                    Click to upload video
+                  </p>
+                  <p className="text-base text-muted-foreground">
+                    MP4, WebM, or OGG (MAX. 10GB)
+                  </p>
                 </div>
                 <input
                   type="file"
@@ -203,7 +223,9 @@ export default function UploadPage() {
                 >
                   <X className="w-5 h-5" />
                 </button>
-                <p className="mt-3 text-base text-muted-foreground">{formData.videoFile.name}</p>
+                <p className="mt-3 text-base text-muted-foreground">
+                  {formData.videoFile.name}
+                </p>
               </div>
             )}
           </div>
@@ -211,26 +233,30 @@ export default function UploadPage() {
           {/* Thumbnail Upload */}
           <div className="bg-card border rounded-xl p-8">
             <div className="flex justify-between items-center mb-4">
-                <label className="block text-xl font-semibold">
+              <label className="block text-xl font-semibold">
                 Thumbnail <span className="text-destructive">*</span>
-                </label>
-                <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => setIsModalOpen(true)}
-                    disabled={!formData.videoFile || isUploading}
-                >
-                    <Sparkles className="w-4 h-4 mr-2" />
-                    Generate from Video
-                </Button>
+              </label>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setIsModalOpen(true)}
+                disabled={!formData.videoFile || isUploading}
+              >
+                <Sparkles className="w-4 h-4 mr-2" />
+                Generate from Video
+              </Button>
             </div>
-            
+
             {!formData.thumbnail ? (
               <label className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-lg cursor-pointer hover:border-primary transition-colors bg-muted/20">
                 <div className="flex flex-col items-center justify-center pt-5 pb-6">
                   <ImageIcon className="w-12 h-12 mb-4 text-muted-foreground" />
-                  <p className="mb-2 text-base font-semibold">Click to upload thumbnail</p>
-                  <p className="text-sm text-muted-foreground">PNG, JPG, or WebP</p>
+                  <p className="mb-2 text-base font-semibold">
+                    Click to upload thumbnail
+                  </p>
+                  <p className="text-sm text-muted-foreground">
+                    PNG, JPG, or WebP
+                  </p>
                 </div>
                 <input
                   type="file"
@@ -271,7 +297,9 @@ export default function UploadPage() {
                 type="text"
                 required
                 value={formData.title}
-                onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+                onChange={(e) =>
+                  setFormData((prev) => ({ ...prev, title: e.target.value }))
+                }
                 className="w-full py-4 px-4 text-base bg-background border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                 placeholder="Enter video title"
                 disabled={isUploading}
@@ -285,7 +313,12 @@ export default function UploadPage() {
               <textarea
                 required
                 value={formData.description}
-                onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
+                onChange={(e) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    description: e.target.value,
+                  }))
+                }
                 className="w-full py-4 px-4 text-base bg-background border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary min-h-[150px] resize-none"
                 placeholder="Tell viewers about your video"
                 disabled={isUploading}
@@ -298,7 +331,9 @@ export default function UploadPage() {
             <div className="bg-card border rounded-xl p-8">
               <div className="flex items-center justify-between mb-3">
                 <span className="text-lg font-semibold">Uploading...</span>
-                <span className="text-base text-muted-foreground">{uploadProgress}%</span>
+                <span className="text-base text-muted-foreground">
+                  {uploadProgress}%
+                </span>
               </div>
               <div className="w-full bg-muted rounded-full h-3 overflow-hidden">
                 <div
@@ -309,7 +344,9 @@ export default function UploadPage() {
               {uploadProgress === 100 && (
                 <div className="flex items-center gap-2 mt-4 text-green-500">
                   <CheckCircle className="w-5 h-5" />
-                  <span className="text-base font-semibold">Upload complete!</span>
+                  <span className="text-base font-semibold">
+                    Upload complete!
+                  </span>
                 </div>
               )}
             </div>
@@ -328,10 +365,14 @@ export default function UploadPage() {
             </Button>
             <Button
               type="submit"
-              disabled={isUploading || !formData.videoFile || !formData.thumbnail}
+              disabled={
+                isUploading || !formData.videoFile || !formData.thumbnail
+              }
               className="flex-1 py-6 text-lg font-semibold bg-gradient-to-r from-orange-500 via-red-500 to-yellow-500 hover:opacity-90"
             >
-              {isUploading ? 'Uploading...' : (
+              {isUploading ? (
+                "Uploading..."
+              ) : (
                 <>
                   <Upload className="w-5 h-5 mr-2" />
                   Upload Video
@@ -342,12 +383,12 @@ export default function UploadPage() {
         </form>
 
         {formData.videoFile && (
-            <ThumbnailGeneratorModal
-                videoFile={formData.videoFile}
-                open={isModalOpen}
-                onOpenChange={setIsModalOpen}
-                onThumbnailGenerated={handleThumbnailGenerated}
-            />
+          <ThumbnailGeneratorModal
+            videoFile={formData.videoFile}
+            open={isModalOpen}
+            onOpenChange={setIsModalOpen}
+            onThumbnailGenerated={handleThumbnailGenerated}
+          />
         )}
       </div>
     </MainLayout>
diff --git a/frontend/src/app/video/[id]/page.tsx b/frontend/src/app/video/[id]/page.tsx
index 9a77137..dc69412 100644
--- a/frontend/src/app/video/[id]/page.tsx
+++ b/frontend/src/app/video/[id]/page.tsx
@@ -1,17 +1,17 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { MainLayout } from '@/components/layout/MainLayout';
-import { Button } from '@/components/ui/button';
-import { useToast } from '@/hooks/use-toast';
-import { useAuthStore } from '@/store/authStore';
-import apiClient from '@/lib/api';
-import { formatViewCount, formatTimeAgo } from '@/lib/utils';
-import Image from 'next/image';
-import { VideoJsPlayer } from '@/components/video/VideoJsPlayer';
-import { ThumbsUp, ThumbsDown, Share2, Bell, BellOff, Eye } from 'lucide-react';
-import { log } from 'node:console';
+"use client";
+
+import { useState, useEffect } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { MainLayout } from "@/components/layout/MainLayout";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import { useAuthStore } from "@/store/authStore";
+import apiClient from "@/lib/api";
+import { formatViewCount, formatTimeAgo } from "@/lib/utils";
+import Image from "next/image";
+import { VideoJsPlayer } from "@/components/video/VideoJsPlayer";
+import { ThumbsUp, ThumbsDown, Share2, Bell, BellOff, Eye } from "lucide-react";
+import { log } from "node:console";
 
 interface Video {
   _id: string;
@@ -22,7 +22,7 @@ interface Video {
   duration: number;
   views: number;
   isPublished: boolean;
-  processingStatus?: 'pending' | 'processing' | 'completed' | 'failed';
+  processingStatus?: "pending" | "processing" | "completed" | "failed";
   hlsMasterPlaylist?: string; // Added for HLS support
   waveformUrl?: string; // Added for audio waveform display
   spriteSheetUrl?: string; // Added for seeking previews
@@ -56,14 +56,14 @@ export default function VideoPlayerPage() {
   const router = useRouter();
   const { toast } = useToast();
   const { user } = useAuthStore();
-  
+
   const [video, setVideo] = useState<Video | null>(null);
   const [comments, setComments] = useState<Comment[]>([]);
   const [loading, setLoading] = useState(true);
   const [isSubscribed, setIsSubscribed] = useState(false);
   const [isLiked, setIsLiked] = useState(false);
   const [likesCount, setLikesCount] = useState(0);
-  const [newComment, setNewComment] = useState('');
+  const [newComment, setNewComment] = useState("");
   const [postingComment, setPostingComment] = useState(false);
 
   useEffect(() => {
@@ -82,27 +82,24 @@ export default function VideoPlayerPage() {
     }
   }, [video]);
 
-  const API_URL = process.env.NEXT_PUBLIC_API_URL || '';
+  const API_URL = process.env.NEXT_PUBLIC_API_URL || "";
 
   const backendOrigin = (() => {
-    const base = (apiClient.defaults.baseURL || '').toString();
-    if (base) return base.replace(/\/api\/v1\/?$/, '');
-    const envBase = (process.env.NEXT_PUBLIC_BACKEND_URL || '').toString();
-    if (envBase) return envBase.replace(/\/api\/v1\/?$/, '');
-    if (API_URL) return API_URL.replace(/\/api\/v1\/?$/, '');
-    return 'http://localhost:8000';
+    const base = (apiClient.defaults.baseURL || "").toString();
+    if (base) return base.replace(/\/api\/v1\/?$/, "");
+    const envBase = (process.env.NEXT_PUBLIC_BACKEND_URL || "").toString();
+    if (envBase) return envBase.replace(/\/api\/v1\/?$/, "");
+    if (API_URL) return API_URL.replace(/\/api\/v1\/?$/, "");
+    return "http://localhost:8000";
   })();
 
   const toUrl = (maybePath?: string) => {
-    if (!maybePath) return '';
+    if (!maybePath) return "";
     // If backend already returned an absolute URL, use it.
     if (/^https?:\/\//i.test(maybePath)) return maybePath;
-    const normalized = maybePath.replace(/\\/g, '/').replace(/^\//, '');
+    const normalized = maybePath.replace(/\\/g, "/").replace(/^\//, "");
     return `${backendOrigin}/${normalized}`;
   };
-  
-
-  
 
   const fetchVideo = async () => {
     try {
@@ -110,10 +107,10 @@ export default function VideoPlayerPage() {
       setVideo(response.data.data);
     } catch (error) {
       toast({
-        title: 'Error loading video',
-        variant: 'destructive',
+        title: "Error loading video",
+        variant: "destructive",
       });
-      router.push('/');
+      router.push("/");
     } finally {
       setLoading(false);
     }
@@ -124,7 +121,7 @@ export default function VideoPlayerPage() {
       const response = await apiClient.get(`/comments/${params.id}`);
       setComments(response.data.data || []);
     } catch (error) {
-      console.error('Error fetching comments:', error);
+      console.error("Error fetching comments:", error);
     }
   };
 
@@ -133,9 +130,11 @@ export default function VideoPlayerPage() {
     try {
       const response = await apiClient.get(`/subscriptions/u/${user?._id}`);
       const subscriptions = response.data.data || [];
-      setIsSubscribed(subscriptions.some((sub: any) => sub.channel._id === video.owner._id));
+      setIsSubscribed(
+        subscriptions.some((sub: any) => sub.channel._id === video.owner._id),
+      );
     } catch (error) {
-      console.error('Error checking subscription:', error);
+      console.error("Error checking subscription:", error);
     }
   };
 
@@ -144,15 +143,17 @@ export default function VideoPlayerPage() {
       // Get all liked videos for the user
       const response = await apiClient.get(`${API_URL}/likes/videos`);
       const likedVideos = response.data.data || [];
-      
-      const isVideoLiked = likedVideos?.videos.some((v: any) => v._id === params.id);
+
+      const isVideoLiked = likedVideos?.videos.some(
+        (v: any) => v._id === params.id,
+      );
       setIsLiked(isVideoLiked);
       // You can get likes count from video data
       if (video) {
         setLikesCount(video.likesCount || 0);
       }
     } catch (error) {
-      console.error('Error checking like status:', error);
+      console.error("Error checking like status:", error);
       // Non-critical, continue without like status
     }
   };
@@ -161,7 +162,7 @@ export default function VideoPlayerPage() {
     try {
       await apiClient.post(`/videos/watchhis/${params.id}`);
     } catch (error) {
-      console.error('Error adding to watch history:', error);
+      console.error("Error adding to watch history:", error);
     }
   };
 
@@ -171,12 +172,12 @@ export default function VideoPlayerPage() {
       await apiClient.post(`/subscriptions/c/${video.owner._id}`);
       setIsSubscribed(!isSubscribed);
       toast({
-        title: isSubscribed ? 'Unsubscribed' : 'Subscribed successfully!',
+        title: isSubscribed ? "Unsubscribed" : "Subscribed successfully!",
       });
     } catch (error) {
       toast({
-        title: 'Error',
-        variant: 'destructive',
+        title: "Error",
+        variant: "destructive",
       });
     }
   };
@@ -185,30 +186,30 @@ export default function VideoPlayerPage() {
     try {
       await apiClient.post(`/likes/video/${params.id}/toggle`);
       setIsLiked(!isLiked);
-      setLikesCount(prev => isLiked ? prev - 1 : prev + 1);
+      setLikesCount((prev) => (isLiked ? prev - 1 : prev + 1));
     } catch (error) {
       toast({
-        title: 'Error liking video',
-        variant: 'destructive',
+        title: "Error liking video",
+        variant: "destructive",
       });
     }
   };
 
   const handlePostComment = async () => {
     if (!newComment.trim()) return;
-    
+
     setPostingComment(true);
     try {
       const response = await apiClient.post(`/comments/${params.id}`, {
         content: newComment,
       });
       setComments([response.data.data, ...comments]);
-      setNewComment('');
-      toast({ title: 'Comment posted!' });
+      setNewComment("");
+      toast({ title: "Comment posted!" });
     } catch (error) {
       toast({
-        title: 'Error posting comment',
-        variant: 'destructive',
+        title: "Error posting comment",
+        variant: "destructive",
       });
     } finally {
       setPostingComment(false);
@@ -218,7 +219,7 @@ export default function VideoPlayerPage() {
   const handleShare = () => {
     const url = window.location.href;
     navigator.clipboard.writeText(url);
-    toast({ title: 'Link copied to clipboard!' });
+    toast({ title: "Link copied to clipboard!" });
   };
 
   if (loading) {
@@ -243,10 +244,12 @@ export default function VideoPlayerPage() {
           <div className="lg:col-span-2 space-y-6">
             {/* Video Player */}
             <div className="bg-black rounded-xl overflow-hidden aspect-video">
-              {(video.videoFile || video.hlsMasterPlaylist) ? (
+              {video.videoFile || video.hlsMasterPlaylist ? (
                 <VideoJsPlayer
                   src={toUrl(video.hlsMasterPlaylist || video.videoFile)}
-                  fallbackSrc={video.hlsMasterPlaylist ? toUrl(video.videoFile) : undefined}
+                  fallbackSrc={
+                    video.hlsMasterPlaylist ? toUrl(video.videoFile) : undefined
+                  }
                   poster={video.thumbnail ? toUrl(video.thumbnail) : undefined}
                   autoPlay
                   spriteSheetVttUrl={video.spriteSheetVttUrl}
@@ -256,7 +259,9 @@ export default function VideoPlayerPage() {
               ) : (
                 <div className="flex items-center justify-center h-full bg-muted">
                   <p className="text-muted-foreground">
-                    {video.processingStatus === 'failed' ? 'Video processing failed.' : 'Video is processing...'}
+                    {video.processingStatus === "failed"
+                      ? "Video processing failed."
+                      : "Video is processing..."}
                   </p>
                 </div>
               )}
@@ -265,7 +270,7 @@ export default function VideoPlayerPage() {
             {/* Video Info */}
             <div className="space-y-4">
               <h1 className="text-3xl font-bold">{video.title}</h1>
-              
+
               {video.waveformUrl && (
                 <div className="w-full bg-muted rounded-lg overflow-hidden">
                   <Image
@@ -292,13 +297,13 @@ export default function VideoPlayerPage() {
                 <div className="flex items-center gap-3">
                   <Button
                     onClick={handleLike}
-                    variant={isLiked ? 'default' : 'outline'}
+                    variant={isLiked ? "default" : "outline"}
                     className="flex items-center gap-2 text-base py-5"
                   >
                     <ThumbsUp className="w-5 h-5" />
                     {likesCount}
                   </Button>
-                  
+
                   <Button
                     onClick={handleShare}
                     variant="outline"
@@ -316,15 +321,19 @@ export default function VideoPlayerPage() {
               <div className="flex items-start justify-between gap-4">
                 <div className="flex items-center gap-4">
                   <Image
-                    src={video.owner?.avatar || '/placeholder/user-avatar.png'}
-                    alt={video.owner?.username || 'User'}
+                    src={video.owner?.avatar || "/placeholder/user-avatar.png"}
+                    alt={video.owner?.username || "User"}
                     width={56}
                     height={56}
                     className="w-14 h-14 rounded-full object-cover"
                   />
                   <div>
-                    <h3 className="text-xl font-semibold">{video.owner.fullName}</h3>
-                    <p className="text-base text-muted-foreground">@{video.owner.username}</p>
+                    <h3 className="text-xl font-semibold">
+                      {video.owner.fullName}
+                    </h3>
+                    <p className="text-base text-muted-foreground">
+                      @{video.owner.username}
+                    </p>
                   </div>
                 </div>
 
@@ -333,18 +342,24 @@ export default function VideoPlayerPage() {
                     onClick={handleSubscribe}
                     className={`flex items-center gap-2 text-base py-5 px-6 ${
                       isSubscribed
-                        ? 'bg-muted text-foreground hover:bg-muted/80'
-                        : 'bg-gradient-to-r from-orange-500 via-red-500 to-yellow-500'
+                        ? "bg-muted text-foreground hover:bg-muted/80"
+                        : "bg-gradient-to-r from-orange-500 via-red-500 to-yellow-500"
                     }`}
                   >
-                    {isSubscribed ? <BellOff className="w-5 h-5" /> : <Bell className="w-5 h-5" />}
-                    {isSubscribed ? 'Subscribed' : 'Subscribe'}
+                    {isSubscribed ? (
+                      <BellOff className="w-5 h-5" />
+                    ) : (
+                      <Bell className="w-5 h-5" />
+                    )}
+                    {isSubscribed ? "Subscribed" : "Subscribe"}
                   </Button>
                 )}
               </div>
 
               <div className="mt-6 pt-6 border-t">
-                <p className="text-base leading-relaxed whitespace-pre-wrap">{video.description}</p>
+                <p className="text-base leading-relaxed whitespace-pre-wrap">
+                  {video.description}
+                </p>
               </div>
             </div>
 
@@ -355,8 +370,8 @@ export default function VideoPlayerPage() {
               <div className="flex items-start gap-4">
                 {user?.avatar ? (
                   <Image
-                    src={user.avatar || '/placeholder/user-avatar.png'}
-                    alt={user.username || 'User'}
+                    src={user.avatar || "/placeholder/user-avatar.png"}
+                    alt={user.username || "User"}
                     width={48}
                     height={48}
                     className="w-12 h-12 rounded-full object-cover"
@@ -374,7 +389,7 @@ export default function VideoPlayerPage() {
                   />
                   <div className="flex justify-end gap-3 mt-3">
                     <Button
-                      onClick={() => setNewComment('')}
+                      onClick={() => setNewComment("")}
                       variant="outline"
                       disabled={postingComment}
                       className="text-base py-5"
@@ -386,7 +401,7 @@ export default function VideoPlayerPage() {
                       disabled={!newComment.trim() || postingComment}
                       className="text-base py-5 bg-gradient-to-r from-orange-500 via-red-500 to-yellow-500"
                     >
-                      {postingComment ? 'Posting...' : 'Comment'}
+                      {postingComment ? "Posting..." : "Comment"}
                     </Button>
                   </div>
                 </div>
@@ -396,20 +411,26 @@ export default function VideoPlayerPage() {
                 {comments.map((comment) => (
                   <div key={comment._id} className="flex gap-4">
                     <Image
-                      src={comment.owner?.avatar || '/placeholder/user-avatar.png'}
-                      alt={comment.owner?.username || 'User'}
+                      src={
+                        comment.owner?.avatar || "/placeholder/user-avatar.png"
+                      }
+                      alt={comment.owner?.username || "User"}
                       width={48}
                       height={48}
                       className="w-12 h-12 rounded-full object-cover"
                     />
                     <div className="flex-1">
                       <div className="flex items-center gap-2">
-                        <span className="font-semibold text-base">{comment.owner?.fullName || 'Unknown User'}</span>
+                        <span className="font-semibold text-base">
+                          {comment.owner?.fullName || "Unknown User"}
+                        </span>
                         <span className="text-sm text-muted-foreground">
                           {formatTimeAgo(comment.createdAt)}
                         </span>
                       </div>
-                      <p className="mt-2 text-base leading-relaxed">{comment.content}</p>
+                      <p className="mt-2 text-base leading-relaxed">
+                        {comment.content}
+                      </p>
                     </div>
                   </div>
                 ))}
@@ -421,7 +442,9 @@ export default function VideoPlayerPage() {
           <div className="space-y-4">
             <h2 className="text-xl font-bold">Related Videos</h2>
             {/* Placeholder for related videos */}
-            <p className="text-base text-muted-foreground">Related videos coming soon...</p>
+            <p className="text-base text-muted-foreground">
+              Related videos coming soon...
+            </p>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/videos/page.tsx b/frontend/src/app/videos/page.tsx
index 20fcab4..f71b522 100644
--- a/frontend/src/app/videos/page.tsx
+++ b/frontend/src/app/videos/page.tsx
@@ -47,28 +47,37 @@ export default function VideosPage() {
         {/* Tabs */}
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
           <TabsList className="grid w-full max-w-2xl mx-auto grid-cols-3 mb-8 h-14">
-            <TabsTrigger value="subscribed" className="flex items-center gap-2 text-base py-3">
+            <TabsTrigger
+              value="subscribed"
+              className="flex items-center gap-2 text-base py-3"
+            >
               <Bell className="w-5 h-5" />
               Subscribed
             </TabsTrigger>
-            <TabsTrigger value="all" className="flex items-center gap-2 text-base py-3">
+            <TabsTrigger
+              value="all"
+              className="flex items-center gap-2 text-base py-3"
+            >
               <Grid className="w-5 h-5" />
               All Videos
             </TabsTrigger>
-            <TabsTrigger value="trending" className="flex items-center gap-2 text-base py-3">
+            <TabsTrigger
+              value="trending"
+              className="flex items-center gap-2 text-base py-3"
+            >
               <TrendingUp className="w-5 h-5" />
               Trending
             </TabsTrigger>
           </TabsList>
-          
+
           <TabsContent value="subscribed" className="space-y-6">
             <VideoGrid subscribedOnly={true} />
           </TabsContent>
-          
+
           <TabsContent value="all" className="space-y-6">
             <VideoGrid />
           </TabsContent>
-          
+
           <TabsContent value="trending" className="space-y-6">
             <VideoGrid sortBy="views" />
           </TabsContent>
diff --git a/frontend/src/components/channel/CreateChannelModal.tsx b/frontend/src/components/channel/CreateChannelModal.tsx
index 105d652..5f10173 100644
--- a/frontend/src/components/channel/CreateChannelModal.tsx
+++ b/frontend/src/components/channel/CreateChannelModal.tsx
@@ -1,7 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -17,13 +24,16 @@ interface CreateChannelModalProps {
   onOpenChange: (open: boolean) => void;
 }
 
-export function CreateChannelModal({ open, onOpenChange }: CreateChannelModalProps) {
+export function CreateChannelModal({
+  open,
+  onOpenChange,
+}: CreateChannelModalProps) {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [avatar, setAvatar] = useState<File | null>(null);
   const [avatarPreview, setAvatarPreview] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
-  
+
   const { addChannel } = useChannelStore();
 
   const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -40,12 +50,12 @@ export function CreateChannelModal({ open, onOpenChange }: CreateChannelModalPro
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!name.trim()) {
       toast.error("Channel name is required");
       return;
     }
-    
+
     if (!description.trim()) {
       toast.error("Channel description is required");
       return;
@@ -63,7 +73,7 @@ export function CreateChannelModal({ open, onOpenChange }: CreateChannelModalPro
       if (response.success) {
         addChannel(response.data);
         toast.success("Channel created successfully!");
-        
+
         // Reset form
         setName("");
         setDescription("");
@@ -88,17 +98,21 @@ export function CreateChannelModal({ open, onOpenChange }: CreateChannelModalPro
             Start sharing your content by creating your own channel
           </DialogDescription>
         </DialogHeader>
-        
+
         <form onSubmit={handleSubmit} className="space-y-6">
           {/* Avatar Upload */}
           <div className="flex flex-col items-center space-y-4">
             <Avatar className="w-24 h-24">
               <AvatarImage src={avatarPreview} alt="Channel avatar" />
               <AvatarFallback className="text-2xl">
-                {name ? name[0].toUpperCase() : <ImagePlus className="w-8 h-8" />}
+                {name ? (
+                  name[0].toUpperCase()
+                ) : (
+                  <ImagePlus className="w-8 h-8" />
+                )}
               </AvatarFallback>
             </Avatar>
-            
+
             <div className="flex items-center justify-center w-full">
               <Label
                 htmlFor="avatar-upload"
diff --git a/frontend/src/components/channel/MyChannel.tsx b/frontend/src/components/channel/MyChannel.tsx
index 1d2cdd2..f0e4664 100644
--- a/frontend/src/components/channel/MyChannel.tsx
+++ b/frontend/src/components/channel/MyChannel.tsx
@@ -2,7 +2,13 @@
 
 import { useEffect, useState, useCallback } from "react";
 import Image from "next/image";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
@@ -37,7 +43,11 @@ export function MyChannel() {
   }, [fetchUserChannels]);
 
   const handleDeleteChannel = async (channelId: string) => {
-    if (!confirm("Are you sure you want to delete this channel? This action cannot be undone.")) {
+    if (
+      !confirm(
+        "Are you sure you want to delete this channel? This action cannot be undone.",
+      )
+    ) {
       return;
     }
 
@@ -72,7 +82,8 @@ export function MyChannel() {
             <div className="text-center space-y-2">
               <h3 className="text-2xl font-semibold">Create Your Channel</h3>
               <p className="text-muted-foreground max-w-md">
-                Start your journey as a content creator. Create your channel and share your videos with the world.
+                Start your journey as a content creator. Create your channel and
+                share your videos with the world.
               </p>
             </div>
             <Button
@@ -85,7 +96,7 @@ export function MyChannel() {
             </Button>
           </CardContent>
         </Card>
-        
+
         <CreateChannelModal
           open={isCreateModalOpen}
           onOpenChange={setIsCreateModalOpen}
@@ -100,7 +111,9 @@ export function MyChannel() {
         <div className="flex items-center justify-between">
           <div>
             <h2 className="text-3xl font-bold tracking-tight">My Channels</h2>
-            <p className="text-muted-foreground">Manage your content channels</p>
+            <p className="text-muted-foreground">
+              Manage your content channels
+            </p>
           </div>
           <Button onClick={() => setIsCreateModalOpen(true)}>
             <Plus className="w-4 h-4 mr-2" />
@@ -110,7 +123,10 @@ export function MyChannel() {
 
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
           {channels.map((channel) => (
-            <Card key={channel._id} className="overflow-hidden hover:shadow-lg transition-shadow">
+            <Card
+              key={channel._id}
+              className="overflow-hidden hover:shadow-lg transition-shadow"
+            >
               {/* Banner */}
               {channel.banner && (
                 <div className="h-32 bg-gradient-to-r from-primary/20 to-primary/10 relative">
@@ -123,7 +139,7 @@ export function MyChannel() {
                   />
                 </div>
               )}
-              
+
               <CardHeader className="pb-4">
                 <div className="flex items-start gap-4">
                   <Avatar className="w-16 h-16 border-2 border-background -mt-8">
diff --git a/frontend/src/components/layout/MainLayout.tsx b/frontend/src/components/layout/MainLayout.tsx
index 141df4d..8c775a3 100644
--- a/frontend/src/components/layout/MainLayout.tsx
+++ b/frontend/src/components/layout/MainLayout.tsx
@@ -4,9 +4,19 @@ import { useState, useEffect } from "react";
 import { usePathname } from "next/navigation";
 import { useAuthStore } from "@/store/authStore";
 import { Button } from "@/components/ui/button";
-import { 
-  Home, Video, MessageSquare, Upload,
-  User, Menu, X, LogOut, Bell, Sparkles, History, ThumbsUp 
+import {
+  Home,
+  Video,
+  MessageSquare,
+  Upload,
+  User,
+  Menu,
+  X,
+  LogOut,
+  Bell,
+  Sparkles,
+  History,
+  ThumbsUp,
 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -31,7 +41,9 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
           // Check if user has any videos (which means they have a channel)
           const response = await apiClient.get(`/videos?page=1&limit=1`);
           const videos = response.data.data || [];
-          const userVideos = videos.filter((v: any) => v.owner?._id === user._id);
+          const userVideos = videos.filter(
+            (v: any) => v.owner?._id === user._id,
+          );
           setHasChannel(userVideos.length > 0);
         } catch (error) {
           console.error("Error checking user channel:", error);
@@ -63,13 +75,14 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
     { href: "/messages", icon: MessageSquare, label: "Messages" },
   ];
 
-  const channelNavItem = { href: "/my-channel", icon: User, label: "My Channel" };
+  const channelNavItem = {
+    href: "/my-channel",
+    icon: User,
+    label: "My Channel",
+  };
 
   // Only show "My Channel" if user has uploaded videos
-  const navItems = [
-    ...baseNavItems,
-    ...(hasChannel ? [channelNavItem] : []),
-  ];
+  const navItems = [...baseNavItems, ...(hasChannel ? [channelNavItem] : [])];
 
   const isActive = (href: string) => {
     if (href === "/") return pathname === "/";
@@ -79,10 +92,10 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className="flex min-h-screen bg-background">
       {/* Sidebar */}
-      <aside 
+      <aside
         className={cn(
           "fixed left-0 top-0 h-screen bg-card border-r transition-all duration-300 flex flex-col z-50",
-          sidebarOpen ? "w-64" : "w-20"
+          sidebarOpen ? "w-64" : "w-20",
         )}
       >
         {/* Header */}
@@ -104,7 +117,11 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
             onClick={() => setSidebarOpen(!sidebarOpen)}
             className="hover:bg-primary/10"
           >
-            {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            {sidebarOpen ? (
+              <X className="w-5 h-5" />
+            ) : (
+              <Menu className="w-5 h-5" />
+            )}
           </Button>
         </div>
 
@@ -113,16 +130,16 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
           {navItems.map((item) => {
             const Icon = item.icon;
             const active = isActive(item.href);
-            
+
             return (
               <Link key={item.href} href={item.href}>
-                <Button 
+                <Button
                   variant={active ? "default" : "ghost"}
                   className={cn(
                     "w-full justify-start text-base py-6 transition-all duration-200",
                     active && "bg-primary text-primary-foreground shadow-md",
                     !active && "hover:bg-accent hover:translate-x-1",
-                    !sidebarOpen && "justify-center px-0"
+                    !sidebarOpen && "justify-center px-0",
                   )}
                 >
                   <Icon className={cn("w-6 h-6", active && "animate-pulse")} />
@@ -143,10 +160,12 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
           {user && (
             <>
               {/* User Info */}
-              <div className={cn(
-                "p-4 transition-all duration-200 hover:bg-accent/50",
-                !sidebarOpen && "p-2"
-              )}>
+              <div
+                className={cn(
+                  "p-4 transition-all duration-200 hover:bg-accent/50",
+                  !sidebarOpen && "p-2",
+                )}
+              >
                 <Link href="/profile" className="flex items-center gap-3 group">
                   <Avatar className="w-10 h-10 ring-2 ring-primary/20 group-hover:ring-primary transition-all">
                     <AvatarImage src={user.avatar} alt={user.username} />
@@ -172,28 +191,33 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
               {/* Profile & Logout Buttons */}
               <div className="p-3 space-y-1">
                 <Link href="/profile">
-                  <Button 
+                  <Button
                     variant={pathname === "/profile" ? "default" : "ghost"}
                     className={cn(
                       "w-full justify-start text-sm py-5",
-                      pathname === "/profile" && "bg-primary text-primary-foreground",
-                      !sidebarOpen && "justify-center px-0"
+                      pathname === "/profile" &&
+                        "bg-primary text-primary-foreground",
+                      !sidebarOpen && "justify-center px-0",
                     )}
                   >
                     <User className="w-5 h-5" />
-                    {sidebarOpen && <span className="ml-3 font-medium">Profile</span>}
+                    {sidebarOpen && (
+                      <span className="ml-3 font-medium">Profile</span>
+                    )}
                   </Button>
                 </Link>
                 <Button
                   variant="ghost"
                   className={cn(
                     "w-full justify-start text-sm py-5 text-destructive hover:text-destructive hover:bg-destructive/10",
-                    !sidebarOpen && "justify-center px-0"
+                    !sidebarOpen && "justify-center px-0",
                   )}
                   onClick={handleLogout}
                 >
                   <LogOut className="w-5 h-5" />
-                  {sidebarOpen && <span className="ml-3 font-medium">Logout</span>}
+                  {sidebarOpen && (
+                    <span className="ml-3 font-medium">Logout</span>
+                  )}
                 </Button>
               </div>
             </>
@@ -202,10 +226,12 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
       </aside>
 
       {/* Main Content */}
-      <main className={cn(
-        "flex-1 transition-all duration-300",
-        sidebarOpen ? "ml-64" : "ml-20"
-      )}>
+      <main
+        className={cn(
+          "flex-1 transition-all duration-300",
+          sidebarOpen ? "ml-64" : "ml-20",
+        )}
+      >
         {children}
       </main>
 
diff --git a/frontend/src/components/profile/LikedVideos.tsx b/frontend/src/components/profile/LikedVideos.tsx
index 6914626..a8a2b1c 100644
--- a/frontend/src/components/profile/LikedVideos.tsx
+++ b/frontend/src/components/profile/LikedVideos.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import { useEffect, useState, useCallback } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import apiClient from "@/lib/api";
 import { VideoCard } from "@/components/video/VideoCard";
 import { Heart } from "lucide-react";
@@ -68,7 +74,8 @@ export function LikedVideos() {
           <div className="text-center space-y-2">
             <h3 className="text-2xl font-semibold">No Liked Videos Yet</h3>
             <p className="text-muted-foreground max-w-md">
-              Videos you like will appear here. Start exploring and liking videos!
+              Videos you like will appear here. Start exploring and liking
+              videos!
             </p>
           </div>
         </CardContent>
diff --git a/frontend/src/components/profile/ProfileInfo.tsx b/frontend/src/components/profile/ProfileInfo.tsx
index f84a0a9..6337558 100644
--- a/frontend/src/components/profile/ProfileInfo.tsx
+++ b/frontend/src/components/profile/ProfileInfo.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { useAuthStore } from "@/store/authStore";
 import { Calendar, Mail, User as UserIcon } from "lucide-react";
 
@@ -15,7 +21,9 @@ export function ProfileInfo() {
       <Card>
         <CardHeader>
           <CardTitle>Profile Information</CardTitle>
-          <CardDescription>Your account details and information</CardDescription>
+          <CardDescription>
+            Your account details and information
+          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -47,7 +55,9 @@ export function ProfileInfo() {
               <Calendar className="w-5 h-5 text-muted-foreground" />
               <div>
                 <p className="text-sm text-muted-foreground">Account Status</p>
-                <p className="font-medium">{user.isVerified ? "Verified ✓" : "Unverified"}</p>
+                <p className="font-medium">
+                  {user.isVerified ? "Verified ✓" : "Unverified"}
+                </p>
               </div>
             </div>
           </div>
diff --git a/frontend/src/components/profile/ProfileSettings.tsx b/frontend/src/components/profile/ProfileSettings.tsx
index 2cf66b2..c1a7a1e 100644
--- a/frontend/src/components/profile/ProfileSettings.tsx
+++ b/frontend/src/components/profile/ProfileSettings.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import { useState } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -40,8 +46,14 @@ export function ProfileSettings() {
 
     try {
       // Update profile info
-      if (formData.fullName !== user?.fullName || formData.email !== user?.email) {
-        const response = await apiClient.patch("/users/update-account", formData);
+      if (
+        formData.fullName !== user?.fullName ||
+        formData.email !== user?.email
+      ) {
+        const response = await apiClient.patch(
+          "/users/update-account",
+          formData,
+        );
         if (response.data.success) {
           setUser(response.data.data);
           toast.success("Profile updated successfully");
@@ -73,14 +85,19 @@ export function ProfileSettings() {
       <Card>
         <CardHeader>
           <CardTitle>Profile Settings</CardTitle>
-          <CardDescription>Update your account information and preferences</CardDescription>
+          <CardDescription>
+            Update your account information and preferences
+          </CardDescription>
         </CardHeader>
         <CardContent>
           <form onSubmit={handleSubmit} className="space-y-6">
             {/* Avatar Section */}
             <div className="flex flex-col items-center space-y-4">
               <Avatar className="w-32 h-32">
-                <AvatarImage src={avatarPreview || user?.avatar} alt="Profile" />
+                <AvatarImage
+                  src={avatarPreview || user?.avatar}
+                  alt="Profile"
+                />
                 <AvatarFallback className="text-3xl">
                   {user?.fullName?.[0]?.toUpperCase()}
                 </AvatarFallback>
@@ -110,7 +127,9 @@ export function ProfileSettings() {
                 <Input
                   id="fullName"
                   value={formData.fullName}
-                  onChange={(e) => setFormData({ ...formData, fullName: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, fullName: e.target.value })
+                  }
                   placeholder="Enter your full name"
                 />
               </div>
@@ -123,7 +142,9 @@ export function ProfileSettings() {
                   disabled
                   className="bg-muted"
                 />
-                <p className="text-xs text-muted-foreground">Username cannot be changed</p>
+                <p className="text-xs text-muted-foreground">
+                  Username cannot be changed
+                </p>
               </div>
 
               <div className="space-y-2">
@@ -132,7 +153,9 @@ export function ProfileSettings() {
                   id="email"
                   type="email"
                   value={formData.email}
-                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                  onChange={(e) =>
+                    setFormData({ ...formData, email: e.target.value })
+                  }
                   placeholder="Enter your email"
                 />
               </div>
@@ -159,7 +182,9 @@ export function ProfileSettings() {
       <Card>
         <CardHeader>
           <CardTitle>Account Security</CardTitle>
-          <CardDescription>Manage your password and security settings</CardDescription>
+          <CardDescription>
+            Manage your password and security settings
+          </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <Button variant="outline" className="w-full">
diff --git a/frontend/src/components/profile/SubscribedChannels.tsx b/frontend/src/components/profile/SubscribedChannels.tsx
index afd688d..3dc441f 100644
--- a/frontend/src/components/profile/SubscribedChannels.tsx
+++ b/frontend/src/components/profile/SubscribedChannels.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import { useEffect, useState, useCallback } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
@@ -32,19 +38,21 @@ export function SubscribedChannels() {
 
   const fetchSubscribedChannels = useCallback(async () => {
     if (!user?._id) return;
-    
+
     setLoading(true);
     try {
       // Correct endpoint: /subscriptions/u/:userId
       const response = await apiClient.get(`/subscriptions/u/${user._id}`);
       const subscribedData = response.data.data || [];
-      
+
       // Backend returns array of subscription objects with channel details
       // Extract the channel information from the response
-      const channelsList = Array.isArray(subscribedData) 
-        ? subscribedData.map((sub: any) => sub.channel || sub.channelDetails || sub)
+      const channelsList = Array.isArray(subscribedData)
+        ? subscribedData.map(
+            (sub: any) => sub.channel || sub.channelDetails || sub,
+          )
         : [];
-      
+
       setChannels(channelsList);
     } catch (error: any) {
       console.error("Error fetching subscribed channels:", error);
@@ -87,7 +95,8 @@ export function SubscribedChannels() {
           <div className="text-center space-y-2">
             <h3 className="text-2xl font-semibold">No Subscriptions Yet</h3>
             <p className="text-muted-foreground max-w-md">
-              Channels you subscribe to will appear here. Start exploring and subscribing!
+              Channels you subscribe to will appear here. Start exploring and
+              subscribing!
             </p>
           </div>
         </CardContent>
@@ -99,12 +108,17 @@ export function SubscribedChannels() {
     <div className="space-y-6">
       <div>
         <h2 className="text-2xl font-bold">Subscribed Channels</h2>
-        <p className="text-muted-foreground">{channels.length} channel{channels.length !== 1 ? 's' : ''}</p>
+        <p className="text-muted-foreground">
+          {channels.length} channel{channels.length !== 1 ? "s" : ""}
+        </p>
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
         {channels.map((channel) => (
-          <Card key={channel._id} className="overflow-hidden hover:shadow-lg transition-shadow">
+          <Card
+            key={channel._id}
+            className="overflow-hidden hover:shadow-lg transition-shadow"
+          >
             <CardContent className="p-6">
               <div className="flex items-start gap-4">
                 <Avatar className="w-16 h-16">
diff --git a/frontend/src/components/studio/StudioAnalytics.tsx b/frontend/src/components/studio/StudioAnalytics.tsx
index 91423af..5f271d5 100644
--- a/frontend/src/components/studio/StudioAnalytics.tsx
+++ b/frontend/src/components/studio/StudioAnalytics.tsx
@@ -1,11 +1,23 @@
 "use client";
 
 import { useEffect, useState, useCallback } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { 
-  TrendingUp, Eye, Clock, ThumbsUp, MessageSquare,
-  Users, Video, Calendar
+import {
+  TrendingUp,
+  Eye,
+  Clock,
+  ThumbsUp,
+  MessageSquare,
+  Users,
+  Video,
+  Calendar,
 } from "lucide-react";
 import apiClient from "@/lib/api";
 import { toast } from "sonner";
@@ -57,18 +69,31 @@ export function StudioAnalytics({ channel }: StudioAnalyticsProps) {
     try {
       // Fetch channel videos
       const videosResponse = await apiClient.get("/videos/search", {
-        params: { channelId: channel._id }
+        params: { channelId: channel._id },
       });
-      const videos = Array.isArray(videosResponse.data.data) ? videosResponse.data.data : [];
+      const videos = Array.isArray(videosResponse.data.data)
+        ? videosResponse.data.data
+        : [];
 
       // Calculate analytics
-      const totalViews = videos.reduce((acc: number, v: any) => acc + (v.views || 0), 0);
-      const totalLikes = videos.reduce((acc: number, v: any) => acc + (v.likesCount || 0), 0);
-      const totalComments = videos.reduce((acc: number, v: any) => acc + (v.commentsCount || 0), 0);
+      const totalViews = videos.reduce(
+        (acc: number, v: any) => acc + (v.views || 0),
+        0,
+      );
+      const totalLikes = videos.reduce(
+        (acc: number, v: any) => acc + (v.likesCount || 0),
+        0,
+      );
+      const totalComments = videos.reduce(
+        (acc: number, v: any) => acc + (v.commentsCount || 0),
+        0,
+      );
 
       // Mock views over time data (in real app, this would come from backend)
       const viewsOverTime = Array.from({ length: 7 }, (_, i) => ({
-        date: new Date(Date.now() - (6 - i) * 24 * 60 * 60 * 1000).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+        date: new Date(
+          Date.now() - (6 - i) * 24 * 60 * 60 * 1000,
+        ).toLocaleDateString("en-US", { month: "short", day: "numeric" }),
         views: Math.floor(Math.random() * 1000) + 100,
         engagement: Math.floor(Math.random() * 100) + 20,
       }));
@@ -78,7 +103,8 @@ export function StudioAnalytics({ channel }: StudioAnalyticsProps) {
         .sort((a: any, b: any) => (b.views || 0) - (a.views || 0))
         .slice(0, 5)
         .map((v: any) => ({
-          title: v.title.length > 30 ? v.title.substring(0, 30) + '...' : v.title,
+          title:
+            v.title.length > 30 ? v.title.substring(0, 30) + "..." : v.title,
           views: v.views || 0,
           likes: v.likesCount || 0,
         }));
@@ -121,7 +147,9 @@ export function StudioAnalytics({ channel }: StudioAnalyticsProps) {
       {/* Header */}
       <div>
         <h2 className="text-3xl font-bold">Analytics</h2>
-        <p className="text-muted-foreground">Track your channel&apos;s performance</p>
+        <p className="text-muted-foreground">
+          Track your channel&apos;s performance
+        </p>
       </div>
 
       {/* Overview Stats */}
@@ -135,7 +163,9 @@ export function StudioAnalytics({ channel }: StudioAnalyticsProps) {
             <div className="text-2xl font-bold">
               {analytics.overview.totalViews.toLocaleString()}
             </div>
-            <p className="text-xs text-muted-foreground">All-time channel views</p>
+            <p className="text-xs text-muted-foreground">
+              All-time channel views
+            </p>
           </CardContent>
         </Card>
 
@@ -145,7 +175,9 @@ export function StudioAnalytics({ channel }: StudioAnalyticsProps) {
             <Video className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{analytics.overview.totalVideos}</div>
+            <div className="text-2xl font-bold">
+              {analytics.overview.totalVideos}
+            </div>
             <p className="text-xs text-muted-foreground">Published content</p>
           </CardContent>
         </Card>
@@ -157,7 +189,9 @@ export function StudioAnalytics({ channel }: StudioAnalyticsProps) {
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
-              {(analytics.overview.totalLikes + analytics.overview.totalComments).toLocaleString()}
+              {(
+                analytics.overview.totalLikes + analytics.overview.totalComments
+              ).toLocaleString()}
             </div>
             <p className="text-xs text-muted-foreground">Likes & comments</p>
           </CardContent>
@@ -165,7 +199,9 @@ export function StudioAnalytics({ channel }: StudioAnalyticsProps) {
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Subscribers Gained</CardTitle>
+            <CardTitle className="text-sm font-medium">
+              Subscribers Gained
+            </CardTitle>
             <Users className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
@@ -178,12 +214,15 @@ export function StudioAnalytics({ channel }: StudioAnalyticsProps) {
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Avg. View Duration</CardTitle>
+            <CardTitle className="text-sm font-medium">
+              Avg. View Duration
+            </CardTitle>
             <Clock className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">
-              {Math.floor(analytics.overview.avgViewDuration / 60)}:{String(analytics.overview.avgViewDuration % 60).padStart(2, '0')}
+              {Math.floor(analytics.overview.avgViewDuration / 60)}:
+              {String(analytics.overview.avgViewDuration % 60).padStart(2, "0")}
             </div>
             <p className="text-xs text-muted-foreground">Minutes per view</p>
           </CardContent>
@@ -254,13 +293,20 @@ export function StudioAnalytics({ channel }: StudioAnalyticsProps) {
               {analytics.topVideos.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-12 text-center">
                   <Video className="w-12 h-12 text-muted-foreground mb-4" />
-                  <p className="text-muted-foreground">No video data available</p>
+                  <p className="text-muted-foreground">
+                    No video data available
+                  </p>
                 </div>
               ) : (
                 <ResponsiveContainer width="100%" height={300}>
                   <BarChart data={analytics.topVideos}>
                     <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="title" angle={-45} textAnchor="end" height={100} />
+                    <XAxis
+                      dataKey="title"
+                      angle={-45}
+                      textAnchor="end"
+                      height={100}
+                    />
                     <YAxis />
                     <Tooltip />
                     <Legend />
diff --git a/frontend/src/components/studio/StudioDashboard.tsx b/frontend/src/components/studio/StudioDashboard.tsx
index f0b02d6..e17f4e6 100644
--- a/frontend/src/components/studio/StudioDashboard.tsx
+++ b/frontend/src/components/studio/StudioDashboard.tsx
@@ -1,12 +1,25 @@
 "use client";
 
 import { useEffect, useState, useCallback } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { 
-  TrendingUp, Eye, Users, Video, Upload, 
-  BarChart3, Clock, ThumbsUp, MessageSquare 
+import {
+  TrendingUp,
+  Eye,
+  Users,
+  Video,
+  Upload,
+  BarChart3,
+  Clock,
+  ThumbsUp,
+  MessageSquare,
 } from "lucide-react";
 import Link from "next/link";
 import apiClient from "@/lib/api";
@@ -40,14 +53,25 @@ export function StudioDashboard({ channel }: StudioDashboardProps) {
     try {
       // Fetch channel videos
       const videosResponse = await apiClient.get("/videos/search", {
-        params: { channelId: channel._id }
+        params: { channelId: channel._id },
       });
-      const videos = Array.isArray(videosResponse.data.data) ? videosResponse.data.data : [];
-      
+      const videos = Array.isArray(videosResponse.data.data)
+        ? videosResponse.data.data
+        : [];
+
       // Calculate stats
-      const totalViews = videos.reduce((acc: number, v: any) => acc + (v.views || 0), 0);
-      const totalLikes = videos.reduce((acc: number, v: any) => acc + (v.likesCount || 0), 0);
-      const totalComments = videos.reduce((acc: number, v: any) => acc + (v.commentsCount || 0), 0);
+      const totalViews = videos.reduce(
+        (acc: number, v: any) => acc + (v.views || 0),
+        0,
+      );
+      const totalLikes = videos.reduce(
+        (acc: number, v: any) => acc + (v.likesCount || 0),
+        0,
+      );
+      const totalComments = videos.reduce(
+        (acc: number, v: any) => acc + (v.commentsCount || 0),
+        0,
+      );
 
       setStats({
         totalVideos: videos.length,
@@ -102,9 +126,7 @@ export function StudioDashboard({ channel }: StudioDashboardProps) {
           </CardHeader>
           <CardContent>
             <div className="text-2xl font-bold">{stats.totalVideos}</div>
-            <p className="text-xs text-muted-foreground">
-              Published videos
-            </p>
+            <p className="text-xs text-muted-foreground">Published videos</p>
           </CardContent>
         </Card>
 
@@ -114,10 +136,10 @@ export function StudioDashboard({ channel }: StudioDashboardProps) {
             <Eye className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{stats.totalViews.toLocaleString()}</div>
-            <p className="text-xs text-muted-foreground">
-              All-time views
-            </p>
+            <div className="text-2xl font-bold">
+              {stats.totalViews.toLocaleString()}
+            </div>
+            <p className="text-xs text-muted-foreground">All-time views</p>
           </CardContent>
         </Card>
 
@@ -127,10 +149,10 @@ export function StudioDashboard({ channel }: StudioDashboardProps) {
             <Users className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{channel.subscribers?.length || 0}</div>
-            <p className="text-xs text-muted-foreground">
-              Channel subscribers
-            </p>
+            <div className="text-2xl font-bold">
+              {channel.subscribers?.length || 0}
+            </div>
+            <p className="text-xs text-muted-foreground">Channel subscribers</p>
           </CardContent>
         </Card>
 
@@ -140,10 +162,10 @@ export function StudioDashboard({ channel }: StudioDashboardProps) {
             <TrendingUp className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{stats.totalLikes + stats.totalComments}</div>
-            <p className="text-xs text-muted-foreground">
-              Likes & comments
-            </p>
+            <div className="text-2xl font-bold">
+              {stats.totalLikes + stats.totalComments}
+            </div>
+            <p className="text-xs text-muted-foreground">Likes & comments</p>
           </CardContent>
         </Card>
       </div>
@@ -220,7 +242,9 @@ export function StudioDashboard({ channel }: StudioDashboardProps) {
           <CardHeader>
             <Upload className="w-8 h-8 text-primary mb-2" />
             <CardTitle>Upload Video</CardTitle>
-            <CardDescription>Share new content with your audience</CardDescription>
+            <CardDescription>
+              Share new content with your audience
+            </CardDescription>
           </CardHeader>
         </Card>
 
diff --git a/frontend/src/components/studio/StudioVideos.tsx b/frontend/src/components/studio/StudioVideos.tsx
index 14d3d88..19fed33 100644
--- a/frontend/src/components/studio/StudioVideos.tsx
+++ b/frontend/src/components/studio/StudioVideos.tsx
@@ -2,7 +2,13 @@
 
 import { useEffect, useState, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
@@ -25,9 +31,18 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
-import { 
-  Video, Eye, Clock, MoreVertical, Trash2, Edit, 
-  Globe, Lock, Upload, Search, Filter 
+import {
+  Video,
+  Eye,
+  Clock,
+  MoreVertical,
+  Trash2,
+  Edit,
+  Globe,
+  Lock,
+  Upload,
+  Search,
+  Filter,
 } from "lucide-react";
 import apiClient from "@/lib/api";
 import { toast } from "sonner";
@@ -66,7 +81,7 @@ export function StudioVideos({ channel }: StudioVideosProps) {
     setLoading(true);
     try {
       const response = await apiClient.get("/videos/search", {
-        params: { channelId: channel._id }
+        params: { channelId: channel._id },
       });
       const videoData = response.data.data;
       setVideos(Array.isArray(videoData) ? videoData : []);
@@ -104,7 +119,9 @@ export function StudioVideos({ channel }: StudioVideosProps) {
   const handleTogglePublish = async (video: VideoItem) => {
     try {
       await apiClient.patch(`/videos/toggle/publish/${video._id}`);
-      toast.success(video.isPublished ? "Video unpublished" : "Video published");
+      toast.success(
+        video.isPublished ? "Video unpublished" : "Video published",
+      );
       fetchVideos();
     } catch (error: any) {
       toast.error("Failed to toggle publish status");
@@ -113,7 +130,9 @@ export function StudioVideos({ channel }: StudioVideosProps) {
 
   const filteredVideos = Array.isArray(videos)
     ? videos.filter((video) => {
-        const matchesSearch = video.title.toLowerCase().includes(searchQuery.toLowerCase());
+        const matchesSearch = video.title
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase());
         const matchesTab =
           activeTab === "all" ||
           (activeTab === "published" && video.isPublished) ||
@@ -138,7 +157,11 @@ export function StudioVideos({ channel }: StudioVideosProps) {
           <h2 className="text-3xl font-bold">Content</h2>
           <p className="text-muted-foreground">Manage your videos</p>
         </div>
-        <Button onClick={() => router.push("/upload")} size="lg" className="gap-2">
+        <Button
+          onClick={() => router.push("/upload")}
+          size="lg"
+          className="gap-2"
+        >
           <Upload className="w-5 h-5" />
           Upload Video
         </Button>
@@ -202,7 +225,10 @@ export function StudioVideos({ channel }: StudioVideosProps) {
           ) : (
             <div className="space-y-4">
               {filteredVideos.map((video) => (
-                <Card key={video._id} className="hover:shadow-md transition-shadow">
+                <Card
+                  key={video._id}
+                  className="hover:shadow-md transition-shadow"
+                >
                   <CardContent className="p-6">
                     <div className="flex items-start gap-6">
                       {/* Thumbnail */}
@@ -215,7 +241,8 @@ export function StudioVideos({ channel }: StudioVideosProps) {
                           />
                         )}
                         <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-1.5 py-0.5 rounded">
-                          {Math.floor(video.duration / 60)}:{String(video.duration % 60).padStart(2, '0')}
+                          {Math.floor(video.duration / 60)}:
+                          {String(video.duration % 60).padStart(2, "0")}
                         </div>
                       </div>
 
@@ -223,7 +250,9 @@ export function StudioVideos({ channel }: StudioVideosProps) {
                       <div className="flex-1 min-w-0">
                         <div className="flex items-start justify-between gap-4">
                           <div className="flex-1">
-                            <h3 className="font-semibold text-lg line-clamp-1">{video.title}</h3>
+                            <h3 className="font-semibold text-lg line-clamp-1">
+                              {video.title}
+                            </h3>
                             <p className="text-sm text-muted-foreground line-clamp-2 mt-1">
                               {video.description}
                             </p>
@@ -242,7 +271,9 @@ export function StudioVideos({ channel }: StudioVideosProps) {
                           {/* Status and Actions */}
                           <div className="flex items-center gap-2">
                             <Badge
-                              variant={video.isPublished ? "default" : "secondary"}
+                              variant={
+                                video.isPublished ? "default" : "secondary"
+                              }
                               className="gap-1"
                             >
                               {video.isPublished ? (
@@ -268,18 +299,24 @@ export function StudioVideos({ channel }: StudioVideosProps) {
                                 <DropdownMenuLabel>Actions</DropdownMenuLabel>
                                 <DropdownMenuSeparator />
                                 <DropdownMenuItem
-                                  onClick={() => router.push(`/video/${video._id}`)}
+                                  onClick={() =>
+                                    router.push(`/video/${video._id}`)
+                                  }
                                 >
                                   <Eye className="w-4 h-4 mr-2" />
                                   View
                                 </DropdownMenuItem>
                                 <DropdownMenuItem
-                                  onClick={() => router.push(`/video/${video._id}/edit`)}
+                                  onClick={() =>
+                                    router.push(`/video/${video._id}/edit`)
+                                  }
                                 >
                                   <Edit className="w-4 h-4 mr-2" />
                                   Edit
                                 </DropdownMenuItem>
-                                <DropdownMenuItem onClick={() => handleTogglePublish(video)}>
+                                <DropdownMenuItem
+                                  onClick={() => handleTogglePublish(video)}
+                                >
                                   {video.isPublished ? (
                                     <>
                                       <Lock className="w-4 h-4 mr-2" />
@@ -320,12 +357,16 @@ export function StudioVideos({ channel }: StudioVideosProps) {
           <AlertDialogHeader>
             <AlertDialogTitle>Delete Video</AlertDialogTitle>
             <AlertDialogDescription>
-              Are you sure you want to delete &quot;{selectedVideo?.title}&quot;? This action cannot be undone.
+              Are you sure you want to delete &quot;{selectedVideo?.title}
+              &quot;? This action cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleDeleteConfirm} className="bg-destructive">
+            <AlertDialogAction
+              onClick={handleDeleteConfirm}
+              className="bg-destructive"
+            >
               Delete
             </AlertDialogAction>
           </AlertDialogFooter>
diff --git a/frontend/src/components/ui/badge.tsx b/frontend/src/components/ui/badge.tsx
index f000e3e..d3d5d60 100644
--- a/frontend/src/components/ui/badge.tsx
+++ b/frontend/src/components/ui/badge.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -20,8 +20,8 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -30,7 +30,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/frontend/src/components/video/ThumbnailGeneratorModal.tsx b/frontend/src/components/video/ThumbnailGeneratorModal.tsx
index 9c1af7f..ee17757 100644
--- a/frontend/src/components/video/ThumbnailGeneratorModal.tsx
+++ b/frontend/src/components/video/ThumbnailGeneratorModal.tsx
@@ -1,13 +1,20 @@
 "use client";
 
-import { useState, useRef, useEffect } from 'react';
-import { useThumbnailGenerator } from '@/hooks/useThumbnailGenerator';
-import { Button } from '@/components/ui/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from '@/components/ui/dialog';
-import { Slider } from '@/components/ui/slider';
-import { Label } from '@/components/ui/label';
-import { Loader2 } from 'lucide-react';
-import { useToast } from '@/hooks/use-toast';
+import { useState, useRef, useEffect } from "react";
+import { useThumbnailGenerator } from "@/hooks/useThumbnailGenerator";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Slider } from "@/components/ui/slider";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
 
 interface ThumbnailGeneratorModalProps {
   videoFile: File;
@@ -23,7 +30,8 @@ export function ThumbnailGeneratorModal({
   onThumbnailGenerated,
 }: ThumbnailGeneratorModalProps) {
   const { toast } = useToast();
-  const { isLoaded, isLoading, load, generateThumbnail } = useThumbnailGenerator();
+  const { isLoaded, isLoading, load, generateThumbnail } =
+    useThumbnailGenerator();
   const [isGenerating, setIsGenerating] = useState(false);
   const [timestamp, setTimestamp] = useState(1);
   const [videoDuration, setVideoDuration] = useState(0);
@@ -37,19 +45,24 @@ export function ThumbnailGeneratorModal({
 
   const handleGenerate = async () => {
     setIsGenerating(true);
-    toast({ title: 'Generating thumbnail...', description: 'This may take a moment.' });
-    
+    toast({
+      title: "Generating thumbnail...",
+      description: "This may take a moment.",
+    });
+
     const thumbnailBlob = await generateThumbnail(videoFile, timestamp);
-    
+
     if (thumbnailBlob) {
-      const thumbnailFile = new File([thumbnailBlob], 'thumbnail.jpg', { type: 'image/jpeg' });
+      const thumbnailFile = new File([thumbnailBlob], "thumbnail.jpg", {
+        type: "image/jpeg",
+      });
       onThumbnailGenerated(thumbnailFile);
-      toast({ title: 'Thumbnail generated successfully!' });
+      toast({ title: "Thumbnail generated successfully!" });
       onOpenChange(false);
     } else {
-      toast({ title: 'Failed to generate thumbnail', variant: 'destructive' });
+      toast({ title: "Failed to generate thumbnail", variant: "destructive" });
     }
-    
+
     setIsGenerating(false);
   };
 
@@ -66,7 +79,10 @@ export function ThumbnailGeneratorModal({
           <DialogTitle>Generate Thumbnail</DialogTitle>
         </DialogHeader>
         <div className="space-y-4 overflow-y-auto flex-1 pr-2">
-          <div className="bg-black rounded-lg overflow-hidden flex items-center justify-center" style={{ maxHeight: '50vh' }}>
+          <div
+            className="bg-black rounded-lg overflow-hidden flex items-center justify-center"
+            style={{ maxHeight: "50vh" }}
+          >
             <video
               ref={videoRef}
               src={URL.createObjectURL(videoFile)}
@@ -77,7 +93,9 @@ export function ThumbnailGeneratorModal({
           </div>
           {videoDuration > 0 && (
             <div className="space-y-2">
-              <Label htmlFor="timestamp-slider">Select Timestamp: {timestamp.toFixed(1)}s</Label>
+              <Label htmlFor="timestamp-slider">
+                Select Timestamp: {timestamp.toFixed(1)}s
+              </Label>
               <Slider
                 id="timestamp-slider"
                 min={0}
@@ -95,9 +113,18 @@ export function ThumbnailGeneratorModal({
               Cancel
             </Button>
           </DialogClose>
-          <Button onClick={handleGenerate} disabled={!isLoaded || isGenerating || isLoading}>
-            {(isLoading || isGenerating) && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-            {isLoading ? 'Loading Processor...' : isGenerating ? 'Generating...' : 'Generate'}
+          <Button
+            onClick={handleGenerate}
+            disabled={!isLoaded || isGenerating || isLoading}
+          >
+            {(isLoading || isGenerating) && (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            {isLoading
+              ? "Loading Processor..."
+              : isGenerating
+                ? "Generating..."
+                : "Generate"}
           </Button>
         </DialogFooter>
       </DialogContent>
diff --git a/frontend/src/components/video/VideoCard.tsx b/frontend/src/components/video/VideoCard.tsx
index 791075c..977e8e9 100644
--- a/frontend/src/components/video/VideoCard.tsx
+++ b/frontend/src/components/video/VideoCard.tsx
@@ -42,7 +42,8 @@ export function VideoCard({ video }: VideoCardProps) {
             />
           )}
           <div className="absolute bottom-2 right-2 bg-black/80 text-white text-xs px-2 py-1 rounded">
-            {Math.floor(video.duration / 60)}:{String(video.duration % 60).padStart(2, '0')}
+            {Math.floor(video.duration / 60)}:
+            {String(video.duration % 60).padStart(2, "0")}
           </div>
           {!video.isPublished && (
             <Badge className="absolute top-2 right-2" variant="secondary">
@@ -54,7 +55,10 @@ export function VideoCard({ video }: VideoCardProps) {
         <CardContent className="p-4">
           <div className="flex gap-3">
             <Avatar className="w-10 h-10 flex-shrink-0">
-              <AvatarImage src={video.owner.avatar} alt={video.owner.fullName} />
+              <AvatarImage
+                src={video.owner.avatar}
+                alt={video.owner.fullName}
+              />
               <AvatarFallback>{video.owner.fullName[0]}</AvatarFallback>
             </Avatar>
 
diff --git a/frontend/src/components/video/VideoGrid.tsx b/frontend/src/components/video/VideoGrid.tsx
index 63bb3a9..c7e7a69 100644
--- a/frontend/src/components/video/VideoGrid.tsx
+++ b/frontend/src/components/video/VideoGrid.tsx
@@ -19,23 +19,29 @@ interface VideoGridProps {
   subscribedOnly?: boolean;
 }
 
-import { useState,useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useAuthStore } from "@/store/authStore";
 import apiClient from "@/lib/api";
 import Link from "next/link";
 import { Play, Eye, Clock, Bell } from "lucide-react";
-import { formatViewCount,formatTimeAgo } from "@/lib/utils";
+import { formatViewCount, formatTimeAgo } from "@/lib/utils";
 
 interface VideoGridProps {
   subscribedOnly?: boolean;
-  sortBy?: 'recent' | 'views' | 'duration';
+  sortBy?: "recent" | "views" | "duration";
   channelId?: string;
 }
 
-export function VideoGrid({ subscribedOnly = false, sortBy = 'recent', channelId }: VideoGridProps) {
+export function VideoGrid({
+  subscribedOnly = false,
+  sortBy = "recent",
+  channelId,
+}: VideoGridProps) {
   const [videos, setVideos] = useState<Video[]>([]);
   const [loading, setLoading] = useState(true);
-  const [subscribedChannels, setSubscribedChannels] = useState<Set<string>>(new Set());
+  const [subscribedChannels, setSubscribedChannels] = useState<Set<string>>(
+    new Set(),
+  );
   const [previousVideoCount, setPreviousVideoCount] = useState(0);
   const { user } = useAuthStore();
 
@@ -46,59 +52,66 @@ export function VideoGrid({ subscribedOnly = false, sortBy = 'recent', channelId
   // Auto-refresh when page becomes visible (after upload)
   useEffect(() => {
     const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
+      if (document.visibilityState === "visible") {
         fetchVideosWithSubscriptions();
       }
     };
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () =>
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
   }, []);
 
   const fetchVideosWithSubscriptions = async () => {
     try {
       setLoading(true);
-      
+
       // Fetch subscribed channels
       let subscribedChannelIds: string[] = [];
       if (user) {
         try {
-          const subsResponse = await apiClient.get(`/subscriptions/u/${user._id}`);
-          subscribedChannelIds = subsResponse.data.data?.map((sub: any) => sub.channel._id) || [];
+          const subsResponse = await apiClient.get(
+            `/subscriptions/u/${user._id}`,
+          );
+          subscribedChannelIds =
+            subsResponse.data.data?.map((sub: any) => sub.channel._id) || [];
           setSubscribedChannels(new Set(subscribedChannelIds));
         } catch (error) {
           console.error("Error fetching subscriptions:", error);
         }
       }
-      
+
       // Fetch all videos from homepage endpoint
       const videosResponse = await apiClient.get("/videos");
       // Handle both data.data and direct data arrays
       let allVideos = videosResponse.data.data || videosResponse.data || [];
       // Ensure it's an array
       allVideos = Array.isArray(allVideos) ? allVideos : [];
-      
+
       // Filter by channel if channelId is provided
       if (channelId) {
-        allVideos = allVideos.filter((video: Video) => video.owner?._id === channelId);
+        allVideos = allVideos.filter(
+          (video: Video) => video.owner?._id === channelId,
+        );
       }
-      
+
       // Sort videos based on sortBy parameter
-      if (sortBy === 'views') {
+      if (sortBy === "views") {
         allVideos.sort((a: Video, b: Video) => b.views - a.views);
-      } else if (sortBy === 'duration') {
+      } else if (sortBy === "duration") {
         allVideos.sort((a: Video, b: Video) => b.duration - a.duration);
       } else {
         // Default: sort by recent (createdAt)
-        allVideos.sort((a: Video, b: Video) => 
-          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+        allVideos.sort(
+          (a: Video, b: Video) =>
+            new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
         );
       }
-      
+
       if (subscribedOnly) {
         // Filter to only show subscribed channel videos
         if (subscribedChannelIds.length > 0) {
-          const filteredVideos = allVideos.filter((video: Video) => 
-            subscribedChannelIds.includes(video.owner?._id)
+          const filteredVideos = allVideos.filter((video: Video) =>
+            subscribedChannelIds.includes(video.owner?._id),
           );
           setVideos(filteredVideos);
         } else {
@@ -107,12 +120,12 @@ export function VideoGrid({ subscribedOnly = false, sortBy = 'recent', channelId
         }
       } else {
         // Show all videos but sort: subscribed channels first, then others
-        if (subscribedChannelIds.length > 0 && sortBy === 'recent') {
-          const subscribedVideos = allVideos.filter((video: Video) => 
-            subscribedChannelIds.includes(video.owner?._id)
+        if (subscribedChannelIds.length > 0 && sortBy === "recent") {
+          const subscribedVideos = allVideos.filter((video: Video) =>
+            subscribedChannelIds.includes(video.owner?._id),
           );
-          const otherVideos = allVideos.filter((video: Video) => 
-            !subscribedChannelIds.includes(video.owner?._id)
+          const otherVideos = allVideos.filter(
+            (video: Video) => !subscribedChannelIds.includes(video.owner?._id),
           );
           setVideos([...subscribedVideos, ...otherVideos]);
         } else {
@@ -178,17 +191,21 @@ export function VideoGrid({ subscribedOnly = false, sortBy = 'recent', channelId
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
       {videos.map((video) => {
         const isSubscribed = isSubscribedChannel(video.owner?._id);
-        
+
         return (
           <Link key={video._id} href={`/video/${video._id}`}>
             <div className="group cursor-pointer">
-              <div className={`relative aspect-video bg-muted rounded-lg overflow-hidden ${
-                isSubscribed ? 'ring-2 ring-orange-500 shadow-lg shadow-orange-500/20' : ''
-              }`}>
+              <div
+                className={`relative aspect-video bg-muted rounded-lg overflow-hidden ${
+                  isSubscribed
+                    ? "ring-2 ring-orange-500 shadow-lg shadow-orange-500/20"
+                    : ""
+                }`}
+              >
                 {video.thumbnail ? (
                   // eslint-disable-next-line @next/next/no-img-element
-                  <img 
-                    src={video.thumbnail} 
+                  <img
+                    src={video.thumbnail}
                     alt={video.title}
                     className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                   />
@@ -198,7 +215,7 @@ export function VideoGrid({ subscribedOnly = false, sortBy = 'recent', channelId
                   </div>
                 )}
                 <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300"></div>
-                
+
                 {/* Subscribed badge */}
                 {isSubscribed && (
                   <div className="absolute top-2 left-2 bg-orange-500 text-white px-2 py-1 rounded-full text-xs font-semibold flex items-center gap-1 shadow-md">
@@ -206,19 +223,24 @@ export function VideoGrid({ subscribedOnly = false, sortBy = 'recent', channelId
                     Subscribed
                   </div>
                 )}
-                
+
                 <div className="absolute bottom-2 right-2 bg-black/80 px-2 py-1 rounded text-xs text-white">
-                  {Math.floor(video.duration / 60)}:{String(Math.floor(video.duration % 60)).padStart(2, '0')}
+                  {Math.floor(video.duration / 60)}:
+                  {String(Math.floor(video.duration % 60)).padStart(2, "0")}
                 </div>
               </div>
-              
+
               <div className="mt-3">
                 <h3 className="text-lg font-semibold line-clamp-2 group-hover:text-primary transition-colors">
                   {video.title}
                 </h3>
-                <p className={`text-base mt-2 flex items-center gap-2 ${
-                  isSubscribed ? 'text-orange-500 font-medium' : 'text-muted-foreground'
-                }`}>
+                <p
+                  className={`text-base mt-2 flex items-center gap-2 ${
+                    isSubscribed
+                      ? "text-orange-500 font-medium"
+                      : "text-muted-foreground"
+                  }`}
+                >
                   {isSubscribed && <Bell className="w-4 h-4" />}
                   {video.owner.fullName}
                 </p>
diff --git a/frontend/src/components/video/VideoJsPlayer.tsx b/frontend/src/components/video/VideoJsPlayer.tsx
index 69d22da..b9c5b51 100644
--- a/frontend/src/components/video/VideoJsPlayer.tsx
+++ b/frontend/src/components/video/VideoJsPlayer.tsx
@@ -1,8 +1,14 @@
 "use client";
 
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import videojs from 'video.js';
-import 'video.js/dist/video-js.css'; // Import Video.js CSS
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import videojs from "video.js";
+import "video.js/dist/video-js.css"; // Import Video.js CSS
 
 interface VideoJsPlayerProps {
   src: string;
@@ -14,25 +20,36 @@ interface VideoJsPlayerProps {
   introEndTime?: number; // New prop for skip intro
 }
 
-export function VideoJsPlayer({ src, fallbackSrc, poster, autoPlay = true, spriteSheetVttUrl, introStartTime, introEndTime }: VideoJsPlayerProps) {
+export function VideoJsPlayer({
+  src,
+  fallbackSrc,
+  poster,
+  autoPlay = true,
+  spriteSheetVttUrl,
+  introStartTime,
+  introEndTime,
+}: VideoJsPlayerProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const playerRef = useRef<any>(null); // video.js player instance
   const [showSkipIntro, setShowSkipIntro] = useState(false);
   const didFallbackRef = useRef(false);
 
   const getVideoType = useCallback((url: string) => {
-    if (url.includes('.m3u8')) return 'application/x-mpegURL';
-    if (url.includes('.mp4')) return 'video/mp4';
-    if (url.includes('.webm')) return 'video/webm';
-    return 'video/mp4';
+    if (url.includes(".m3u8")) return "application/x-mpegURL";
+    if (url.includes(".mp4")) return "video/mp4";
+    if (url.includes(".webm")) return "video/webm";
+    return "video/mp4";
   }, []);
 
-  const setPlayerSource = useCallback((url: string) => {
-    if (!playerRef.current) return;
-    const videoType = getVideoType(url);
-    console.log('Loading video:', url, 'Type:', videoType);
-    playerRef.current.src({ src: url, type: videoType });
-  }, [getVideoType]);
+  const setPlayerSource = useCallback(
+    (url: string) => {
+      if (!playerRef.current) return;
+      const videoType = getVideoType(url);
+      console.log("Loading video:", url, "Type:", videoType);
+      playerRef.current.src({ src: url, type: videoType });
+    },
+    [getVideoType],
+  );
 
   useLayoutEffect(() => {
     const videoElement = videoRef.current;
@@ -53,9 +70,9 @@ export function VideoJsPlayer({ src, fallbackSrc, poster, autoPlay = true, sprit
       }
 
       const initialType = getVideoType(src);
-      console.log('Loading video:', src, 'Type:', initialType);
+      console.log("Loading video:", src, "Type:", initialType);
 
-    // Initialize Video.js player once.
+      // Initialize Video.js player once.
       const player = (playerRef.current = videojs(
         videoElement,
         {
@@ -65,7 +82,7 @@ export function VideoJsPlayer({ src, fallbackSrc, poster, autoPlay = true, sprit
           // The parent container already enforces aspect ratio; fill it.
           fluid: false,
           fill: true,
-          preload: 'auto',
+          preload: "auto",
           poster: poster,
           html5: {
             vhs: {
@@ -78,25 +95,25 @@ export function VideoJsPlayer({ src, fallbackSrc, poster, autoPlay = true, sprit
           sources: [{ src, type: initialType }],
         },
         () => {
-          console.log('Video.js player is ready');
-        }
+          console.log("Video.js player is ready");
+        },
       ));
 
-    // Add VTT track for sprite sheet thumbnails if available
+      // Add VTT track for sprite sheet thumbnails if available
       if (spriteSheetVttUrl) {
         player.addRemoteTextTrack(
           {
-            kind: 'metadata',
+            kind: "metadata",
             src: spriteSheetVttUrl,
             default: true,
-            label: 'thumbnails',
+            label: "thumbnails",
           },
-          false
+          false,
         );
       }
 
-    // Add timeupdate listener for skip intro
-      player.on('timeupdate', () => {
+      // Add timeupdate listener for skip intro
+      player.on("timeupdate", () => {
         const currentTime = player.currentTime();
         if (
           currentTime !== undefined &&
@@ -111,19 +128,19 @@ export function VideoJsPlayer({ src, fallbackSrc, poster, autoPlay = true, sprit
         }
       });
 
-    // Add error handling + HLS -> MP4 fallback
-      player.on('error', () => {
+      // Add error handling + HLS -> MP4 fallback
+      player.on("error", () => {
         const err = player.error();
-        console.error('Video.js error:', err);
+        console.error("Video.js error:", err);
         if (err) {
-          console.error('Error code:', err.code);
-          console.error('Error message:', err.message);
+          console.error("Error code:", err.code);
+          console.error("Error message:", err.message);
         }
 
-        const isHls = src.includes('.m3u8');
+        const isHls = src.includes(".m3u8");
         if (isHls && fallbackSrc && !didFallbackRef.current) {
           didFallbackRef.current = true;
-          console.warn('HLS failed; falling back to MP4:', fallbackSrc);
+          console.warn("HLS failed; falling back to MP4:", fallbackSrc);
           setPlayerSource(fallbackSrc);
           player.play()?.catch(() => {});
         }
@@ -143,7 +160,17 @@ export function VideoJsPlayer({ src, fallbackSrc, poster, autoPlay = true, sprit
         playerRef.current = null;
       }
     };
-  }, [autoPlay, poster, spriteSheetVttUrl, introStartTime, introEndTime, src, fallbackSrc, setPlayerSource, getVideoType]);
+  }, [
+    autoPlay,
+    poster,
+    spriteSheetVttUrl,
+    introStartTime,
+    introEndTime,
+    src,
+    fallbackSrc,
+    setPlayerSource,
+    getVideoType,
+  ]);
 
   // Update source when URL changes
   useEffect(() => {
@@ -161,7 +188,11 @@ export function VideoJsPlayer({ src, fallbackSrc, poster, autoPlay = true, sprit
 
   return (
     <div data-vjs-player className="relative">
-      <video ref={videoRef} className="video-js vjs-big-play-centered w-full h-full" crossOrigin="anonymous" />
+      <video
+        ref={videoRef}
+        className="video-js vjs-big-play-centered w-full h-full"
+        crossOrigin="anonymous"
+      />
       {showSkipIntro && (
         <button
           onClick={handleSkipIntro}
diff --git a/frontend/src/hooks/useThumbnailGenerator.ts b/frontend/src/hooks/useThumbnailGenerator.ts
index e78cccf..6e4b0c3 100644
--- a/frontend/src/hooks/useThumbnailGenerator.ts
+++ b/frontend/src/hooks/useThumbnailGenerator.ts
@@ -21,8 +21,14 @@ export function useThumbnailGenerator() {
 
       const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.6/dist/umd";
       await ffmpeg.load({
-        coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
-        wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
+        coreURL: await toBlobURL(
+          `${baseURL}/ffmpeg-core.js`,
+          "text/javascript",
+        ),
+        wasmURL: await toBlobURL(
+          `${baseURL}/ffmpeg-core.wasm`,
+          "application/wasm",
+        ),
       });
 
       ffmpegRef.current = ffmpeg;
@@ -61,11 +67,16 @@ export function useThumbnailGenerator() {
         ]);
 
         const data = await ffmpeg.readFile(outputName);
-        
+
         // Ensure data is Uint8Array before creating Blob
-        const uint8Array = data instanceof Uint8Array ? data : new Uint8Array(data as ArrayBuffer);
-        
-        const thumbnailBlob = new Blob([uint8Array.buffer], { type: "image/jpeg" });
+        const uint8Array =
+          data instanceof Uint8Array
+            ? data
+            : new Uint8Array(data as ArrayBuffer);
+
+        const thumbnailBlob = new Blob([uint8Array.buffer], {
+          type: "image/jpeg",
+        });
 
         // Cleanup virtual filesystem
         await ffmpeg.deleteFile(inputName);
@@ -77,7 +88,7 @@ export function useThumbnailGenerator() {
         return null;
       }
     },
-    []
+    [],
   );
 
   return {
diff --git a/frontend/src/lib/api/channel.ts b/frontend/src/lib/api/channel.ts
index 5a6c7b8..8408a96 100644
--- a/frontend/src/lib/api/channel.ts
+++ b/frontend/src/lib/api/channel.ts
@@ -1,9 +1,9 @@
-import axios from 'axios';
+import axios from "axios";
 
 const API_URL =
   process.env.NEXT_PUBLIC_BACKEND_URL ||
   process.env.NEXT_PUBLIC_API_URL ||
-  'http://localhost:8000/api/v1';
+  "http://localhost:8000/api/v1";
 
 const api = axios.create({
   baseURL: API_URL,
@@ -12,7 +12,7 @@ const api = axios.create({
 
 // Add token to requests if available
 api.interceptors.request.use((config) => {
-  const token = localStorage.getItem('accessToken');
+  const token = localStorage.getItem("accessToken");
   if (token) {
     config.headers.Authorization = `Bearer ${token}`;
   }
@@ -34,15 +34,15 @@ export const channelApi = {
   // Create a new channel
   createChannel: async (data: CreateChannelData) => {
     const formData = new FormData();
-    formData.append('name', data.name);
-    formData.append('description', data.description);
+    formData.append("name", data.name);
+    formData.append("description", data.description);
     if (data.avatar) {
-      formData.append('avatar', data.avatar);
+      formData.append("avatar", data.avatar);
     }
 
-    const response = await api.post('/channels/create', formData, {
+    const response = await api.post("/channels/create", formData, {
       headers: {
-        'Content-Type': 'multipart/form-data',
+        "Content-Type": "multipart/form-data",
       },
     });
     return response.data;
@@ -50,7 +50,7 @@ export const channelApi = {
 
   // Get user's channels
   getUserChannels: async () => {
-    const response = await api.get('/channels/user/me');
+    const response = await api.get("/channels/user/me");
     return response.data;
   },
 
@@ -75,11 +75,11 @@ export const channelApi = {
   // Upload channel avatar
   uploadAvatar: async (channelId: string, avatar: File) => {
     const formData = new FormData();
-    formData.append('avatar', avatar);
+    formData.append("avatar", avatar);
 
     const response = await api.post(`/channels/${channelId}/avatar`, formData, {
       headers: {
-        'Content-Type': 'multipart/form-data',
+        "Content-Type": "multipart/form-data",
       },
     });
     return response.data;
@@ -88,11 +88,11 @@ export const channelApi = {
   // Upload channel banner
   uploadBanner: async (channelId: string, banner: File) => {
     const formData = new FormData();
-    formData.append('banner', banner);
+    formData.append("banner", banner);
 
     const response = await api.post(`/channels/${channelId}/banner`, formData, {
       headers: {
-        'Content-Type': 'multipart/form-data',
+        "Content-Type": "multipart/form-data",
       },
     });
     return response.data;
diff --git a/frontend/src/store/channelStore.ts b/frontend/src/store/channelStore.ts
index 149eb80..386beb5 100644
--- a/frontend/src/store/channelStore.ts
+++ b/frontend/src/store/channelStore.ts
@@ -1,4 +1,4 @@
-import { create } from 'zustand';
+import { create } from "zustand";
 
 interface Channel {
   _id: string;
@@ -36,20 +36,23 @@ export const useChannelStore = create<ChannelStore>((set) => ({
   setCurrentChannel: (channel) => set({ currentChannel: channel }),
   setLoading: (isLoading) => set({ isLoading }),
   setError: (error) => set({ error }),
-  addChannel: (channel) => set((state) => ({ channels: [...state.channels, channel] })),
-  updateChannel: (channelId, updates) => 
+  addChannel: (channel) =>
+    set((state) => ({ channels: [...state.channels, channel] })),
+  updateChannel: (channelId, updates) =>
     set((state) => ({
-      channels: state.channels.map((ch) => 
-        ch._id === channelId ? { ...ch, ...updates } : ch
+      channels: state.channels.map((ch) =>
+        ch._id === channelId ? { ...ch, ...updates } : ch,
       ),
-      currentChannel: state.currentChannel?._id === channelId 
-        ? { ...state.currentChannel, ...updates } 
-        : state.currentChannel
+      currentChannel:
+        state.currentChannel?._id === channelId
+          ? { ...state.currentChannel, ...updates }
+          : state.currentChannel,
     })),
-  removeChannel: (channelId) => 
+  removeChannel: (channelId) =>
     set((state) => ({
       channels: state.channels.filter((ch) => ch._id !== channelId),
-      currentChannel: state.currentChannel?._id === channelId ? null : state.currentChannel
+      currentChannel:
+        state.currentChannel?._id === channelId ? null : state.currentChannel,
     })),
   clearChannels: () => set({ channels: [], currentChannel: null, error: null }),
 }));
diff --git a/processing/videoWorker.js b/processing/videoWorker.js
index 67e00c4..f703b18 100644
--- a/processing/videoWorker.js
+++ b/processing/videoWorker.js
@@ -1,331 +1,434 @@
-
-import "dotenv/config";
-import mongoose from "mongoose";
-import { Video } from "../BACKEND/src/models/video.model.js";
-import connectDB from "../BACKEND/src/db/index.js";
-import { uploadOnCloudinary } from "../BACKEND/src/utils/cloudinary.js";
-import { ApiError } from "../BACKEND/src/utils/ApiError.js";
-import ffmpeg from 'fluent-ffmpeg';
-import fs from "fs-extra"; // Using fs-extra for recursive directory operations
-import path from "path";
-import { fileURLToPath } from "url";
+import 'dotenv/config'
+import mongoose from 'mongoose'
+import { Video } from '../BACKEND/src/models/video.model.js'
+import connectDB from '../BACKEND/src/db/index.js'
+import { uploadOnCloudinary } from '../BACKEND/src/utils/cloudinary.js'
+import { ApiError } from '../BACKEND/src/utils/ApiError.js'
+import ffmpeg from 'fluent-ffmpeg'
+import fs from 'fs-extra' // Using fs-extra for recursive directory operations
+import path from 'path'
+import { fileURLToPath } from 'url'
 
 // ES module __dirname workaround
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
-const projectRoot = path.resolve(__dirname, "..");
+const projectRoot = path.resolve(__dirname, '..')
 
 // --- HLS Transcoding Logic ---
 
 const generateHLS = (filePath, outputDir) => {
-    const watermarkPath = path.join(projectRoot, 'BACKEND', 'public', 'watermark.svg');
-    
-    return new Promise((resolve, reject) => {
-        ffmpeg(filePath)
-            .input(watermarkPath)
-            .outputOptions([
-                '-c:v libx264',
-                '-c:a aac',
-                '-preset veryfast',
-                '-start_number 0',
-                '-hls_time 10',
-                '-hls_list_size 0',
-                '-f hls'
-            ])
-            .complexFilter('[1:v]scale=150:-1[wm];[0:v][wm]overlay=W-w-10:H-h-10')
-            .output(path.join(outputDir, 'playlist.m3u8'))
-            .on('end', () => resolve("HLS generation completed."))
-            .on('error', (err) => reject(new ApiError(500, `HLS generation failed: ${err.message}`)))
-            .run();
-    });
-};
-
+  const watermarkPath = path.join(
+    projectRoot,
+    'BACKEND',
+    'public',
+    'watermark.svg'
+  )
+
+  return new Promise((resolve, reject) => {
+    ffmpeg(filePath)
+      .input(watermarkPath)
+      .outputOptions([
+        '-c:v libx264',
+        '-c:a aac',
+        '-preset veryfast',
+        '-start_number 0',
+        '-hls_time 10',
+        '-hls_list_size 0',
+        '-f hls'
+      ])
+      .complexFilter('[1:v]scale=150:-1[wm];[0:v][wm]overlay=W-w-10:H-h-10')
+      .output(path.join(outputDir, 'playlist.m3u8'))
+      .on('end', () => resolve('HLS generation completed.'))
+      .on('error', (err) =>
+        reject(new ApiError(500, `HLS generation failed: ${err.message}`))
+      )
+      .run()
+  })
+}
 
 const uploadHLSFiles = async (hlsDir, videoId) => {
-    const files = await fs.readdir(hlsDir);
-    const uploadPromises = files.map(file => {
-        const localPath = path.join(hlsDir, file);
-        // The public_id will create a folder structure in Cloudinary
-        const public_id = `hls/${videoId}/${path.parse(file).name}`;
-        return uploadOnCloudinary(localPath, { public_id, resource_type: "raw" });
-    });
-
-    const results = await Promise.all(uploadPromises);
-    
-    const masterPlaylistUrl = results.find(res => res.public_id.endsWith('playlist'))?.secure_url;
-
-    if (!masterPlaylistUrl) {
-        throw new ApiError(500, "Master playlist URL not found after upload.");
-    }
-    
-    // We need to manually adjust the URL for HLS playback in many players
-    // by replacing /upload/ with /video/upload/ and adding transformations.
-    // For now, we'll return the raw URL and handle transformations on the frontend player if needed.
-    return masterPlaylistUrl;
-};
-
+  const files = await fs.readdir(hlsDir)
+  const uploadPromises = files.map((file) => {
+    const localPath = path.join(hlsDir, file)
+    // The public_id will create a folder structure in Cloudinary
+    const public_id = `hls/${videoId}/${path.parse(file).name}`
+    return uploadOnCloudinary(localPath, { public_id, resource_type: 'raw' })
+  })
+
+  const results = await Promise.all(uploadPromises)
+
+  const masterPlaylistUrl = results.find((res) =>
+    res.public_id.endsWith('playlist')
+  )?.secure_url
+
+  if (!masterPlaylistUrl) {
+    throw new ApiError(500, 'Master playlist URL not found after upload.')
+  }
+
+  // We need to manually adjust the URL for HLS playback in many players
+  // by replacing /upload/ with /video/upload/ and adding transformations.
+  // For now, we'll return the raw URL and handle transformations on the frontend player if needed.
+  return masterPlaylistUrl
+}
 
 const generateWebPPreview = (filePath, outputWebpPath, duration) => {
-    // Start 20% into the video, or at 1 minute if the video is very long
-    const startTime = Math.min(60, duration * 0.2); 
-    
-    return new Promise((resolve, reject) => {
-        ffmpeg(filePath)
-            .seekInput(startTime) // Start 20% into the video
-            .duration(3) // 3 seconds clip
-            .outputOptions([
-                '-vf scale=320:-1:flags=lanczos,fps=10', // Scale to 320px width, 10 fps
-                '-loop 0', // Loop indefinitely
-                '-c:v libwebp', // Use libwebp codec
-                '-lossless 0', // Lossy compression
-                '-q:v 75', // Quality factor
-                '-preset default' // Encoding preset
-            ])
-            .output(outputWebpPath)
-            .on('end', () => resolve("WebP preview generation completed."))
-            .on('error', (err) => reject(new ApiError(500, `WebP preview generation failed: ${err.message}`)))
-            .run();
-    });
-};
-
+  // Start 20% into the video, or at 1 minute if the video is very long
+  const startTime = Math.min(60, duration * 0.2)
+
+  return new Promise((resolve, reject) => {
+    ffmpeg(filePath)
+      .seekInput(startTime) // Start 20% into the video
+      .duration(3) // 3 seconds clip
+      .outputOptions([
+        '-vf scale=320:-1:flags=lanczos,fps=10', // Scale to 320px width, 10 fps
+        '-loop 0', // Loop indefinitely
+        '-c:v libwebp', // Use libwebp codec
+        '-lossless 0', // Lossy compression
+        '-q:v 75', // Quality factor
+        '-preset default' // Encoding preset
+      ])
+      .output(outputWebpPath)
+      .on('end', () => resolve('WebP preview generation completed.'))
+      .on('error', (err) =>
+        reject(
+          new ApiError(500, `WebP preview generation failed: ${err.message}`)
+        )
+      )
+      .run()
+  })
+}
 
 const generateWaveform = (filePath, outputWaveformPath) => {
-    return new Promise((resolve, reject) => {
-        ffmpeg(filePath)
-            .outputOptions([
-                '-filter_complex', 'aformat=channel_layouts=mono,compand,showwavespic=s=1200x120:colors=cyan',
-                '-frames:v 1'
-            ])
-            .output(outputWaveformPath)
-            .on('end', () => resolve("Waveform generation completed."))
-            .on('error', (err) => reject(new ApiError(500, `Waveform generation failed: ${err.message}`)))
-            .run();
-    });
-};
-
+  return new Promise((resolve, reject) => {
+    ffmpeg(filePath)
+      .outputOptions([
+        '-filter_complex',
+        'aformat=channel_layouts=mono,compand,showwavespic=s=1200x120:colors=cyan',
+        '-frames:v 1'
+      ])
+      .output(outputWaveformPath)
+      .on('end', () => resolve('Waveform generation completed.'))
+      .on('error', (err) =>
+        reject(new ApiError(500, `Waveform generation failed: ${err.message}`))
+      )
+      .run()
+  })
+}
 
 const generateSpriteSheetAndVtt = (filePath, outputDir, duration) => {
-    const spriteSheetPath = path.join(outputDir, 'sprite.jpg');
-    const vttPath = path.join(outputDir, 'sprite.vtt');
-    const thumbnailWidth = 160;
-    const thumbnailHeight = 90; // Assuming 16:9 aspect ratio
-    const interval = 10; // seconds
-    const columns = 10;
-
-    return new Promise((resolve, reject) => {
-        // 1. Generate the sprite sheet
-        ffmpeg(filePath)
-            .outputOptions([
-                `-vf fps=1/${interval},scale=${thumbnailWidth}:-1,tile=${columns}x${columns}`,
-                '-q:v 2'
-            ])
-            .output(spriteSheetPath)
-            .on('end', async () => {
-                try {
-                    // 2. Generate the VTT file
-                    let vttContent = 'WEBVTT\n\n';
-                    const numThumbnails = Math.floor(duration / interval);
-                    for (let i = 0; i < numThumbnails; i++) {
-                        const startTime = i * interval;
-                        const endTime = (i + 1) * interval;
-                        
-                        const x = (i % columns) * thumbnailWidth;
-                        const y = Math.floor(i / columns) * thumbnailHeight;
-
-                        vttContent += `${new Date(startTime * 1000).toISOString().substr(11, 12)} --> ${new Date(endTime * 1000).toISOString().substr(11, 12)}\n`;
-                        vttContent += `sprite.jpg#xywh=${x},${y},${thumbnailWidth},${thumbnailHeight}\n\n`;
-                    }
-                    await fs.writeFile(vttPath, vttContent);
-                    resolve("Sprite sheet and VTT generation completed.");
-                } catch (vttError) {
-                    reject(new ApiError(500, `VTT file generation failed: ${vttError.message}`));
-                }
-            })
-            .on('error', (err) => reject(new ApiError(500, `Sprite sheet generation failed: ${err.message}`)))
-            .run();
-    });
-};
-
+  const spriteSheetPath = path.join(outputDir, 'sprite.jpg')
+  const vttPath = path.join(outputDir, 'sprite.vtt')
+  const thumbnailWidth = 160
+  const thumbnailHeight = 90 // Assuming 16:9 aspect ratio
+  const interval = 10 // seconds
+  const columns = 10
+
+  return new Promise((resolve, reject) => {
+    // 1. Generate the sprite sheet
+    ffmpeg(filePath)
+      .outputOptions([
+        `-vf fps=1/${interval},scale=${thumbnailWidth}:-1,tile=${columns}x${columns}`,
+        '-q:v 2'
+      ])
+      .output(spriteSheetPath)
+      .on('end', async () => {
+        try {
+          // 2. Generate the VTT file
+          let vttContent = 'WEBVTT\n\n'
+          const numThumbnails = Math.floor(duration / interval)
+          for (let i = 0; i < numThumbnails; i++) {
+            const startTime = i * interval
+            const endTime = (i + 1) * interval
+
+            const x = (i % columns) * thumbnailWidth
+            const y = Math.floor(i / columns) * thumbnailHeight
+
+            vttContent += `${new Date(startTime * 1000).toISOString().substr(11, 12)} --> ${new Date(endTime * 1000).toISOString().substr(11, 12)}\n`
+            vttContent += `sprite.jpg#xywh=${x},${y},${thumbnailWidth},${thumbnailHeight}\n\n`
+          }
+          await fs.writeFile(vttPath, vttContent)
+          resolve('Sprite sheet and VTT generation completed.')
+        } catch (vttError) {
+          reject(
+            new ApiError(
+              500,
+              `VTT file generation failed: ${vttError.message}`
+            )
+          )
+        }
+      })
+      .on('error', (err) =>
+        reject(
+          new ApiError(500, `Sprite sheet generation failed: ${err.message}`)
+        )
+      )
+      .run()
+  })
+}
 
 const detectIntro = (filePath, outputTxtPath) => {
-    return new Promise((resolve, reject) => {
-        ffmpeg(filePath)
-            .outputOptions([
-                '-filter_complex', 'select=\'gt(scene,0.4)\',metadata=print:file=-',
-                '-f', 'null'
-            ])
-            .on('end', () => resolve("Scene detection completed."))
-            .on('error', (err) => reject(new ApiError(500, `Scene detection failed: ${err.message}`)))
-            .on('data', (chunk) => {
-                // This is a workaround to capture the metadata output directly
-                // since writing to a file with fluent-ffmpeg can be tricky with this filter.
-                fs.appendFileSync(outputTxtPath, chunk.toString());
-            })
-            .run();
-    });
-};
+  return new Promise((resolve, reject) => {
+    ffmpeg(filePath)
+      .outputOptions([
+        '-filter_complex',
+        "select='gt(scene,0.4)',metadata=print:file=-",
+        '-f',
+        'null'
+      ])
+      .on('end', () => resolve('Scene detection completed.'))
+      .on('error', (err) =>
+        reject(new ApiError(500, `Scene detection failed: ${err.message}`))
+      )
+      .on('data', (chunk) => {
+        // This is a workaround to capture the metadata output directly
+        // since writing to a file with fluent-ffmpeg can be tricky with this filter.
+        fs.appendFileSync(outputTxtPath, chunk.toString())
+      })
+      .run()
+  })
+}
 
 const parseIntroTimestamps = async (filePath) => {
-    const content = await fs.readFile(filePath, 'utf-8');
-    const lines = content.split('\n');
-    const timestamps = [];
-    for (const line of lines) {
-        if (line.startsWith('frame')) {
-            const ptsTimeMatch = line.match(/pts_time:(\d+\.\d+)/);
-            if (ptsTimeMatch) {
-                timestamps.push(parseFloat(ptsTimeMatch[1]));
-            }
-        }
+  const content = await fs.readFile(filePath, 'utf-8')
+  const lines = content.split('\n')
+  const timestamps = []
+  for (const line of lines) {
+    if (line.startsWith('frame')) {
+      const ptsTimeMatch = line.match(/pts_time:(\d+\.\d+)/)
+      if (ptsTimeMatch) {
+        timestamps.push(parseFloat(ptsTimeMatch[1]))
+      }
     }
+  }
 
-    // Simple heuristic: find the first two scene changes after 5s and before 3min
-    const potentialIntroStart = timestamps.find(t => t > 5);
-    if (!potentialIntroStart) return null;
-
-    const potentialIntroEnd = timestamps.find(t => t > potentialIntroStart + 5 && t < 180);
-    if (!potentialIntroEnd) return null;
+  // Simple heuristic: find the first two scene changes after 5s and before 3min
+  const potentialIntroStart = timestamps.find((t) => t > 5)
+  if (!potentialIntroStart) return null
 
-    return {
-        introStartTime: Math.floor(potentialIntroStart),
-        introEndTime: Math.floor(potentialIntroEnd)
-    };
-};
+  const potentialIntroEnd = timestamps.find(
+    (t) => t > potentialIntroStart + 5 && t < 180
+  )
+  if (!potentialIntroEnd) return null
 
+  return {
+    introStartTime: Math.floor(potentialIntroStart),
+    introEndTime: Math.floor(potentialIntroEnd)
+  }
+}
 
 const processVideo = async () => {
-    let video = null;
-    let hlsOutputDir = null;
-    let webpTempPath = null;
-    let waveformTempPath = null;
-    let spriteSheetDir = null;
-    let sceneChangesPath = null;
-
-    try {
-        console.log("Searching for a video to process...");
-        video = await Video.findOneAndUpdate(
-            { processingStatus: "processing" },
-            { $set: { processingStatus: "transcoding" } },
-            { new: true }
-        );
-
-        if (!video) {
-            console.log("No videos to process. Waiting...");
-            return;
-        }
-
-        console.log(`Processing video: ${video.title} (${video._id})`);
-
-        const videoLocalPath = video.videoFiles;
-        
-        const duration = await new Promise((resolve, reject) => {
-            ffmpeg.ffprobe(videoLocalPath, (err, metadata) => {
-                if (err) return reject(err);
-                resolve(metadata.format.duration);
-            });
-        });
-        video.duration = Math.floor(duration);
-
-        hlsOutputDir = path.join(projectRoot, 'BACKEND', 'public', 'temp', 'hls', video._id.toString());
-        await fs.ensureDir(hlsOutputDir);
-
-        // 1. Generate HLS segments
-        console.log("Generating HLS segments...");
-        await generateHLS(videoLocalPath, hlsOutputDir);
-        console.log("HLS segments generated.");
-
-        // 2. Upload HLS files to Cloudinary
-        console.log("Uploading HLS files to Cloudinary...");
-        const masterPlaylistUrl = await uploadHLSFiles(hlsOutputDir, video._id.toString());
-        console.log("HLS files uploaded.");
-
-        // 3. Generate and upload WebP preview
-        console.log("Generating WebP preview...");
-        webpTempPath = path.join(projectRoot, 'BACKEND', 'public', 'temp', `${video._id}-preview.webp`);
-        await generateWebPPreview(videoLocalPath, webpTempPath, duration);
-        const webpUploadResponse = await uploadOnCloudinary(webpTempPath, { public_id: `previews/${video._id}`, resource_type: "image" });
-        if (webpUploadResponse) video.previewAnimationUrl = webpUploadResponse.secure_url;
-        console.log("WebP preview generated and uploaded.");
-
-        // 4. Generate and upload Waveform image
-        console.log("Generating waveform image...");
-        waveformTempPath = path.join(projectRoot, 'BACKEND', 'public', 'temp', `${video._id}-waveform.png`);
-        await generateWaveform(videoLocalPath, waveformTempPath);
-        const waveformUploadResponse = await uploadOnCloudinary(waveformTempPath, { public_id: `waveforms/${video._id}`, resource_type: "image" });
-        if (waveformUploadResponse) video.waveformUrl = waveformUploadResponse.secure_url;
-        console.log("Waveform image generated and uploaded.");
-
-        // 5. Generate and upload Sprite Sheet and VTT
-        console.log("Generating sprite sheet and VTT...");
-        spriteSheetDir = path.join(projectRoot, 'BACKEND', 'public', 'temp', 'sprites', video._id.toString());
-        await fs.ensureDir(spriteSheetDir);
-        await generateSpriteSheetAndVtt(videoLocalPath, spriteSheetDir, duration);
-        const spriteSheetUploadResponse = await uploadOnCloudinary(path.join(spriteSheetDir, 'sprite.jpg'), { public_id: `sprites/${video._id}/sprite`, resource_type: "image" });
-        const vttUploadResponse = await uploadOnCloudinary(path.join(spriteSheetDir, 'sprite.vtt'), { public_id: `sprites/${video._id}/sprite`, resource_type: "raw" });
-        if (spriteSheetUploadResponse) video.spriteSheetUrl = spriteSheetUploadResponse.secure_url;
-        if (vttUploadResponse) video.spriteSheetVttUrl = vttUploadResponse.secure_url;
-        console.log("Sprite sheet and VTT generated and uploaded.");
-
-        // 6. Detect Intro
-        console.log("Detecting intro...");
-        sceneChangesPath = path.join(projectRoot, 'BACKEND', 'public', 'temp', `${video._id}-scenes.txt`);
-        await detectIntro(videoLocalPath, sceneChangesPath);
-        const introTimestamps = await parseIntroTimestamps(sceneChangesPath);
-        if (introTimestamps) {
-            video.introStartTime = introTimestamps.introStartTime;
-            video.introEndTime = introTimestamps.introEndTime;
-        }
-        console.log("Intro detection complete.");
+  let video = null
+  let hlsOutputDir = null
+  let webpTempPath = null
+  let waveformTempPath = null
+  let spriteSheetDir = null
+  let sceneChangesPath = null
+
+  try {
+    console.log('Searching for a video to process...')
+    video = await Video.findOneAndUpdate(
+      { processingStatus: 'processing' },
+      { $set: { processingStatus: 'transcoding' } },
+      { new: true }
+    )
+
+    if (!video) {
+      console.log('No videos to process. Waiting...')
+      return
+    }
 
-        // 7. Upload thumbnail (if it exists)
-        let thumbnailUploadResponse = null;
-        if (video.thumbnail) {
-            thumbnailUploadResponse = await uploadOnCloudinary(video.thumbnail);
-        }
+    console.log(`Processing video: ${video.title} (${video._id})`)
+
+    const videoLocalPath = video.videoFiles
+
+    const duration = await new Promise((resolve, reject) => {
+      ffmpeg.ffprobe(videoLocalPath, (err, metadata) => {
+        if (err) return reject(err)
+        resolve(metadata.format.duration)
+      })
+    })
+    video.duration = Math.floor(duration)
+
+    hlsOutputDir = path.join(
+      projectRoot,
+      'BACKEND',
+      'public',
+      'temp',
+      'hls',
+      video._id.toString()
+    )
+    await fs.ensureDir(hlsOutputDir)
+
+    // 1. Generate HLS segments
+    console.log('Generating HLS segments...')
+    await generateHLS(videoLocalPath, hlsOutputDir)
+    console.log('HLS segments generated.')
+
+    // 2. Upload HLS files to Cloudinary
+    console.log('Uploading HLS files to Cloudinary...')
+    const masterPlaylistUrl = await uploadHLSFiles(
+      hlsOutputDir,
+      video._id.toString()
+    )
+    console.log('HLS files uploaded.')
+
+    // 3. Generate and upload WebP preview
+    console.log('Generating WebP preview...')
+    webpTempPath = path.join(
+      projectRoot,
+      'BACKEND',
+      'public',
+      'temp',
+      `${video._id}-preview.webp`
+    )
+    await generateWebPPreview(videoLocalPath, webpTempPath, duration)
+    const webpUploadResponse = await uploadOnCloudinary(webpTempPath, {
+      public_id: `previews/${video._id}`,
+      resource_type: 'image'
+    })
+    if (webpUploadResponse) {
+      video.previewAnimationUrl = webpUploadResponse.secure_url
+    }
+    console.log('WebP preview generated and uploaded.')
+
+    // 4. Generate and upload Waveform image
+    console.log('Generating waveform image...')
+    waveformTempPath = path.join(
+      projectRoot,
+      'BACKEND',
+      'public',
+      'temp',
+      `${video._id}-waveform.png`
+    )
+    await generateWaveform(videoLocalPath, waveformTempPath)
+    const waveformUploadResponse = await uploadOnCloudinary(waveformTempPath, {
+      public_id: `waveforms/${video._id}`,
+      resource_type: 'image'
+    })
+    if (waveformUploadResponse) {
+      video.waveformUrl = waveformUploadResponse.secure_url
+    }
+    console.log('Waveform image generated and uploaded.')
+
+    // 5. Generate and upload Sprite Sheet and VTT
+    console.log('Generating sprite sheet and VTT...')
+    spriteSheetDir = path.join(
+      projectRoot,
+      'BACKEND',
+      'public',
+      'temp',
+      'sprites',
+      video._id.toString()
+    )
+    await fs.ensureDir(spriteSheetDir)
+    await generateSpriteSheetAndVtt(videoLocalPath, spriteSheetDir, duration)
+    const spriteSheetUploadResponse = await uploadOnCloudinary(
+      path.join(spriteSheetDir, 'sprite.jpg'),
+      { public_id: `sprites/${video._id}/sprite`, resource_type: 'image' }
+    )
+    const vttUploadResponse = await uploadOnCloudinary(
+      path.join(spriteSheetDir, 'sprite.vtt'),
+      { public_id: `sprites/${video._id}/sprite`, resource_type: 'raw' }
+    )
+    if (spriteSheetUploadResponse) {
+      video.spriteSheetUrl = spriteSheetUploadResponse.secure_url
+    }
+    if (vttUploadResponse) {
+      video.spriteSheetVttUrl = vttUploadResponse.secure_url
+    }
+    console.log('Sprite sheet and VTT generated and uploaded.')
+
+    // 6. Detect Intro
+    console.log('Detecting intro...')
+    sceneChangesPath = path.join(
+      projectRoot,
+      'BACKEND',
+      'public',
+      'temp',
+      `${video._id}-scenes.txt`
+    )
+    await detectIntro(videoLocalPath, sceneChangesPath)
+    const introTimestamps = await parseIntroTimestamps(sceneChangesPath)
+    if (introTimestamps) {
+      video.introStartTime = introTimestamps.introStartTime
+      video.introEndTime = introTimestamps.introEndTime
+    }
+    console.log('Intro detection complete.')
 
-        // 8. Update the video document
-        video.hlsMasterPlaylist = masterPlaylistUrl;
-        video.thumbnail = thumbnailUploadResponse?.secure_url || video.thumbnail;
-        video.processingStatus = "completed";
-        video.isPublished = true;
-        
-        await video.save();
-        console.log(`Successfully processed video: ${video.title} (${video._id})`);
-
-    } catch (error) {
-        console.error("Error processing video:", error);
-        if (video) {
-            video.processingStatus = "failed";
-            await video.save();
-        }
-    } finally {
-        // 9. Cleanup local files
-        if (video) {
-            await fs.unlink(video.videoFiles).catch(e => console.error("Error deleting video file:", e));
-            if (video.thumbnail && video.thumbnail.startsWith(projectRoot)) {
-                 await fs.unlink(video.thumbnail).catch(e => console.error("Error deleting thumbnail file:", e));
-            }
-        }
-        if (hlsOutputDir) await fs.remove(hlsOutputDir).catch(e => console.error("Error deleting HLS directory:", e));
-        if (webpTempPath) await fs.unlink(webpTempPath).catch(e => console.error("Error deleting WebP preview file:", e));
-        if (waveformTempPath) await fs.unlink(waveformTempPath).catch(e => console.error("Error deleting waveform file:", e));
-        if (spriteSheetDir) await fs.remove(spriteSheetDir).catch(e => console.error("Error deleting sprite sheet directory:", e));
-        if (sceneChangesPath) await fs.unlink(sceneChangesPath).catch(e => console.error("Error deleting scene changes file:", e));
-        
-        console.log(`Cleanup complete for video: ${video?._id}`);
+    // 7. Upload thumbnail (if it exists)
+    let thumbnailUploadResponse = null
+    if (video.thumbnail) {
+      thumbnailUploadResponse = await uploadOnCloudinary(video.thumbnail)
     }
-};
 
-const run = async () => {
-    try {
-        await connectDB();
-        console.log("Video processing worker started.");
-        setInterval(processVideo, 15000); // Check for new videos every 15 seconds
-    } catch (error) {
-        console.error("Failed to start video processing worker:", error);
-        process.exit(1);
+    // 8. Update the video document
+    video.hlsMasterPlaylist = masterPlaylistUrl
+    video.thumbnail = thumbnailUploadResponse?.secure_url || video.thumbnail
+    video.processingStatus = 'completed'
+    video.isPublished = true
+
+    await video.save()
+    console.log(`Successfully processed video: ${video.title} (${video._id})`)
+  } catch (error) {
+    console.error('Error processing video:', error)
+    if (video) {
+      video.processingStatus = 'failed'
+      await video.save()
+    }
+  } finally {
+    // 9. Cleanup local files
+    if (video) {
+      await fs
+        .unlink(video.videoFiles)
+        .catch((e) => console.error('Error deleting video file:', e))
+      if (video.thumbnail && video.thumbnail.startsWith(projectRoot)) {
+        await fs
+          .unlink(video.thumbnail)
+          .catch((e) => console.error('Error deleting thumbnail file:', e))
+      }
+    }
+    if (hlsOutputDir) {
+      await fs
+        .remove(hlsOutputDir)
+        .catch((e) => console.error('Error deleting HLS directory:', e))
+    }
+    if (webpTempPath) {
+      await fs
+        .unlink(webpTempPath)
+        .catch((e) => console.error('Error deleting WebP preview file:', e))
+    }
+    if (waveformTempPath) {
+      await fs
+        .unlink(waveformTempPath)
+        .catch((e) => console.error('Error deleting waveform file:', e))
+    }
+    if (spriteSheetDir) {
+      await fs
+        .remove(spriteSheetDir)
+        .catch((e) =>
+          console.error('Error deleting sprite sheet directory:', e)
+        )
+    }
+    if (sceneChangesPath) {
+      await fs
+        .unlink(sceneChangesPath)
+        .catch((e) => console.error('Error deleting scene changes file:', e))
     }
-};
 
-run();
+    console.log(`Cleanup complete for video: ${video?._id}`)
+  }
+}
 
+const run = async () => {
+  try {
+    await connectDB()
+    console.log('Video processing worker started.')
+    setInterval(processVideo, 15000) // Check for new videos every 15 seconds
+  } catch (error) {
+    console.error('Failed to start video processing worker:', error)
+    process.exit(1)
+  }
+}
+
+run()