x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-23 05:41:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor event path handling to use getComposedPath utility

Browse Source 
- Replaced direct usage of event.composedPath() with a new utility function getComposedPath in Control component.
- Updated includeFromEvent function to utilize getComposedPath for better compatibility.
- Implemented getComposedPath function to ensure consistent event path retrieval across different browsers.
This commit is contained in:
Harvey Zack committed 2025-08-03 11:43:01 +08:00
1 parent 412b8e7fa7
commit 05ce97c6fd
12 files changed
+41 -14
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer/index.js
+15 -3
View File
@@ -423,7 +423,7 @@ if (_utils.isBrowser) {
}
},{"../package.json":"6idAI","bundle-text:./style/index.less":"5R2NJ","option-validator":"1n8ne","./utils/emitter":"krBDG","./utils":"a07lY","./scheme":"kaLDL","./config":"iq4tS","./template":"krVfo","./i18n":"kPlYw","./player":"6lO9q","./control":"dKQTd","./contextmenu":"bciHx","./info":"fWkRH","./subtitle":"1V5Kz","./events":"brDT1","./hotkey":"3eVJl","./layer":"cHHN9","./loading":"5kAHs","./notice":"4Rzj3","./mask":"lV1aY","./icons":"gqWd0","./setting":"9z6FT","./storage":"2hrmb","./plugins":"8uK4A","@parcel/transformer-js/src/esmodule-helpers.js":"k5zHu"}],"6idAI":[function(require,module,exports,__globalThis) {
module.exports = JSON.parse("{\"license\":\"MIT\",\"name\":\"artplayer\",\"version\":\"5.2.4\",\"main\":\"dist/artplayer.js\",\"legacy\":\"dist/artplayer.legacy.js\",\"module\":\"dist/artplayer.esm.js\",\"types\":\"types/artplayer.d.ts\",\"exports\":{\"import\":\"./dist/artplayer.esm.js\",\"require\":\"./dist/artplayer.js\",\"default\":\"./dist/artplayer.js\"},\"homepage\":\"https://artplayer.org\",\"author\":\"Harvey Zack <laozhaochaguan@gmail.com>\",\"browserslist\":\"last 1 Chrome version\",\"description\":\"ArtPlayer.js is a modern and full featured HTML5 video player\",\"repository\":{\"type\":\"git\",\"url\":\"git+https://github.com/zhw2590582/ArtPlayer.git\"},\"bugs\":{\"url\":\"https://github.com/zhw2590582/ArtPlayer/issues\"},\"keywords\":[\"html5\",\"video\",\"player\"],\"dependencies\":{\"option-validator\":\"^2.0.6\"}}");
module.exports = JSON.parse("{\"license\":\"MIT\",\"name\":\"artplayer\",\"version\":\"5.2.5\",\"main\":\"dist/artplayer.js\",\"legacy\":\"dist/artplayer.legacy.js\",\"types\":\"types/artplayer.d.ts\",\"homepage\":\"https://artplayer.org\",\"author\":\"Harvey Zack <laozhaochaguan@gmail.com>\",\"browserslist\":\"last 1 Chrome version\",\"description\":\"ArtPlayer.js is a modern and full featured HTML5 video player\",\"repository\":{\"type\":\"git\",\"url\":\"git+https://github.com/zhw2590582/ArtPlayer.git\"},\"bugs\":{\"url\":\"https://github.com/zhw2590582/ArtPlayer/issues\"},\"keywords\":[\"html5\",\"video\",\"player\"],\"dependencies\":{\"option-validator\":\"^2.0.6\"}}");
},{}],"5R2NJ":[function(require,module,exports,__globalThis) {
module.exports = ".art-video-player {\n --art-theme: red;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-text-shadow-color: #00000080;\n --art-transition-duration: .2s;\n --art-padding: 10px;\n --art-border-radius: 3px;\n --art-progress-height: 6px;\n --art-progress-color: #ffffff40;\n --art-hover-color: #ffffff40;\n --art-loaded-color: #ffffff40;\n --art-state-size: 80px;\n --art-state-opacity: .8;\n --art-bottom-height: 100px;\n --art-bottom-offset: 20px;\n --art-bottom-gap: 5px;\n --art-highlight-width: 8px;\n --art-highlight-color: #ffffff80;\n --art-control-height: 46px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-scale: 0;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-icon-size: 24px;\n --art-settings-max-height: 300px;\n --art-selector-max-height: 300px;\n --art-contextmenus-min-width: 250px;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-subtitle-border: #000;\n --art-widget-background: #000000d9;\n --art-tip-background: #000000b3;\n --art-scrollbar-size: 4px;\n --art-scrollbar-background: #ffffff40;\n --art-scrollbar-background-hover: #ffffff80;\n --art-mini-progress-height: 2px;\n}\n\n.art-bg-cover {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.art-video-player {\n zoom: 1;\n text-align: left;\n user-select: none;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n color: var(--art-font-color);\n background-color: var(--art-background-color);\n text-shadow: 0 0 2px var(--art-text-shadow-color);\n -webkit-tap-highlight-color: #0000;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n direction: ltr;\n outline: 0;\n margin: 0 auto;\n padding: 0;\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n vertical-align: top;\n max-width: 100%;\n}\n\n.art-video-player svg {\n fill: var(--art-font-color);\n}\n\n.art-video-player a {\n color: var(--art-font-color);\n text-decoration: none;\n}\n\n.art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n cursor: pointer;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n text-align: center;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n width: 100%;\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n transition: bottom var(--art-transition-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n flex-direction: column;\n padding: 0 5%;\n display: none;\n position: absolute;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: flex;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: calc(var(--art-control-Line truncated
@@ -686,6 +686,7 @@ parcelHelpers.export(exports, "setStyleText", ()=>setStyleText);
parcelHelpers.export(exports, "supportsFlex", ()=>supportsFlex);
parcelHelpers.export(exports, "getRect", ()=>getRect);
parcelHelpers.export(exports, "loadImg", ()=>loadImg);
parcelHelpers.export(exports, "getComposedPath", ()=>getComposedPath);
var _compatibility = require("./compatibility");
function query(selector, parent = document) {
return parent.querySelector(selector);
@@ -744,7 +745,7 @@ function isInViewport(el, offset = 0) {
return vertInView && horInView;
}
function includeFromEvent(event, target) {
return event.composedPath && event.composedPath().indexOf(target) > -1;
return getComposedPath(event).indexOf(target) > -1;
}
function replaceElement(newChild, oldChild) {
oldChild.parentNode.replaceChild(newChild, oldChild);
@@ -811,6 +812,17 @@ function loadImg(url, scale) {
img.src = url;
});
}
function getComposedPath(event) {
if (event.composedPath) return event.composedPath();
const path = [];
let node = event.target;
while(node){
path.push(node);
node = node.parentNode;
}
if (path.indexOf(window) === -1 && window !== undefined) path.push(window);
return path;
}
},{"./compatibility":"8OdR7","@parcel/transformer-js/src/esmodule-helpers.js":"k5zHu"}],"8OdR7":[function(require,module,exports,__globalThis) {
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
@@ -3035,7 +3047,7 @@ class Control extends (0, _componentDefault.default) {
});
}
const event = proxy($list, 'click', async (event)=>{
const path = event.composedPath() || [];
const path = (0, _utils.getComposedPath)(event);
const item = option.selector.find((item)=>item.$control_item === path.find(($item)=>item.$control_item === $item));
this.check(item);
if (option.onSelect) $value.innerHTML = await option.onSelect.call(this.art, item, item.$control_item, event);