import "./PlayerButton.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { CommonProps } from "@itwin/core-react" ; import { UiIModelComponents } from "../UiIModelComponents" ; internal export class PlayerButton extends React . PureComponent < any > { private _onClick = ( ) => { if ( this . props . onClick ) this . props . onClick ( ) ; } ; public override render ( ) { const { icon , title } = this . props ; return ( < button data - testid = { this . props . className } className = { classnames ( "player-button" , this . props . className ) } onClick = { this . _onClick } title = { title } > < span className = { classnames ( "icon" , ! ! icon ) } > < /span> < /button>); } } internal export interface PlayerButtonProps extends CommonProps { isPlaying : boolean ; onPlay ? : ( ) => void ; onPause ? : ( ) => void ; tooltip ? : string ; } interface PlayButtonState { isPlaying : boolean ; } internal export class PlayButton extends React . Component < PlayerButtonProps , PlayButtonState > { constructor ( props , context ? ) { super ( props , context ) ; this . state = { isPlaying : this . props . isPlaying } ; } internal public override componentDidUpdate ( ) { if ( this . props . isPlaying !== this . state . isPlaying ) { this . setState ( ( _ , props ) => ( { isPlaying : props . isPlaying } ) ) ; } } private _onClick = ( ) => { const _isPlaying = ! this . state . isPlaying ; this . setState ( { isPlaying : _isPlaying } ) ; if ( _isPlaying ) { if ( this . props . onPlay ) this . props . onPlay ( ) ; } else { if ( this . props . onPause ) this . props . onPause ( ) ; } } ; public override render ( ) { const { tooltip } = this . props ; const iconClassName = this . state . isPlaying ? "icon icon-media-controls-pause" : "icon icon-media-controls-play" ; let title = tooltip ; if ( ! title ) title = UiIModelComponents . translate ( this . state . isPlaying ? "timeline.pause" : "timeline.play" ) ; return ( < button data - testid = { this . props . className } title = { title } className = { classnames ( "player-button" , this . props . className ) } onClick = { this . _onClick } > < span className = { iconClassName } > < /span> < /button>); } }