From 1774c7b9f26e859ffce5dec2250f5066418504b1 Mon Sep 17 00:00:00 2001
From: A B M Zubayer <zubayerabm47@gmail.com>
Date: Thu, 21 Sep 2023 23:27:45 +0600
Subject: [PATCH 1/3] FIX: dark mode, modal border and shadow

---
 src/components/Inputs/MaterialInput.tsx       |   2 +-
 src/components/Layouts/ChannelNavLayout.tsx   |  10 +-
 .../NotificationModal/NotificationModal.tsx   |   2 +-
 src/components/Modals/UserModal.tsx           |   2 +-
 src/pages/profiles/channel/ChannelProfile.tsx |  16 ++-
 .../profiles/channel/partials/ChannelNav.tsx  | 115 ++++++++++--------
 .../upload/partials/AudienceSetting.tsx       |   2 +-
 7 files changed, 79 insertions(+), 70 deletions(-)

diff --git a/src/components/Inputs/MaterialInput.tsx b/src/components/Inputs/MaterialInput.tsx
index c8535c5..925f410 100644
--- a/src/components/Inputs/MaterialInput.tsx
+++ b/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}
diff --git a/src/components/Layouts/ChannelNavLayout.tsx b/src/components/Layouts/ChannelNavLayout.tsx
index fa59073..bd16fc2 100644
--- a/src/components/Layouts/ChannelNavLayout.tsx
+++ b/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;
\ No newline at end of file
+export default ChannelNavLayout;
diff --git a/src/components/Modals/NotificationModal/NotificationModal.tsx b/src/components/Modals/NotificationModal/NotificationModal.tsx
index 7f16282..773bb33 100644
--- a/src/components/Modals/NotificationModal/NotificationModal.tsx
+++ b/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>
diff --git a/src/components/Modals/UserModal.tsx b/src/components/Modals/UserModal.tsx
index 62084b6..cb919e6 100644
--- a/src/components/Modals/UserModal.tsx
+++ b/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=''>
diff --git a/src/pages/profiles/channel/ChannelProfile.tsx b/src/pages/profiles/channel/ChannelProfile.tsx
index 8d788cf..bb4c79d 100644
--- a/src/pages/profiles/channel/ChannelProfile.tsx
+++ b/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>
diff --git a/src/pages/profiles/channel/partials/ChannelNav.tsx b/src/pages/profiles/channel/partials/ChannelNav.tsx
index f5090ff..78566d8 100644
--- a/src/pages/profiles/channel/partials/ChannelNav.tsx
+++ b/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>
 	);
 };
diff --git a/src/pages/profiles/channel/upload/partials/AudienceSetting.tsx b/src/pages/profiles/channel/upload/partials/AudienceSetting.tsx
index 4709773..3c0551a 100644
--- a/src/pages/profiles/channel/upload/partials/AudienceSetting.tsx
+++ b/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' />

From 8c874e5a825c162bf78cf95484444e641bfd37d3 Mon Sep 17 00:00:00 2001
From: A B M Zubayer <zubayerabm47@gmail.com>
Date: Thu, 21 Sep 2023 23:29:21 +0600
Subject: [PATCH 2/3] FIX: border in dark mode on UploadVideo, fix a little bit
 of responsive

---
 src/components/SearchBar/PreSearch.tsx            | 2 +-
 src/components/SearchBar/SearchBar.tsx            | 4 ++--
 src/pages/profiles/channel/upload/UploadVideo.tsx | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/SearchBar/PreSearch.tsx b/src/components/SearchBar/PreSearch.tsx
