import { Component , Fragment , h , Prop } from '@stencil/core' ; import { PlayerProps } from '../../../core/player/PlayerProps' ; import { withComponentRegistry } from '../../../core/player/withComponentRegistry' ; import { withPlayerContext } from '../../../core/player/withPlayerContext' ; /**
 * Default set of controls for when you're in a hurry. The controls displayed depend on whether the
 * media is audio/video/live, and whether the device is mobile/desktop. See
 * [`vime-default-ui`](../default-ui.md) for visuals.
 */ @ Component ( { tag : 'vm-default-controls' , styleUrl : 'default-controls.css' , shadow : true , } ) export class DefaultControls { /**
     * The length in milliseconds that the controls are active for before fading out. Audio players
     * are not effected by this prop.
     */ @ Prop ( ) activeDuration = 2750 ; /**
     * Whether the controls should wait for playback to start before being shown. Audio players
     * are not effected by this prop.
     */ @ Prop ( ) waitForPlaybackStart = false ; /**
     * Whether the controls should show/hide when paused. Audio players are not effected by this prop.
     */ @ Prop ( ) hideWhenPaused = false ; /**
     * Whether the controls should hide when the mouse leaves the player. Audio players are not
     * effected by this prop.
     */ @ Prop ( ) hideOnMouseLeave = false ; internal @ Prop ( ) theme ? : PlayerProps [ 'theme' ] ; internal @ Prop ( ) isMobile : PlayerProps [ 'isMobile' ] = false ; internal @ Prop ( ) isLive : PlayerProps [ 'isLive' ] = false ; internal @ Prop ( ) isAudioView : PlayerProps [ 'isAudioView' ] = false ; internal @ Prop ( ) isVideoView : PlayerProps [ 'isVideoView' ] = false ; constructor ( ) { withComponentRegistry ( this ) ; withPlayerContext ( this , [ 'theme' , 'isMobile' , 'isAudioView' , 'isVideoView' , 'isLive' , ] ) ; } private buildAudioControls ( ) { return ( < vm - controls fullWidth > < vm - playback - control tooltipDirection = "right" / > < vm - volume - control / > { ! this . isLive && < vm - current - time / > } { this . isLive && < vm - control - spacer / > } { ! this . isLive && < vm - scrubber - control / > } { this . isLive && < vm - live - indicator / > } { ! this . isLive && < vm - end - time / > } { ! this . isLive && < vm - settings - control tooltipDirection = "left" / > } < div style = { { marginLeft : '0' , paddingRight : '2px' } } /> < /vm-controls>); } private buildMobileVideoControls ( ) { return ( < Fragment > < vm - scrim gradient = "up" / > < vm - controls pin = "topLeft" fullWidth activeDuration = { this . activeDuration } waitForPlaybackStart = { this . waitForPlaybackStart } hideWhenPaused = { this . hideWhenPaused } > < vm - control - spacer / > < vm - volume - control / > { ! this . isLive && < vm - caption - control / > } { ! this . isLive && < vm - settings - control / > } { this . isLive && < vm - fullscreen - control / > } < /vm-controls> < vm - controls pin = "center" justify = "center" activeDuration = { this . activeDuration } waitForPlaybackStart = { this . waitForPlaybackStart } hideWhenPaused = { this . hideWhenPaused } > < vm - playback - control style = { { '--vm-control-scale' : '1.3' } } /> < /vm-controls> { ! this . isLive && ( < vm - controls pin = "bottomLeft" fullWidth activeDuration = { this . activeDuration } waitForPlaybackStart = { this . waitForPlaybackStart } hideWhenPaused = { this . hideWhenPaused } > < vm - control - group > < vm - current - time / > < vm - control - spacer / > < vm - end - time / > < vm - fullscreen - control / > < /vm-control-group> < vm - control - group space = "top" > < vm - scrubber - control / > < /vm-control-group> < /vm-controls>)} < /Fragment>); } private buildDesktopVideoControls ( ) { return ( < Fragment > { this . theme !== 'light' && < vm - scrim gradient = "up" / > } < vm - controls fullWidth pin = "bottomRight" activeDuration = { this . activeDuration } waitForPlaybackStart = { this . waitForPlaybackStart } hideWhenPaused = { this . hideWhenPaused } hideOnMouseLeave = { this . hideOnMouseLeave } > { ! this . isLive && ( < vm - control - group > < vm - scrubber - control / > < /vm-control-group>)} < vm - control - group space = { this . isLive ? 'none' : 'top' } > < vm - playback - control tooltipDirection = "right" / > < vm - volume - control / > { ! this . isLive && < vm - time - progress / > } < vm - control - spacer / > { ! this . isLive && < vm - caption - control / > } { this . isLive && < vm - live - indicator / > } < vm - pip - control / > { ! this . isLive && < vm - settings - control / > } < vm - fullscreen - control tooltipDirection = "left" / > < /vm-control-group> < /vm-controls> < /Fragment>); } render ( ) { if ( this . isAudioView ) return this . buildAudioControls ( ) ; if ( this . isVideoView && this . isMobile ) return this . buildMobileVideoControls ( ) ; if ( this . isVideoView ) return this . buildDesktopVideoControls ( ) ; return null ; } }