feat: media player controllers for contributor activity racing bar

[tyn1998]

Brief Information

This pull request is in the type of (more info about types):

• [ ] build
• [ ] ci
• [ ] docs
• [x] feat
• [ ] fix
• [ ] perf
• [ ] refactor
• [ ] test

Related issues (all available keywords):

• resolve #729
• resolve #234

Details

In this PR I added media player controllers for the Racing Bar. I could say now the Racing Bar is the most complex feature in Hypercrx 😆 .

Video:

https://github.com/hypertrons/hypertrons-crx/assets/32434520/ec76ed01-11fc-4967-a124-5f2018328494

In light theme:

In dark theme:

Checklist

• [x] I have read the CONTRIBUTING doc
• [x] I have signed the CLA

Others

[tyn1998]

May I request for your reviews? @lhbvvvvv @wxharry

@zhaosj975 @Tenth-crew @wangyantong2000 Guys need you doing some tests, again ✌️

@andyhuang18 @wj23027 You two might benifit from this PR and gain knowledges for your OSPP projects :)

[wxharry]

Markdown file formats are changed in this pr, did you run prettier for all files including the markdowns? @tyn1998

[wxharry]

It still takes time to go to the latest bar chart when playing, espcially for large repo like vscode. Can we have a button to jump to the latest chart better support this issue?

[tyn1998]

Markdown file formats are changed in this pr, did you run prettier for all files including the markdowns? @tyn1998

I checkedout this branch from https://github.com/hypertrons/hypertrons-crx/pull/744. In that PR markdown files are changed unintentionally by @lhbvvvvv but it's ok to keep those changes.

It still takes time to go to the latest bar chart when playing, espcially for large repo like vscode. Can we have a button to jump to the latest chart better support this issue?

When the racing bar is first rendered, it shows the latest data. The next button also support long press to go to the latest month. You may have a try :D

[Tenth-crew]

After clicking Pause, the animation will stop after a delay rather than immediately

https://github.com/hypertrons/hypertrons-crx/assets/68376741/c6371e11-ce1a-4868-a5fd-c9d3027013bc

[wangyantong2000]

https://github.com/hypertrons/hypertrons-crx/assets/135088663/8e4373b4-74ad-46a3-890f-61445a7356cf

[tyn1998]

@Tenth-crew @wangyantong2000 Thank you for testing!

After clicking Pause, the animation will stop after a delay rather than immediately

This is expected, since the running racing bar is not actually a video :)

[HalloMelon]

it is nicer~

https://github.com/hypertrons/hypertrons-crx/assets/79428895/82997c0c-82ba-4863-873f-bb7398a93908