[fixes]/ 370: Navbar responsiveness

code100x · Apr 11, 2024 · 8ce41a7 · 8ce41a7
1 parent 099a601
commit 8ce41a7
Show file tree

Hide file tree

Showing 11 changed files with 436 additions and 648 deletions.
diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
@@ -42,7 +42,7 @@ export const Appbar = () => {
 
           {session?.data?.user ? (
             <>
-              <div className="hidden md:block">
+              <div className="hidden lg:block">
                 <SearchBar />
               </div>
               <div className="flex items-center space-x-2">

diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
@@ -21,12 +21,12 @@ export const CourseCard = ({
       <div className="relative">
         {course.totalVideos !== undefined &&
           course.totalVideosWatched !== undefined && (
-          <PercentageComplete
-            percent={Math.ceil(
-              (course.totalVideosWatched / course.totalVideos) * 100,
-            )}
-          />
-        )}
+            <PercentageComplete
+              percent={Math.ceil(
+                (course.totalVideosWatched / course.totalVideos) * 100,
+              )}
+            />
+          )}
       </div>
       <img src={course.imageUrl} alt={course.title} className="rounded-md" />
       <div className="p-2">

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -157,16 +157,16 @@ export function ToggleButton({
       <span
         className={`dark:bg-white bg-black block transition-all duration-300 ease-out 
                     h-0.5 w-6 rounded-sm my-0.5 ${
-    !sidebarOpen ? 'opacity-0' : 'opacity-100'
-    }`}
+                      !sidebarOpen ? 'opacity-0' : 'opacity-100'
+                    }`}
       ></span>
       <span
         className={`dark:bg-white bg-black block transition-all duration-300 ease-out 
                     h-0.5 w-6 rounded-sm ${
-    !sidebarOpen
-      ? '-rotate-45 -translate-y-1'
-      : 'translate-y-0.5'
-    }`}
+                      !sidebarOpen
+                        ? '-rotate-45 -translate-y-1'
+                        : 'translate-y-0.5'
+                    }`}
       ></span>
     </button>
   );

diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx
@@ -22,23 +22,23 @@ export const VideoPlayer = ({
     }
     const handleKeyPress = (event: any) => {
       switch (event.code) {
-      case 'Space': // Space bar for play/pause
-        if (player.paused()) {
-          player.play();
+        case 'Space': // Space bar for play/pause
+          if (player.paused()) {
+            player.play();
+            event.stopPropagation();
+          } else {
+            player.pause();
+            event.stopPropagation();
+          }
+          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();
-        }
-        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;
+          break;
       }
     };
 

diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
@@ -77,40 +77,40 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
         const newIndexDown =
           currentIndexDown !== 0 ? currentIndexDown - 1 : currentIndexDown;
         switch (event.code) {
-        case 'Period': // Increase playback speed
-          player.playbackRate(PLAYBACK_RATES[newIndexPeriod]);
-          event.stopPropagation();
-          break;
-        case 'Comma': // Decrease playback speed
-          player.playbackRate(PLAYBACK_RATES[newIndexComma]);
-          event.stopPropagation();
-          break;
-        case 'ArrowUp': // Increase volume
-          videoRef.current?.children[0].children[6].children[3].classList.add(
-            'vjs-hover',
-          );
-          if (volumeSetTimeout !== null) clearTimeout(volumeSetTimeout);
-          volumeSetTimeout = setTimeout(() => {
-            videoRef.current?.children[0].children[6].children[3].classList.remove(
+          case 'Period': // Increase playback speed
+            player.playbackRate(PLAYBACK_RATES[newIndexPeriod]);
+            event.stopPropagation();
+            break;
+          case 'Comma': // Decrease playback speed
+            player.playbackRate(PLAYBACK_RATES[newIndexComma]);
+            event.stopPropagation();
+            break;
+          case 'ArrowUp': // Increase volume
+            videoRef.current?.children[0].children[6].children[3].classList.add(
               'vjs-hover',
             );
-          }, 1000);
-          player.volume(VOLUME_LEVELS[newIndexUp]);
-          event.stopPropagation();
-          break;
-        case 'ArrowDown': // Decrease volume
-          videoRef.current?.children[0].children[6].children[3].classList.add(
-            'vjs-hover',
-          );
-          if (volumeSetTimeout !== null) clearTimeout(volumeSetTimeout);
-          volumeSetTimeout = setTimeout(() => {
-            videoRef.current?.children[0].children[6].children[3].classList.remove(
+            if (volumeSetTimeout !== null) clearTimeout(volumeSetTimeout);
+            volumeSetTimeout = setTimeout(() => {
+              videoRef.current?.children[0].children[6].children[3].classList.remove(
+                'vjs-hover',
+              );
+            }, 1000);
+            player.volume(VOLUME_LEVELS[newIndexUp]);
+            event.stopPropagation();
+            break;
+          case 'ArrowDown': // Decrease volume
+            videoRef.current?.children[0].children[6].children[3].classList.add(
               'vjs-hover',
             );
-          }, 1000);
-          player.volume(VOLUME_LEVELS[newIndexDown]);
-          event.stopPropagation();
-          break;
+            if (volumeSetTimeout !== null) clearTimeout(volumeSetTimeout);
+            volumeSetTimeout = setTimeout(() => {
+              videoRef.current?.children[0].children[6].children[3].classList.remove(
+                'vjs-hover',
+              );
+            }, 1000);
+            player.volume(VOLUME_LEVELS[newIndexDown]);
+            event.stopPropagation();
+            break;
         }
       } else if (event.code === 'KeyT') {
         player.playbackRate(2);
@@ -126,70 +126,70 @@ 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();
+          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.textTracks()[0].mode = 'showing';
+              player.volume(0);
             }
-          }
-          break;
+            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';
+              } else {
+                player.textTracks()[0].mode = 'showing';
+              }
+            }
+            break;
         }
       }
     };

