Video segments UI changes and auto scroll feature

code100x · Feb 23, 2024 · 2260986 · 2260986
1 parent aeeeb4e
commit 2260986
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 27 deletions.
diff --git a/src/components/VideoContentChapters.tsx b/src/components/VideoContentChapters.tsx
@@ -15,6 +15,27 @@ const VideoContentChapters = ({
   const [player, setPlayer] = useState<any>(null);
   const [currentTime, setCurrentTime] = useState(0);
 
+  useEffect(() => {
+    const selectedSegment = document.querySelector('.scroll-into-view');
+    if (selectedSegment) {
+      const parentElement = selectedSegment.parentElement?.parentElement;
+      if (!parentElement) return;
+
+      const parentRect = parentElement.getBoundingClientRect();
+      const segmentRect = selectedSegment.getBoundingClientRect();
+
+      const initialPosition = segmentRect.left - parentRect.left;
+      const newPosition = initialPosition + parentElement.scrollLeft;
+
+      const scrollLeft =
+        newPosition - parentRect.width / 2 + segmentRect.width / 2;
+      parentElement.scrollTo({
+        behavior: 'smooth',
+        left: scrollLeft,
+      });
+    }
+  }, [currentTime]);
+
   useEffect(() => {
     const allPlayers = videojs.getAllPlayers();
     const activePlayer = allPlayers[0];
@@ -34,17 +55,17 @@ const VideoContentChapters = ({
   }, [player]);
 
   return (
-    <div className="w-full lg:w-1/3 rounded-md shadow-md border text-sm">
+    <div className="w-75 rounded-md shadow-md border text-sm">
       <div className="flex items-center justify-between p-2 py-3 bg-[#212020]">
         <span>Chapters</span>
         <X onClick={onCancel} className="cursor-pointer" />
       </div>
-      <div className="max-h-[70vh] overflow-auto">
+      <div className="max-w-[73vw] max-h-[70vh] overflow-auto flex">
         {(segments as Segment[])?.map(({ start, end, title }, index) => {
           return (
             <div key={`${index}-${start}${end}${title}`}>
               <div
-                className={`dark:text-white text-black p-2 py-3 flex items-center gap-3 justify-between cursor-pointer ${currentTime >= start && currentTime < end ? 'bg-[#27272A]' : ''}`}
+                className={`dark:text-white text-black p-2 py-3 m-2 flex flex-col items-center gap-3 justify-between cursor-pointer rounded hover:bg-[#27272A] w-40 h-40 overflow-hidden ${currentTime >= start && currentTime < end ? 'bg-[#27272A] scroll-into-view' : ''}`}
                 onClick={() => {
                   player.currentTime(start);
                   player.play();

diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx
@@ -89,7 +89,7 @@ export const ContentRendererClient = ({
   };
 
   return (
-    <div className="flex gap-2 items-start flex-col lg:flex-row">
+    <div className="flex gap-2 items-start flex-row lg:flex-row">
       <div className="flex-1 w-full">
         <VideoPlayerSegment
           contentId={content.id}
@@ -124,21 +124,21 @@ export const ContentRendererClient = ({
             <div className="text-gray-900 dark:text-white font-bold text-2xl">
               {content.title}
             </div>
+          </div>
 
+          <div className="flex flex-1 justify-end ml-2">
             <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 my-4"
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2"
               disabled={loadingMarkAs}
               onClick={handleMarkCompleted}
             >
               {contentCompleted ? 'Mark as Incomplete' : 'Mark as completed'}
             </button>
-          </div>
 
-          <div>
             {/* <QualitySelector /> */}
-            <br />
             {metadata.slides ? (
               <div
+                className="ml-2"
                 style={{
                   display: 'flex',
                   flexDirection: 'row-reverse',
@@ -152,21 +152,26 @@ export const ContentRendererClient = ({
                 </a>
               </div>
             ) : null}
-            {!showChapters && metadata.segments?.length > 0 && (
+            {metadata.segments?.length > 0 && (
               <button
-                className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2"
+                className="min-w-40 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 ml-2"
                 onClick={() => {
-                  scrollTo({ top: 0, behavior: 'smooth' });
                   toggleShowChapters();
                 }}
               >
-                View All Chapters
+                {!showChapters ? 'Show Chapters' : 'Hide Chapters'}
               </button>
             )}
           </div>
         </div>
-        <br />
-        <br /> <br />
+        {showChapters && (
+          <VideoContentChapters
+            segments={metadata?.segments}
+            onCancel={toggleShowChapters}
+          />
+        )}
+        {/* <br /> */}
+        {/* <br /> <br /> */}
         {nextContent ? (
           <div className="flex flex-row-reverse">
             <button
@@ -184,16 +189,7 @@ export const ContentRendererClient = ({
             </button>{' '}
           </div>
         ) : null}
-        <br /> <br />
-        <br /> <br />
       </div>
-
-      {showChapters && (
-        <VideoContentChapters
-          segments={metadata?.segments}
-          onCancel={toggleShowChapters}
-        />
-      )}
     </div>
   );
 };
diff --git a/src/components/comment/Comments.tsx b/src/components/comment/Comments.tsx
@@ -56,8 +56,8 @@ const Comments = async ({
   const modifiedSearchParams = { ...searchParams };
   delete modifiedSearchParams.parentId;
   return (
-    <Card key="1" className="w-full border-none  flex justify-center flex-col">
-      <CardHeader className="p-6">
+    <Card key="1" className="w-full border-none flex justify-center flex-col">
+      <CardHeader className="p-0 my-2">
         {data.parentComment && (
           <Link
             className="p-1 "
@@ -109,12 +109,12 @@ const Comments = async ({
           </div>
         </div>
       </CardHeader>
-      <CardContent className="p-0 lg:p-6">
+      <CardContent className="p-0">
         <CommentInputForm
           contentId={content.id}
           parentId={data?.parentComment?.id}
         />
-        <div className="mb-5 flex mt-5">
+        <div className="flex">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button