Learning Processing

content-testing/format-augmented.test.js

@@ -153,8 +153,8 @@ const videoNumberValidator = string().test(
   }
 );
 
-// 00:00 to 59:59, 0:00:00 to 4:59:59 - optional leading zeros for minutes and seconds
-const timestampRegex = /^(?:[0-4]:)?[0-5]?\d:[0-5]?\d$/;
+// 00:00 to 59:59, 0:00:00 to 9:59:59 - optional leading zeros for minutes and seconds
+const timestampRegex = /^(?:[0-9]:)?[0-5]?\d:[0-5]?\d$/;
 const timestampValidator = string().test(
   'timestamps',
   'A timestamp should be in the `mm:ss` or `h:mm:ss` format',

content/pages/homepage/index.json

@@ -20,7 +20,7 @@
   "tracks": {
     "title": "Tracks",
     "description": "Streamline your learning experience and take a ride along a Track on The Coding Train. Tracks are collections of video tutorials that follow a sequenced curriculum.",
-    "featured": ["code-programming-with-p5-js", "git-and-github-for-poets"],
+    "featured": ["learning-processing", "code-programming-with-p5-js"],
     "tracksCta": {
       "text": "Ready to learn? Hop on a track for beginners and more!",
       "buttonText": "browse tracks",

content/tracks/index.json

@@ -5,6 +5,7 @@
     "main-tracks/git-and-github-for-poets",
     "main-tracks/ml5js-beginners-guide",
     "main-tracks/the-nature-of-code-2",
+    "main-tracks/learning-processing",
     "side-tracks/2018-workflow",
     "side-tracks/algorithmic-botany",
     "side-tracks/coding-in-the-cabana",

content/tracks/main-tracks/learning-processing/index.json

@@ -0,0 +1,6 @@
+{
+  "title": "Learning Processing",
+  "date": "2023-10-01",
+  "description": "Choo choo! Welcome aboard to the world of creative coding! Join me in this beginner-friendly video series and choo-choo-choose to embark on an exciting journey with Processing, a versatile and artist-friendly programming language and environment. Whether you're an absolute beginner or have some experience already, my goal is to inspire and empower you to unleash your creativity through coding. Processing is your gateway to making art, animations, and interactive experiences. No prior experience is required—just curiosity and a desire to create!",
+  "videos": ["processing"]
+}

content/videos/processing/index.json

@@ -0,0 +1,103 @@
+{
+  "title": "Learning Processing",
+  "description": "Choo choo! Welcome aboard to the world of creative coding! Join me in this beginner-friendly video series and choo-choo-choose to embark on an exciting journey with Processing, a versatile and artist-friendly programming language and environment. Whether you're an absolute beginner or have some experience already, my goal is to inspire and empower you to unleash your creativity through coding. Processing is your gateway to making art, animations, and interactive experiences. No prior experience is required—just curiosity and a desire to create!",
+  "videoId": "4JzDttgdILQ",
+  "nebulaSlug": "codingtrain-beginners-guide-to-creative-coding-with-processing-full-course",
+  "date": "2023-10-01",
+  "languages": ["Processing", "Java"],
+  "topics": [
+    "For beginners",
+    "shapes",
+    "drawing",
+    "basics",
+    "color",
+    "variables",
+    "random",
+    "boolean",
+    "if statement",
+    "for loop",
+    "function",
+    "objects",
+    "object-oriented programming (OOP)",
+    "classes",
+    "constructor",
+    "array"
+  ],
+  "canContribute": true,
+  "timestamps": [
+    { "time": "0:00:00", "title": "⭐️ INTRODUCTION ⭐️" },
+    { "time": "0:14:43", "title": "How to Download Processing" },
+    { "time": "0:17:30", "title": "⭐️ DRAWING WITH CODE ⭐️" },
+    { "time": "0:27:58", "title": "Shapes" },
+    { "time": "0:30:34", "title": "The Processing Reference" },
+    { "time": "0:39:19", "title": "Saving Your Code" },
+    { "time": "0:41:03", "title": "Code Comments" },
+    { "time": "0:42:27", "title": "Errors" },
+    { "time": "0:48:11", "title": "Stroke Weight" },
+    { "time": "0:50:31", "title": "RGB color" },
+    { "time": "0:53:45", "title": "Bits and Bytes" },
+    { "time": "0:56:45", "title": "Color Modes" },
+    { "time": "0:59:26", "title": "Alpha Transparency" },
+    { "time": "1:04:39", "title": "⭐️ FLOW ⭐️" },
+    { "time": "1:06:31", "title": "Setup and Draw" },
+    { "time": "1:13:27", "title": "mouseX and mouseY" },
+    { "time": "1:19:13", "title": "mousePressed()" },
+    { "time": "1:29:31", "title": "⭐️ VARIABLES ⭐️" },
+    { "time": "1:31:39", "title": "Creating Your Own" },
+    { "time": "1:48:56", "title": "Incrementation Operations" },
+    { "time": "1:53:20", "title": "Random Numbers" },
+    { "time": "2:02:46", "title": "⭐️ CONDITIONALS ⭐️" },
+    { "time": "2:04:01", "title": "The \"IF\" Statement" },
+    { "time": "2:10:30", "title": "\"ELSE\"" },
+    { "time": "2:18:30", "title": "Logical Operators" },
+    { "time": "2:28:47", "title": "The Bouncing Ball" },
+    { "time": "2:40:38", "title": "Boolean Variables" },
+    { "time": "2:50:01", "title": "⭐️ LOOPS ⭐️" },
+    { "time": "2:51:30", "title": "The While Loop" },
+    { "time": "2:57:49", "title": "Variable Scope" },
+    { "time": "3:00:10", "title": "The For Loop" },
+    { "time": "3:04:48", "title": "Nested Loops" },
+    { "time": "3:12:29", "title": "⭐️ ARRAYS ⭐️" },
+    { "time": "3:18:44", "title": "Indexing" },
+    { "time": "3:28:02", "title": "Iteration" },
+    { "time": "3:40:29", "title": "⭐️ FUNCTIONS ⭐️" },
+    { "time": "3:43:48", "title": "Defining Your Own" },
+    { "time": "3:49:39", "title": "Modularity" },
+    { "time": "3:52:33", "title": "Reusability" },
+    { "time": "3:57:00", "title": "Return Types" },
+    { "time": "4:02:30", "title": "⭐️ CLASSES AND OBJECTS ⭐️" },
+    { "time": "4:25:18", "title": "Constructor Arguments" },
+    { "time": "4:34:30", "title": "Arrays of Objects" },
+    { "time": "4:54:21", "title": "Enhanced Loop" },
+    { "time": "4:56:20", "title": "⭐️ CONFETTI PROJECT ⭐️" },
+    { "time": "5:03:15", "title": "⭐️ CONCLUSION ⭐️" }
+  ],
+  "groupLinks": [
+    {
+      "title": "Links",
+      "links": [
+        {
+          "icon": "📄",
+          "title": "References and Code examples",
+          "url": "https://github.com/CodingTrain/Creative-Coding-Processing-Full-Course",
+          "description": "GitHub repository with all the code examples and references for this course."
+        }
+      ]
+    }
+  ],
+  "credits": [
+    {
+      "title": "Editing",
+      "name": "Mathieu Blanchette"
+    },
+    {
+      "title": "Animations",
+      "name": "Jason Heglund"
+    },
+    {
+      "title": "Research and Additional Code",
+      "name": "Melissa Rodriguez",
+      "url": "https://www.instagram.com/hellomelissarodriguez/"
+    }
+  ]
+}

src/components/tracks/VideoSection.js

@@ -30,6 +30,8 @@ const getOverallPositionInTrack = (trackPosition, chapters) => {
 const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
   const variant = 'red';
   const chapters = track.chapters ? track.chapters : [{ videos: track.videos }];
+  const hasSingleVideo =
+    chapters.length === 1 && chapters[0].videos.length === 1;
 
   const { title, topics, languages } = video;
 
@@ -47,7 +49,7 @@ const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
 
   const [showTimeline, setShowTimeline] = useState(false);
   const youTubeVideoRef = useRef();
-  const [showTimestamps, setShowTimestamps] = useState(false);
+  const [showTimestamps, setShowTimestamps] = useState(hasSingleVideo);
   const [timestamp, setTimestamp] = useState();
 
   const Header = mainTitle ? 'h1' : 'h2';
@@ -129,18 +131,20 @@ const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
           })}>
           <nav className={css.timelinesContent}>
             <div className={css.tabs}>
-              <div
-                className={cn(css.tab, {
-                  [css.selected]: !showTimestamps,
-                  [css.clickable]: timestamps.length > 0
-                })}>
-                <button
-                  onClick={() =>
-                    timestamps.length > 0 && setShowTimestamps(false)
-                  }>
-                  track stops
-                </button>
-              </div>
+              {!hasSingleVideo && (
+                <div
+                  className={cn(css.tab, {
+                    [css.selected]: !showTimestamps,
+                    [css.clickable]: timestamps.length > 0
+                  })}>
+                  <button
+                    onClick={() =>
+                      timestamps.length > 0 && setShowTimestamps(false)
+                    }>
+                    track stops
+                  </button>
+                </div>
+              )}
               {timestamps.length > 0 && (
                 <div
                   className={cn(css.tab, {
@@ -167,15 +171,16 @@ const VideoSection = ({ track, video, trackPosition, mainTitle }) => {
                   updateTimestamp={updateTimestamp}
                 />
               )}
-
-              <OverviewTimeline
-                className={cn(css.overviewTimeline, {
-                  [css.hide]: showTimestamps
-                })}
-                chapters={chapters}
-                track={track}
-                trackPosition={trackPosition}
-              />
+              {!hasSingleVideo && (
+                <OverviewTimeline
+                  className={cn(css.overviewTimeline, {
+                    [css.hide]: showTimestamps
+                  })}
+                  chapters={chapters}
+                  track={track}
+                  trackPosition={trackPosition}
+                />
+              )}
             </div>
           </nav>
         </div>