import { Component, ElementRef, ApplicationRef, ChangeDetectorRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit } from '@angular/core';
import * as _ from 'lodash';




@Component({
  selector: 'app-play',
  templateUrl: './play.component.html',
  styleUrls: ['./play.component.scss'],
})
export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {

  // 数据
  data;
  saveKey = 'ww_video';


  @ViewChild('videoNode')
  videoNodeRef: ElementRef;
  @ViewChild('videoProgress')
  videoProgressRef: ElementRef;
  player: any;
  progress = 0;
  currentTime = 0;
  duration = 0;
  isPlaying = false;
  hasVideo = false;
  touchSeeking = false;
  initCover = false;
  isPlayStarted = false;
  

  constructor(private appRef: ApplicationRef,
    public changeDetectorRef: ChangeDetectorRef) {
  }

  ngOnInit() {
    this.data = {
      contentObj: {
        video_url: null
      }
    };
    // 获取数据
    const getData = ( window as any).courseware.getData;
    getData((data) => {
      if (data && typeof data === 'object') {
        this.data = data;
      }
      this.hasVideo = !!this.data.contentObj.video_url
      window["air"].hideAirClassLoading(this.saveKey, this.data);

      this.refresh();

    }, this.saveKey);
  }

  ngOnDestroy() {
  }

  ngOnChanges(data) {

  }

  ngAfterViewInit() {
    if (!this.videoNodeRef) {
      return;
    }
    this.player = this.videoNodeRef.nativeElement;
    this.player.ontimeupdate = (event) => {
      this.onTimeUpdate(event);
    };
    this.player.onloadedmetadata = () => {
      this.currentTime = 0;
      this.duration = this.player.duration;
    };
    this.player.onseeking = () => {
      this.player.pause();
    };
    this.player.onseeked = () => {
      this.player.play();
      this.touchSeeking = false;
    };
    this.player.onplay = () => {
      this.isPlaying = true;
    };
    this.player.onpause = () => {
      this.isPlaying = false;
    };

    this.player.addEventListener("ended", () => {
      this.refresh();
    })
    setTimeout(() => {
      this.initCover = this.data.contentObj.pic_id;
    });
  }

  playVideo() {
    if (!this.videoNodeRef) {
      return;
    }
    if (!this.player) {
      this.ngAfterViewInit();
    }
    if (!this.player) {
      return;
    }
    this.initCover = false;
    if (this.player.paused) {
      const playPromise = this.player.play();
      if (playPromise !== undefined) {
        playPromise.then(_ => {
          this.isPlayStarted = true;
        })
        .catch(error => {
          console.log('error', error);
        });
      }
    } else {
      this.player.pause();
    }
    this.refresh();
  }


  onTimeUpdate(event) {
    const player = event.target;
    this.currentTime = player.currentTime;
    this.progress = Math.floor((player.currentTime / player.duration) * 100);
    console.log(this.progress);
    this.duration = this.player.duration;
  }

  onBtnQuickSeek(delta: number) {
    this.player.currentTime += delta;
  }

  onProgressMouseDown(event) {
    this.player.pause();
    this.touchSeeking = true;
  }

  onProgressMouseMove(event) {
    if (this.touchSeeking) {
      const {target, offsetX} = event;
      this.progress = Math.floor(offsetX / target.clientWidth * 100);
    }
  }

  onProgressMouseUp(event) {
    const {target, offsetX} = event;
    this.player.currentTime = this.player.duration * offsetX / target.clientWidth;
  }

  refresh() {
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
  }


}
