refactor: Update VAST plugin in Artplayer

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 {
-    //
-}