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.

Author: zhw2590582

CHANGELOG.md

@@ -265,7 +265,7 @@ const option = {
 
 - Add `art.type` property to get/set video type
 - Add `art.video` property to get video element
-- Add `artplayer-plugin-iframe` plugin to control player inside iframe
+- Add `artplayer-tool-iframe` plugin to control player inside iframe
 - Add `artplayer-plugin-hls-quality` plugin for adding Hls quality list
 - Add `Artplayer.PLAYBACK_RATE` for default playback rates `[0.5, 0.75, 1, 1.25, 1.5, 2]`
 - Add `Artplayer.ASPECT_RATIO` for default ratios `['default','4:3','16:9']`

README.md

@@ -103,7 +103,7 @@ let art = new Artplayer({
 | Name | Describe | State |
 | :--- | :--- | :--- |
 | [artplayer-plugin-danmuku](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku) | Danmuku (bullet comment) system | <img src="https://img.shields.io/npm/v/artplayer-plugin-danmuku.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-danmuku.svg?sanitize=true"> |
-| [artplayer-plugin-iframe](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe) | Control player via iframe | <img src="https://img.shields.io/npm/v/artplayer-plugin-iframe.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-iframe.svg?sanitize=true"> |
+| [artplayer-tool-iframe](https://artplayer.org/?libs=./uncompiled/artplayer-tool-iframe/index.js&example=iframe) | Control player via iframe | <img src="https://img.shields.io/npm/v/artplayer-tool-iframe.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-tool-iframe.svg?sanitize=true"> |
 | [artplayer-plugin-hls-control](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control) | HLS quality control | <img src="https://img.shields.io/npm/v/artplayer-plugin-hls-control.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-hls-control.svg?sanitize=true"> |
 | [artplayer-plugin-dash-control](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control) | DASH quality control | <img src="https://img.shields.io/npm/v/artplayer-plugin-dash-control.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-dash-control.svg?sanitize=true"> |
 | [artplayer-plugin-vtt-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail) | VTT thumbnail preview | <img src="https://img.shields.io/npm/v/artplayer-plugin-vtt-thumbnail.svg?sanitize=true"><br><img src="https://img.shields.io/npm/dm/artplayer-plugin-vtt-thumbnail.svg?sanitize=true"> |

docs/assets/example/iframe.js

@@ -1,5 +1,5 @@
-// npm i artplayer-plugin-iframe
-// import ArtplayerPluginIframe from 'artplayer-plugin-iframe';
+// npm i artplayer-tool-iframe
+// import ArtplayerToolIframe from 'artplayer-tool-iframe';
 
 const $iframe = document.createElement('iframe')
 $iframe.allowFullscreen = true
@@ -10,7 +10,7 @@ const $container = document.querySelector('.artplayer-app')
 $container.innerHTML = ''
 $container.appendChild($iframe)
 
-const iframe = new ArtplayerPluginIframe({
+const iframe = new ArtplayerToolIframe({
   iframe: $iframe,
   url: '/iframe.html',
 })
@@ -39,7 +39,7 @@ iframe.commit(() => {
   })
 
   art.on('fullscreenWeb', (state) => {
-    ArtplayerPluginIframe.postMessage({
+    ArtplayerToolIframe.postMessage({
       type: 'fullscreenWeb',
       data: state,
     })

docs/assets/js/common.js

@@ -63,14 +63,14 @@
       './assets/ts/artplayer-plugin-dash-control.d.ts',
       './assets/ts/artplayer-plugin-document-pip.d.ts',
       './assets/ts/artplayer-plugin-hls-control.d.ts',
-      './assets/ts/artplayer-plugin-iframe.d.ts',
       './assets/ts/artplayer-plugin-jassub.d.ts',
       './assets/ts/artplayer-plugin-multiple-subtitles.d.ts',
       './assets/ts/artplayer-plugin-vast.d.ts',
       './assets/ts/artplayer-plugin-vtt-thumbnail.d.ts',
       './assets/ts/artplayer-plugin-websr.d.ts',
       './assets/ts/artplayer-proxy-canvas.d.ts',
       './assets/ts/artplayer-proxy-mediabunny.d.ts',
+      './assets/ts/artplayer-tool-iframe.d.ts',
       './assets/ts/artplayer.d.ts',
     ]
 

…s/assets/ts/artplayer-plugin-iframe.d.ts docs/assets/ts/artplayer-tool-iframe.d.tsdocs/assets/ts/artplayer-plugin-iframe.d.ts renamed to docs/assets/ts/artplayer-tool-iframe.d.ts docs/assets/ts/artplayer-plugin-iframe.d.ts renamed to docs/assets/ts/artplayer-tool-iframe.d.ts

@@ -4,7 +4,7 @@ interface Message {
   id?: number
 }
 
-declare class ArtplayerPluginIframe {
+declare class ArtplayerToolIframe {
   constructor(option: { iframe: HTMLIFrameElement, url: string })
 
   static iframe: boolean
@@ -26,7 +26,7 @@ declare class ArtplayerPluginIframe {
   destroy(): void
 }
 
-export default ArtplayerPluginIframe
+export default ArtplayerToolIframe
 
-export = artplayerPluginIframe
-export as namespace artplayerPluginIframe;
+export = artplayerToolIframe
+export as namespace artplayerToolIframe;