`VideoSection` can be refactored

I've listed some bugs below, but this is mostly a critique of the code structure which is the overarching problem.

I was trying to fix a small issue in #1339 that requires setting the background of the `VideoSection` component's `.timeline`. But there are 2 independent, yet similar implementations of `VideoSection` for Tracks and Challenges - this required changing 2 files for a feature that is common to both.

In fact, [challenges/VideoSection.js](https://github.com/CodingTrain/thecodingtrain.com/blob/main/src/components/challenges/VideoSection.js) and [tracks/VideoSection.js](https://github.com/CodingTrain/thecodingtrain.com/blob/main/src/components/tracks/VideoSection.js) are mostly the same except for a few variables and what happens when a "Track Stop" or a "Part" is clicked. Their respective CSS files are have even more similarity, differing in hardly a few lines (and these may be unintentional).

Is this important? Well yeah, because code redundancy has already caused some differences:

|Challenges|Tracks|
|:-:|:-:|
|||
|||
|||

## Potential Solution

If we refactor `VideoSection` to be a Class Component instead of a Functional Component, we can inherit from a *more general* `VideoSection` that'll make the code more readable and DRY. The CSS files have practically no differences because we pass in the variant programmatically for UI changes. They can be merged, and we can use this merged file for the base `VideoSection` class.