import { Component , h , Prop } from '@stencil/core' ; import { isUndefined } from '../../../utils/unit' ; import { PlayerProps } from '../../core/player/PlayerProps' ; import { withComponentRegistry } from '../../core/player/withComponentRegistry' ; import { withPlayerContext } from '../../core/player/withPlayerContext' ; /**
 * A darkened overlay or gradient that covers the current video to enable controls placed on it to
 * be more visible.
 */ @ Component ( { tag : 'vm-scrim' , styleUrl : 'scrim.css' , shadow : true , } ) export class Scrim { /**
     * If this prop is defined, a dark gradient that smoothly fades out without being noticed will be
     * used instead of a set color. This prop also sets the direction in which the dark end of the
     * gradient should start. If the direction is set to `up`, the dark end of the gradient will
     * start at the bottom of the player and fade out to the center. If the direction is set to
     * `down`, the gradient will start at the top of the player and fade out to the center.
     */ @ Prop ( ) gradient ? : 'up' | 'down' ; internal @ Prop ( ) isVideoView : PlayerProps [ 'isVideoView' ] = false ; internal @ Prop ( ) isControlsActive : PlayerProps [ 'isControlsActive' ] = false ; constructor ( ) { withComponentRegistry ( this ) ; withPlayerContext ( this , [ 'isVideoView' , 'isControlsActive' ] ) ; } render ( ) { return ( < div class = { { scrim : true , gradient : ! isUndefined ( this . gradient ) , gradientUp : this . gradient === 'up' , gradientDown : this . gradient === 'down' , hidden : ! this . isVideoView , active : this . isControlsActive , } } />); } }