feat(js): Added UI to update animation speed parameter (delta) #706
Conversation
|
Can one of the admins verify this patch? |
There was a problem hiding this comment.
As a side note on the {delta} state that was added to the animation context, it would actually require a bit more work as right now, if you refresh your browser or some other client connects and plays the animation, you loose the current value or it reflects a wrong value.
For that purpose, we would actually use the delta that is on {animationParams} (as the server keeps its value and it will be synced between clients). But the problem with that is that we also use it to play/stop.
Though, there is nothing you can do at the moment, I hope that you understand the issue.
| import Menu from '@material-ui/core/Menu'; | ||
| import MenuItem from '@material-ui/core/MenuItem'; | ||
|
|
||
| export default class AnimSpeedController extends React.Component<IAnimSpeedControllerProps, IAnimSpeedControllerState> { |
There was a problem hiding this comment.
| export default class AnimSpeedController extends React.Component<IAnimSpeedControllerProps, IAnimSpeedControllerState> { | |
| export default class AnimationSpeedController extends Component<Props, State> { |
There was a problem hiding this comment.
Also rename the file to animation-speed-controller.tsx.
js/apps/viewer/src/app/animation-player/anim-speed-controller.tsx
Outdated
Show resolved
Hide resolved
js/apps/viewer/src/app/animation-player/anim-speed-controller.tsx
Outdated
Show resolved
Hide resolved
js/apps/viewer/src/app/animation-player/anim-speed-controller.tsx
Outdated
Show resolved
Hide resolved
js/apps/viewer/src/app/animation-player/anim-speed-controller.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| const animationSpeedId = 'animation-speed-controller'; | ||
|
|
||
| function speedLabel(value: number) { |
There was a problem hiding this comment.
Move speedLabel fn right after the class.
| } | ||
|
|
||
| export default class AnimationSpeedController extends Component<Props, State> { | ||
| state : State = { |
There was a problem hiding this comment.
| state : State = { | |
| state: State = { |
| anchorEl: null | ||
| } | ||
|
|
||
| openMenu = (evt : MouseEvent<HTMLElement>) => this.setState({ anchorEl: evt.currentTarget }); |
There was a problem hiding this comment.
Run yarn test at the root of the js folder to catch these code format issues.
| openMenu = (evt : MouseEvent<HTMLElement>) => this.setState({ anchorEl: evt.currentTarget }); | |
| openMenu = (evt: MouseEvent<HTMLElement>) => this.setState({anchorEl: evt.currentTarget}); |
|
|
||
| openMenu = (evt : MouseEvent<HTMLElement>) => this.setState({ anchorEl: evt.currentTarget }); | ||
|
|
||
| closeMenu = () => this.setState({ anchorEl: null }); |
There was a problem hiding this comment.
| closeMenu = () => this.setState({ anchorEl: null }); | |
| closeMenu = () => this.setState({anchorEl: null}); |
|
|
||
| closeMenu = () => this.setState({ anchorEl: null }); | ||
|
|
||
| changeAnimationSpeed = (evt : MouseEvent<HTMLSelectElement>) => { |
There was a problem hiding this comment.
| changeAnimationSpeed = (evt : MouseEvent<HTMLSelectElement>) => { | |
| changeAnimationSpeed = (evt: MouseEvent<HTMLSelectElement>) => { |
| {speedLabel(delta ? delta : 1)} | ||
| </Button> | ||
| <Menu | ||
| id='simulation-speed-controller' |
There was a problem hiding this comment.
| id='simulation-speed-controller' | |
| id={animationSpeedId} |
| interface Props { | ||
| delta?: number; | ||
| disabled?: boolean; | ||
| onDeltaChange(delta : number): void; |
There was a problem hiding this comment.
| onDeltaChange(delta : number): void; | |
| onDeltaChange(delta: number): void; |
| @@ -86,6 +89,9 @@ export class Controls extends PureComponent<Props> { | |||
| </IconButton> | |||
| </div> | |||
| </Tooltip> | |||
| <Tooltip title={"Animation speed"} placement="right" {...TOOLTIP_DELAY}> | |||
| <AnimationSpeedController delta={delta} disabled={disabled} onDeltaChange={onDeltaChange} /> | |||
There was a problem hiding this comment.
For readability:
| <AnimationSpeedController delta={delta} disabled={disabled} onDeltaChange={onDeltaChange} /> | |
| <AnimationSpeedController | |
| delta={delta} | |
| onDeltaChange={onDeltaChange} | |
| disabled={disabled} | |
| /> |
| disablePrev?: boolean; | ||
| disableNext?: boolean; | ||
| disabled?: boolean; | ||
| onPrev(): void; | ||
| onPlayToggle(): void; | ||
| onNext(): void; | ||
| onDeltaChange(delta : number): void; |
There was a problem hiding this comment.
| onDeltaChange(delta : number): void; | |
| onDeltaChange(delta: number): void; |
| }); | ||
| } | ||
|
|
||
| onDeltaChange = async (delta : number) => { |
There was a problem hiding this comment.
| onDeltaChange = async (delta : number) => { | |
| onDeltaChange = async (delta: number) => { |
| @@ -25,6 +25,7 @@ import {onKeyboardLockChange, onPageVisibilityChange} from '../../common/events' | |||
| import Controls from './controls'; | |||
| import ProgressBar from './progress-bar'; | |||
| import {frameToTimeStr} from './utils'; | |||
| import AnimationSpeedController from './animation-speed-controller'; | |||
There was a problem hiding this comment.
Move this above the Controls import (run yarn test at the root of the js dir to catch these format issues, I must have mentioned it before).
| @@ -208,6 +211,12 @@ export class AnimationPlayer extends PureComponent<Props> { | |||
| <Typography variant="caption"> | |||
| {currentMs} / {totalMs} {animationParams.unit} | |||
| </Typography> | |||
| <span className={classes.spacer}></span> | |||
| <AnimationSpeedController | |||
| delta={delta} | |||
There was a problem hiding this comment.
Use 4 spaces for indentation for all these comp. props 😉
| delta={delta} | |
| delta={delta} |
| @@ -15,7 +15,6 @@ import SkipPreviousIcon from '@material-ui/icons/SkipPrevious'; | |||
|
|
|||
| import {TOOLTIP_DELAY} from '../../common/constants'; | |||
|
|
|||
|
|
|||
There was a problem hiding this comment.
Undo changes to this file, you have 3 blank lines that were removed.
Adds a button on the animation player controls that pops up a a menu and allows to select the animation rendering speed (delta parameter)
PS: Second pull request, rebuilt using the latest master from BlueBrayns/Brayns.