multi_embed_player 3.0.1 → 3.1.1

package/dist/multi_embed_player.js

@@ -1,6 +1,20 @@
-import { ErrorCode } from './types';
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _multi_embed_player_instances, _multi_embed_player_check_image_status, _multi_embed_player_add_iframe, _multi_embed_player_mep_imageurl, _multi_embed_player_GDPR_accept, _multi_embed_player_error_event_handler, _multi_embed_player_setEvent, _multi_embed_player_deleteEvent, _multi_embed_player_PlayOnPlayer, _multi_embed_player_addPlaylist;
 /**
  * Fetches the iframe API for a given service and video ID.
+ * @param {string} service - The name of the service.
+ * @param {string} videoid - The ID of the video.
+ * @param {boolean} use_cors - Whether to use CORS.
+ * @param {boolean} image_proxy - The image proxy.
+ * @param {boolean} GDPR_access_accept - Whether GDPR access is accepted.
+ * @param {boolean} failed_send_error - Whether to send an error if the request fails.
+ * @param {HTMLElement} failed_send_error_target - The target to send the error to.
+ * @returns {Promise}
  */
 const multi_embed_player_fetch_iframe_api = async (service, videoid, use_cors, image_proxy, GDPR_access_accept, failed_send_error = false, failed_send_error_target = null) => {
     const xml_first_search = (data, search_string, start = 0) => {
@@ -19,19 +33,16 @@ const multi_embed_player_fetch_iframe_api = async (service, videoid, use_cors, i
             url = `${multi_embed_player.iframe_api_endpoint}?route=url_proxy&url=`;
         }
         let first_access = false;
-        if (!multi_embed_player.api_promise[service]) {
-            multi_embed_player.api_promise[service] = {};
-        }
         if (multi_embed_player.api_promise[service][videoid] === undefined) {
             multi_embed_player.api_promise[service][videoid] = { res: [], rej: [] };
             first_access = true;
         }
         else {
             await new Promise((resolve, reject) => {
-                const promise_data = multi_embed_player.api_promise[service][videoid];
-                if (promise_data) {
-                    promise_data.res.push(resolve);
-                    promise_data.rej.push(reject);
+                const promiseData = multi_embed_player.api_promise[service][videoid];
+                if (promiseData) {
+                    promiseData.res.push(resolve);
+                    promiseData.rej.push(reject);
                 }
             });
         }
@@ -48,43 +59,37 @@ const multi_embed_player_fetch_iframe_api = async (service, videoid, use_cors, i
                             url_oembed = `https://soundcloud.com/oembed?url=https://soundcloud.com/${videoid}&format=json`;
                         }
                         const oembed_response_fetch = await fetch(url + encodeURI(url_oembed));
-                        const oembed_response = await oembed_response_fetch.json();
+                        let oembed_response = await oembed_response_fetch.json();
                         oembed_response["image_base64"] = url + oembed_response["thumbnail_url"];
                         multi_embed_player.api_cache[service][videoid] = oembed_response;
                         break;
                     case 'niconico':
                         const xml_response = await (await fetch(url + `https://ext.nicovideo.jp/api/getthumbinfo/${videoid}`)).text();
                         let image_url = xml_first_search(xml_response, "thumbnail_url");
-                        const predict_long = 43 + 2 * (videoid.length - 2);
-                        const return_data = {};
+                        let predict_long = 43 + 2 * (videoid.length - 2);
+                        let return_data = {};
                         if (image_url.length > predict_long) {
                             image_url += ".L";
                         }
-                        if (image_url === "<?xml version=") {
+                        if (image_url == "<?xml version=") {
                             return_data["status"] = "invalid videoid";
                             return_data["thumbnail_url"] = "";
                         }
                         else {
                             return_data["status"] = "success";
                             return_data["thumbnail_url"] = image_url;
-                            const search_element_names = {
-                                video_id: "video_id",
-                                title: "title",
-                                description: "description",
-                                length: "length",
-                                view_counter: "view_count",
-                                comment_num: "comment_count",
-                                mylist_counter: "mylist_count",
-                                first_retrieve: "publish_time",
-                                embeddable: "embedable",
-                                genre: "genre"
-                            };
-                            Object.keys(search_element_names).forEach(key_name => return_data[search_element_names[key_name]] = xml_first_search(xml_response, key_name));
+                            const search_element_names = { video_id: "video_id", title: "title", description: "description", length: "length", view_counter: "view_count", comment_num: "comment_count", mylist_counter: "mylist_count", first_retrieve: "publish_time", embeddable: "embedable", genre: "genre" };
+                            Object.keys(search_element_names).forEach(key_name => {
+                                const mappedKey = search_element_names[key_name];
+                                if (mappedKey) {
+                                    return_data[mappedKey] = xml_first_search(xml_response, key_name);
+                                }
+                            });
                         }
                         multi_embed_player.api_cache[service][videoid] = return_data;
                         break;
                     case 'bilibili':
-                        const json_response_bilibili = await (await fetch(url + `https://api.bilibili.com/x/web-interface/view?bvid=${videoid}`)).json();
+                        let json_response_bilibili = await (await fetch(url + `https://api.bilibili.com/x/web-interface/view?bvid=${videoid}`)).json();
                         if (json_response_bilibili?.data?.pic === undefined) {
                             json_response_bilibili["image_base64"] = null;
                         }
@@ -95,7 +100,7 @@ const multi_embed_player_fetch_iframe_api = async (service, videoid, use_cors, i
                         break;
                     case "youtube":
                         try {
-                            const json_response_youtube = await (await fetch(url + `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoid}&format=json`)).json();
+                            let json_response_youtube = await (await fetch(url + `https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${videoid}&format=json`)).json();
                             json_response_youtube["image_base64"] = url + json_response_youtube["thumbnail_url"];
                             multi_embed_player.api_cache[service][videoid] = json_response_youtube;
                         }
@@ -104,19 +109,16 @@ const multi_embed_player_fetch_iframe_api = async (service, videoid, use_cors, i
                         }
                         break;
                 }
-                const promise_data = multi_embed_player.api_promise[service]?.[videoid];
-                if (promise_data) {
-                    promise_data.res.forEach(resolve => resolve());
-                }
+                multi_embed_player.api_promise[service][videoid].res.forEach((resolve) => resolve(undefined));
             }
         }
         catch {
-            const promise_data = multi_embed_player.api_promise[service]?.[videoid];
-            if (promise_data && "rej" in promise_data) {
-                promise_data.rej.forEach(reject => reject());
+            const promiseData = multi_embed_player.api_promise[service][videoid];
+            if (promiseData && Object.keys(promiseData).includes("rej")) {
+                promiseData.rej.forEach((reject) => reject());
             }
-            if (failed_send_error && failed_send_error_target !== null) {
-                failed_send_error_target.dispatchEvent(new CustomEvent("onError", { detail: { code: ErrorCode.NETWORK_ERROR } }));
+            if (failed_send_error && failed_send_error_target != null) {
+                failed_send_error_target.dispatchEvent(new CustomEvent("onError", { detail: { code: 1100 } }));
             }
             multi_embed_player.api_cache[service][videoid] = {};
         }
@@ -125,29 +127,29 @@ const multi_embed_player_fetch_iframe_api = async (service, videoid, use_cors, i
         let fetch_response;
         try {
             const url = `${multi_embed_player.iframe_api_endpoint}?route=${service}&videoid=${videoid}` + (image_proxy ? "&image_base64=1" : "");
-            if (multi_embed_player.api_promise[service]?.[videoid] === undefined) {
-                if (!multi_embed_player.api_promise[service]) {
-                    multi_embed_player.api_promise[service] = {};
-                }
+            if (multi_embed_player.api_promise[service][videoid] === undefined) {
                 multi_embed_player.api_promise[service][videoid] = { res: [], rej: [] };
                 fetch_response = await fetch(url);
                 multi_embed_player.api_cache[service][videoid] = await fetch_response.json();
-                multi_embed_player.api_promise[service][videoid].res.forEach(resolve => resolve());
+                multi_embed_player.api_promise[service][videoid].res.forEach((resolve) => resolve(undefined));
             }
             else {
                 await new Promise((resolve, reject) => {
-                    multi_embed_player.api_promise[service][videoid].res.push(resolve);
-                    multi_embed_player.api_promise[service][videoid].rej.push(reject);
+                    const promiseData = multi_embed_player.api_promise[service][videoid];
+                    if (promiseData) {
+                        promiseData.res.push(resolve);
+                        promiseData.rej.push(reject);
+                    }
                 });
             }
         }
         catch (e) {
-            const promise_data = multi_embed_player.api_promise[service]?.[videoid];
-            if (promise_data && "rej" in promise_data) {
-                promise_data.rej.forEach(reject => reject());
+            const promiseData = multi_embed_player.api_promise[service][videoid];
+            if (promiseData && Object.keys(promiseData).includes("rej")) {
+                promiseData.rej.forEach((reject) => reject());
             }
-            if (failed_send_error && failed_send_error_target !== null) {
-                failed_send_error_target.dispatchEvent(new CustomEvent("onError", { detail: { code: ErrorCode.NETWORK_ERROR } }));
+            if (failed_send_error && failed_send_error_target != null) {
+                failed_send_error_target.dispatchEvent(new CustomEvent("onError", { detail: { code: 1100 } }));
             }
             else {
                 multi_embed_player.api_cache[service][videoid] = {};
@@ -166,9 +168,20 @@ const multi_embed_player_GDPR_accepted_all_back_down = () => {
  * A custom HTML element for embedding multiple video services in a single player.
  * @extends HTMLElement
  */
-export class multi_embed_player extends HTMLElement {
+class multi_embed_player extends HTMLElement {
     constructor() {
         super();
+        _multi_embed_player_instances.add(this);
+        this.service = null;
+        this.image_url = null;
+        this.picture_tag = null;
+        this.player = null;
+        this.playlist = [];
+        this.autoplay = false;
+        this.error_not_declare = false;
+        this.previousData = null;
+        this.startSeconds = 0;
+        this.endSeconds = -1;
         this.videoid = null;
         this.follow_GDPR = multi_embed_player.follow_GDPR;
     }
@@ -185,14 +198,26 @@ export class multi_embed_player extends HTMLElement {
             else if (this.getAttribute("picture_tag") != null) {
                 this.picture_tag = document.createElement("picture");
                 this.appendChild(this.picture_tag);
-                this.picture_tag.innerHTML = this.getAttribute("picture_tag");
+                this.picture_tag.innerHTML = this.getAttribute("picture_tag") || "";
             }
             else {
-                this.image_url = await this.mep_imageurl(this.videoid, this.service);
-                if (!await this.check_image_status(this.image_url)) {
-                    this.image_url = await this.mep_imageurl(this.getAttribute("subVideoid"), this.getAttribute("subService"));
-                    if (!await this.check_image_status(this.image_url)) {
-                        this.style.backgroundImage = `${multi_embed_player.script_origin}icon/video_not_found.svgz`;
+                if (this.videoid && this.service) {
+                    this.image_url = await __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_mep_imageurl).call(this, this.videoid, this.service);
+                }
+                else {
+                    this.image_url = null;
+                }
+                if (this.image_url && !await __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_check_image_status).call(this, this.image_url)) {
+                    const subVideoid = this.getAttribute("subVideoid");
+                    const subService = this.getAttribute("subService");
+                    if (subVideoid && subService) {
+                        this.image_url = await __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_mep_imageurl).call(this, subVideoid, subService);
+                    }
+                    else {
+                        this.image_url = null;
+                    }
+                    if (this.image_url && !await __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_check_image_status).call(this, this.image_url)) {
+                        this.style.backgroundImage = `${window.multi_embed_player.script_origin}icon/video_not_found.svgz`;
                     }
                 }
             }
@@ -200,104 +225,595 @@ export class multi_embed_player extends HTMLElement {
                 this.style.backgroundImage = `url(${this.image_url})`;
             }
             else {
-                this.style.backgroundImage = `url(${multi_embed_player.script_origin}icon/video_not_found.svgz)`;
+                this.style.backgroundImage = `url(${window.multi_embed_player.script_origin}icon/video_not_found.svgz)`;
             }
             //status setting
             if (this.getAttribute("type") === null || this.getAttribute("type") === "embed") {
-                this.addEventListener('click', this.add_iframe, { once: true });
+                this.addEventListener('click', __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_add_iframe), { once: true });
             }
             if (this.getAttribute("type") === "thumbnail-click") {
-                this.addEventListener('click', () => { this.play_on_player(this.getAttribute("for"), this.getAttribute("service"), this.getAttribute("videoid"), this.getAttribute("start"), this.getAttribute("end"), this.getAttribute("subService"), this.getAttribute("subVideoid")); });
-                this.addEventListener('contextmenu', (e) => { e.preventDefault(); this.add_playlist(); });
+                this.addEventListener('click', () => { __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_PlayOnPlayer).call(this, this.getAttribute("for") || "", this.getAttribute("service") || "", this.getAttribute("videoid") || "", this.getAttribute("start"), this.getAttribute("end"), this.getAttribute("subService"), this.getAttribute("subVideoid")); });
+                this.addEventListener('contextmenu', (e) => { e.preventDefault(); __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_addPlaylist).call(this); });
             }
         }
         else if (this.getAttribute("type") === "player") {
-            // player initialization
+            this.player = {};
+            this.player.service = "before embed";
+            this.playlist = [];
+            this.addEventListener("onEndVideo", () => { if (this.playlist.length > 0) {
+                this.loadVideoById(this.playlist.shift());
+            } }); //終わりが来たとき次のやつを再生
+            this.addEventListener("addPlaylist", () => { if (this.getPlayerState() === -1 || this.getPlayerState() === 4) {
+                if (this.playlist.length > 0) {
+                    this.loadVideoById(this.playlist.shift());
+                }
+            } });
         }
     }
     /**
-     * Asynchronously fetches the image URL for a given video ID and service.
+     * Loads a video by its ID and sets the autoplay and subtitle options.
+     * @async
+     * @param {Object} data - The data object containing the video ID, service, start time, and end time.
+     * @param {boolean} [autoplay=true] - Whether or not to autoplay the video.
+     * @param {boolean} [sub=false] - Whether or not to load a subtitle. deprecated
+     * @returns {Promise<void>}
      */
-    async mep_imageurl(videoid, service) {
-        let GDPR_accepted = false;
-        if (!this.follow_GDPR) {
-            GDPR_accepted = true;
-        }
-        else if (this.follow_GDPR && !multi_embed_player.GDPR_accepted[service]) {
-            GDPR_accepted = false;
-        }
-        else if (this.follow_GDPR && multi_embed_player.GDPR_accepted[service]) {
-            GDPR_accepted = true;
-        }
-        let image_url = "";
-        let use_cors = false;
-        if (GDPR_accepted) {
-            if (multi_embed_player.cors_proxy !== "") {
-                image_url = multi_embed_player.cors_proxy;
-                use_cors = true;
+    async loadVideoById(data, autoplay = true, sub = false) {
+        this.autoplay = autoplay;
+        if (this.player != undefined) {
+            let service_changed = false;
+            this.error_not_declare = false;
+            if (data === null || (Array.isArray(data.call_array) && typeof data.call_index === "number")) {
+                if (data !== null) {
+                    this.previousData = data;
+                }
+                else {
+                    data = this.previousData;
+                }
+                data = Object.assign({}, data, data.call_array[data.call_index]);
+                this.videoid = data.videoId;
+                this.service = data.service;
+                if (data.call_array.length - 1 < data.call_index) {
+                    console.error("too large call_index");
+                }
+                else if (data.call_array.length - 1 === data.call_index) {
+                    this.error_not_declare = false;
+                }
+                else {
+                    this.error_not_declare = true;
+                    this.addEventListener("executeSecound", () => { this.loadVideoById(null, autoplay, false); }, { once: true });
+                }
+                if (this.service !== this.player.service) {
+                    __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_deleteEvent).call(this);
+                    service_changed = true;
+                }
+                if (this.previousData) {
+                    this.previousData.call_index++;
+                }
             }
             else {
-                image_url = `${multi_embed_player.iframe_api_endpoint}?route=url_proxy&url=`;
+                if (sub == false) { //1回目
+                    this.previousData = data;
+                    if (typeof data.subVideoId === "string" && typeof data.subService === "string") {
+                        this.error_not_declare = true;
+                        this.addEventListener("executeSecound", () => { this.loadVideoById(null, autoplay, false); }, { once: true });
+                    }
+                    if (data.service != this.player.service) {
+                        __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_deleteEvent).call(this);
+                        service_changed = true;
+                        this.service = data.service;
+                    }
+                    this.videoid = data.videoId;
+                }
+                else if (sub == true) {
+                    data = this.previousData;
+                    __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_deleteEvent).call(this);
+                    service_changed = true;
+                    this.videoid = data.subVideoId;
+                    this.service = data.subService;
+                }
             }
-        }
-        if (multi_embed_player.cors_proxy !== "") {
-            use_cors = true;
-        }
-        if (!GDPR_accepted || service === "bilibili") {
-            if (!(videoid in multi_embed_player.api_cache[service])) {
-                await multi_embed_player_fetch_iframe_api(service, videoid, use_cors, true, false);
+            await __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_GDPR_accept).call(this, data.service);
+            this.startSeconds = 0;
+            if (data.startSeconds != undefined) {
+                this.startSeconds = Number(data.startSeconds);
             }
-            return multi_embed_player.api_cache[service][videoid]["image_base64"];
-        }
-        else if (service === "soundcloud" || service === "youtube" || service === "niconico") {
-            if (!(videoid in multi_embed_player.api_cache[service])) {
-                await multi_embed_player_fetch_iframe_api(service, videoid, use_cors, !GDPR_accepted, GDPR_accepted);
+            this.endSeconds = -1;
+            if (data.endSeconds != undefined) {
+                this.endSeconds = Number(data.endSeconds);
             }
-            if (!GDPR_accepted) {
-                return multi_embed_player.api_cache[service][videoid]["image_base64"];
+            this.setAttribute("videoid", data.videoId); //いらないけど勘違い防止用に
+            this.setAttribute("service", data.service);
+            if (this.service && Object.keys(window.multi_embed_player.mep_load_api_promise).includes(this.service)) {
+                await this.iframe_api_loader(this.service);
+                if (service_changed == false) {
+                    //動画idを変えてiframeを再読み込み
+                    if (autoplay) {
+                        this.player.loadVideoById(data);
+                    }
+                    else {
+                        this.player.cueVideoById(data);
+                    }
+                }
+                else {
+                    this.innerHTML = "";
+                    let divdoc = document.createElement("div");
+                    divdoc.classList.add(`mep_${this.service}`);
+                    this.appendChild(divdoc);
+                    let playerVars = {};
+                    if (autoplay) {
+                        playerVars.autoplay = 1;
+                    }
+                    if (data["startSeconds"] != undefined) {
+                        playerVars.startSeconds = data["startSeconds"];
+                    }
+                    if (data["endSeconds"] != undefined) {
+                        playerVars.endSeconds = data["endSeconds"];
+                    }
+                    let player_argument = {
+                        "videoId": this.videoid,
+                        "width": "560",
+                        "height": "315",
+                        "playerVars": playerVars
+                    };
+                    if (this.service == "bilibili" && this.getAttribute("play_control_wrap") === "false") {
+                        player_argument["play_control_wrap"] = false;
+                    }
+                    else {
+                        player_argument["play_control_wrap"] = true;
+                    }
+                    if (this.service) {
+                        this.player = new window.multi_embed_player.iframe_api_class[this.service](divdoc, player_argument, __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_setEvent).bind(this));
+                        this.player.service = this.service;
+                    }
+                }
             }
             else {
-                return multi_embed_player.api_cache[service][videoid]["thumbnail_url"];
+                console.error(`service name not defined ${this.service}`);
             }
         }
         else {
-            return "invalid_url";
+            console.log("player not found.");
         }
     }
     /**
-     * Checks the status of an image URL.
+     * Plays the video.
      */
-    async check_image_status(img_url) {
-        if (typeof img_url !== "string") {
-            return false;
-        }
-        const img = new Image();
-        img.src = img_url;
-        return new Promise((resolve) => {
-            img.onload = () => { img.remove(); resolve(true); };
-            img.onerror = () => { img.remove(); resolve(false); };
-        });
+    playVideo() {
+        this.player.playVideo();
+    }
+    /**
+     * Pauses the video.
+     */
+    pauseVideo() {
+        this.player.pauseVideo();
+    }
+    /**
+     * Stops the video.
+     * @deprecated
+     */
+    stopVideo() {
+        this.player.pauseVideo();
+    }
+    /**
+     * Returns the current time of the video.
+     * @returns {Promise<number>} - A promise that resolves with the current time of the video. promise only bilibili
+     */
+    async getCurrentTime() {
+        if (this.service == "bilibili") {
+            return await this.player.getCurrentTime();
+        }
+        else {
+            return this.player.getCurrentTime();
+        }
     }
     /**
-     * This function adds an iframe to the current element.
+     * Seeks to a given time in the video.
+     * @param {number} seconds - if service is bilibili, return promise
      */
-    async add_iframe() {
-        // Implementation here
+    async seekTo(seconds) {
+        await this.player.seekTo(seconds);
+    }
+    /**
+     * Mutes the video.
+     */
+    mute() {
+        this.player.mute();
+    }
+    /**
+     * Unmutes the video.
+     */
+    unMute() {
+        this.player.unMute();
+    }
+    /**
+     * Returns whether the video is muted.
+     * @returns {boolean} - Whether the video is muted.if service is bilibili, return promise
+     */
+    isMuted() {
+        return this.player.isMuted();
+    }
+    /**
+     * Set the volume of the player.
+     * @param {number} volume - The volume level to set.
+     */
+    setVolume(volume) {
+        this.player.setVolume(Number(volume));
+    }
+    /**
+     * Returns the current volume of the player.
+     * @returns {number} The current volume of the player.
+     */
+    getVolume() {
+        return this.player.getVolume();
+    }
+    /**
+     * Returns the duration of the current video.
+     * @returns {number} The duration of the current video in seconds.
+     */
+    getDuration() {
+        return this.player.getDuration();
+    }
+    /**
+     * Returns the real duration of the video based on the start and end seconds.
+     * @returns {number} The real duration of the video.
+     */
+    getRealDulation() {
+        if (this.service && Object.keys(window.multi_embed_player.mep_load_api_promise).includes(this.service)) {
+            return this.player.getRealDulation();
+        }
+        else {
+            return 0;
+        }
+    }
+    /**
+     * Returns the relative current time by subtracting the start time from the current time.
+     * @returns {Promise<number>} The relative current time.
+     */
+    async getRelativeCurrentTime() {
+        return await this.getCurrentTime() - this.startSeconds;
+    }
+    /**
+     * Calculates the percentage of the current time relative to the total duration of the media.
+     * @returns {number} The percentage of the current time.
+     */
+    async getPercentOfCurremtTime() {
+        return ((await this.getRelativeCurrentTime()) / this.getRealDulation()) * 100;
+    }
+    /**
+     * Seeks to a relative position in the video based on the current time.
+     * @param {number} seconds - The number of seconds to seek relative to the current time.
+     */
+    async relativeSeekTo_ct(seconds) {
+        this.seekTo(seconds + await this.getCurrentTime());
+    }
+    /**
+     * Start seeking from the given seconds plus the startSeconds.
+     * @param {number} seconds - The seconds to seek from.
+     */
+    relativeSeekTo_ss(seconds) {
+        this.seekTo(seconds + this.startSeconds);
+    }
+    /**
+     * Returns the current state of the player.
+     * @returns {number} The player state:
+     * -1 -> not set video mainly before embed
+     * 0 -> not played only thumnail
+     * 1 -> onload
+     * 2 -> playing
+     * 3 -> pause
+     * 4 -> video ended
+     */
+    getPlayerState() {
+        if (this.service && Object.keys(window.multi_embed_player.mep_load_api_promise).includes(this.service)) {
+            return this.player.getPlayerState();
+        }
+        else {
+            return -1;
+        }
+    }
+    /**
+     * Loads the YouTube API asynchronously and returns a Promise that resolves when the API is ready.
+     * If the API is already loaded, the Promise resolves immediately.
+     * If the API is currently being loaded, the Promise will resolve when the API is ready.
+     * @returns {Promise<void>} A Promise that resolves when the YouTube API is ready.
+     */
+    async youtube_api_loader() {
+        return new Promise(async (resolve, reject) => {
+            if (window.multi_embed_player.mep_status_load_api.youtube === 0) {
+                let script_url = "https://www.youtube.com/iframe_api";
+                window.multi_embed_player.mep_status_load_api.youtube = 1;
+                await this.mep_promise_script_loader(script_url);
+                YT.ready(() => { window.multi_embed_player.mep_load_api_promise.youtube.forEach((func) => func()); window.multi_embed_player.mep_status_load_api.youtube = 2; resolve(); });
+            }
+            else if (window.multi_embed_player.mep_status_load_api.youtube == 1) {
+                window.multi_embed_player.mep_load_api_promise.youtube.push(resolve);
+            }
+            else {
+                resolve();
+            }
+        });
     }
     /**
-     * Plays a video on the specified player with the given parameters.
+     * Loads the API for the specified service and returns a promise that resolves when the API is loaded.
+     * @async
+     * @param {string} service - The name of the service whose API needs to be loaded.
+     * @returns {Promise<void>} A promise that resolves when the API is loaded.
      */
-    play_on_player(playerid, service, videoid, start, end, subService, subVideoid) {
-        // Implementation here
+    async iframe_api_loader(service) {
+        return new Promise(async (resolve, reject) => {
+            if (window.multi_embed_player.mep_status_load_api[service] === 0) {
+                window.multi_embed_player.mep_status_load_api[service] = 1;
+                await this.mep_promise_script_loader(`${window.multi_embed_player.script_origin}iframe_api/${service}.js`);
+                window.multi_embed_player.mep_status_load_api[service] = 2;
+                switch (service) {
+                    case "youtube":
+                        window.multi_embed_player.iframe_api_class["youtube"] = mep_youtube;
+                        break;
+                    case "niconico":
+                        window.multi_embed_player.iframe_api_class["niconico"] = mep_niconico;
+                        break;
+                    case "bilibili":
+                        window.multi_embed_player.iframe_api_class["bilibili"] = mep_bilibili;
+                        break;
+                    case "soundcloud":
+                        window.multi_embed_player.iframe_api_class["soundcloud"] = mep_soundcloud;
+                        break;
+                }
+                window.multi_embed_player.mep_load_api_promise[service].forEach((func) => func());
+                resolve();
+            }
+            else if (window.multi_embed_player.mep_status_load_api[service] === 1) {
+                window.multi_embed_player.mep_load_api_promise[service].push(resolve);
+            }
+            else {
+                resolve();
+            }
+        });
     }
     /**
-     * Adds a new play item to the playlist of the player.
+     * Loads a script asynchronously and returns a promise that resolves when the script is loaded successfully or rejects when there is an error.
+     * @param {string} src - The URL of the script to be loaded.
+     * @returns {Promise<void>} - A promise that resolves when the script is loaded successfully or rejects when there is an error.
      */
-    add_playlist() {
-        // Implementation here
+    async mep_promise_script_loader(src) {
+        return new Promise((resolve, reject) => {
+            let script_document = document.createElement("script");
+            script_document.src = src;
+            script_document.async = true;
+            document.body.appendChild(script_document);
+            script_document.addEventListener("load", () => {
+                resolve();
+            }, { once: true });
+            script_document.addEventListener("error", () => {
+                reject();
+            }, { once: true });
+        });
     }
 }
-multi_embed_player.script_origin = "https://cdn.jsdelivr.net/gh/bonjinnorenka/multi_embed_player@v3/";
+_multi_embed_player_instances = new WeakSet(), _multi_embed_player_check_image_status = 
+/**
+ * Checks the status of an image URL.
+ * @async
+ * @param {string} img_url - The URL of the image to check.
+ * @returns {Promise<boolean>} - A promise that resolves to true if the image loads successfully, false otherwise.
+ */
+async function _multi_embed_player_check_image_status(img_url) {
+    if (typeof img_url !== "string") {
+        return false;
+    }
+    const img = new Image();
+    img.src = img_url;
+    return new Promise((resolve, reject) => { img.onload = () => { img.remove(); resolve(true); }; img.onerror = () => { img.remove(); resolve(false); }; });
+}, _multi_embed_player_add_iframe = 
+/**
+ * This function adds an iframe to the current element.
+ * @param {Event} e - The event that triggered the function. Default is null.
+ * @param {boolean} sub - A flag to indicate whether the iframe is a subframe. Default is false.
+ */
+async function _multi_embed_player_add_iframe(e = null, sub = false) {
+    let content = new mep_playitem(this.getAttribute("service"), this.getAttribute("videoid"));
+    if (this.getAttribute("start") != null) {
+        content.startSeconds = Number(this.getAttribute("start"));
+    }
+    if (this.getAttribute("end") != null) {
+        content.endSeconds = Number(this.getAttribute("end"));
+    }
+    if (this.getAttribute("subvideoid") != null && this.getAttribute("subservice") != null) {
+        content.subVideoid = this.getAttribute("subvideoid") || undefined;
+        content.subService = this.getAttribute("subservice");
+    }
+    this.player = {};
+    this.loadVideoById(content.toData());
+}, _multi_embed_player_mep_imageurl = 
+/**
+ * Asynchronously fetches the image URL for a given video ID and service.
+ * @param {string} videoid - The ID of the video to fetch the image for.
+ * @param {string} service - The service to fetch the image from.
+ * @param {string} [filetype=null] - The type of file to fetch.
+ * @returns {Promise<string>} - A promise that resolves with the image URL.
+ */
+async function _multi_embed_player_mep_imageurl(videoid, service, filetype = null) {
+    let GDPR_accepted = false;
+    if (!this.follow_GDPR) {
+        GDPR_accepted = true;
+    }
+    else if (this.follow_GDPR && !window.multi_embed_player.GDPR_accepted[service]) {
+        GDPR_accepted = false;
+    }
+    else if (this.follow_GDPR && window.multi_embed_player.GDPR_accepted[service]) {
+        GDPR_accepted = true;
+    }
+    let image_url = "";
+    let use_cors = false;
+    if (GDPR_accepted) {
+        if (window.multi_embed_player.cors_proxy !== "") {
+            image_url = window.multi_embed_player.cors_proxy;
+            use_cors = true;
+        }
+        else {
+            image_url = `${window.multi_embed_player.iframe_api_endpoint}?route=url_proxy&url=`;
+        }
+    }
+    if (window.multi_embed_player.cors_proxy !== "") {
+        use_cors = true;
+    }
+    if (!GDPR_accepted || service === "bilibili") { //if follow gdpr or bilibili(bilibili don't allow to fetch thumbnail from crossorigin)
+        if (!(videoid in window.multi_embed_player.api_cache[service])) {
+            await multi_embed_player_fetch_iframe_api(service, videoid, use_cors, true, false);
+        }
+        return window.multi_embed_player.api_cache[service][videoid]["image_base64"];
+    }
+    /*else if(service==="niconico"){
+        if(!(videoid in (window as any).multi_embed_player.api_cache[service])){
+            await this.fetch_iframe_api(service,videoid,use_cors,false,GDPR_accepted);
+        }
+        return image_url + (window as any).multi_embed_player.api_cache[service][videoid]["image"];
+    }*/
+    else if (service === "soundcloud" || service === "youtube" || service === "niconico") {
+        if (!(videoid in window.multi_embed_player.api_cache[service])) {
+            await multi_embed_player_fetch_iframe_api(service, videoid, use_cors, !GDPR_accepted, GDPR_accepted);
+        }
+        if (!GDPR_accepted) {
+            return window.multi_embed_player.api_cache[service][videoid]["image_base64"];
+        }
+        else {
+            return window.multi_embed_player.api_cache[service][videoid]["thumbnail_url"];
+        }
+    }
+    else {
+        image_url = "invalid_url";
+        return image_url;
+    }
+}, _multi_embed_player_GDPR_accept = 
+/**
+ * Asynchronously accepts GDPR for a given service.
+ * @param {string} service - The name of the service to accept GDPR for.
+ * @returns {Promise<void>} - A promise that resolves when GDPR is accepted.
+ */
+async function _multi_embed_player_GDPR_accept(service) {
+    return new Promise(async (resolve, reject) => {
+        if (this.follow_GDPR) {
+            if (window.multi_embed_player.GDPR_accepted[service]) {
+                resolve();
+            }
+            else {
+                window.multi_embed_player.GDPR_accept_promise[service].push(resolve);
+                const GDPR_check_div = document.createElement("div");
+                const firest_p_element = document.createElement("p");
+                firest_p_element.innerText = "This content is hosted by a third party.\nBy showing the external content you accept the terms and conditions";
+                GDPR_check_div.appendChild(firest_p_element);
+                const tearms_link = document.createElement("a");
+                tearms_link.href = window.multi_embed_player.tearms_policy_service[service];
+                tearms_link.target = "_blank";
+                tearms_link.innerText = `${service} terms and conditions`;
+                GDPR_check_div.appendChild(tearms_link);
+                const second_p_element = document.createElement("p");
+                second_p_element.innerText = `service hosted by ${service} is not under our control and can change without notice.\nIf you notice any change, please let us know.\nAlso this accept status save for this domain localstorage if you accept and can access for this.`;
+                GDPR_check_div.appendChild(second_p_element);
+                const button_agree = document.createElement("button");
+                button_agree.innerText = "I accept";
+                button_agree.addEventListener("click", () => { multi_embed_player_GDPR_reviever(service); });
+                GDPR_check_div.appendChild(button_agree);
+                //remove all children of this
+                while (this.firstChild) {
+                    this.removeChild(this.firstChild);
+                }
+                this.appendChild(GDPR_check_div);
+                this.style.backgroundImage = "";
+            }
+        }
+        else {
+            resolve();
+        }
+    });
+}, _multi_embed_player_error_event_handler = function _multi_embed_player_error_event_handler(e) {
+    console.error("error occured");
+    if (!this.error_not_declare) {
+        this.dispatchEvent(new CustomEvent("onError", { detail: { code: e.detail.code } }));
+    }
+    else {
+        this.dispatchEvent(new Event("executeSecound"));
+    }
+}, _multi_embed_player_setEvent = function _multi_embed_player_setEvent(element) {
+    try {
+        if (typeof element === "undefined") {
+            if (this.service && Object.keys(window.multi_embed_player.mep_load_api_promise).includes(this.service)) {
+                this.player.player.addEventListener("onReady", () => { this.dispatchEvent(new Event("onReady")); }); //need bind
+                this.player.player.addEventListener("onError", (e) => { __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_error_event_handler).call(this, e); });
+                this.player.player.addEventListener("onStateChange", (e) => { this.dispatchEvent(new CustomEvent("onStateChange", { detail: e.detail })); });
+                this.player.player.addEventListener("onEndVideo", () => { this.dispatchEvent(new Event("onEndVideo")); });
+            }
+            else {
+                console.error(`service ${this.service} not found at multi_embed_player class setEvent()`);
+            }
+        }
+        else {
+            if (this.service && Object.keys(window.multi_embed_player.mep_load_api_promise).includes(this.service)) {
+                element.addEventListener("onReady", () => { this.dispatchEvent(new Event("onReady")); });
+                element.addEventListener("onError", (e) => { __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_error_event_handler).call(this, e); });
+                element.addEventListener("onStateChange", (e) => { this.dispatchEvent(new CustomEvent("onStateChange", { detail: e.detail })); });
+                element.addEventListener("onEndVideo", () => { this.dispatchEvent(new Event("onEndVideo")); });
+            }
+            else {
+                console.error(`service ${this.service} not found at multi_embed_player class setEvent(element)`);
+            }
+        }
+    }
+    catch (e) {
+        console.log("failed to set event. under log is error message.");
+        console.log(e);
+    }
+}, _multi_embed_player_deleteEvent = function _multi_embed_player_deleteEvent() {
+    try {
+        if (this.service && Object.keys(window.multi_embed_player.mep_load_api_promise).includes(this.service)) {
+            this.player.player.removeEventListener("onReady", () => { this.dispatchEvent(new Event("onReady")); }); //need bind
+            this.player.player.removeEventListener("onError", (e) => { __classPrivateFieldGet(this, _multi_embed_player_instances, "m", _multi_embed_player_error_event_handler).call(this, e); });
+            this.player.player.removeEventListener("onStateChange", (e) => { this.dispatchEvent(new CustomEvent("onStateChange", { detail: e.detail })); });
+            this.player.player.removeEventListener("onEndVideo", () => { this.dispatchEvent(new Event("onEndVideo")); });
+        }
+        else {
+            console.error(`service ${this.service} not found at multi_embed_player class deleteEvent()`);
+        }
+    }
+    catch { }
+}, _multi_embed_player_PlayOnPlayer = function _multi_embed_player_PlayOnPlayer(playerid, service, videoid, start, end, subService, subVideoid) {
+    let playdoc = document.getElementById(playerid);
+    let content = new mep_playitem(service, videoid);
+    if (start != null) {
+        content.startSeconds = typeof start === 'string' ? Number(start) : start;
+    }
+    if (end != null) {
+        content.endSeconds = typeof end === 'string' ? Number(end) : end;
+    }
+    if (subService != null && subVideoid != null) {
+        content.subVideoid = subVideoid;
+        content.subService = subService;
+    }
+    playdoc.loadVideoById(content.toData());
+}, _multi_embed_player_addPlaylist = function _multi_embed_player_addPlaylist() {
+    let k_data = new mep_playitem(this.getAttribute("service"), this.getAttribute("videoid"));
+    if (this.getAttribute("start") != null) {
+        k_data.startSeconds = Number(this.getAttribute("start"));
+    }
+    if (this.getAttribute("end") != null) {
+        k_data.endSeconds = Number(this.getAttribute("end"));
+    }
+    if (this.getAttribute("subService") != null && this.getAttribute("subVideoid") != null) {
+        k_data.subService = this.getAttribute("subService");
+        k_data.subVideoid = this.getAttribute("subVideoid") || undefined;
+    }
+    const forElement = this.getAttribute("for");
+    if (forElement) {
+        const targetElement = document.getElementById(forElement);
+        if (targetElement) {
+            targetElement.playlist.push(k_data.toData());
+            targetElement.dispatchEvent(new Event("addPlaylist"));
+        }
+    }
+};
+// static script_origin = "https://cdn.jsdelivr.net/gh/bonjinnorenka/multi_embed_player@v2/";
+multi_embed_player.script_origin = "http://localhost:5500/dist/";
 multi_embed_player.iframe_api_endpoint = "https://iframe_api.ryokuryu.workers.dev";
 multi_embed_player.mep_status_load_api = { youtube: 0, niconico: 0, bilibili: 0, soundcloud: 0 };
 multi_embed_player.mep_load_api_promise = { youtube: [], niconico: [], bilibili: [], soundcloud: [] };
@@ -307,12 +823,99 @@ multi_embed_player.GDPR_accept_promise = { youtube: [], niconico: [], bilibili:
 multi_embed_player.iframe_api_class = {};
 multi_embed_player.GDPR_accepted = { youtube: false, niconico: false, bilibili: false, soundcloud: false };
 multi_embed_player.possible_direct_access_services = ["youtube", "soundcloud"];
-multi_embed_player.cors_proxy = ""; // if cors_proxy is not empty string, it use instead of iframe_api_endpoint and follow gdpr
-multi_embed_player.tearms_policy_service = {
-    "youtube": "https://www.youtube.com/t/terms",
-    "niconico": "https://account.nicovideo.jp/rules/account?language=en-us",
-    "bilibili": "https://www.bilibili.com/blackboard/protocal/activity-lc1L-pIoh.html",
-    "soundcloud": "https://soundcloud.com/pages/privacy"
-};
+multi_embed_player.cors_proxy = ""; //if cors_proxy is not empty string,it use instead of iframe_api_endpoint and follow gdpr
+multi_embed_player.tearms_policy_service = { "youtube": "https://www.youtube.com/t/terms", "niconico": "https://account.nicovideo.jp/rules/account?language=en-us", "bilibili": "https://www.bilibili.com/blackboard/protocal/activity-lc1L-pIoh.html", "soundcloud": "https://soundcloud.com/pages/privacy" };
 multi_embed_player.follow_GDPR = false;
+class mep_playitem {
+    constructor(service, videoid) {
+        this.service = service;
+        this.videoid = videoid;
+        this.call_array = [];
+    }
+    toData() {
+        let content = { "service": this?.service, "videoId": this?.videoid, call_array: this.call_array, call_index: 0 };
+        if (this.service !== undefined && this.videoid !== undefined) {
+            content.call_array.push({ videoId: this.videoid, service: this.service });
+        }
+        if (this.startSeconds != undefined) {
+            content.startSeconds = this.startSeconds;
+        }
+        if (this.endSeconds != undefined) {
+            content.endSeconds = this.endSeconds;
+        }
+        if (this.subService != undefined && this.subVideoid != undefined) {
+            content.subService = this.subService;
+            content.subVideoId = this.subVideoid;
+            content.call_array.push({ videoId: this.subVideoid, service: this.subService });
+        }
+        return content;
+    }
+}
+class mep_parallel {
+    constructor() {
+        this.data = []; //class mep_parallel_inner
+    }
+    parse() {
+    }
+}
+class mep_parallel_inner {
+    constructor(service, videoid) {
+        this.service = service;
+        this.videoid = videoid;
+    }
+}
+if (typeof multi_embed_player_set_variable === "function") {
+    multi_embed_player_set_variable(multi_embed_player);
+}
+//load GDPR status
+try {
+    if (localStorage.getItem("multi_embed_player_GDPR_accepted") !== null) {
+        const gdprData = localStorage.getItem("multi_embed_player_GDPR_accepted");
+        if (gdprData) {
+            window.multi_embed_player.GDPR_accepted = JSON.parse(gdprData);
+        }
+    }
+}
+catch {
+    console.log("failed to load GDPR status may be not supported browser or not accept to access localstorage");
+}
+const multi_embed_player_save_GDPR_status = () => {
+    try {
+        localStorage.setItem("multi_embed_player_GDPR_accepted", JSON.stringify(multi_embed_player.GDPR_accepted));
+    }
+    catch {
+        console.log("failed to save GDPR status may be not supported browser or not accept to access localstorage");
+    }
+};
+//recieve GDPR accept by service
+const multi_embed_player_GDPR_reviever = (service) => {
+    multi_embed_player.GDPR_accepted[service] = true;
+    multi_embed_player_save_GDPR_status();
+    multi_embed_player.GDPR_accept_promise[service].forEach((func) => func());
+};
+//Add multi embed player CSS
+const multi_embed_player_css = document.createElement("style");
+multi_embed_player_css.innerHTML = `
+multi-embed-player{
+    display: block;
+    position: relative;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+}
+multi-embed-player>iframe{
+    width: 100%;
+    height: 100%;
+}
+multi-embed-player>picture{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+}`;
+multi_embed_player_css.classList.add("multi-embed-player-CSS");
+document.head.appendChild(multi_embed_player_css);
+// Preserve class name for compilation
+window.multi_embed_player = multi_embed_player;
+customElements.define('multi-embed-player', multi_embed_player); //define custom element
 //# sourceMappingURL=multi_embed_player.js.map