diff --git a/src/components/bookmark/BookmarkView.tsx b/src/components/bookmark/BookmarkView.tsx
@@ -19,12 +19,12 @@ const BookmarkView = ({
         {bookmarkData === null ||
         'error' in bookmarkData ||
         !bookmarkData.length ? (
-            <div className="flex mt-64">
-              <div className="m-auto">No bookmark added yet!</div>
-            </div>
-          ) : (
-            <BookmarkList bookmarkData={bookmarkData} />
-          )}
+          <div className="flex mt-64">
+            <div className="m-auto">No bookmark added yet!</div>
+          </div>
+        ) : (
+          <BookmarkList bookmarkData={bookmarkData} />
+        )}
       </div>
     </div>
   );

diff --git a/src/components/landing/us-section/why-us-card/why-us-content.ts b/src/components/landing/us-section/why-us-card/why-us-content.ts
@@ -51,6 +51,6 @@ export const whyUs: TwhyUs = [
     tagline: 'Assignments',
     headline: 'Learn by doing',
     description:
-      'Harkirat personally creates assignments after every lecture, so it\'s extremely hands on.',
+      "Harkirat personally creates assignments after every lecture, so it's extremely hands on.",
   },
 ];
diff --git a/src/components/search/MobileScreenSearch.tsx b/src/components/search/MobileScreenSearch.tsx
@@ -9,7 +9,7 @@ const MobileScreenSearch = () => {
     setShowSearchBar((prev) => !prev);
   };
   return (
-    <div className="md:hidden">
+    <div className="lg:hidden">
       {showSearchBar ? (
         <div className="absolute top-0 px-3 left-0 h-16 bg-white dark:bg-[#020817] border-b z-[100] w-full flex items-center gap-3">
           <SearchBar onCardClick={toggleSearchBar} />

diff --git a/src/db/course.ts b/src/db/course.ts
@@ -54,7 +54,7 @@ export async function getAllCoursesAndContentHierarchy(): Promise<
       contentId: number;
     }[];
   }[]
-  > {
+> {
   const value = await Cache.getInstance().get(
     'getAllCoursesAndContentHierarchy',
     [],
@@ -100,7 +100,7 @@ export async function getAllVideos(): Promise<
     createdAt: Date;
     notionMetadataId: number | null;
   }[]
-  > {
+> {
   const value = await Cache.getInstance().get('getAllVideos', []);
   if (value) {
     return value;
@@ -252,13 +252,13 @@ export const getFullCourseContent = async (courseId: number) => {
         videoProgress:
           content.type === 'video'
             ? {
-              duration: videoProgress.find((x) => x.contentId === content.id)
-                ?.currentTimestamp,
-              markAsCompleted: videoProgress.find(
-                (x) => x.contentId === content.id,
-              )?.markAsCompleted,
-              videoFullDuration: content.VideoMetadata?.duration,
-            }
+                duration: videoProgress.find((x) => x.contentId === content.id)
+                  ?.currentTimestamp,
+                markAsCompleted: videoProgress.find(
+                  (x) => x.contentId === content.id,
+                )?.markAsCompleted,
+                videoFullDuration: content.VideoMetadata?.duration,
+              }
             : null,
       },
     ]),

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -265,17 +265,17 @@ export const constructCommentPrismaQuery = (
 
   let orderBy: Prisma.Enumerable<Prisma.CommentOrderByWithRelationInput> = {};
   switch (commentfilter) {
-  case CommentFilter.mu:
-    orderBy = { upvotes: 'desc' };
-    break;
-  case CommentFilter.md:
-    orderBy = { downvotes: 'desc' };
-    break;
-  case CommentFilter.mr:
-    orderBy = { createdAt: 'desc' };
-    break;
-  default:
-    orderBy = { upvotes: 'desc' };
+    case CommentFilter.mu:
+      orderBy = { upvotes: 'desc' };
+      break;
+    case CommentFilter.md:
+      orderBy = { downvotes: 'desc' };
+      break;
+    case CommentFilter.mr:
+      orderBy = { createdAt: 'desc' };
+      break;
+    default:
+      orderBy = { upvotes: 'desc' };
   }
 
   const where: Prisma.CommentWhereInput = {};