update

docs/uncompiled/artplayer-plugin-ads/index.js

@@ -149,11 +149,12 @@ var _styleLess = require("bundle-text:./style.less");
 var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
 function artplayerPluginAds(option) {
     return (art)=>{
-        const { template: { $player  } , constructor: { utils: { query , append , setStyle  } ,  } ,  } = art;
+        const { template: { $player  } , icons: { volume , volumeClose , fullscreenOn , fullscreenOff  } , constructor: { utils: { query , append , setStyle  } ,  } ,  } = art;
         let $ads = null;
         let $timer = null;
         let $close = null;
         let $countdown = null;
+        let $control = null;
         let time = 0;
         let timer = null;
         let isEnd = false;
@@ -166,7 +167,6 @@ function artplayerPluginAds(option) {
         }
         function play() {
             if (isEnd) return;
-            setStyle($timer, "display", "flex");
             timer = setTimeout(()=>{
                 time += 1;
                 const playDuration = option.playDuration - time;
@@ -184,7 +184,7 @@ function artplayerPluginAds(option) {
             if (isEnd) return;
             clearTimeout(timer);
         }
-        function show() {
+        function init() {
             art.template.$ads = append($player, '<div class="artplayer-plugin-ads"></div>');
             $ads = append(art.template.$ads, option.video ? `<video class="artplayer-plugin-ads-video" src="${option.video}"></video>` : `<div class="artplayer-plugin-ads-html">${option.html}</div>`);
             $timer = append(art.template.$ads, `<div class="artplayer-plugin-ads-timer">
@@ -193,24 +193,79 @@ function artplayerPluginAds(option) {
                 </div>`);
             $close = query(".artplayer-plugin-ads-close", $timer);
             $countdown = query(".artplayer-plugin-ads-countdown", $timer);
+            $control = append(art.template.$ads, `<div class="artplayer-plugin-ads-control">
+                    <div class="artplayer-plugin-ads-detail">查看详情</div>
+                    <div class="artplayer-plugin-ads-muted"></div>
+                    <div class="artplayer-plugin-ads-fullscreen"></div>
+                </div>`);
+            const $detail = query(".artplayer-plugin-ads-detail", $control);
+            const $muted = query(".artplayer-plugin-ads-muted", $control);
+            const $fullscreen = query(".artplayer-plugin-ads-fullscreen", $control);
+            if (option.video) {
+                const $volume = append($muted, volume);
+                const $volumeClose = append($muted, volumeClose);
+                setStyle($volumeClose, "display", "none");
+                art.proxy($ads, "loadedmetadata", ()=>{
+                    if ($ads.muted) {
+                        setStyle($volume, "display", "none");
+                        setStyle($volumeClose, "display", "inline-flex");
+                    } else {
+                        setStyle($volume, "display", "inline-flex");
+                        setStyle($volumeClose, "display", "none");
+                    }
+                });
+                art.proxy($muted, "click", ()=>{
+                    $ads.muted = !$ads.muted;
+                    if ($ads.muted) {
+                        setStyle($volume, "display", "none");
+                        setStyle($volumeClose, "display", "inline-flex");
+                    } else {
+                        setStyle($volume, "display", "inline-flex");
+                        setStyle($volumeClose, "display", "none");
+                    }
+                });
+            } else setStyle($muted, "display", "none");
+            const $fullscreenOn = append($fullscreen, fullscreenOn);
+            const $fullscreenOff = append($fullscreen, fullscreenOff);
+            setStyle($fullscreenOff, "display", "none");
+            art.proxy($fullscreen, "click", ()=>{
+                art.fullscreen = !art.fullscreen;
+                if (art.fullscreen) {
+                    setStyle($fullscreenOn, "display", "inline-flex");
+                    setStyle($fullscreenOff, "display", "none");
+                } else {
+                    setStyle($fullscreenOn, "display", "none");
+                    setStyle($fullscreenOff, "display", "inline-flex");
+                }
+            });
             art.proxy($ads, "click", ()=>{
                 if (option.url) window.open(option.url);
                 art.emit("artplayerPluginAds:click", option);
             });
-            return $ads;
+            art.proxy($detail, "click", ()=>{
+                if (option.url) window.open(option.url);
+                art.emit("artplayerPluginAds:click", option);
+            });
         }
         art.on("ready", ()=>{
             art.once("play", ()=>{
-                show();
+                init();
                 art.pause();
                 if (option.video) {
-                    art.proxy($ads, "ended", skip);
                     art.proxy($ads, "error", skip);
                     art.proxy($ads, "loadedmetadata", ()=>{
                         play();
                         $ads.play();
+                        setStyle($timer, "display", "flex");
                     });
-                } else play();
+                } else {
+                    play();
+                    setStyle($timer, "display", "flex");
+                }
+            });
+            art.proxy(document, "visibilitychange", ()=>{
+                if (document.hidden) pause();
+                else play();
             });
         });
         return {
@@ -266,7 +321,7 @@ exports.export = function(dest, destName, get) {
 };
 
 },{}],"1ZB0H":[function(require,module,exports) {
-module.exports = ".artplayer-plugin-ads {\n  z-index: 150;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  background-color: #000;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-html {\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-video {\n  width: 100%;\n  height: 100%;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer {\n  font-size: 14px;\n  line-height: 1;\n  display: none;\n  position: absolute;\n  top: 10px;\n  right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer .artplayer-plugin-ads-close {\n  cursor: pointer;\n  background-color: #000000bf;\n  border-radius: 15px;\n  margin-right: 5px;\n  padding: 5px 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer .artplayer-plugin-ads-countdown {\n  background-color: #000000bf;\n  border-radius: 15px;\n  padding: 5px 10px;\n}\n\n";
+module.exports = ".artplayer-plugin-ads {\n  z-index: 150;\n  width: 100%;\n  height: 100%;\n  color: #fff;\n  background-color: #000;\n  font-size: 13px;\n  line-height: 1;\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-html {\n  width: 100%;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-video {\n  width: 100%;\n  height: 100%;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer {\n  display: none;\n  position: absolute;\n  top: 10px;\n  right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer > div {\n  cursor: pointer;\n  background-color: #000000bf;\n  border-radius: 15px;\n  align-items: center;\n  margin-left: 5px;\n  padding: 5px 10px;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control {\n  display: flex;\n  position: absolute;\n  bottom: 10px;\n  right: 10px;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control > div {\n  cursor: pointer;\n  background-color: #000000bf;\n  border-radius: 15px;\n  align-items: center;\n  margin-left: 5px;\n  padding: 5px 10px;\n  display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-control .art-icon svg {\n  width: 20px;\n  height: 20px;\n}\n\n";
 
 },{}]},["gEVO5"], "gEVO5", "parcelRequirea5da")
 

docs/uncompiled/artplayer-plugin-ads/index.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["src/index.js","../../node_modules/@parcel/transformer-js/src/esmodule-helpers.js","../../node_modules/@parcel/runtime-js/lib/bundles/runtime-845a50df90dd29ef.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginAds(option) {\n    return (art) => {\n        const {\n            template: { $player },\n            constructor: {\n                utils: { query, append, setStyle },\n            },\n        } = art;\n\n        let $ads = null;\n        let $timer = null;\n        let $close = null;\n        let $countdown = null;\n\n        let time = 0;\n        let timer = null;\n        let isEnd = false;\n\n        function skip() {\n            isEnd = true;\n            Line truncated
+{"mappings":"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 truncated

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

@@ -4,6 +4,7 @@ export default function artplayerPluginAds(option) {
     return (art) => {
         const {
             template: { $player },
+            icons: { volume, volumeClose, fullscreenOn, fullscreenOff },
             constructor: {
                 utils: { query, append, setStyle },
             },
@@ -13,6 +14,7 @@ export default function artplayerPluginAds(option) {
         let $timer = null;
         let $close = null;
         let $countdown = null;
+        let $control = null;
 
         let time = 0;
         let timer = null;
@@ -28,7 +30,6 @@ export default function artplayerPluginAds(option) {
 
         function play() {
             if (isEnd) return;
-            setStyle($timer, 'display', 'flex');
 
             timer = setTimeout(() => {
                 time += 1;
@@ -56,7 +57,7 @@ export default function artplayerPluginAds(option) {
             clearTimeout(timer);
         }
 
-        function show() {
+        function init() {
             art.template.$ads = append($player, '<div class="artplayer-plugin-ads"></div>');
 
             $ads = append(
@@ -77,25 +78,94 @@ export default function artplayerPluginAds(option) {
             $close = query('.artplayer-plugin-ads-close', $timer);
             $countdown = query('.artplayer-plugin-ads-countdown', $timer);
 
+            $control = append(
+                art.template.$ads,
+                `<div class="artplayer-plugin-ads-control">
+                    <div class="artplayer-plugin-ads-detail">查看详情</div>
+                    <div class="artplayer-plugin-ads-muted"></div>
+                    <div class="artplayer-plugin-ads-fullscreen"></div>
+                </div>`,
+            );
+
+            const $detail = query('.artplayer-plugin-ads-detail', $control);
+            const $muted = query('.artplayer-plugin-ads-muted', $control);
+            const $fullscreen = query('.artplayer-plugin-ads-fullscreen', $control);
+
+            if (option.video) {
+                const $volume = append($muted, volume);
+                const $volumeClose = append($muted, volumeClose);
+                setStyle($volumeClose, 'display', 'none');
+
+                art.proxy($ads, 'loadedmetadata', () => {
+                    if ($ads.muted) {
+                        setStyle($volume, 'display', 'none');
+                        setStyle($volumeClose, 'display', 'inline-flex');
+                    } else {
+                        setStyle($volume, 'display', 'inline-flex');
+                        setStyle($volumeClose, 'display', 'none');
+                    }
+                });
+
+                art.proxy($muted, 'click', () => {
+                    $ads.muted = !$ads.muted;
+                    if ($ads.muted) {
+                        setStyle($volume, 'display', 'none');
+                        setStyle($volumeClose, 'display', 'inline-flex');
+                    } else {
+                        setStyle($volume, 'display', 'inline-flex');
+                        setStyle($volumeClose, 'display', 'none');
+                    }
+                });
+            } else {
+                setStyle($muted, 'display', 'none');
+            }
+
+            const $fullscreenOn = append($fullscreen, fullscreenOn);
+            const $fullscreenOff = append($fullscreen, fullscreenOff);
+            setStyle($fullscreenOff, 'display', 'none');
+
+            art.proxy($fullscreen, 'click', () => {
+                art.fullscreen = !art.fullscreen;
+                if (art.fullscreen) {
+                    setStyle($fullscreenOn, 'display', 'inline-flex');
+                    setStyle($fullscreenOff, 'display', 'none');
+                } else {
+                    setStyle($fullscreenOn, 'display', 'none');
+                    setStyle($fullscreenOff, 'display', 'inline-flex');
+                }
+            });
+
             art.proxy($ads, 'click', () => {
                 if (option.url) window.open(option.url);
                 art.emit('artplayerPluginAds:click', option);
             });
 
-            return $ads;
+            art.proxy($detail, 'click', () => {
+                if (option.url) window.open(option.url);
+                art.emit('artplayerPluginAds:click', option);
+            });
         }
 
         art.on('ready', () => {
             art.once('play', () => {
-                show();
+                init();
                 art.pause();
                 if (option.video) {
-                    art.proxy($ads, 'ended', skip);
                     art.proxy($ads, 'error', skip);
                     art.proxy($ads, 'loadedmetadata', () => {
                         play();
                         $ads.play();
+                        setStyle($timer, 'display', 'flex');
                     });
+                } else {
+                    play();
+                    setStyle($timer, 'display', 'flex');
+                }
+            });
+
+            art.proxy(document, 'visibilitychange', () => {
+                if (document.hidden) {
+                    pause();
                 } else {
                     play();
                 }

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

@@ -8,6 +8,8 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    font-size: 13px;
+    line-height: 1;
     color: #fff;
     background-color: #000;
 
@@ -29,21 +31,37 @@
         position: absolute;
         top: 10px;
         right: 10px;
-        font-size: 14px;
-        line-height: 1;
 
-        .artplayer-plugin-ads-close {
+        & > div {
+            display: flex;
+            align-items: center;
             background-color: rgb(0 0 0 / 75%);
             border-radius: 15px;
-            margin-right: 5px;
+            margin-left: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+    }
+
+    .artplayer-plugin-ads-control {
+        display: flex;
+        position: absolute;
+        bottom: 10px;
+        right: 10px;
+
+        & > div {
+            display: flex;
+            align-items: center;
+            background-color: rgb(0 0 0 / 75%);
+            border-radius: 15px;
+            margin-left: 5px;
             padding: 5px 10px;
             cursor: pointer;
         }
 
-        .artplayer-plugin-ads-countdown {
-            background-color: rgb(0 0 0 / 75%);
-            border-radius: 15px;
-            padding: 5px 10px;
+        .art-icon svg {
+            width: 20px;
+            height: 20px;
         }
     }
 }