-
Notifications
You must be signed in to change notification settings - Fork 102
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: media player controllers for contributor activity racing bar (#744
) * refactor: use forwardRef and useImperativeHandle to control child component * feat: add player buttons (only UI) * feat: add speed controller (only UI) * refactor: abstract and encapsulate the 'loadAvatars' related operations into a React custom hook * refactor: to get an echarts option through a function call * feat: player buttons that support long press event * fix: container doesn't has width before appeded to the DOM tree * feat: media player controllers for racing bars * chore: improve the interaction * chore: filter bars to improve performance in large community * style: improve UI in dark theme * chore: remove unused import sentence * fix: only cache successful extracted color --------- Co-authored-by: Zi1l <[email protected]>
- Loading branch information
Showing
18 changed files
with
551 additions
and
321 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
src/pages/ContentScripts/features/repo-activity-racing-bar/PlayerButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React, { useRef } from 'react'; | ||
| import { Button, Tooltip } from 'antd'; | ||
|
|
||
| interface PlayerButtonProps { | ||
| tooltip?: string; | ||
| icon: JSX.Element; | ||
| onClick?: () => void; | ||
| onLongPress?: () => void; | ||
| } | ||
|
|
||
| export const PlayerButton = ({ | ||
| tooltip, | ||
| icon, | ||
| onClick, | ||
| onLongPress, | ||
| }: PlayerButtonProps): JSX.Element => { | ||
| const pressingRef = useRef(false); | ||
| const longPressDetectedRef = useRef(false); | ||
| const timerRef = useRef<NodeJS.Timeout>(); | ||
|
|
||
| const handleMouseDown = () => { | ||
| pressingRef.current = true; | ||
| timerRef.current = setTimeout(() => { | ||
| if (pressingRef.current) { | ||
| longPressDetectedRef.current = true; | ||
| onLongPress?.(); | ||
| } | ||
| }, 1000); | ||
| }; | ||
|
|
||
| const handleMouseUp = () => { | ||
| clearTimeout(timerRef.current!); | ||
| pressingRef.current = false; | ||
|
|
||
| if (longPressDetectedRef.current) { | ||
| longPressDetectedRef.current = false; | ||
| return; | ||
| } | ||
|
|
||
| onClick?.(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Tooltip | ||
| style={{ visibility: tooltip ? 'visible' : 'hidden' }} | ||
| title={tooltip} | ||
| mouseEnterDelay={1} | ||
| > | ||
| <Button | ||
| style={{ backgroundColor: 'var(--color-btn-bg)' }} | ||
| styles={{ icon: { color: 'var(--color-fg-default)' } }} | ||
| icon={icon} | ||
| onMouseDown={handleMouseDown} | ||
| onMouseUp={handleMouseUp} | ||
| /> | ||
| </Tooltip> | ||
| ); | ||
| }; |
Oops, something went wrong.