export interface IMedia {
   title: string;
   src: string;
   type: string;

}


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    elem: any;
    title = 'app works!';
    isActive: boolean = false;
    isCompleted: boolean = false;
    isPlayerReady: boolean = false;
    playlist:any;
    state: string = VgStates.VG_PAUSED;

    constructor(private list: VideoListService) {

        this.list.fetchdata().subscribe((data)=>{   //Fetch json Data From Service
            this.playlist=data;
            console.log("Video Data",data);

       })


    }

    ngOnInit(){
      //this.playlist: Array<IMedia> = this.list.getPlaylist()
    }


    currentIndex = 0; //Can not a read a propert 0 undefind.
    currentItem: IMedia = this.playlist[this.currentIndex ];
    api: VgAPI;
    latestV;

    toggle() {
        this.isActive = !this.isActive;
        console.log(this.isActive);
        if(!this.isActive){
            this.api.getDefaultMedia().subscriptions.ended.subscribe( this.prevVideo.bind(this) );
        }else{
            this.api.getDefaultMedia().subscriptions.ended.subscribe( this.nextVideo.bind(this) );
        }
    }

    onPlayerReady(api: VgAPI) {
        //console.log(api);
        this.api = api;
        this.api.getDefaultMedia().subscriptions.loadedMetadata.subscribe(this.playVideo.bind(this));
    }

    nextVideo() {
        this.currentIndex++;
        if (this.currentIndex === this.playlist.length) {
            this.currentIndex = 0;
        }
        this.currentItem = this.playlist[ this.currentIndex ];
    }

    prevVideo() {
        this.currentIndex--;
        if (this.currentIndex === this.playlist.length) {
            this.currentIndex = 0;
        }
        this.currentItem = this.playlist[ this.currentIndex ];
        setTimeout(function() {
            this.api.pause();
        }.bind(this),100);
    }

    playVideo() {
        this.api.play();
    }

    onClickPlaylistItem(item: IMedia) {
        console.log(item);
        this.currentItem = item;
    };

    onClickPlayPrevItem() {
        this.currentIndex-=1;
        this.currentItem = this.playlist[ this.currentIndex ];
        console.log(this.currentIndex);
    };

    onClickPlayNextItem() {
        this.currentIndex+=1;
        this.currentItem = this.playlist[ this.currentIndex];
        console.log(this.currentIndex);
    };


}

import { Injectable } from '@angular/core';
import { Http, Response } from "@angular/http";
import { Observable } from "rxjs/Observable";
import "rxjs/Rx";
@Injectable()
export class VideoListService {

    constructor(private http: Http) { }


    fetchdata() {
        return this.http.get("../assets/data/video/video_list.json");
    }

}