Add ESLint rules and update video duration display

Author: codeAbinash

.eslintrc.cjs

@@ -7,5 +7,7 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    '@typescript-eslint/no-unused-vars': ['warn'],
+    '@typescript-eslint/no-explicit-any': 'off',
   },
 }

src/components/Video/VideoList.tsx

@@ -19,7 +19,7 @@ export default function VideoList({ videos }: { videos: NormalVideo[] | null })
           <img className='h-full w-full shrink-0 bg-cover object-cover' src={video.thumbnail} />
           <div className='absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent pb-1.5 pt-8 text-center'>
             <p className='text-sm font-[450]'>{video.title}</p>
-            <p className='text-xs opacity-70'>12 Min 13sec</p>
+            <p className='text-xs opacity-70'>{video.video_duration}</p>
           </div>
         </div>
       ))}

src/screens/Creator/index.tsx

@@ -1,21 +1,21 @@
-import { Outlet, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
-import transitions from '../../lib/transition'
-import Videos from './Videos'
 import { follow_unfollow_f, getCreatorProfile_f } from '@/lib/api'
-import { useEffect, useState } from 'react'
 import { nFormatter } from '@/lib/util'
-import { CreatorProfileT } from './types'
+import { useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import transitions from '../../lib/transition'
 import Playlist from './Playlist'
+import Videos from './Videos'
+import { CreatorProfileT } from './types'
 
 export function FollowButton({ videoDetails, creatorId }: { videoDetails: CreatorProfileT | null; creatorId: string }) {
+  const [followed, setFollowed] = useState(!!videoDetails?.is_followed)
   if (!videoDetails)
     return (
       <button className='highlight-none tap95 mt-2 rounded-full bg-color px-6 py-[0.6rem] text-sm font-[420] text-white'>
         Follow
       </button>
     )
 
-  const [followed, setFollowed] = useState(!!videoDetails.is_followed)
   const handelClick = async () => {
     transitions(() => setFollowed((prev) => !prev))()
     const res = await follow_unfollow_f(creatorId)
@@ -38,10 +38,10 @@ export function FollowButton({ videoDetails, creatorId }: { videoDetails: Creato
 
 function Creator() {
   const navigate = useNavigate()
-  const location = useLocation()
+  // const location = useLocation()
   const params = useParams()
   const creatorId = params.creator as string
-  const pathName = location.pathname
+  // const pathName = location.pathname
   const [currentTab, setCurrentTab] = useState<'videos' | 'playlist'>('videos')
 
   const [creatorProfile, setCreatorProfile] = useState<CreatorProfileT | null>(null)

src/types.ts

@@ -44,6 +44,7 @@ export interface NormalVideo {
   created_at: string
   updated_at: string
   live_api_data: null
+  video_duration: string
 }
 
 export interface Category {