Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: export racing bar animation as video #743

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

l1tok
Copy link
Collaborator

@l1tok l1tok commented Sep 22, 2023

Brief Information

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

  • build
  • ci
  • docs
  • feat
  • fix
  • perf
  • refactor
  • test

Related issues (all available keywords):

Details

Implement the function of exporting racing bar animation as video.

Checklist

Others

Copy link
Member

@tyn1998 tyn1998 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @lhbvvvvv, I cannot solve the canvas is not origin-clean error at the moment. It is an issue that not easy to circumvent.

However, I refactored the code in a React way, which may help you be more familiar with the React world.

This PR may linger for a while until we find a solution.

Comment on lines +37 to +57
<button
className="perceptor-button"
onClick={mediaControlersRef.current?.play}
>
{getMessageByLocale(
'component_projectRacingBar_ReplayButton',
options.locale
)}
</button>
<button
className="perceptor-button"
onClick={mediaControlersRef.current?.startRecording}
>
Start Recording
</button>
<button
className="perceptor-button"
onClick={mediaControlersRef.current?.stopRecording}
>
Stop Recording
</button>
Copy link
Member

@tyn1998 tyn1998 Sep 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lhbvvvvv @andyhuang18

This is a way to control the child component in its parent component. Here I use forwardRef and useImperativeHandle to let the parent component use the media player controllers provided by its child component. I think this is a great example to help you get familiar with React :)

cc @wxharry

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for your guidance~ Through this example I can better understand the control between components.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Compared to my previous code has definitely improved. Thanks for your guidance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature] export racing bar animation as video
3 participants