index a8e3aa8..391e1ae 100644
--- a/src/components/SearchBar/PreSearch.tsx
+++ b/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) {
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
index 3d8fc5b..f2cfdb3 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/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>
diff --git a/src/pages/profiles/channel/upload/UploadVideo.tsx b/src/pages/profiles/channel/upload/UploadVideo.tsx
index 6d3c031..f350e0e 100644
--- a/src/pages/profiles/channel/upload/UploadVideo.tsx
+++ b/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>

From 051be4edd49780775ede052d0595ddb8b1586352 Mon Sep 17 00:00:00 2001
From: A B M Zubayer <zubayerabm47@gmail.com>
Date: Thu, 21 Sep 2023 23:30:02 +0600
Subject: [PATCH 3/3] FIX: videoPlayer and playlist height issue

---
 src/components/VideoPlayer/VideoPlayer.tsx    | 26 +++-----------
 src/index.css                                 |  2 ++
 .../profiles/video/partials/Playlist.tsx      | 15 +++++---
 .../profiles/video/partials/VideoBody.tsx     | 34 ++++++++++---------
 4 files changed, 34 insertions(+), 43 deletions(-)

diff --git a/src/components/VideoPlayer/VideoPlayer.tsx b/src/components/VideoPlayer/VideoPlayer.tsx
index 5772bdf..aebdda1 100644
--- a/src/components/VideoPlayer/VideoPlayer.tsx
+++ b/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}
diff --git a/src/index.css b/src/index.css
index 16fa4df..0399016 100644
--- a/src/index.css
+++ b/src/index.css
@@ -99,6 +99,8 @@
 .cHeight {
   /* max-height: 100%; */
   max-height: var(--max-height);
+
+  height: 100%;
 }
 
 /* 
diff --git a/src/pages/profiles/video/partials/Playlist.tsx b/src/pages/profiles/video/partials/Playlist.tsx
index 09b1858..fe59da6 100644
--- a/src/pages/profiles/video/partials/Playlist.tsx
+++ b/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;
diff --git a/src/pages/profiles/video/partials/VideoBody.tsx b/src/pages/profiles/video/partials/VideoBody.tsx
index 7f2268b..4628672 100644
--- a/src/pages/profiles/video/partials/VideoBody.tsx
+++ b/src/pages/profiles/video/partials/VideoBody.tsx
@@ -23,27 +23,29 @@ const VideoBody: React.FC<VideoBodyProps> = ({ metaData }) => {
 				{metaData.title}
 			</p>
 
-			<div className='flex justify-between gap-3 my-5'>
-				<div className='flex gap-2 items-center'>
-					<Link to={`/ch/${metaData.channelId}`} type='button'>
-						<FaCircleUser className='h-10 w-10' />
-					</Link>
-					<p className='flex flex-col justify-center'>
-						<Link
-							to={`/ch/${metaData.channelId}`}
-							className='font-bold dark:text-slate-200 text-inherit'
-						>
-							{metaData?.channel?.name}
+			<div className='flex flex-col md:flex-row justify-between gap-3 my-5'>
+				<div className='flex justify-between md:justify-start items-center gap-2'>
+					<div className='flex items-center gap-2'>
+						<Link to={`/ch/${metaData.channelId}`} type='button'>
+							<FaCircleUser className='h-10 w-10' />
 						</Link>
-						<span className='text-sm text-gray-800 dark:text-slate-400'>
-							{metaData.followers} followers
-						</span>
-					</p>
+						<p className='flex flex-col justify-center'>
+							<Link
+								to={`/ch/${metaData.channelId}`}
+								className='font-bold dark:text-slate-200 text-inherit'
+							>
+								{metaData?.channel?.name}
+							</Link>
+							<span className='text-sm text-gray-800 dark:text-slate-400'>
+								{metaData.followers} followers
+							</span>
+						</p>
+					</div>
 
 					<FollowButton channel_id={metaData.channelId} />
 				</div>
 
-				<div className='flex gap-2 items-center'>
+				<div className='flex gap-2 items-center justify-end md:justify-start'>
 					<div className='bg-indigo-100 dark:bg-dark-overlay-100 rounded-full overflow-hidden'>
 						<button
 							type='button'