59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
import { Component, AfterContentInit, Input } from '@angular/core';
|
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
import { AudioPlayerService } from '../../services/audio-player.service';
|
|
|
|
@Component({
|
|
selector: 'sermon-small-component',
|
|
templateUrl: './sermon-small.component.html',
|
|
styleUrls: ['./sermon-small.component.css'],
|
|
animations:[
|
|
trigger("inout",[
|
|
state("1", style({ opacity: '1', transform:'translateX(0)' })),
|
|
state("0",style({ opacity: '0', transform:'translateX(5%)' })),
|
|
transition('* => 1',[
|
|
animate('500ms ease-in-out')
|
|
]),
|
|
transition(':enter',[
|
|
animate('0ms')
|
|
])
|
|
])
|
|
]
|
|
})
|
|
export class SermonSmallComponent implements AfterContentInit {
|
|
@Input()
|
|
id: number;
|
|
@Input()
|
|
title: string;
|
|
@Input()
|
|
description: string;
|
|
@Input()
|
|
date: Date;
|
|
@Input()
|
|
author: string;
|
|
@Input()
|
|
url: string;
|
|
public startFadeIn: boolean = false;
|
|
@Input()
|
|
public delayFadeIn: number = 100;
|
|
|
|
constructor(private audioPlayer: AudioPlayerService){
|
|
|
|
}
|
|
|
|
play(): void{
|
|
if (this.audioPlayer.getIsPlaying() == true && this.audioPlayer.getMetaData() != null && this.audioPlayer.getMetaData().id == this.id){
|
|
this.audioPlayer.pause();
|
|
} else {
|
|
if (this.audioPlayer.getMetaData() != null && this.audioPlayer.getMetaData().id == this.id){
|
|
this.audioPlayer.resume();
|
|
} else {
|
|
this.audioPlayer.play(this.url,{id:this.id,title:this.title,author:this.author});
|
|
}
|
|
}
|
|
}
|
|
|
|
ngAfterContentInit(): void{
|
|
setTimeout(() => this.startFadeIn = true, this.delayFadeIn);
|
|
}
|
|
}
|