feat: introduce ArtplayerToolIframe for iframe control

- Removed the old ArtplayerPluginIframe implementation.
- Added ArtplayerToolIframe class with methods for iframe communication.
- Implemented postMessage and onMessage methods for message handling.
- Created a new TypeScript definition file for ArtplayerToolIframe.
- Updated documentation links to point to the new iframe tool.
- Added npm ignore file and README for the new package.
- Included compiled and uncompiled versions of the new iframe tool.
- Updated package.json with relevant metadata and exports.

docs/uncompiled/artplayer-plugin-iframe/index.js

@@ -1,12 +1,12 @@
 var artplayerPluginIframe = (function() {
   "use strict";
-  class ArtplayerPluginIframe {
+  class ArtplayerToolIframe {
     static get iframe() {
       return window.top !== window;
     }
     static postMessage({ type, data, id = 0 }) {
-      if (!ArtplayerPluginIframe.iframe) {
-        throw new Error('The "ArtplayerPluginIframe.postMessage" method can only be used in iframe');
+      if (!ArtplayerToolIframe.iframe) {
+        throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');
       }
       window.parent.postMessage(
         {
@@ -18,8 +18,8 @@ var artplayerPluginIframe = (function() {
       );
     }
     static async onMessage(event) {
-      if (!ArtplayerPluginIframe.iframe) {
-        throw new Error('The "ArtplayerPluginIframe.onMessage" method can only be used in iframe');
+      if (!ArtplayerToolIframe.iframe) {
+        throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');
       }
       const { type, data, id } = event.data;
       switch (type) {
@@ -30,24 +30,24 @@ var artplayerPluginIframe = (function() {
 ${data}
 })`;
               const result = await new Function(string)();
-              ArtplayerPluginIframe.postMessage({ type: "response", data: result, id });
+              ArtplayerToolIframe.postMessage({ type: "response", data: result, id });
             } else {
               const result = new Function(data)();
-              ArtplayerPluginIframe.postMessage({ type: "response", data: result, id });
+              ArtplayerToolIframe.postMessage({ type: "response", data: result, id });
             }
           } catch (error) {
-            ArtplayerPluginIframe.postMessage({ type: "error", data: error.message, id });
+            ArtplayerToolIframe.postMessage({ type: "error", data: error.message, id });
             throw error;
           }
           break;
       }
     }
     static inject() {
-      if (!ArtplayerPluginIframe.iframe) {
-        throw new Error('The "ArtplayerPluginIframe.inject" method can only be used in iframe');
+      if (!ArtplayerToolIframe.iframe) {
+        throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');
       }
-      ArtplayerPluginIframe.postMessage({ type: "inject" });
-      window.addEventListener("message", ArtplayerPluginIframe.onMessage);
+      ArtplayerToolIframe.postMessage({ type: "inject" });
+      window.addEventListener("message", ArtplayerToolIframe.onMessage);
     }
     constructor({ iframe, url }) {
       if (iframe instanceof HTMLIFrameElement === false) {
@@ -128,5 +128,5 @@ ${data}
       window.removeEventListener("message", this.onMessage);
     }
   }
-  return ArtplayerPluginIframe;
+  return ArtplayerToolIframe;
 })();

docs/uncompiled/artplayer-tool-iframe/index.js

@@ -0,0 +1,132 @@
+var ArtplayerToolIframe = (function() {
+  "use strict";
+  class ArtplayerToolIframe2 {
+    static get iframe() {
+      return window.top !== window;
+    }
+    static postMessage({ type, data, id = 0 }) {
+      if (!ArtplayerToolIframe2.iframe) {
+        throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');
+      }
+      window.parent.postMessage(
+        {
+          type,
+          data,
+          id
+        },
+        "*"
+      );
+    }
+    static async onMessage(event) {
+      if (!ArtplayerToolIframe2.iframe) {
+        throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');
+      }
+      const { type, data, id } = event.data;
+      switch (type) {
+        case "commit":
+          try {
+            if (data.match(/\bresolve\((.*?)\)/)) {
+              const string = `return new Promise(function(resolve){
+${data}
+})`;
+              const result = await new Function(string)();
+              ArtplayerToolIframe2.postMessage({ type: "response", data: result, id });
+            } else {
+              const result = new Function(data)();
+              ArtplayerToolIframe2.postMessage({ type: "response", data: result, id });
+            }
+          } catch (error) {
+            ArtplayerToolIframe2.postMessage({ type: "error", data: error.message, id });
+            throw error;
+          }
+          break;
+      }
+    }
+    static inject() {
+      if (!ArtplayerToolIframe2.iframe) {
+        throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');
+      }
+      ArtplayerToolIframe2.postMessage({ type: "inject" });
+      window.addEventListener("message", ArtplayerToolIframe2.onMessage);
+    }
+    constructor({ iframe, url }) {
+      if (iframe instanceof HTMLIFrameElement === false) {
+        throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');
+      }
+      if (typeof url !== "string") {
+        throw new TypeError('"option.url" needs to be a string');
+      }
+      this.url = url;
+      this.$iframe = iframe;
+      this.promises = {};
+      this.injected = false;
+      this.destroyed = false;
+      this.messageCallback = () => null;
+      this.onMessage = this.onMessage.bind(this);
+      window.addEventListener("message", this.onMessage);
+      this.$iframe.src = this.url;
+    }
+    onMessage(event) {
+      const { type, data, id } = event.data;
+      switch (type) {
+        case "inject":
+          this.injected = true;
+          break;
+      }
+      if (this.promises[id]) {
+        if (type === "error") {
+          this.promises[id].reject(new Error(data));
+        } else {
+          this.promises[id].resove(data);
+        }
+        delete this.promises[id];
+      }
+      if (this.messageCallback) {
+        this.messageCallback({ type, data });
+      }
+    }
+    postMessage({ type, data }) {
+      return new Promise((resove, reject) => {
+        (function loop() {
+          if (this.destroyed) {
+            reject(new Error("The instance has been destroyed"));
+          } else {
+            if (this.injected) {
+              const id = Date.now();
+              this.promises[id] = { resove, reject };
+              this.$iframe.contentWindow.postMessage(
+                {
+                  type,
+                  data,
+                  id
+                },
+                "*"
+              );
+            } else {
+              setTimeout(loop.bind(this), 200);
+            }
+          }
+        }).call(this);
+      });
+    }
+    commit(callback) {
+      if (typeof callback !== "function") {
+        throw new TypeError('"commit.callback" needs to be a function');
+      }
+      const callbackString = callback.toString();
+      const bodyString = callbackString.substring(callbackString.indexOf("{") + 1, callbackString.lastIndexOf("}"));
+      return this.postMessage({ type: "commit", data: bodyString });
+    }
+    message(callback) {
+      if (typeof callback !== "function") {
+        throw new TypeError('"message.callback" needs to be a function');
+      }
+      this.messageCallback = callback;
+    }
+    destroy() {
+      this.destroyed = true;
+      window.removeEventListener("message", this.onMessage);
+    }
+  }
+  return ArtplayerToolIframe2;
+})();