feat: add Document Picture-in-Picture plugin for ArtPlayer

- Implemented the core functionality of the Document Picture-in-Picture plugin.
- Created main plugin file `artplayer-plugin-document-pip.js` with support for opening and closing the PIP window.
- Added legacy support in `artplayer-plugin-document-pip.legacy.js`.
- Defined plugin options in `package.json` and included necessary metadata.
- Developed the main logic in `src/index.js`, including style copying and event handling.
- Created TypeScript definitions in `types/artplayer-plugin-document-pip.d.ts` for better type safety.

docs/assets/example/document.pip.js

@@ -1,13 +1,14 @@
-// npm i artplayer-plugin-pip
-// import artplayerPluginPip from 'artplayer-plugin-pip';
+// npm i artplayer-plugin-document-pip
+// import artplayerPluginDocumentPip from 'artplayer-plugin-document-pip';
 
 let art = new Artplayer({
   container: '.artplayer-app',
   url: '/assets/sample/video.mp4',
   plugins: [
-    artplayerPluginPip({
+    artplayerPluginDocumentPip({
       width: 480,
       height: 270,
+      fallbackToVideoPiP: true,
       placeholder: `Playing in Document Picture-in-Picture`,
     }),
   ],

docs/assets/js/common.js

@@ -62,7 +62,7 @@
       './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-pip.d.ts',
+      './assets/ts/artplayer-plugin-document-pip.d.ts',
       './assets/ts/artplayer.d.ts',
     ]
 

docs/assets/ts/artplayer-plugin-document-pip.d.ts

@@ -0,0 +1,27 @@
+interface Option {
+  width?: number
+  height?: number
+  placeholder?: string
+  fallbackToVideoPiP?: boolean
+}
+
+interface Result {
+  name: 'artplayerPluginDocumentPip'
+  open: () => void
+  close: () => void
+  toggle: () => void
+  state: {
+    win: Window | null
+    originalParent: Element | null
+    originalNext: Element | null
+    currentDoc: Document | null
+    placeholder: Element | null
+  }
+}
+
+declare const artplayerPluginDocumentPip: (option: Option) => (art: Artplayer) => Result
+
+export default artplayerPluginDocumentPip
+
+export = artplayerPluginDocumentPip;
+export as namespace artplayerPluginDocumentPip;

docs/assets/ts/artplayer-plugin-pip.d.ts

@@ -1,16 +0,0 @@
-interface Option {
-  width?: number
-  height?: number
-  placeholder?: string
-}
-
-interface Result {
-  name: 'artplayerPluginPip'
-}
-
-declare const artplayerPluginPip: (option: Option) => (art: Artplayer) => Result
-
-export default artplayerPluginPip
-
-export = artplayerPluginPip;
-export as namespace artplayerPluginPip;