update artplayer-plugin-control

This commit is contained in:
Harvey Zack committed 2023-01-01 00:17:15 +08:00
1 parent 46af8a32d7
commit ac490964eb
3 files changed
+2 -3

No files matched your search

@@ -199,7 +199,7 @@ if (typeof document !== "undefined") {
if (typeof window !== "undefined") window["artplayerPluginControl"] = artplayerPluginControl;
},{"bundle-text:./style.less":"cLvfB","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"cLvfB":[function(require,module,exports) {
module.exports = ".artplayer-plugin-control .art-bottom {\n height: 68px;\n min-width: 400px;\n max-width: 600px;\n user-select: none;\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n pointer-events: auto;\n background-color: #000000b3;\n background-image: none;\n border-radius: 10px;\n flex-direction: column;\n align-items: center;\n padding: 0;\n font-size: 13px;\n transition: opacity .3s;\n display: flex;\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n box-shadow: 0 10px 15px -3px #0003, 0 4px 6px -4px #0003;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress {\n width: 65%;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n display: flex;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-thumbnails {\n bottom: 35px;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-progress {\n width: 100%;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-control-progress-inner, .artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-loaded, .artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-played {\n border-radius: 5px;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-progress-tip {\n top: -40px !important;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls {\n width: 100%;\n height: auto;\n flex: 1;\n padding: 0 5px;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls .art-control-time, .artplayer-plugin-control .art-bottom .art-controls .art-controls-center {\n display: none;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls .art-volume-panel {\n width: 60px !important;\n}\n\n.artplayer-plugin-control .art-bottom .art-selector-list {\n background-color: #000c !important;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-current, .artplayer-plugin-control .art-bottom .apa-control-duration {\n width: 17.5%;\n justify-content: center;\n line-height: 1;\n display: flex;\n position: absolute;\n top: 10px;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-current {\n left: 0;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-duration {\n right: 0;\n}\n\n.artplayer-plugin-control .art-settings {\n bottom: 85px;\n}\n\n.artplayer-plugin-control.art-control-show .art-subtitle {\n bottom: 80px;\n}\n\n.apa-control-current, .apa-control-duration {\n display: none;\n}\n\n";
module.exports = ".artplayer-plugin-control .art-bottom {\n height: 68px;\n min-width: 400px;\n max-width: 600px;\n user-select: none;\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n pointer-events: auto;\n background-color: #000000b3;\n background-image: none;\n border-radius: 10px;\n flex-direction: column;\n align-items: center;\n padding: 0;\n font-size: 13px;\n display: flex;\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n box-shadow: 0 10px 15px -3px #0003, 0 4px 6px -4px #0003;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress {\n width: 65%;\n justify-content: space-between;\n align-items: center;\n gap: 10px;\n display: flex;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-thumbnails {\n bottom: 35px;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-progress {\n width: 100%;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-control-progress-inner, .artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-loaded, .artplayer-plugin-control .art-bottom .art-progress .art-control-progress .art-progress-played {\n border-radius: 5px;\n}\n\n.artplayer-plugin-control .art-bottom .art-progress .art-progress-tip {\n top: -40px !important;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls {\n width: 100%;\n height: auto;\n flex: 1;\n padding: 0 5px;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls .art-control-time, .artplayer-plugin-control .art-bottom .art-controls .art-controls-center {\n display: none;\n}\n\n.artplayer-plugin-control .art-bottom .art-controls .art-volume-panel {\n width: 60px !important;\n}\n\n.artplayer-plugin-control .art-bottom .art-selector-list {\n background-color: #000c !important;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-current, .artplayer-plugin-control .art-bottom .apa-control-duration {\n width: 17.5%;\n justify-content: center;\n line-height: 1;\n display: flex;\n position: absolute;\n top: 10px;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-current {\n left: 0;\n}\n\n.artplayer-plugin-control .art-bottom .apa-control-duration {\n right: 0;\n}\n\n.artplayer-plugin-control .art-settings {\n bottom: 85px;\n}\n\n.artplayer-plugin-control.art-control-show .art-subtitle {\n bottom: 80px;\n}\n\n.apa-control-current, .apa-control-duration {\n display: none;\n}\n\n";
},{}],"5dUr6":[function(require,module,exports) {
exports.interopDefault = function(a) {
@@ -1 +1 @@
{"mappings":"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","sources":["packages/artplayer-plugin-control/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-3b06b37497366e99.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nfunction checkVersion(art) {\n const {\n version,\n utils: { errorHandle },\n } = art.constructor;\n const arr = version.split('.').map(Number);\n const major = arr[0];\n const minor = arr[1] / 100;\n errorHandle(\n major + minor >= 4.06,\n `Artplayer.js@${version} is not compatible the artplayerPluginControl@${artplayerPluginControl.version}. Please update it to version Artplayer.js@4.6.x`,\n );\n}\n\nexport default function artplayerPluginControl() {\n return (art) => {\n checkVersion(art);\n\n const {\n template: { $bottom, $player },\n constructor: {\n utils: { append, secondToTime, addClass, removeClass, hasClass, isMobile },\n },\n } = art;\n\n if (isMobile) return;\n const className = 'artplayer-plugin-control';\n addClass($player, className);\n\n const $current = append($bottom, `<div class=\"apa-control-current\"></div>`);\n const $duration = append($bottom, `<div class=\"apa-control-duration\"></div>`);\n\n const events = ['video:loadedmetadata', 'video:timeupdate', 'video:progress'];\n\n for (let index = 0; index < events.length; index++) {\n art.on(events[index], () => {\n $current.innerText = secondToTime(art.currentTime);\n $duration.innerText = secondToTime(art.duration);\n });\n }\n\n return {\n name: 'artplayerPluginControl',\n get enable() {\n return hasClass($player, className);\Line truncated
{"mappings":"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","sources":["packages/artplayer-plugin-control/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-3b06b37497366e99.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nfunction checkVersion(art) {\n const {\n version,\n utils: { errorHandle },\n } = art.constructor;\n const arr = version.split('.').map(Number);\n const major = arr[0];\n const minor = arr[1] / 100;\n errorHandle(\n major + minor >= 4.06,\n `Artplayer.js@${version} is not compatible the artplayerPluginControl@${artplayerPluginControl.version}. Please update it to version Artplayer.js@4.6.x`,\n );\n}\n\nexport default function artplayerPluginControl() {\n return (art) => {\n checkVersion(art);\n\n const {\n template: { $bottom, $player },\n constructor: {\n utils: { append, secondToTime, addClass, removeClass, hasClass, isMobile },\n },\n } = art;\n\n if (isMobile) return;\n\n const className = 'artplayer-plugin-control';\n addClass($player, className);\n\n const $current = append($bottom, `<div class=\"apa-control-current\"></div>`);\n const $duration = append($bottom, `<div class=\"apa-control-duration\"></div>`);\n\n const events = ['video:loadedmetadata', 'video:timeupdate', 'video:progress'];\n\n for (let index = 0; index < events.length; index++) {\n art.on(events[index], () => {\n $current.innerText = secondToTime(art.currentTime);\n $duration.innerText = secondToTime(art.duration);\n });\n }\n\n return {\n name: 'artplayerPluginControl',\n get enable() {\n return hasClass($player, className)Line truncated
@@ -9,7 +9,6 @@
max-width: 600px;
user-select: none;
border-radius: 10px;
transition: opacity 0.3s ease;
left: 50%;
transform: translateX(-50%);
bottom: 10px;