From 3dea070ade1c9629bf4a5de3a253210278333019 Mon Sep 17 00:00:00 2001 From: Harvey Date: Mon, 20 Jun 2022 17:23:05 +0800 Subject: [PATCH] update --- docs/uncompiled/artplayer-plugin-ads/index.js | 71 ++++++++++++++-- .../artplayer-plugin-ads/index.js.map | 2 +- packages/artplayer-plugin-ads/src/index.js | 80 +++++++++++++++++-- packages/artplayer-plugin-ads/src/style.less | 34 ++++++-- 4 files changed, 165 insertions(+), 22 deletions(-) diff --git a/docs/uncompiled/artplayer-plugin-ads/index.js b/docs/uncompiled/artplayer-plugin-ads/index.js index 8320eb104..ca3c73336 100644 --- a/docs/uncompiled/artplayer-plugin-ads/index.js +++ b/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, '
'); $ads = append(art.template.$ads, option.video ? `` : `
${option.html}
`); $timer = append(art.template.$ads, `
@@ -193,24 +193,79 @@ function artplayerPluginAds(option) {
`); $close = query(".artplayer-plugin-ads-close", $timer); $countdown = query(".artplayer-plugin-ads-countdown", $timer); + $control = append(art.template.$ads, `
+
查看详情
+
+
+
`); + 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") diff --git a/docs/uncompiled/artplayer-plugin-ads/index.js.map b/docs/uncompiled/artplayer-plugin-ads/index.js.map index 9dbbdd743..d9d0ea6e5 100644 --- a/docs/uncompiled/artplayer-plugin-ads/index.js.map +++ b/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 art.play();\n if (option.video) $ads.pause();\n setStyle(art.template.$ads, 'display', 'none');\n art.emit('artplayerPluginAds:skip', option);\n }\n\n function play() {\n if (isEnd) return;\n setStyle($timer, 'display', 'flex');\n\n timer = setTimeout(() => {\n time += 1;\n\n const playDuration = option.playDuration - time;\n if (playDuration >= 1) {\n $close.innerHTML = `${playDuration}秒后可关闭广告`;\n } else {\n $close.innerHTML = '关闭广告';\n art.proxy($close, 'click', skip);\n }\n\n $countdown.innerHTML = `${option.totalDuration - time}秒`;\n\n if (time >= option.totalDuration) {\n skip();\n } else {\n play();\n }\n }, 1000);\n }\n\n function pause() {\n if (isEnd) return;\n clearTimeout(timer);\n }\n\n function show() {\n art.template.$ads = append($player, '
');\n\n $ads = append(\n art.template.$ads,\n option.video\n ? ``\n : `
${option.html}
`,\n );\n\n $timer = append(\n art.template.$ads,\n `
\n
${option.playDuration}秒后可关闭广告
\n
${option.totalDuration}秒
\n
`,\n );\n\n $close = query('.artplayer-plugin-ads-close', $timer);\n $countdown = query('.artplayer-plugin-ads-countdown', $timer);\n\n art.proxy($ads, 'click', () => {\n if (option.url) window.open(option.url);\n art.emit('artplayerPluginAds:click', option);\n });\n\n return $ads;\n }\n\n art.on('ready', () => {\n art.once('play', () => {\n show();\n art.pause();\n if (option.video) {\n art.proxy($ads, 'ended', skip);\n art.proxy($ads, 'error', skip);\n art.proxy($ads, 'loadedmetadata', () => {\n play();\n $ads.play();\n });\n } else {\n play();\n }\n });\n });\n\n return {\n name: 'artplayerPluginAds',\n skip,\n pause,\n play,\n };\n };\n}\n\nartplayerPluginAds.env = process.env.NODE_ENV;\nartplayerPluginAds.version = process.env.APP_VER;\nartplayerPluginAds.build = process.env.BUILD_DATE;\n\nif (typeof document !== 'undefined') {\n if (!document.getElementById('artplayer-plugin-ads')) {\n const $style = document.createElement('style');\n $style.id = 'artplayer-plugin-ads';\n $style.textContent = style;\n document.head.appendChild($style);\n }\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerPluginAds'] = artplayerPluginAds;\n}\n","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n","module.exports = \"40889a184827c504\";"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../packages/artplayer-plugin-ads/"} \ No newline at end of file +{"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 icons: { volume, volumeClose, fullscreenOn, fullscreenOff },\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 let $control = null;\n\n let time = 0;\n let timer = null;\n let isEnd = false;\n\n function skip() {\n isEnd = true;\n art.play();\n if (option.video) $ads.pause();\n setStyle(art.template.$ads, 'display', 'none');\n art.emit('artplayerPluginAds:skip', option);\n }\n\n function play() {\n if (isEnd) return;\n\n timer = setTimeout(() => {\n time += 1;\n\n const playDuration = option.playDuration - time;\n if (playDuration >= 1) {\n $close.innerHTML = `${playDuration}秒后可关闭广告`;\n } else {\n $close.innerHTML = '关闭广告';\n art.proxy($close, 'click', skip);\n }\n\n $countdown.innerHTML = `${option.totalDuration - time}秒`;\n\n if (time >= option.totalDuration) {\n skip();\n } else {\n play();\n }\n }, 1000);\n }\n\n function pause() {\n if (isEnd) return;\n clearTimeout(timer);\n }\n\n function init() {\n art.template.$ads = append($player, '
');\n\n $ads = append(\n art.template.$ads,\n option.video\n ? ``\n : `
${option.html}
`,\n );\n\n $timer = append(\n art.template.$ads,\n `
\n
${option.playDuration}秒后可关闭广告
\n
${option.totalDuration}秒
\n
`,\n );\n\n $close = query('.artplayer-plugin-ads-close', $timer);\n $countdown = query('.artplayer-plugin-ads-countdown', $timer);\n\n $control = append(\n art.template.$ads,\n `
\n
查看详情
\n
\n
\n
`,\n );\n\n const $detail = query('.artplayer-plugin-ads-detail', $control);\n const $muted = query('.artplayer-plugin-ads-muted', $control);\n const $fullscreen = query('.artplayer-plugin-ads-fullscreen', $control);\n\n if (option.video) {\n const $volume = append($muted, volume);\n const $volumeClose = append($muted, volumeClose);\n setStyle($volumeClose, 'display', 'none');\n\n art.proxy($ads, 'loadedmetadata', () => {\n if ($ads.muted) {\n setStyle($volume, 'display', 'none');\n setStyle($volumeClose, 'display', 'inline-flex');\n } else {\n setStyle($volume, 'display', 'inline-flex');\n setStyle($volumeClose, 'display', 'none');\n }\n });\n\n art.proxy($muted, 'click', () => {\n $ads.muted = !$ads.muted;\n if ($ads.muted) {\n setStyle($volume, 'display', 'none');\n setStyle($volumeClose, 'display', 'inline-flex');\n } else {\n setStyle($volume, 'display', 'inline-flex');\n setStyle($volumeClose, 'display', 'none');\n }\n });\n } else {\n setStyle($muted, 'display', 'none');\n }\n\n const $fullscreenOn = append($fullscreen, fullscreenOn);\n const $fullscreenOff = append($fullscreen, fullscreenOff);\n setStyle($fullscreenOff, 'display', 'none');\n\n art.proxy($fullscreen, 'click', () => {\n art.fullscreen = !art.fullscreen;\n if (art.fullscreen) {\n setStyle($fullscreenOn, 'display', 'inline-flex');\n setStyle($fullscreenOff, 'display', 'none');\n } else {\n setStyle($fullscreenOn, 'display', 'none');\n setStyle($fullscreenOff, 'display', 'inline-flex');\n }\n });\n\n art.proxy($ads, 'click', () => {\n if (option.url) window.open(option.url);\n art.emit('artplayerPluginAds:click', option);\n });\n\n art.proxy($detail, 'click', () => {\n if (option.url) window.open(option.url);\n art.emit('artplayerPluginAds:click', option);\n });\n }\n\n art.on('ready', () => {\n art.once('play', () => {\n init();\n art.pause();\n if (option.video) {\n art.proxy($ads, 'error', skip);\n art.proxy($ads, 'loadedmetadata', () => {\n play();\n $ads.play();\n setStyle($timer, 'display', 'flex');\n });\n } else {\n play();\n setStyle($timer, 'display', 'flex');\n }\n });\n\n art.proxy(document, 'visibilitychange', () => {\n if (document.hidden) {\n pause();\n } else {\n play();\n }\n });\n });\n\n return {\n name: 'artplayerPluginAds',\n skip,\n pause,\n play,\n };\n };\n}\n\nartplayerPluginAds.env = process.env.NODE_ENV;\nartplayerPluginAds.version = process.env.APP_VER;\nartplayerPluginAds.build = process.env.BUILD_DATE;\n\nif (typeof document !== 'undefined') {\n if (!document.getElementById('artplayer-plugin-ads')) {\n const $style = document.createElement('style');\n $style.id = 'artplayer-plugin-ads';\n $style.textContent = style;\n document.head.appendChild($style);\n }\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerPluginAds'] = artplayerPluginAds;\n}\n","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n","module.exports = \"40889a184827c504\";"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../packages/artplayer-plugin-ads/"} \ No newline at end of file diff --git a/packages/artplayer-plugin-ads/src/index.js b/packages/artplayer-plugin-ads/src/index.js index 16f2bb42d..1656550bf 100644 --- a/packages/artplayer-plugin-ads/src/index.js +++ b/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, '
'); $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, + `
+
查看详情
+
+
+
`, + ); + + 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(); } diff --git a/packages/artplayer-plugin-ads/src/style.less b/packages/artplayer-plugin-ads/src/style.less index 18a8f67c1..76ba0176a 100644 --- a/packages/artplayer-plugin-ads/src/style.less +++ b/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; } } } \ No newline at end of file