refactor: Update VAST plugin in Artplayer

packages/artplayer-plugin-vast/package.json

@@ -1,24 +1,27 @@
 {
-    "license": "MIT",
-    "version": "1.0.0",
-    "name": "artplayer-plugin-vast",
-    "types": "types/artplayer-plugin-vast.d.ts",
-    "description": "vast plugin for ArtPlayer",
-    "main": "dist/artplayer-plugin-vast.js",
-    "legacy": "dist/artplayer-plugin-vast.legacy.js",
-    "author": "Harvey Zack <laozhaochaguan@gmail.com>",
-    "browserslist": "last 1 Chrome version",
-    "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"
-    ]
+  "license": "MIT",
+  "version": "1.0.0",
+  "name": "artplayer-plugin-vast",
+  "types": "types/artplayer-plugin-vast.d.ts",
+  "description": "vast plugin for ArtPlayer",
+  "main": "dist/artplayer-plugin-vast.js",
+  "legacy": "dist/artplayer-plugin-vast.legacy.js",
+  "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+  "browserslist": "last 1 Chrome version",
+  "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"
+  ],
+  "dependencies": {
+    "@glomex/vast-ima-player": "^1.21.0"
+  }
 }

packages/artplayer-plugin-vast/src/index.js

@@ -1,26 +1,58 @@
-import style from 'bundle-text:./style.less';
+import { Player, PlayerOptions, loadImaSdk } from '@glomex/vast-ima-player';
+
+export default function artplayerPluginVast(callback) {
+    return async (art) => {
+        const { template, constructor } = art;
+        const { createElement, setStyles, append } = constructor.utils;
+        const { $video, $player } = template;
+
+        await loadImaSdk();
+        const google = window.google;
+        const ima = google.ima;
+
+        const adsRenderingSettings = new ima.AdsRenderingSettings();
+        const playerOptions = new PlayerOptions();
+
+        const id = `art-${Date.now()}`;
+        const $container = createElement('div');
+        append($player, $container);
+        $container.id = id;
+        setStyles($container, {
+            position: 'absolute',
+            inset: '0',
+            width: '100%',
+            height: '100%',
+            zIndex: '150',
+        });
+
+        const player = new Player(ima, $video, $container, adsRenderingSettings, playerOptions);
+
+        function playUrl(url) {
+            const playAdsRequest = new ima.AdsRequest();
+            playAdsRequest.adTagUrl = url;
+            player.playAds(playAdsRequest);
+        }
+
+        function playRes(res) {
+            const playAdsRequest = new ima.AdsRequest();
+            playAdsRequest.adsResponse = res;
+            player.playAds(playAdsRequest);
+        }
+
+        if (typeof callback === 'function') {
+            await callback({ art, id, ima, player, $container, playUrl, playRes });
+        }
 
-export default function artplayerPluginVast(option) {
-    return (art) => {
         return {
             name: 'artplayerPluginVast',
+            id,
+            ima,
+            player,
+            $container,
         };
     };
 }
 
-if (typeof document !== 'undefined') {
-    const id = 'artplayer-plugin-vast';
-    const $style = document.getElementById(id);
-    if ($style) {
-        $style.textContent = style;
-    } else {
-        const $style = document.createElement('style');
-        $style.id = id;
-        $style.textContent = style;
-        document.head.appendChild($style);
-    }
-}
-
 if (typeof window !== 'undefined') {
     window['artplayerPluginVast'] = artplayerPluginVast;
 }

packages/artplayer-plugin-vast/src/style.less

@@ -1,3 +0,0 @@
-.artplayer-plugin-vast {
-    //
-}