mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-27 01:21:20 -08:00
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.
This commit is contained in:
Harvey Zhao committed
1 parent
78e9cc74f8
commit
1c75731ca9
58 files changed
+331
-178
No files matched your search
@@ -0,0 +1,6 @@
|
||||
node_modules
|
||||
.DS_Store
|
||||
.parcel-cache
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
src
|
||||
@@ -0,0 +1,11 @@
|
||||
# artplayer-tool-iframe
|
||||
|
||||
Iframe tool for ArtPlayer
|
||||
|
||||
## Demo
|
||||
|
||||
[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-tool-iframe/index.js&example=iframe)
|
||||
|
||||
## License
|
||||
|
||||
MIT © Harvey Zhao
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* artplayer-tool-iframe.js v1.0.1
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2026 Harvey Zhao
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.ArtplayerToolIframe=t(),define(function(){return t.ArtplayerToolIframe})):(e="undefined"!==typeof globalThis?globalThis:e||self).ArtplayerToolIframe=t()}(this,function(){"use strict";class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static async onMessage(t){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:o}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=await new Function(t)();e.postMessage({type:"response",data:s,id:o})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:o})}}catch(n){throw e.postMessage({type:"error",data:n.message,id:o}),n}}static inject(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function o(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const o=Date.now();this.promises[o]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:o},"*")}else setTimeout(o.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}return e});
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* artplayer-tool-iframe.js v1.0.1
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2026 Harvey Zhao
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.ArtplayerToolIframe=t(),define(function(){return t.ArtplayerToolIframe})):(e="undefined"!==typeof globalThis?globalThis:e||self).ArtplayerToolIframe=t()}(this,function(){"use strict";class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:o=0}){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:o},"*")}static onMessage(t){return s=this,o=null,i=function*(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');const{type:s,data:o,id:i}=t.data;if("commit"===s)try{if(o.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${o}\n})`,s=yield new Function(t)();e.postMessage({type:"response",data:s,id:i})}else{const t=new Function(o)();e.postMessage({type:"response",data:t,id:i})}}catch(n){throw e.postMessage({type:"error",data:n.message,id:i}),n}},new Promise((e,t)=>{var n=e=>{try{a(i.next(e))}catch(s){t(s)}},r=e=>{try{a(i.throw(e))}catch(s){t(s)}},a=t=>t.done?e(t.value):Promise.resolve(t.value).then(n,r);a((i=i.apply(s,o)).next())});var s,o,i}static inject(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:o}=e.data;if("inject"===t)this.injected=!0;this.promises[o]&&("error"===t?this.promises[o].reject(new Error(s)):this.promises[o].resove(s),delete this.promises[o]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,o)=>{(function i(){if(this.destroyed)o(new Error("The instance has been destroyed"));else if(this.injected){const i=Date.now();this.promises[i]={resove:s,reject:o},this.$iframe.contentWindow.postMessage({type:e,data:t,id:i},"*")}else setTimeout(i.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}return e});
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* artplayer-tool-iframe.js v1.0.1
|
||||
* Github: https://github.com/zhw2590582/ArtPlayer
|
||||
* (c) 2017-2026 Harvey Zhao
|
||||
* Released under the MIT License.
|
||||
*/
|
||||
class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static async onMessage(t){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:a}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=await new Function(t)();e.postMessage({type:"response",data:s,id:a})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:a})}}catch(o){throw e.postMessage({type:"error",data:o.message,id:a}),o}}static inject(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function a(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const a=Date.now();this.promises[a]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:a},"*")}else setTimeout(a.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}export{e as default};
|
||||
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "artplayer-tool-iframe",
|
||||
"version": "1.0.1",
|
||||
"description": "Iframe tool for ArtPlayer",
|
||||
"author": "Harvey Zhao <laozhaochaguan@gmail.com>",
|
||||
"license": "MIT",
|
||||
"homepage": "https://artplayer.org",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
|
||||
},
|
||||
"keywords": [
|
||||
"html5",
|
||||
"video",
|
||||
"player"
|
||||
],
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./types/artplayer-tool-iframe.d.ts",
|
||||
"import": "./dist/artplayer-tool-iframe.mjs",
|
||||
"require": "./dist/artplayer-tool-iframe.js"
|
||||
},
|
||||
"./legacy": {
|
||||
"types": "./types/artplayer-tool-iframe.d.ts",
|
||||
"import": "./dist/artplayer-tool-iframe.legacy.js",
|
||||
"require": "./dist/artplayer-tool-iframe.legacy.js"
|
||||
}
|
||||
},
|
||||
"main": "./dist/artplayer-tool-iframe.js",
|
||||
"module": "./dist/artplayer-tool-iframe.mjs",
|
||||
"types": "./types/artplayer-tool-iframe.d.ts",
|
||||
"legacy": "./dist/artplayer-tool-iframe.legacy.js",
|
||||
"browserslist": "last 1 Chrome version"
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
export default class ArtplayerToolIframe {
|
||||
static get iframe() {
|
||||
return window.top !== window
|
||||
}
|
||||
|
||||
static postMessage({ type, data, id = 0 }) {
|
||||
if (!ArtplayerToolIframe.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 (!ArtplayerToolIframe.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){\n${data}\n})`
|
||||
// eslint-disable-next-line no-new-func
|
||||
const result = await new Function(string)()
|
||||
ArtplayerToolIframe.postMessage({ type: 'response', data: result, id })
|
||||
}
|
||||
else {
|
||||
// eslint-disable-next-line no-new-func
|
||||
const result = new Function(data)()
|
||||
ArtplayerToolIframe.postMessage({ type: 'response', data: result, id })
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
ArtplayerToolIframe.postMessage({ type: 'error', data: error.message, id })
|
||||
throw error
|
||||
}
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
static inject() {
|
||||
if (!ArtplayerToolIframe.iframe) {
|
||||
throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe')
|
||||
}
|
||||
|
||||
ArtplayerToolIframe.postMessage({ type: 'inject' })
|
||||
window.addEventListener('message', ArtplayerToolIframe.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
|
||||
default:
|
||||
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)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
interface Message {
|
||||
type: string
|
||||
data: any
|
||||
id?: number
|
||||
}
|
||||
|
||||
declare class ArtplayerToolIframe {
|
||||
constructor(option: { iframe: HTMLIFrameElement, url: string })
|
||||
|
||||
static iframe: boolean
|
||||
static postMessage(message: Message): void
|
||||
static onMessage(event: MessageEvent & { data: Message }): void
|
||||
static inject(): void
|
||||
|
||||
readonly promises: Record<number, { resove: (...args: any[]) => any, reject: (...args: any[]) => any }>
|
||||
readonly injected: boolean
|
||||
readonly destroyed: boolean
|
||||
readonly $iframe: HTMLIFrameElement
|
||||
readonly url: string
|
||||
readonly messageCallback: (...args: any[]) => any
|
||||
|
||||
onMessage(event: MessageEvent & { data: Message }): void
|
||||
postMessage(message: Message): Promise<any>
|
||||
commit<T extends (...args: any[]) => any>(callback: T): Promise<ReturnType<T>>
|
||||
message(callback: (...args: any[]) => any): void
|
||||
destroy(): void
|
||||
}
|
||||
|
||||
export default ArtplayerToolIframe
|
||||
Reference in new issue
Block a user