`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.

先比較 src/components/challenges/VideoSection.js 和 src/components/tracks/VideoSection.js，以及它們的 CSS 檔案，以找出共用結構和刻意保留的差異。追蹤 Track Stop 和 Part 的點擊行為，接著確認重構後的共用元件和合併後的樣式保留兩種變體，並解決重複的 timeline 行為。

由索引模型根據 Issue 內容生成。