import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'

import { VideoService } from '../../../services/svc.video';
import { SeoService }   from '../../../services/svc.seo';

@Component({
    moduleId: module.id+'',
    selector: 'videos',
    templateUrl: './tpl.video.pug',
    styleUrls: ['sty.video.scss']
})
export class VideoComponent implements OnInit {

    constructor(
        private videoService: VideoService,
        private sanitizer: DomSanitizer,
        private _seo: SeoService
    ) { }

    videos: any;
    player: any;
    current: number = 0;
    error: string;


    // get video iframe
    showPlayer(id:number) {
        if(this.videos){
            // Unsafely add HTML from json. This is a XSS security risk and is bad, mmkay.
            this.player = this.sanitizer.bypassSecurityTrustHtml(this.videos[id].embed.html);
            this.current = id;
        }
        else {
            // TODO: proper error handling
            console.log('No videos available.');
        }
    }


    ngOnInit() { 

        // Get video data from service and call first player
        this.videoService.getVideos()
            .then(data => {
                if (data.error) {
                    this.error = data.error;
                }
                else {
                    this.videos = data;
                    this.showPlayer(0);
                }
        })
    }


}