Closing timeline panel on video selection (on mobile)

Author: loic-brtd

src/components/challenges/PartsTimeline.js

@@ -4,7 +4,12 @@ import cn from 'classnames';
 import * as css from './PartsTimeline.module.css';
 import { Link } from 'gatsby';
 
-const PartsTimeline = ({ className, parts, currentPartIndex }) => {
+const PartsTimeline = ({
+  className,
+  parts,
+  currentPartIndex,
+  onSelection = () => {}
+}) => {
   return (
     <div className={cn(css.root, className)}>
       <div className={css.partsTimeline}>
@@ -16,19 +21,27 @@ const PartsTimeline = ({ className, parts, currentPartIndex }) => {
                 [css.seen]: index <= currentPartIndex,
                 [css.last]: index === currentPartIndex
               })}>
-              <Link to={`#part-${index + 1}`}>{part.title}</Link>
+              <Link to={`#part-${index + 1}`} onClick={onSelection}>
+                {part.title}
+              </Link>
             </li>
           ))}
         </ul>
       </div>
       <div className={css.navigation}>
         {currentPartIndex > 0 && (
-          <Link to={`#part-${currentPartIndex}`} className={css.navButton}>
+          <Link
+            to={`#part-${currentPartIndex}`}
+            className={css.navButton}
+            onClick={onSelection}>
             Previous
           </Link>
         )}
         {currentPartIndex < parts.length - 1 && (
-          <Link to={`#part-${currentPartIndex + 2}`} className={css.navButton}>
+          <Link
+            to={`#part-${currentPartIndex + 2}`}
+            className={css.navButton}
+            onClick={onSelection}>
             Next
           </Link>
         )}

src/components/challenges/VideoSection.js

@@ -148,6 +148,7 @@ const VideoSection = ({ challenge }) => {
                     })}
                     parts={challenge.parts}
                     currentPartIndex={activePartIndex}
+                    onSelection={() => setShowTimeline(false)}
                   />
                 )}
                 {hasTimestamps && (

src/components/tracks/OverviewTimeline.js

@@ -40,7 +40,13 @@ const usePaths = (chapters, track, trackPosition) => {
   return [computePath(prevVideo), computePath(nextVideo)];
 };
 
-const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
+const OverviewTimeline = ({
+  className,
+  chapters,
+  track,
+  trackPosition,
+  onSelection = () => {}
+}) => {
   const [previousVideo, nextVideo] = usePaths(chapters, track, trackPosition);
 
   const timelineRef = usePersistScrollPosition(track.slug, 'tracks');
@@ -55,17 +61,24 @@ const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
             chapters={chapters}
             track={track}
             trackPosition={trackPosition}
+            onSelection={onSelection}
           />
         ))}
       </div>
       <div className={css.navigation}>
         {previousVideo !== null && (
-          <Link className={css.navButton} to={previousVideo.path}>
+          <Link
+            className={css.navButton}
+            to={previousVideo.path}
+            onClick={onSelection}>
             Previous
           </Link>
         )}
         {nextVideo !== null && (
-          <Link className={css.navButton} to={nextVideo.path}>
+          <Link
+            className={css.navButton}
+            to={nextVideo.path}
+            onClick={onSelection}>
             Next
           </Link>
         )}
@@ -75,7 +88,7 @@ const OverviewTimeline = ({ className, chapters, track, trackPosition }) => {
 };
 
 const ChapterSection = memo(
-  ({ chapter, chapterIndex, chapters, track, trackPosition }) => {
+  ({ chapter, chapterIndex, chapters, track, trackPosition, onSelection }) => {
     const hasSeenChapter = chapterIndex < trackPosition.chapterIndex;
     const isThisChapter = chapterIndex === trackPosition.chapterIndex;
     const trackPath = `/tracks/${track.slug}`;
@@ -124,7 +137,8 @@ const ChapterSection = memo(
                       [css.last]: isLastVideo && partIndex === currentPartIndex
                     })}>
                     <Link
-                      to={`${trackPath}/${video.slug}#part-${partIndex + 1}`}>
+                      to={`${trackPath}/${video.slug}#part-${partIndex + 1}`}
+                      onClick={onSelection}>
                       {video.title} - {part.title}
                     </Link>
                   </li>
@@ -137,7 +151,9 @@ const ChapterSection = memo(
                   [css.seen]: hasSeenVideo,
                   [css.last]: isLastVideo
                 })}>
-                <Link to={`${trackPath}/${video.slug}`}>{video.title}</Link>
+                <Link to={`${trackPath}/${video.slug}`} onClick={onSelection}>
+                  {video.title}
+                </Link>
               </li>
             );
           })}

src/components/tracks/VideoSection.js

@@ -35,8 +35,7 @@ const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
 
   const { title, topics, languages } = video;
 
-  const totalParts = video.parts?.length || 1;
-  const partIndex = useChallengePartIndex(totalParts);
+  const partIndex = useChallengePartIndex(video.parts?.length || 1);
   trackPosition = { ...trackPosition, partIndex };
   const part = video.parts?.[partIndex];
   const videoId = part?.videoId ?? video.videoId;
@@ -181,6 +180,7 @@ const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
                   chapters={chapters}
                   track={track}
                   trackPosition={trackPosition}
+                  onSelection={() => setShowTimeline(false)}
                 />
               )}
             </div>