`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 の本文から書いたものです。