import { ChangeDetectionStrategy , Component , ElementRef , Input } from '@angular/core' ; import { InternalCardBack } from './internal-card-back' ; @ Component ( { selector : 'card-back' , styleUrls : [ `../../../css/component/collection/card-back.component.scss` ] , template : `
		<div
			class="card-back"
			*ngIf="_cardBack"
			[ngClass]="{ 'missing': !_cardBack.owned }"
			[helpTooltip]="_cardBack.name"
		>
			<div class="perspective-wrapper" rotateOnMouseOver>
				<img [src]="_cardBack.image + '?v=3'" />
				<!-- <video
					#videoPlayer
					loop="loop"
					[autoplay]="alwaysOn"
					(mouseover)="play()"
					(mouseout)="pause()"
					*ngIf="animated && _cardBack.animatedImage"
				>
					<source src="{{ _cardBack.animatedImage }}" type="video/webm" />
				</video> -->
			</div>
		</div>
	` , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class CardBackComponent { @ Input ( ) set cardBack ( value ) { this . _cardBack = value ; if ( this . _cardBack && this . videoPlayerElement ) { this . videoPlayerElement . nativeElement . src = this . _cardBack . animatedImage ; this . videoPlayerElement . nativeElement . load ( ) ; } } @ Input ( ) animated : boolean ; @ Input ( ) alwaysOn : boolean ; _cardBack : InternalCardBack ; private videoPlayerElement : ElementRef ; play ( event ) { if ( this . alwaysOn ) { return ; } this . videoPlayerElement . nativeElement . play ( ) ; } pause ( event ) { if ( this . alwaysOn ) { return ; } this . videoPlayerElement . nativeElement . pause ( ) ; } }