import { HttpClient, HttpParams } from '@angular/common/http';
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PlyrComponent } from 'ngx-plyr';
import * as Plyr from 'plyr';
import { ConfigService } from 'src/app/config.service';

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.css']
})
export class PlayerComponent implements OnInit {
  @ViewChild('videoPlayer') videoplayer: ElementRef;

  @ViewChild(PlyrComponent)
  plyr: PlyrComponent;
  
  // or get it from plyrInit event
  player: Plyr;
  
  videoSources: Plyr.Source[] = [];
  
  options: Plyr.Options = {
    quality: { default: 576, options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240] }
  }

  videoLoc:string;
  thumbnail:string;

  constructor(
    private activatedRoute: ActivatedRoute,
    private http: HttpClient,
    private config: ConfigService
    ) { }

  ngOnInit(): void {

    // TODO: get video from api
    // TODO: Prevent download from videos -> tempfix -> the html itself hides download button
    // REQUIREMENT: wait for networking to be able calling api (WIP)
    // this should use the body but has to revert back to using query strings
    // PROGRESS: the player is able to hotload videolinks and play them

    const vidQuery = {
      video: this.activatedRoute.snapshot.params['watch']
    };

    let params = new HttpParams()
    .set('vidQuery',JSON.stringify(vidQuery));

    this.thumbnail = null;    
    this.videoSources[0] = { src: this.config.hostname + "/videos/video/" + this.activatedRoute.snapshot.params['watch'], provider: "html5", size: 1080, type: 'video/mp4' }
  }

  played(event: Plyr.PlyrEvent) {
    console.log('played', event);
  }
  
  play(): void {
    this.player.play(); // or this.plyr.player.play()
  }
}
