import { EVENT } from 'src/ts/constants' ; import { I18n , WEB_EXIT_FULL_SCREEN , WEB_FULL_SCREEN } from 'src/ts/features/i18n' ; import { Icon } from 'src/ts/features/icons' ; import { Player } from 'src/ts/player' ; import { addDisposable , addDisposableListener , Component , hide , show , } from 'src/ts/utils' ; import { Tooltip } from 'src/ts/components/tooltip' ; import { ControlItem } from '..' ; class WebFullscreen extends Component implements ControlItem { readonly id = 'web-fullscreen' ; private exitIcon ! : HTMLElement ; private enterIcon ! : HTMLElement ; tooltip ! : Tooltip ; init ( player , _ , tooltip ) { this . tooltip = tooltip ; this . enterIcon = this . el . appendChild ( Icon . webEnterFullscreen ( ) ) ; this . exitIcon = this . el . appendChild ( Icon . webExitFullscreen ( ) ) ; if ( player . webFullscreen . isActive ) { this . enter ( ) ; } else { this . exit ( ) ; } addDisposable ( this , player . on ( EVENT . WEB_ENTER_FULLSCREEN , this . enter ) ) ; addDisposable ( this , player . on ( EVENT . WEB_EXIT_FULLSCREEN , this . exit ) ) ; addDisposableListener ( this , this . el , 'click' , player . webFullscreen . toggle ) ; } private enter = ( ) : void => { show ( this . exitIcon ) ; hide ( this . enterIcon ) ; this . tooltip . html = I18n . t ( WEB_EXIT_FULL_SCREEN ) ; } ; private exit = ( ) : void => { hide ( this . exitIcon ) ; show ( this . enterIcon ) ; this . tooltip . html = I18n . t ( WEB_FULL_SCREEN ) ; } ; } export const webFullscreenControlItem = ( ) => new WebFullscreen ( ) ;