import { Component , Element , Event , EventEmitter , h , Prop , State , Watch , } from '@stencil/core' ; import { isNull , isUndefined } from '../../../utils/unit' ; import { LazyLoader } from '../../core/player/LazyLoader' ; import { PlayerProps } from '../../core/player/PlayerProps' ; import { withComponentRegistry } from '../../core/player/withComponentRegistry' ; import { withPlayerContext } from '../../core/player/withPlayerContext' ; /**
 * Loads the poster set in the player prop `currentPoster` and displays it. The poster will automatically
 * dissapear once playback starts.
 *
 * ## Visual
 *
 * <img
 *   src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/poster/poster.png"
 *   alt="Vime poster component"
 * />
 */ @ Component ( { tag : 'vm-poster' , styleUrl : 'poster.css' , shadow : true , } ) export class Poster { private lazyLoader ! : LazyLoader ; @ Element ( ) host ! : HTMLVmPosterElement ; @ State ( ) isHidden = true ; @ State ( ) isActive = false ; @ State ( ) hasLoaded = false ; /**
     * How the poster image should be resized to fit the container (sets the `object-fit` property).
     */ @ Prop ( ) fit ? : 'fill' | 'contain' | 'cover' | 'scale-down' | 'none' = 'cover' ; internal @ Prop ( ) isVideoView : PlayerProps [ 'isVideoView' ] = false ; internal @ Prop ( ) currentPoster ? : PlayerProps [ 'currentPoster' ] ; @ Watch ( 'currentPoster' ) onCurrentPosterChange ( ) { this . hasLoaded = false ; this . lazyLoader ?. onMutation ( ) ; } internal @ Prop ( ) mediaTitle ? : PlayerProps [ 'mediaTitle' ] ; internal @ Prop ( ) playbackStarted : PlayerProps [ 'playbackStarted' ] = false ; internal @ Prop ( ) currentTime : PlayerProps [ 'currentTime' ] = 0 ; /**
     * Emitted when the poster has loaded.
     */ @ Event ( { bubbles : false } ) vmLoaded ! : EventEmitter < void > ; /**
     * Emitted when the poster will be shown.
     */ @ Event ( { bubbles : false } ) vmWillShow ! : EventEmitter < void > ; /**
     * Emitted when the poster will be hidden.
     */ @ Event ( { bubbles : false } ) vmWillHide ! : EventEmitter < void > ; constructor ( ) { withComponentRegistry ( this ) ; withPlayerContext ( this , [ 'mediaTitle' , 'currentPoster' , 'playbackStarted' , 'currentTime' , 'isVideoView' , ] ) ; } connectedCallback ( ) { this . lazyLoader = new LazyLoader ( this . host , [ 'data-src' , 'src' ] , el => { const src = el . getAttribute ( 'data-src' ) ; el . removeAttribute ( 'src' ) ; if ( ! isNull ( src ) ) { el . setAttribute ( 'src' , src ) ; } } ) ; this . onEnabledChange ( ) ; this . onActiveChange ( ) ; } disconnectedCallback ( ) { this . lazyLoader . destroy ( ) ; } private onVisibilityChange ( ) { ! this . isHidden && this . isActive ? this . vmWillShow . emit ( ) : this . vmWillHide . emit ( ) ; } @ Watch ( 'isVideoView' ) onEnabledChange ( ) { this . isHidden = ! this . isVideoView ; this . onVisibilityChange ( ) ; } @ Watch ( 'currentTime' ) @ Watch ( 'playbackStarted' ) onActiveChange ( ) { this . isActive = ! this . playbackStarted || this . currentTime <= 0.1 ; this . onVisibilityChange ( ) ; } private onPosterLoad ( ) { this . vmLoaded . emit ( ) ; this . hasLoaded = true ; } render ( ) { return ( < div class = { { poster : true , hidden : this . isHidden , active : this . isActive && this . hasLoaded , } } > < img class = "lazy" data - src = { this . currentPoster } alt = { ! isUndefined ( this . mediaTitle ) ? `${ this . mediaTitle } Poster` : 'Media Poster' } style = { { objectFit : this . fit } } onLoad = { this . onPosterLoad . bind ( this ) } / > < /div>); } }