multi_embed_player 3.1.0 → 3.1.1

package/iframe_api/youtube.ts

@@ -1,311 +0,0 @@
-declare var YT: any;
-
-//Notice! This file JSDOC is generated by cloude 3.5 sonnet and github copilot
-// So some of the comments may include wrong
-// Please refer to documents https://multi-embed-player.pages.dev/docs/reference/iframe_class/#mep_youtube
-
-interface MepYoutubeLoadObject {
-    videoId: string;
-    startSeconds?: number;
-    endSeconds?: number;
-}
-
-interface MepYoutubePlayerVars {
-    autoplay?: number;
-    startSeconds?: number;
-    endSeconds?: number;
-}
-
-interface MepYoutubeContent {
-    videoId: string;
-    playerVars?: MepYoutubePlayerVars;
-    width?: number;
-    height?: number;
-}
-
-/**
- * Class representing a YouTube player.
- */
-class mep_youtube{
-    static youtube_api_loaded: number = 0;
-    static youtube_api_promise: (() => void)[] = [];
-    
-    player: HTMLElement = document.createElement("div");
-    autoplay: number = 0;
-    startSeconds: number = 0;
-    endSeconds: number = -1;
-    el: HTMLElement = document.createElement("div");
-    YT_player: any;
-
-    /**
-     * Load YouTube Iframe API asynchronously.
-     * @returns {Promise} Promise that resolves when the API is loaded.
-     */
-    async #load_youtube_api(){
-        return new Promise<void>(async(resolve,reject)=>{
-            if((window as any).mep_youtube.youtube_api_loaded===0){
-                (window as any).mep_youtube.youtube_api_loaded = 1;
-                const script_doc = document.createElement("script");
-                script_doc.src = "https://www.youtube.com/iframe_api";
-                //script_doc.addEventListener("error",this.#dispatchEvent(new CustomEvent("onError",{detail:{code:1001}})));
-                script_doc.addEventListener("load",()=>{YT.ready(()=>{(window as any).mep_youtube.youtube_api_promise.forEach((func: any)=>func());(window as any).mep_youtube.youtube_api_loaded = 2;resolve()})});
-                document.body.appendChild(script_doc);
-            }
-            else if((window as any).mep_youtube.youtube_api_loaded==1){
-                (window as any).mep_youtube.youtube_api_promise.push(resolve);
-            }
-            else{
-                resolve();
-            }
-        });
-    }
-
-    /**
-     * Create a new YouTube player instance.
-     */
-    constructor(replacing_element: string | HTMLElement, content: MepYoutubeContent, player_set_event_function?: (player: HTMLElement) => void){
-        this.#load(replacing_element,content,player_set_event_function);
-    }
-
-    /**
-     * Load the YouTube player.
-     */
-    async #load(replacing_element: string | HTMLElement, content: MepYoutubeContent, player_set_event_function?: (player: HTMLElement) => void): Promise<void>{
-        this.player = document.createElement("div");//dummy
-        if(typeof player_set_event_function === "function"){
-            player_set_event_function(this.player);
-        }
-        await this.#load_youtube_api();
-        let iframe_replace_node: HTMLElement | null = null;
-        if(typeof replacing_element==="string"){
-            iframe_replace_node = document.getElementById(replacing_element);
-        } else {
-            iframe_replace_node = replacing_element;
-        }
-        const playerVars = content.playerVars || {};
-        let playerVars_pass_over = {};
-        if(playerVars.autoplay){
-            this.autoplay = 1;
-            (playerVars_pass_over as any).autoplay = 1;
-        }
-        else{
-            (playerVars_pass_over as any).autoplay = 0;
-        }
-        if(playerVars.startSeconds){
-            this.startSeconds = playerVars.startSeconds;
-            (playerVars_pass_over as any).start = playerVars.startSeconds;
-        }
-        if(playerVars.endSeconds){
-            this.endSeconds = playerVars.endSeconds;
-            (playerVars_pass_over as any).end = playerVars.endSeconds;
-        }
-        if (iframe_replace_node) {
-            this.el = iframe_replace_node;
-            this.YT_player = new YT.Player(iframe_replace_node,{
-            height: "315",
-            width: "560",
-            videoId: content.videoId,
-            playerVars: playerVars_pass_over,
-            host: "https://www.youtube-nocookie.com",
-            events:{
-                "onReady":()=>{this.#dispatchEvent(new Event("onReady"))},
-                "onError":(e: { data: number })=>{this.#error_event_handler(e)},
-                "onStateChange":()=>{this.#dispatchEvent(new CustomEvent("onStateChange",{detail:this.getPlayerState()}));if(this.getPlayerState()==4){this.#dispatchEvent(new Event("onEndVideo"))}}
-            }
-            });
-            if(!this.autoplay){
-                this.player.addEventListener("onReady",()=>{this.pauseVideo()},{once: true});
-            }
-        }
-    }
-
-    /**
-     * Handle error events from the player.
-     */
-    #error_event_handler(event: { data: number }): void{
-        //change status code to mep error code
-        let code = 520;
-        switch(event.data){
-            case 2:
-                code = 401;
-                break;
-            case 5:
-                code = 500;
-                break;
-            case 100:
-                code = 404;
-                break;
-            case 101:
-            case 150:
-                code = 403;
-                break;
-        }
-        this.player.dispatchEvent(new CustomEvent("onError",{detail:{code:code}}));
-    }
-
-     /**
-     * Play the video.
-     */
-    playVideo(){
-        this.YT_player.playVideo();
-    }
-
-    /**
-     * Pause the video.
-     */
-    pauseVideo(){
-        this.YT_player.pauseVideo();
-    }
-
-    /**
-     * Get the current time of the video.
-     */
-    getCurrentTime(): number{
-        return this.YT_player.getCurrentTime();
-    }
-
-    /**
-     * Get the duration of the video.
-     */
-    getDuration(): number{
-        return this.YT_player.getDuration();
-    }
-
-    /**
-     * Get the actual duration between the start and end times.
-     */
-    getRealDulation(): number{
-        if(this.endSeconds==-1){
-            return this.getDuration() - this.startSeconds;
-        }
-        else{
-            return this.endSeconds - this.startSeconds;
-        }
-    }
-
-    /**
-     * Seek to a specific time in the video.
-     */
-    seekTo(time: number): void{
-        //try to time as number
-        time = Number(time);
-        if(isNaN(time)){
-            console.error("time is not a number(Nan error)");
-            return;
-        }
-        if(time<0){
-            time = 0;
-        }
-        this.YT_player.seekTo(time);
-    }
-
-    /**
-     * Set the volume of the player.
-     */
-    setVolume(volume: number): void{
-        if(typeof volume==="number"&&volume>=0&&volume<=100){
-            this.YT_player.setVolume(volume);
-        }
-        else{
-            console.error("volume is not a number or not in range 0-100");
-        }
-    }
-
-    /**
-     * Mute the player.
-     */
-    mute(){
-        this.YT_player.mute();
-    }
-
-     /**
-     * Unmute the player.
-     */
-    unMute(){
-        this.YT_player.unMute();
-    }
-
-    /**
-     * Check if the player is muted.
-     */
-    isMuted(): boolean{
-        return this.YT_player.isMuted();
-    }
-
-    /**
-     * Get the current volume of the player.
-     */
-    getVolume(): number{
-        return this.YT_player.getVolume();
-    }
-
-    /**
-     * Get the current state of the player.
-     */
-    getPlayerState(): number{
-        let nowstatus = this.YT_player.getPlayerState();
-        if((this.getCurrentTime()>this.getDuration()-1&&this.getCurrentTime()!=0&&this.getDuration()!=0)||(this.endSeconds!=-1&&this.endSeconds-1<=this.getCurrentTime())){
-            return 4
-        }
-        else if(nowstatus==-1){
-            return 0
-        }
-        else if(nowstatus==0){
-            return 4
-        }
-        else if(nowstatus==1){
-            return 2
-        }
-        else if(nowstatus==2){
-            return 3
-        }
-        else if(nowstatus==3||nowstatus==5){
-            return 1
-        }
-        return 0;
-    }
-
-    /**
-     * Get the title of the currently loaded video.
-     */
-    getTitle(): string{
-        return this.YT_player.getVideoData().title;
-    }
-
-    /**
-     * Load a new video by ID.
-     */
-    loadVideoById(content: MepYoutubeLoadObject | string, startSeconds?: number): void{
-        if(typeof content==="object"){
-            this.YT_player.loadVideoById(content);
-        }
-        else{
-            this.YT_player.loadVideoById(content,startSeconds);
-        }
-    }
-
-    /**
-     * Cue a new video by ID.
-     */
-    cueVideoById(content: MepYoutubeLoadObject | string, startSeconds?: number): void{
-        if(typeof content==="object"){
-            this.YT_player.cueVideoById(content);
-        }
-        else{
-            this.YT_player.cueVideoById(content,startSeconds);
-        }
-    }
-
-    /**
-     * Dispatch an event on the player.
-     */
-    #dispatchEvent(event: Event): void{
-        try{
-            this.player.dispatchEvent(event);
-        }
-        catch(e){
-            console.error(e);
-        }
-    }
-}
-(window as any).mep_youtube = mep_youtube;