import { Component, Input, OnInit } from '@angular/core';
import { MessageService } from '../../../services/message.service';

import { VapInit } from '../../../lib/vap-player/index';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
  selector: 'app-flutter-comp',
  templateUrl: './flutter-comp.component.html',
  styleUrls: ['./flutter-comp.component.scss'],
  standalone: true,
  imports: [],
})
export class FlutterCompComponent implements OnInit {
  @Input('domId') domId: string = 'vap-gift';
  private ngUnsubscribe = new Subject<void>(); // 用于取消订阅
  constructor(public msgSerrvice: MessageService) {
    this.msgSerrvice.eventplay$
      .pipe(takeUntil(this.ngUnsubscribe)) // 使用 takeUntil 取消订阅
      .subscribe((data) => {
        this.playGift(data);
      });
  }
  playGift(param: { video: string; config: any }) {
    console.log('param:', param);
    this.msgSerrvice.isPlayer = true;
    let dom = document.getElementById(this.domId);
    // console.log(dom);
    let vapPlayer = VapInit({
      container: dom, // 要渲染的载体，dom元素
      src: param.video, // vap动画地址
      config: param.config, // 播放vap动画需要的 json文件。必填
      width: window.innerWidth, // 容器宽度
      height: window.innerHeight, // 容器高度
      fps: 30, // 帧数，json文件中有这个视频的帧数的，可以看一下，
      mute: false, // 静音
      type: 2, // 组件基于type字段做了实例化缓存，不同的VAP实例应该使用不同的type值（如0、1、2等）
      loop: false, // 循环
      precache: true, // 预加载视频，下载完再播。小动画建议边下边播，大动画还是先下后播吧，因为太大了或者网络不好，会一卡一卡的。
      beginPoint: 0, // 起始播放时间点(单位秒),在一些浏览器中可能无效
      accurate: true, // 是否启用精准模式（使用requestVideoFrameCallback提升融合效果，浏览器不兼容时自动降级）
    });
    // vapPlayer.play(); // 开始播放

    // 尝试通过用户交互触发播放
    if (document.hidden) {
      document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
          vapPlayer?.play();
        }
      });
    } else {
      vapPlayer?.play();
    }

    vapPlayer.on('ended', () => {
      // 监听播放完成的事件
      vapPlayer.destroy();
      vapPlayer = null;
      console.log('播放结束');
      this.msgSerrvice.giftLogMap.pop();
      if (this.msgSerrvice.giftLogMap.length > 0) {
        let obj = this.msgSerrvice.giftLogMap.slice(-1)[0];
        this.playGift({
          video: obj.gift.video,
          config: obj.gift.config,
        });
      } else {
        this.msgSerrvice.isPlayer = false;
      }
    });
    vapPlayer.on('playering', function () {
      console.log('playering');
    });
  }
  ngOnInit() {}
  ngOnDestroy(): void {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}
