import { LightningElement, api } from "lwc";
import Player from "@vimeo/player";
import { Options, Player as PlayerType } from "vimeo__player";

export default class VimeoPlayer extends LightningElement {
    @api videoId!: number;
    @api
    get options() {
        return this._options;
    }
    set options(value: any) {
        this._options = JSON.parse(value);
    }

    private player!: PlayerType;
    private _options: Options = {
        responsive: true,
        title: false
    };

    renderedCallback(): void {
        const videoContainer = this.template.querySelector(
            ".video-container"
        ) as HTMLElement;

        this.player = new Player(videoContainer, {
            id: this.videoId,
            ...this.options
        });
    }
}