Skip to content

Commit

Permalink
made the ui cleaner
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pratham271
Pratham271 committed Apr 2, 2024
1 parent 9157047 commit 95d59c3
Show file tree
Hide file tree
Showing 8 changed files with 184 additions and 122 deletions.
120 changes: 78 additions & 42 deletions src/components/Appbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,12 @@ import { ThemeToggler } from './ThemeToggler';
import { NavigationMenu } from './landing/appbar/nav-menu';
import SearchBar from './search/SearchBar';
import MobileScreenSearch from './search/MobileScreenSearch';
import { useState } from 'react';

export const Appbar = () => {
const session = useSession();
const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
const [dropdownOpen, setDropdownOpen] = useState(false);
const currentPath = usePathname();
const params = useParams();
let bookmarkPageUrl = null;
Expand All @@ -45,55 +47,89 @@ export const Appbar = () => {
<div className="hidden md:block">
<SearchBar />
</div>

<div className="flex items-center space-x-2">
{/* Search Bar for smaller devices */}
{/* sm:flex md:w-auto md:block*/}
<MobileScreenSearch />

<div className="flex items-center space-x-2">
<div className="hidden sm:flex items-center justify-around md:w-auto md:block space-x-2">
{currentPath.includes('courses') && bookmarkPageUrl && (
<Button
variant="link"
className={
currentPath === bookmarkPageUrl
? 'font-bold underline'
: ''
}
size={'sm'}
asChild
<div className="hidden sm:flex">
<div className="hidden sm:flex h-8 w-8 bg-slate-100 text-black dark:bg-gray-600 rounded-full items-center text-center dark:text-white flex-col justify-center">
<button
onClick={() => setDropdownOpen(!dropdownOpen)}
type="button"
id="dropdownHoverButton"
data-dropdown-toggle="dropdownHover"
data-dropdown-trigger="hover"
>
<Link href={bookmarkPageUrl}>Bookmarks</Link>
</Button>
<span className="user-name">
{session.data?.user?.name?.charAt(0).toUpperCase()}
</span>
</button>
</div>
{dropdownOpen && (
<div className=" z-20 dark:bg-gray-800 p-4 dark:text-white bg-white fixed top-[52px] right-[36px] divide-y divide-gray-100 rounded-lg shadow w-44 items-center justify-around space-x-2">
<ul
aria-labelledby="dropdownHoverButton"
className="w-full items-center text-center"
>
<li>
{currentPath.includes('courses') &&
bookmarkPageUrl && (
<Button
variant="link"
className={
currentPath === bookmarkPageUrl
? 'font-bold underline'
: ''
}
size={'sm'}
asChild
>
<Link href={bookmarkPageUrl}>Bookmarks</Link>
</Button>
)}
</li>
<li>
<Button variant={'link'} size={'sm'} asChild>
<JoinDiscord isNavigated={false} />
</Button>
</li>
<li>
<Button size={'sm'} variant={'link'} asChild>
<Link
href={'https://projects.100xdevs.com/'}
target="_blank"
>
Slides
</Link>
</Button>
</li>
<li>
<Button size={'sm'} variant={'link'} asChild>
<Link
href={
'https://github.com/100xdevs-cohort-2/assignments'
}
target="_blank"
>
Assignments
</Link>
</Button>
</li>
<li>
<Button size={'sm'} variant={'link'} asChild>
<Link href={'/history'}>Watch History</Link>
</Button>
</li>
<li>
<AppbarAuth />
</li>
</ul>
</div>
)}

<Button variant={'link'} size={'sm'} asChild>
<JoinDiscord isNavigated={false} />
</Button>

<Button size={'sm'} variant={'link'} asChild>
<Link
href={'https://projects.100xdevs.com/'}
target="_blank"
>
Slides
</Link>
</Button>

<Button size={'sm'} variant={'link'} asChild>
<Link
href={
'https://github.com/100xdevs-cohort-2/assignments'
}
target="_blank"
>
Assignments
</Link>
</Button>
<Button size={'sm'} variant={'link'} asChild>
<Link href={'/history'}>Watch History</Link>
</Button>
<AppbarAuth />
</div>

<ThemeToggler />

<div className="block sm:hidden">
Expand Down
2 changes: 1 addition & 1 deletion src/components/FolderView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const FolderView = ({
return (
<div>
<div></div>
<div className="max-w-screen-xl justify-between mx-auto p-4 cursor-pointer grid grid-cols-1 gap-5 md:grid-cols-3">
<div className="max-w-screen-xl justify-between p-4 cursor-pointer grid grid-cols-1 gap-5 md:grid-cols-3">
{courseContent.map((content) => {
const videoProgressPercent =
content.type === 'video' &&
Expand Down
2 changes: 1 addition & 1 deletion src/components/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export function Sidebar({
}

return (
<div className="overflow-y-scroll h-sidebar w-[300px] min-w-[133px] bg-gray-50 dark:bg-gray-800 cursor-pointer sticky top-[64px] self-start w-84">
<div className="overflow-y-scroll h-sidebar w-[300px] min-w-[133px] bg-gray-50 dark:bg-gray-800 cursor-pointer absolute z-20 top-[64px] self-start w-84">
<div className="flex">
{/* <ToggleButton
onClick={() => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/VideoContentChapters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const VideoContentChapters = ({
}, [player]);

return (
<div className="w-full lg:w-1/3 rounded-md shadow-md border text-sm">
<div className="w-full lg:w-[30%] rounded-md shadow-md border text-sm">
<div className="flex items-center justify-between p-2 py-3 dark:bg-[#212020] bg-[#F5F5F5]">
<span>Chapters</span>
<X onClick={onCancel} className="cursor-pointer" />
Expand Down
146 changes: 81 additions & 65 deletions src/components/VideoPlayer2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import 'videojs-seek-buttons';
import { handleMarkAsCompleted } from '@/lib/utils';
import { useSearchParams } from 'next/navigation';
import './QualitySelectorControllBar';
import { useRecoilValue } from 'recoil';
import { sidebarOpen } from '@/store/atoms/sidebar';

// todo correct types
interface VideoPlayerProps {
Expand All @@ -38,6 +40,8 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
const playerRef = useRef<Player | null>(null);
const [player, setPlayer] = useState<any>(null);
const searchParams = useSearchParams();
const isSidebarOpen = useRecoilValue(sidebarOpen);

useEffect(() => {
const t = searchParams.get('timestamp');
if (contentId && player && !t) {
Expand Down Expand Up @@ -76,6 +80,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
const currentIndexDown = VOLUME_LEVELS.indexOf(player.volume());
const newIndexDown =
currentIndexDown !== 0 ? currentIndexDown - 1 : currentIndexDown;

switch (event.code) {
case 'Period': // Increase playback speed
player.playbackRate(PLAYBACK_RATES[newIndexPeriod]);
Expand Down Expand Up @@ -125,71 +130,73 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
) {
return; // Do nothing if the active element is an input or textarea
}
switch (event.code) {
case 'Space': // Space bar for play/pause
if (player.paused()) {
player.play();
if (!isSidebarOpen) {
switch (event.code) {
case 'Space': // Space bar for play/pause
if (player.paused()) {
player.play();
event.stopPropagation();
} else {
player.pause();
event.stopPropagation();
}
event.preventDefault();
break;
case 'ArrowRight': // Right arrow for seeking forward 5 seconds
player.currentTime(player.currentTime() + 5);
event.stopPropagation();
} else {
player.pause();
break;
case 'ArrowLeft': // Left arrow for seeking backward 5 seconds
player.currentTime(player.currentTime() - 5);
event.stopPropagation();
}
event.preventDefault();
break;
case 'ArrowRight': // Right arrow for seeking forward 5 seconds
player.currentTime(player.currentTime() + 5);
event.stopPropagation();
break;
case 'ArrowLeft': // Left arrow for seeking backward 5 seconds
player.currentTime(player.currentTime() - 5);
event.stopPropagation();
break;
case 'KeyF': // F key for fullscreen
if (player.isFullscreen_) document.exitFullscreen();
else player.requestFullscreen();
event.stopPropagation();
break;
case 'KeyR': // 'R' key to restart playback from the beginning
player.currentTime(0);
event.stopPropagation();
break;
case 'KeyM': // 'M' key to toggle mute/unmute
if (player.volume() === 0) {
player.volume(1);
} else {
player.volume(0);
}
event.stopPropagation();
break;
case 'KeyK': // 'K' key for play/pause toggle
if (player.paused()) {
player.play();
} else {
player.pause();
}
event.stopPropagation();
break;
case 'KeyJ': // 'J' key for seeking backward 10 seconds multiplied by the playback rate
player.currentTime(
player.currentTime() - 10 * player.playbackRate(),
);
event.stopPropagation();
break;
case 'KeyL': // 'L' key for seeking forward 10 seconds multiplied by the playback rate
player.currentTime(
player.currentTime() + 10 * player.playbackRate(),
);
event.stopPropagation();
break;
case 'KeyC':
if (subtitles && player.textTracks().length) {
if (player.textTracks()[0].mode === 'showing') {
player.textTracks()[0].mode = 'hidden';
break;
case 'KeyF': // F key for fullscreen
if (player.isFullscreen_) document.exitFullscreen();
else player.requestFullscreen();
event.stopPropagation();
break;
case 'KeyR': // 'R' key to restart playback from the beginning
player.currentTime(0);
event.stopPropagation();
break;
case 'KeyM': // 'M' key to toggle mute/unmute
if (player.volume() === 0) {
player.volume(1);
} else {
player.volume(0);
}
event.stopPropagation();
break;
case 'KeyK': // 'K' key for play/pause toggle
if (player.paused()) {
player.play();
} else {
player.textTracks()[0].mode = 'showing';
player.pause();
}
event.stopPropagation();
break;
case 'KeyJ': // 'J' key for seeking backward 10 seconds multiplied by the playback rate
player.currentTime(
player.currentTime() - 10 * player.playbackRate(),
);
event.stopPropagation();
break;
case 'KeyL': // 'L' key for seeking forward 10 seconds multiplied by the playback rate
player.currentTime(
player.currentTime() + 10 * player.playbackRate(),
);
event.stopPropagation();
break;
case 'KeyC':
if (subtitles && player.textTracks().length) {
if (player.textTracks()[0].mode === 'showing') {
player.textTracks()[0].mode = 'hidden';
} else {
player.textTracks()[0].mode = 'showing';
}
}
break;
}
break;
}
}
};
Expand All @@ -207,7 +214,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
return () => {
document.removeEventListener('keydown', handleKeyPress);
};
}, [player]);
}, [player, isSidebarOpen]);

useEffect(() => {
if (!player) {
Expand Down Expand Up @@ -250,13 +257,21 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
window.clearInterval(interval);
onVideoEnd();
};
if (isSidebarOpen === true) {
// Detach event listeners
player.off('play', handleVideoProgress);
player.off('ended', handleVideoEnded);
player.controls(false);
} else {
player.on('play', handleVideoProgress);
player.on('ended', () => handleVideoEnded(interval));
player.controls(true);
}

player.on('play', handleVideoProgress);
player.on('ended', () => handleVideoEnded(interval));
return () => {
window.clearInterval(interval);
};
}, [player, contentId]);
}, [player, contentId, isSidebarOpen]);

useEffect(() => {
if (!playerRef.current && videoRef.current) {
Expand Down Expand Up @@ -352,10 +367,11 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
player.currentTime(parseInt(t, 10));
}
}, [searchParams, player]);

return (
<div
data-vjs-player
className="mx-auto md:max-w-[calc(100vw-3rem)] 2xl:max-w-[calc(100vw-17rem)]"
className="md:max-w-[calc(100vw-3rem)] 2xl:max-w-[calc(100vw-17rem)]"
>
<div ref={videoRef} />
</div>
Expand Down
Loading

0 comments on commit 95d59c3

Please sign in to comment.