Development

src/components/Inputs/MaterialInput.tsx

@@ -249,7 +249,7 @@ export const InlineSelectInput = ({
 		<select
 			name={name}
 			id={name}
-			className='inline-block outline-none bg-transparent py-2 text-right font-bold text-slate-500 dark:text-dark-text'
+			className='inline-block w-full outline-none bg-transparent py-2 text-right font-bold text-slate-500 dark:text-dark-text'
 			onChange={handler}
 			value={value || ''}
 			disabled={isLoading}

src/components/Layouts/ChannelNavLayout.tsx

@@ -1,13 +1,11 @@
 import { FC } from 'react';
 
 interface ChannelNavLayoutProps {
-    children: React.ReactNode;
+	children: React.ReactNode;
 }
 
 const ChannelNavLayout: FC<ChannelNavLayoutProps> = ({ children }) => {
-    return <div className="max-w-7xl mx-auto mt-5">
-        {children}
-    </div>
-}
+	return <div className='container mx-auto mt-5'>{children}</div>;
+};
 
-export default ChannelNavLayout;
+export default ChannelNavLayout;

src/components/Modals/NotificationModal/NotificationModal.tsx

@@ -11,7 +11,7 @@ interface NotificationModalProps {
 
 const NotificationModal: FC<NotificationModalProps> = ({ setOpen }) => {
 	return (
-		<div className='w-full sm:w-102 fixed right-0 md:right-24 top-14 bg-slate-100 dark:bg-dark-modal py-3 rounded-xl shadow-2xl z-30 overflow-hidden'>
+		<div className='w-full sm:w-102 fixed right-0 md:right-24 top-14 bg-slate-100 dark:bg-dark-modal dark:border border-dark-overlay-200 dark:shadow-lg py-3 rounded-xl shadow-2xl z-30 overflow-hidden'>
 			<h1 className='font-medium text-slate-800 dark:text-slate-300 border-b border-slate-300 dark:border-dark-text/30 px-3 pb-2'>
 				Notifications
 			</h1>

src/components/Modals/UserModal.tsx

@@ -26,7 +26,7 @@ const UserModal: FC<UserModalProps> = ({ setOpenedModal }) => {
 	};
 
 	return (
-		<div className='w-full sm:w-72 fixed right-0 md:right-5 top-14 bg-slate-100 dark:bg-dark-modal rounded-xl shadow-2xl z-30 overflow-hidden transition-colors duration-300'>
+		<div className='w-full sm:w-72 fixed right-0 md:right-5 top-14 bg-slate-100 dark:bg-dark-modal dark:border border-dark-overlay-200 dark:shadow-lg rounded-xl shadow-2xl z-30 overflow-hidden transition-colors duration-300'>
 			<div className='flex gap-4 border-b border-slate-300 dark:border-dark-text/30 p-3'>
 				<FaCircleUser className='w-9 h-9' />
 				<div className=''>

src/components/SearchBar/PreSearch.tsx

@@ -43,7 +43,7 @@ const SearchPreview = ({ setSearchTerm, search, history }: SP) => {
 	const navigate = useNavigate();
 
 	return (
-		<li className='flex items-stretch hover:bg-indigo-200/50 dark:hover:bg-dark-overlay-100'>
+		<li className='flex w-full items-stretch hover:bg-indigo-200/50 dark:hover:bg-dark-overlay-100'>
 			<button
 				onClick={() => {
 					if (search) {

src/components/SearchBar/SearchBar.tsx

@@ -26,7 +26,7 @@ const SearchBar = () => {
 			<input
 				type='search'
 				name='search'
-				className='w-full pl-5 pr-3 py-2 bg-transparent outline-none tracking-wider search-bar rounded-l-full border border-indigo-200 dark:border-dark-text/20 dark:text-slate-300'
+				className='hidden md:block w-full pl-5 pr-3 py-2 bg-transparent outline-none tracking-wider search-bar rounded-l-full border border-indigo-200 dark:border-dark-text/20 dark:text-slate-300'
 				placeholder='Search'
 				value={searchTerm}
 				onChange={handleSearchTerm}
@@ -36,7 +36,7 @@ const SearchBar = () => {
 			<button
 				type='submit'
 				title='Search'
-				className='bg-indigo-100 dark:bg-transparent w-16 grid place-content-center rounded-r-full border border-indigo-200 dark:border-dark-text/20'
+				className='bg-indigo-100 dark:bg-transparent w-16 grid place-content-center rounded-r-full md:border border-indigo-200 dark:border-dark-text/20'
 			>
 				<FiSearch className='w-6 h-6 text-slate-700 dark:text-slate-300' />
 			</button>

src/components/VideoPlayer/VideoPlayer.tsx

@@ -103,29 +103,11 @@ const VideoPlayer = ({ source, metaData, isLoading, thumbnail }: Props) => {
 						crossOrigin='anonymous'
 						preload='auto'
 						autoPlay
-						className='w-full h-full aspect-video'
+						className={`aspect-video  ${
+							!isPlaylistExist ? '2xl:h-[80vh]' : 'h-full '
+						}`}
 					>
 						<source ref={vidSrcRef} src='' type='video/mp4' />
-						{/* <source src={source} type='video/mp4' /> */}
-						{/* <track
-						label='English'
-						kind='subtitles'
-						srcLang='en'
-						src='captions/vtt/sintel-en.vtt'
-						default
-					/>
-					<track
-						label='Deutsch'
-						kind='subtitles'
-						srcLang='de'
-						src='captions/vtt/sintel-de.vtt'
-					/>
-					<track
-						label='Español'
-						kind='subtitles'
-						srcLang='es'
-						src='captions/vtt/sintel-es.vtt'
-					/> */}
 					</video>
 				</div>
 				<ul
@@ -203,7 +185,7 @@ const VideoPlayer = ({ source, metaData, isLoading, thumbnail }: Props) => {
 				</ul>
 			</div>
 
-			{query.has('p') && (
+			{isPlaylistExist && (
 				<Playlist
 					vidRef={vidRef}
 					playlist={metaData.playlist}

src/index.css

@@ -99,6 +99,8 @@
 .cHeight {
   /* max-height: 100%; */
   max-height: var(--max-height);
+
+  height: 100%;
 }
 
 /* 

src/pages/profiles/channel/ChannelProfile.tsx

@@ -79,20 +79,24 @@ const ChannelProfile = () => {
 							/>
 						</div>
 						<div className='flex-1 max-w-lg'>
-							<h1 className='text-2xl tracking-wider'>{profile?.fullname}</h1>
+							<h1 className='text-2xl tracking-wider dark:text-slate-300'>
+								{profile?.fullname}
+							</h1>
 							<p className='space-x-2'>
-								<span className='font-medium text-sm text-gray-900'>
+								<span className='font-medium text-sm text-gray-900 dark:text-dark-text'>
 									@{profile?.username}
 								</span>
-								<span className='text-gray-900'>
+								<span className='text-gray-900 dark:text-dark-text'>
 									{profile.totalFollowers} followers
 								</span>
-								<span className='text-gray-900'>
+								<span className='text-gray-900 dark:text-dark-text'>
 									{profile.totalVideos} videos
 								</span>
 							</p>
 							<div className='flex items-center mt-3'>
-								<span className='line-clamp-1'>{profile.about}</span>
+								<span className='line-clamp-1 dark:text-slate-300'>
+									{profile.about}
+								</span>
 								<Link to='about'>
 									<FiChevronRight className='w-7 h-7 text-gray-700 dark:text-slate-300' />
 								</Link>
@@ -109,7 +113,7 @@ const ChannelProfile = () => {
 				</div>
 			</div>
 
-			<div className='border-b border-gray-300 mt-5'>
+			<div className='border-b border-gray-300 dark:border-dark-text/20 mt-5'>
 				<div className='container mx-auto w-full overflow-auto scrollbar-track-slate-200 scrollbar-thin scrollbar-thumb-slate-700 scrollbar-thumb-rounded-full'>
 					<ChannelNav />
 				</div>

src/pages/profiles/channel/partials/ChannelNav.tsx

@@ -3,60 +3,67 @@ import { NavLink } from 'react-router-dom';
 
 const ChannelNav = () => {
 	return (
-		<ul className='flex items-center gap-8'>
-			<NavLink
-				to={`featured`}
-				className={({ isActive }) =>
-					!isActive
-						? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium'
-						: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 font-medium px-5 py-2'
-				}
-			>
-				HOME
-			</NavLink>
-			<NavLink
-				to={`videos`}
-				className={({ isActive }) =>
-					!isActive
-						? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium'
-						: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 font-medium px-5 py-2'
-				}
-			>
-				VIDEOS
-			</NavLink>
-			<NavLink
-				to={`playlists`}
-				className={({ isActive }) =>
-					!isActive
-						? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium'
-						: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 font-medium px-5 py-2'
-				}
-			>
-				PLAYLISTS
-			</NavLink>
-			{/* <NavLink to={`channels`} className={({ isActive }) => (
-            !isActive ? "text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium" : "text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 font-medium px-5 py-2"
-        )}>CHANNELS</NavLink> */}
-			<NavLink
-				to={`about`}
-				className={({ isActive }) =>
-					!isActive
-						? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium'
-						: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 font-medium px-5 py-2'
-				}
-			>
-				ABOUT
-			</NavLink>
-			<NavLink
-				to={`@stacklearner7`}
-				className={({ isActive }) =>
-					!isActive
-						? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium'
-						: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 font-medium px-5 py-2'
-				}
-			>
-				<FiSearch />
-			</NavLink>
+		<ul className='flex items-center gap-8 mt-5'>
+			<li className='flex justify-center items-center h-full'>
+				<NavLink
+					to={`featured`}
+					className={({ isActive }) =>
+						!isActive
+							? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium dark:text-slate-300'
+							: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 dark:bg-dark-overlay-100 dark:hover:bg-dark-overlay-200 dark:text-slate-300 dark:border-dark-text/70 font-medium px-5 py-2'
+					}
+				>
+					HOME
+				</NavLink>
+			</li>
+			<li className='flex justify-center items-center h-full'>
+				<NavLink
+					to={`videos`}
+					className={({ isActive }) =>
+						!isActive
+							? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium dark:text-slate-300'
+							: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 dark:bg-dark-overlay-100 dark:hover:bg-dark-overlay-200 dark:text-slate-300 dark:border-dark-text/70 font-medium px-5 py-2'
+					}
+				>
+					VIDEOS
+				</NavLink>
+			</li>
+			<li className='flex justify-center items-center h-full'>
+				<NavLink
+					to={`playlists`}
+					className={({ isActive }) =>
+						!isActive
+							? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium dark:text-slate-300'
+							: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 dark:bg-dark-overlay-100 dark:hover:bg-dark-overlay-200 dark:text-slate-300 dark:border-dark-text/70 font-medium px-5 py-2'
+					}
+				>
+					PLAYLISTS
+				</NavLink>
+			</li>
+			<li className='flex justify-center items-center h-full'>
+				<NavLink
+					to={`about`}
+					className={({ isActive }) =>
+						!isActive
+							? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium dark:text-slate-300'
+							: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 dark:bg-dark-overlay-100 dark:hover:bg-dark-overlay-200 dark:text-slate-300 dark:border-dark-text/70 font-medium px-5 py-2'
+					}
+				>
+					ABOUT
+				</NavLink>
+			</li>
+			<li className='flex justify-center items-center h-full'>
+				<NavLink
+					to={`@stacklearner7`}
+					className={({ isActive }) =>
+						!isActive
+							? 'text-gray-700/90 border-b-2 border-transparent px-5 py-2 font-medium dark:text-slate-300'
+							: 'text-gray-800 border-b-2 border-gray-700 bg-gray-700/10 dark:bg-dark-overlay-100 dark:hover:bg-dark-overlay-200 dark:text-slate-300 dark:border-dark-text/70 font-medium px-5 py-2'
+					}
+				>
+					<FiSearch />
+				</NavLink>
+			</li>
 		</ul>
 	);
 };

src/pages/profiles/channel/upload/UploadVideo.tsx

@@ -270,7 +270,7 @@ const UploadVideo = () => {
 
 	return (
 		<div className='flex-1 overflow-y-scroll p-3 md:p-10'>
-			<div className='w-full bg-white dark:bg-dark-overlay-100/30 rounded-lg'>
+			<div className='w-full bg-white dark:bg-dark-overlay-100/30 dark:border border-dark-overlay-200 dark:shadow-lg rounded-lg'>
 				{/* upload process info */}
 				<div className='flex items-stretch gap-3 p-5 border-b border-slate-300 dark:border-dark-text/50'>
 					<div className='w-32 h-32 border border-indigo-300 dark:border-none rounded-lg'>
@@ -323,7 +323,7 @@ const UploadVideo = () => {
 					</div>
 				</div>
 				{/* upload metadata info */}
-				<div className='flex items-stretch gap-3'>
+				<div className='flex flex-col md:flex-row justify-center md:justify-start items-stretch gap-3'>
 					{/* video metadata form */}
 					<div className='flex-1 flex flex-col gap-3 px-5 py-3'>
 						<h2 className='font-bold text-base tracking-wide text-slate-500 dark:text-slate-300'>
@@ -366,7 +366,7 @@ const UploadVideo = () => {
 						/>
 					</div>
 					{/* video metadata aside */}
-					<div className='w-48 md:w-52 lg:w-64 p-3 sm:border-l sm:border-slate-300 dark:sm:border-dark-text/50 flex flex-col gap-1'>
+					<div className='w-full md:w-52 lg:w-64 p-3 sm:border-l sm:border-slate-300 dark:sm:border-dark-text/50 flex flex-col gap-1'>
 						<h2 className='font-bold text-base tracking-wide text-slate-500 dark:text-slate-300 mb-5'>
 							More Settings
 						</h2>

src/pages/profiles/channel/upload/partials/AudienceSetting.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 const AudienceSetting = ({ status, handle }: Props) => {
 	return (
-		<div className='flex items-center justify-between gap-2 text-xs'>
+		<div className='flex w-full items-center justify-between gap-2 text-xs'>
 			<div className='flex items-center gap-1'>
 				{status === 'PUBLIC' ? (
 					<FiGlobe className='w-4 h-4 text-slate-500 dark:text-dark-text' />

src/pages/profiles/video/partials/Playlist.tsx

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useRef, useState } from 'react';
 import { FiChevronDown, FiX } from 'react-icons/fi';
 import PlaylistProfileThumbnail from '../../../../components/PlaylistProfileThumbnail';
 import useQuery from '../../../../hooks/useQuery';
@@ -12,10 +12,16 @@ type PlaylistProps = {
 	vidRef?: React.RefObject<HTMLVideoElement>;
 };
 
-const Playlist: React.FC<PlaylistProps> = ({ playlist, isLoading, vidRef }) => {
+const Playlist: React.FC<PlaylistProps> = memo(function Playlist({
+	playlist,
+	isLoading,
+	vidRef,
+}) {
 	const query = useQuery();
 	const [playlistOpen, setPlaylistOpen] = useState(true);
 
+	console.log('rendering');
+
 	const playlistRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
@@ -35,7 +41,7 @@ const Playlist: React.FC<PlaylistProps> = ({ playlist, isLoading, vidRef }) => {
 				`${resizeVidHeight! - 95}px`
 			);
 		});
-	}, [vidRef, vidRef?.current?.clientHeight]);
+	}, [vidRef, vidRef?.current?.clientHeight, playlistOpen]);
 
 	if (isLoading) {
 		return (
@@ -107,6 +113,5 @@ const Playlist: React.FC<PlaylistProps> = ({ playlist, isLoading, vidRef }) => {
 			)}
 		</div>
 	);
-};
-
+});
 export default Playlist;