multi_embed_player 3.0.1 → 3.1.0

package/iframe_api/soundcloud.ts

@@ -0,0 +1,450 @@
+declare var SC: any;
+
+//Notice! This file JSDOC is generated by gitHub Copilot
+// So some of the comments may be wrong
+// Please refer to documents https://multi-embed-player.pages.dev/docs/reference/iframe_class/#mep_soundcloud
+
+/**
+ * @typedef {Object} mep_soundcloud_load_object
+ * @property {string} videoId - The ID of the video.
+ * @property {number} [startSeconds] - The start time of the video.
+ * @property {number} [endSeconds] - The end time of the video.
+ */
+
+/**
+ * @typedef {Object} mep_soundcloud_playerVars
+ * @property {number} [autoplay] - Whether to autoplay the initial video.
+ * @property {number} [hide_related] - Hide related videos after the video ends.
+ * @property {number} [show_comments] - Show comments.
+ * @property {number} [show_user] - Show the user's name and profile picture.
+ * @property {number} [show_reposts] - Show reposts.
+ * @property {number} [visual] - Show the video title and other visual metadata.
+ * @property {number} [startSeconds] - The start time of the video.
+ * @property {number} [endSeconds] - The end time of the video.
+ */
+
+/**
+ * @typedef {Object} mep_soundcloud_content
+ * @property {string} videoId - The ID of the video.
+ * @property {mep_soundcloud_playerVars} [playerVars] - Player parameters.
+ * @property {number} width - The width of the video player.
+ * @property {number} height - The height of the video player.
+ */
+
+// TypeScript interfaces based on JSDoc
+interface mep_soundcloud_load_object {
+    videoId: string;
+    startSeconds?: number;
+    endSeconds?: number;
+}
+
+interface mep_soundcloud_playerVars {
+    autoplay?: number | string;
+    hide_related?: number | string;
+    show_comments?: number | string;
+    show_user?: number | string;
+    show_reposts?: number | string;
+    visual?: number | string;
+    startSeconds?: number;
+    endSeconds?: number;
+    [key: string]: number | string | undefined;
+}
+
+interface mep_soundcloud_content {
+    videoId: string;
+    playerVars?: mep_soundcloud_playerVars;
+    width: number;
+    height: number;
+}
+
+interface TrackData {
+    currentPosition: number;
+}
+
+interface SoundMetadata {
+    title: string;
+    duration: number;
+}
+
+/**
+ * Class representing a SoundCloud player.
+ */
+class mep_soundcloud{
+    player: HTMLIFrameElement = document.createElement("iframe");
+    playerVars: mep_soundcloud_playerVars | undefined;
+    player_statusdata: any;
+    autoplay: boolean = false;
+    player_widget: any;
+    player_metadata: any;
+    before_mute_volume: number = 100;
+    forse_pause: boolean = false;
+    first_seek_time: number = -1;
+    endSeconds: number = -1;
+    pause_sended: boolean = false;
+    interval: number = 0;
+    previous_player_status: number = -1;
+    retry_count: number = 0;
+    
+    static soundcloud_api_loaded: boolean | null = null;
+    static soundcloud_api_promise: (() => void)[] = [];
+    static numericRegex = /^[0-9]+$/;
+    async #load_soundcloud_api(){
+        if((window as any).mep_soundcloud.soundcloud_api_loaded === null){
+            if(typeof SC!=="object"){
+                (window as any).mep_soundcloud.soundcloud_api_loaded = false;
+                const script_document = document.createElement("script");
+                script_document.src = "https://w.soundcloud.com/player/api.js";
+                script_document.addEventListener("load",()=>{(window as any).mep_soundcloud.soundcloud_api_loaded = true;(window as any).mep_soundcloud.soundcloud_api_promise.forEach((func: () => void)=>func())});
+                script_document.addEventListener("error",()=>{this.player.dispatchEvent(new CustomEvent("onError",{detail:{code:1001}}))});
+                document.body.appendChild(script_document);
+                await new Promise((resolve,reject)=>(window as any).mep_soundcloud.soundcloud_api_promise.push(resolve));
+            }
+            else{
+                (window as any).mep_soundcloud.soundcloud_api_loaded = true;
+            }
+        }
+        else if((window as any).mep_soundcloud.soundcloud_api_loaded === false){
+            await new Promise((resolve,reject)=>(window as any).mep_soundcloud.soundcloud_api_promise.push(resolve));
+        }
+    }
+    constructor(replacing_element: string | HTMLElement, content: mep_soundcloud_content, player_set_event_function?: (player: HTMLIFrameElement) => void){
+        this.#load(replacing_element,content,player_set_event_function);
+    }
+    async #load(replacing_element: string | HTMLElement, content: mep_soundcloud_content, player_set_event_function?: (player: HTMLIFrameElement) => void){
+        this.player.style.border = "none";
+        this.player.allow = "autoplay";
+        if(typeof player_set_event_function === "function"){
+            player_set_event_function(this.player);
+        }
+        await this.#load_soundcloud_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;
+        }
+        let url_params = new URLSearchParams();
+        let tflist = ["autoplay","hide_related","show_comments","show_user","show_user","show_reposts","visual"];
+        this.playerVars = content.playerVars;
+        this.player_statusdata = {playing_status:1,currentPosition:0,volume:100};
+        if(typeof content.playerVars === "object" && content.playerVars !== null){
+            tflist.forEach(option=>{
+                if(content.playerVars && typeof content.playerVars[option]==="number"){
+                    content.playerVars[option] = content.playerVars[option].toString()
+                }
+                if(!content.playerVars || typeof content.playerVars[option] === "undefined"){
+                    url_params.set(option,"true");
+                }
+                else if(content.playerVars[option] === "1" || content.playerVars[option] === "true"){
+                    url_params.set(option,"true");
+                }
+                else if(content.playerVars[option] === "0" || content.playerVars[option] === "false"){
+                    url_params.set(option,"false");
+                }
+                else{
+                    url_params.set(option,content.playerVars[option] as string);
+                }
+            });
+            if(content.playerVars && (content.playerVars.autoplay == "true" || content.playerVars.autoplay == 1)){
+                this.autoplay = true;
+            }
+        }
+        else{
+            tflist.forEach(option=>{url_params.set(option,"false");});
+        }
+        if((window as any).mep_soundcloud.numericRegex.test(content.videoId)){
+            this.player.src = `https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/${content.videoId}&${url_params.toString()}`;
+        }
+        else{
+            this.player.src = `https://w.soundcloud.com/player/?url=https://soundcloud.com/${content.videoId}&${url_params.toString()}`;
+        }
+        if (iframe_replace_node) {
+            iframe_replace_node.replaceWith(this.player);
+        }
+        this.player_widget = SC.Widget(this.player);
+        this.player_metadata = {};//renew when load new ones
+        this.forse_pause = !this.autoplay;
+        this.player_widget.bind(SC.Widget.Events.READY,()=>{this.#ready_function()});
+        this.player_widget.bind(SC.Widget.Events.PLAY_PROGRESS,(data: TrackData)=>{this.#tracker(data);this.#tracking_function()});
+        this.player_widget.bind(SC.Widget.Events.PLAY,()=>{if(this.first_seek_time!==-1){this.seekTo(this.first_seek_time);this.first_seek_time=-1};this.player_statusdata.playing_status = 2});
+        this.player_widget.bind(SC.Widget.Events.PAUSE,()=>{this.player_statusdata.playing_status = 3;this.pause_sended = false;this.forse_pause = true});
+        //this.player_widget.bind(SC.Widget.Events.SEEK,()=>this.player_statusdata.playing_status = 3);
+        this.player_widget.bind(SC.Widget.Events.FINISH,()=>{this.player.dispatchEvent(new Event("onEndVideo"));this.player_statusdata.playing_status = 4});
+        this.player_widget.bind(SC.Widget.Events.ERROR,()=>this.player.dispatchEvent(new Event("onError")));
+        if(this.autoplay){
+            this.#startTracking();
+        }
+        this.first_seek_time = (content.playerVars && typeof content.playerVars.startSeconds === "number")?content.playerVars.startSeconds:-1;
+        this.endSeconds = (content.playerVars && typeof content.playerVars.endSeconds === "number")?content.playerVars.endSeconds:-1;
+    }
+    /**
+     * execute when player is ready
+     * @param {boolean} retry 
+     */
+    #ready_function(retry: boolean = false){
+        this.player.dispatchEvent(new Event("onReady"));
+        this.player_widget.getCurrentSound((data: SoundMetadata | null)=>{if(data===null){this.player.dispatchEvent(new Event("onError"))};this.player_metadata = data});
+        if(this.autoplay&&!this.forse_pause){
+            this.playVideo();
+            if(retry&&this.retry_count<7){
+                this.retry_count++;
+                setTimeout(()=>{this.#ready_function(true)},1000);
+            }
+        }
+    }
+    /**
+     * save current position
+     * @param {Object} trackData 
+     */
+    #tracker(trackData: TrackData){
+        this.player_statusdata.currentPosition = trackData.currentPosition;
+    }
+          /**
+       * This function tracks the player's state and fires events as needed. 
+       * Specifically, it fires events when the playback state changes or when a certain playback time is reached.
+       */
+      #tracking_function(){
+          //this.player_widget.getVolume((volume)=>{this.player_statusdata.volume = volume});
+          //this.player_widget.isPaused((pause_status)=>{pause_status?this.player_statusdata.playing_status = 3:this.player_statusdata.playing_status = 2});
+          if(this.previous_player_status!==this.player_statusdata.playing_status){
+              this.previous_player_status = this.player_statusdata.playing_status;
+              this.player.dispatchEvent(new CustomEvent("onStateChange",{detail:this.getPlayerState()}));
+          }
+          if(this.endSeconds!=-1&&this.endSeconds<=this.getCurrentTime()){
+              if(!this.pause_sended){
+                  this.pause_sended = true;
+                  this.pauseVideo();
+                  this.player.dispatchEvent(new Event("onEndVideo"));
+                  this.player_statusdata.playing_status = 4;
+              }
+          }
+      }
+    /**
+     *  This function sets an interval for state tracking. However, in the current code, it's commented out and does nothing.
+     */
+    #startTracking(){
+        if(this.interval===0){
+            //this.interval = setInterval(()=>{this.tracking_function()},1000); 
+        }
+    }
+    /**
+     * This function clears the interval set for state tracking and calls the #tracking_function() method.
+     */
+    #stopTracking(){
+        clearInterval(this.interval);
+        this.interval = 0;
+        this.#tracking_function();
+    }
+    /**
+     * This function plays the video.
+     */
+    playVideo(){
+        this.#startTracking();
+        if(this.first_seek_time!==-1){
+            this.seekTo(this.first_seek_time);
+            this.first_seek_time = -1;
+        }
+        this.player_widget.play();
+    }
+    /**
+     * This function pauses the video.
+     */
+    pauseVideo(){
+        this.#stopTracking();
+        this.player_widget.pause();
+        this.forse_pause = true;
+    }
+    /**
+     * This function return the current time of the video.
+     * @returns {number} current time of the video
+     */
+    getCurrentTime(){
+        return this.player_statusdata.currentPosition/1000;
+    }
+    /**
+     * This function return the duration of the video.
+     * @returns {number} duration of the video
+     */
+    getDuration(){
+        return this.player_metadata.duration / 1000;
+    }
+    /**
+     * This function seeks to a specified time in the video.
+     * @param {number} skipSecounds - The time to which the player should advance.
+     */
+    seekTo(skipSecounds: number){
+        if(typeof skipSecounds === "number"){
+            this.player_widget.seekTo(skipSecounds*1000);
+        }
+        else{
+            console.error("seekTo argument must be number");
+        }
+    }
+    /**
+     * This function sets the volume of the video player.
+     * @param {number} volume 
+     */
+    setVolume(volume: number){
+        this.player_widget.setVolume(volume);
+        this.player_statusdata.volume = volume;
+    }
+    /**
+     * This function mutes the video player.
+     */
+    mute(){
+        this.before_mute_volume = this.player_statusdata.volume;
+        this.setVolume(0);
+    }
+    /**
+     * This function unmutes the video player.
+     */
+    unMute(){
+        this.setVolume(this.before_mute_volume);
+    }
+    /**
+     * This function checks whether the video player is muted.
+     * @returns {boolean} true if the video player is muted, and false if not.
+     */
+    isMuted(){
+        return this.player_statusdata.volume===0;
+    }
+    /**
+     * This function returns the volume of the video player.
+     * @returns {number} volume of the video player
+     */
+    getVolume(){
+        return this.player_statusdata.volume;
+    }
+    /**
+     * This function returns the status of the video player.
+     * @returns {number} status code
+     */
+    getPlayerState(){
+        return this.player_statusdata.playing_status;
+    }
+    /**
+     * This function returns the title of the video.
+     * @returns {string} title of the video
+     */
+    getTitle(){
+        return this.player_metadata.title;
+    }
+    /**
+     * return duration between start and end seconds
+     * @returns {number} dulation of between start and end
+     */
+    getRealDulation(){//original function
+        if(this.endSeconds==-1){
+            return this.getDuration() - this.first_seek_time;
+        }
+        else{
+            return this.endSeconds - this.first_seek_time;
+        }
+    }
+    /**
+     * Load a new video into the player.
+     * @param {mep_soundcloud_load_object} content 
+     * @param {number} startSeconds 
+     * @param {boolean} autoplay 
+     */
+    #musicLoader(content: mep_soundcloud_load_object | string, startSeconds: number, autoplay: boolean){
+        /*
+        let options = {playerVars:this.playerVars};
+        if(options.playerVars === undefined){
+            options.playerVars = {};
+        }
+        options.playerVars["autoplay"] = autoplay;
+        if(typeof content === "string"){
+            options["videoId"] = content;
+        }
+        else if (typeof content === "object"){
+            options["videoId"] = content["videoId"];
+            if(typeof startSeconds === "number"){
+                options["start"] = startSeconds;
+            }
+            else if(typeof content["startSeconds"] === "number"){
+                options["start"] = content["startSeconds"];
+            }
+            if(typeof content["endSeconds"] === "number"){
+                options["end"] = content["endSeconds"];
+            }
+        }
+        const tmp_replace_element = document.createElement("div");
+        tmp_replace_element.replaceWith(this.player);
+        this.load(tmp_replace_element,options);
+        */
+        
+        let url_params: any = {set(op: string, val: string){this[op]=val}}
+        let tflist = ["hide_related","show_comments","show_user","show_user","show_reposts","visual"];
+        if(this.playerVars && typeof this.playerVars==="object"){
+            tflist.forEach(option=>{
+                if(this.playerVars && typeof this.playerVars[option] === "string"&&this.playerVars[option] === "true"){
+                    url_params.set(option,"true");
+                }
+                else{
+                    url_params.set(option,"false");
+                }
+            });
+        }
+        else{
+            tflist.forEach(option=>{url_params.set(option,"false");});
+        }
+        url_params.set("autoplay",autoplay?"true":"false");
+        this.autoplay = autoplay;
+        let musicId = "";
+        if(typeof content === "object"){
+            musicId = content.videoId;
+            if(typeof content.startSeconds=="number"&&!Number.isNaN(content.startSeconds)){
+                this.first_seek_time = content.startSeconds;
+            }
+            else{
+                this.first_seek_time = -1;
+            }
+            if(typeof content.endSeconds=="number"&&!Number.isNaN(content.endSeconds)){
+                this.endSeconds = content.endSeconds;
+            }
+            else{
+                this.endSeconds = -1;
+            }
+        }
+        else if(typeof content === "string"){
+            musicId = content;
+            if(typeof startSeconds === "number" && !Number.isNaN(startSeconds)){
+                this.first_seek_time = startSeconds;
+            }
+            else{
+                this.first_seek_time = -1;
+            }
+            this.endSeconds = -1;
+        }
+        else{
+            this.player.dispatchEvent(new CustomEvent("onError",{detail:{code:401}}));
+        }
+        if((window as any).mep_soundcloud.numericRegex.test(musicId)){
+            this.player_widget.load(`https://api.soundcloud.com/tracks/${String(musicId)}`,url_params,this.#ready_function);
+        }
+        else{
+            this.player_widget.load(`https://soundcloud.com/${String(musicId)}`,url_params,this.#ready_function);
+        }
+        this.retry_count = 0;
+        this.forse_pause = false;
+        this.#ready_function(true);
+    }
+    /**
+     * Load a new video into the player.With autoplay
+     * @param {mep_soundcloud_load_object} content 
+     * @param {number} startSeconds 
+     */
+    loadVideoById(content: mep_soundcloud_load_object | string, startSeconds: number){
+        this.#musicLoader(content,startSeconds,true);
+    }
+    /**
+     * Load a new video into the player.Without autoplay
+     * @param {mep_soundcloud_load_object} content 
+     * @param {number} startSeconds 
+     */
+    cueVideoById(content: mep_soundcloud_load_object | string, startSeconds: number){
+        this.#musicLoader(content,startSeconds,false);
+    }
+}
+(window as any).mep_soundcloud = mep_soundcloud;