multi_embed_player 3.0.1 → 3.1.0

package/iframe_api/youtube.ts

@@ -0,0 +1,311 @@
+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;