mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 22:06:17 -08:00
Fix mobile progress
This commit is contained in:
Harvey committed
1 parent
783b973fb2
commit
37bfafb174
6 files changed
+50
-36
No files matched your search
+2
-2
@@ -7,8 +7,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
- 新增 `Artplayer.VOLUME_STEP` 用于控制调整 `音量` 的步长，默认为 `0.1`
|
||||
- 新增 `Artplayer.SEEK_STEP` 用于控制调整 `快进/快退` 的步长，默认为 `5` 秒
|
||||
- 修复部分 `svg` 图标在移动端不显示的问题
|
||||
- 修复在桌面端进度条不能拖动的问题
|
||||
- 修复在移动端进度条不能点击的问题
|
||||
- 修复在桌面端进度条不能同时点击和拖动的问题
|
||||
- 修复在移动端进度条不能点击和拖动的问题
|
||||
- 新增 `art.isRotate` 属性，用于识别是否自动全屏旋转
|
||||
- 设置面板 `range` 添加 `onChange` 选项，可以实时获取当前值
|
||||
|
||||
|
||||
@@ -387,7 +387,7 @@ if (typeof window !== "undefined") window["Artplayer"] = Artplayer;
|
||||
console.log(`%c ArtPlayer %c ${Artplayer.version} %c https://artplayer.org`, "color: #fff; background: #5f5f5f", "color: #fff; background: #4bc729", "");
|
||||
|
||||
},{"bundle-text:./style/index.less":"k6dFQ","option-validator":"jUcJF","./utils/emitter":"8uSwy","./utils":"euhMG","./scheme":"jVxq1","./config":"1hSww","./whitelist":"eCrHi","./template":"eG0JW","./i18n":"6Q0In","./player":"kmRM5","./control":"nK2ZQ","./contextmenu":"iygWX","./info":"6tuCt","./subtitle":"1kFyE","./events":"akAUN","./hotkey":"f1oWx","./layer":"bKuSu","./loading":"4AfId","./notice":"aKncc","./mask":"1R5LH","./icons":"bPpva","./setting":"i2oRN","./storage":"9ruid","./plugins":"7Fd4c","./mobile":"hMVZh","@parcel/transformer-js/src/esmodule-helpers.js":"8MjWm"}],"k6dFQ":[function(require,module,exports) {
|
||||
module.exports = ".art-video-player {\n z-index: 20;\n width: 100%;\n height: 100%;\n zoom: 1;\n color: #eee;\n text-align: left;\n direction: ltr;\n user-select: none;\n -webkit-tap-highlight-color: #0000;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n background-color: #000;\n outline: 0;\n margin: 0 auto;\n font-family: Roboto, Arial, Helvetica, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n display: flex;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1.5;\n display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n fill: #fff;\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n .art-video-player .art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000b3 !important;\n }\n}\n\n.art-video-player .art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n background-color: #000;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\n user-select: none;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n width: 100%;\n text-align: center;\n color: #fff;\n pointer-events: none;\n text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n padding: 0 20px;\n font-size: 20px;\n display: none;\n position: absolute;\n bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n margin: 5px 0 0;\n line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n display: block;\n}\n\n.art-video-player .art-mask {\n z-index: 50;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n width: 60px;\n height: 60px;\n opacity: .85;\n cursor: pointer;\n pointer-events: all;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n bottom: 65px;\n right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n position: static;\n}\n\n.art-video-player .art-loading {\n z-index: 70;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n display: flex;\n}\n\n.art-video-player .art-bottom {\n z-index: 60;\n height: 100px;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n flex-direction: column;\n justify-content: space-between;\n padding: 50px 10px 0;\n transition: all .2s ease-in-out;\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n flex: 1;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n height: 4px;\n cursor: pointer;\n flex-direction: row;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n height: 50%;\n width: 100%;\n background: #fff3;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottomLine truncated
|
||||
module.exports = ".art-video-player {\n z-index: 20;\n width: 100%;\n height: 100%;\n zoom: 1;\n color: #eee;\n text-align: left;\n direction: ltr;\n user-select: none;\n -webkit-tap-highlight-color: #0000;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n background-color: #000;\n outline: 0;\n margin: 0 auto;\n font-family: Roboto, Arial, Helvetica, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n display: flex;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: 5px;\n height: 5px;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: #666;\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: #ccc;\n}\n\n.art-video-player .art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1.5;\n display: inline-flex;\n}\n\n.art-video-player .art-icon svg {\n fill: #fff;\n}\n\n.art-video-player img {\n max-width: 100%;\n vertical-align: top;\n}\n\n@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {\n .art-video-player .art-backdrop-filter {\n -webkit-backdrop-filter: saturate(180%) blur(20px);\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000b3 !important;\n }\n}\n\n.art-video-player .art-video {\n z-index: 10;\n width: 100%;\n height: 100%;\n cursor: pointer;\n background-color: #000;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-poster {\n z-index: 11;\n width: 100%;\n height: 100%;\n user-select: none;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n width: 100%;\n text-align: center;\n color: #fff;\n pointer-events: none;\n text-shadow: 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000, 0 -1px 1px #000, 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;\n padding: 0 20px;\n font-size: 20px;\n display: none;\n position: absolute;\n bottom: 10px;\n}\n\n.art-video-player .art-subtitle p {\n word-break: break-all;\n height: fit-content;\n margin: 5px 0 0;\n line-height: 1.2;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: block;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n bottom: 50px;\n}\n\n.art-video-player .art-danmuku {\n z-index: 30;\n width: 100%;\n height: 100%;\n pointer-events: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers {\n z-index: 40;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-layers .art-layer {\n pointer-events: auto;\n}\n\n.art-video-player.art-layer-show .art-layers {\n display: block;\n}\n\n.art-video-player .art-mask {\n z-index: 50;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.art-video-player .art-mask .art-state {\n width: 60px;\n height: 60px;\n opacity: .85;\n cursor: pointer;\n pointer-events: all;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n bottom: 65px;\n right: 30px;\n}\n\n.art-video-player.art-mask-show .art-mask {\n display: flex;\n}\n\n.art-video-player.art-mobile .art-state {\n position: static;\n}\n\n.art-video-player .art-loading {\n z-index: 70;\n width: 100%;\n height: 100%;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n display: none;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player.art-loading-show .art-loading {\n display: flex;\n}\n\n.art-video-player .art-bottom {\n z-index: 60;\n height: 100px;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n flex-direction: column;\n justify-content: space-between;\n padding: 50px 10px 0;\n transition: all .2s ease-in-out;\n display: flex;\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n}\n\n.art-video-player .art-bottom .art-progress {\n z-index: 0;\n pointer-events: auto;\n flex: 1;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress {\n height: 4px;\n cursor: pointer;\n flex-direction: row;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner {\n height: 50%;\n width: 100%;\n background: #fff3;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.art-video-player .art-bottomLine truncated
|
||||
|
||||
},{}],"jUcJF":[function(require,module,exports) {
|
||||
!function(r, t) {
|
||||
@@ -3091,11 +3091,12 @@ exports.default = playAndPause;
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "getPosFromEvent", ()=>getPosFromEvent);
|
||||
parcelHelpers.export(exports, "setCurrentTime", ()=>setCurrentTime);
|
||||
var _utils = require("../utils");
|
||||
function getPosFromEvent(art, event) {
|
||||
const { $progress } = art.template;
|
||||
const { left } = $progress.getBoundingClientRect();
|
||||
const eventLeft = event.pageX;
|
||||
const eventLeft = (0, _utils.isMobile) ? event.touches[0].clientX : event.pageX;
|
||||
const width = (0, _utils.clamp)(eventLeft - left, 0, $progress.clientWidth);
|
||||
const second = width / $progress.clientWidth * art.duration;
|
||||
const time = (0, _utils.secondToTime)(second);
|
||||
@@ -3107,6 +3108,18 @@ function getPosFromEvent(art, event) {
|
||||
percentage
|
||||
};
|
||||
}
|
||||
function setCurrentTime(art, event) {
|
||||
if (art.isRotate) {
|
||||
const percentage = event.touches[0].clientY / art.height;
|
||||
const second = percentage * art.duration;
|
||||
art.emit("setBar", "played", percentage);
|
||||
art.seek = second;
|
||||
} else {
|
||||
const { second: second1 , percentage: percentage1 } = getPosFromEvent(art, event);
|
||||
art.emit("setBar", "played", percentage1);
|
||||
art.seek = second1;
|
||||
}
|
||||
}
|
||||
function progress(options) {
|
||||
return (art)=>{
|
||||
const { icons , option , proxy } = art;
|
||||
@@ -3189,21 +3202,10 @@ function progress(options) {
|
||||
art.on("video:ended", ()=>{
|
||||
setBar("played", 1);
|
||||
});
|
||||
proxy($control, "click", (event)=>{
|
||||
if (event.target !== $indicator) {
|
||||
if (art.isRotate) {
|
||||
const percentage = event.pageY / art.height;
|
||||
const second = percentage * art.duration;
|
||||
setBar("played", percentage);
|
||||
art.seek = second;
|
||||
} else {
|
||||
const { second: second1 , percentage: percentage1 } = getPosFromEvent(art, event);
|
||||
setBar("played", percentage1);
|
||||
art.seek = second1;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (!(0, _utils.isMobile)) {
|
||||
proxy($control, "click", (event)=>{
|
||||
if (event.target !== $indicator) setCurrentTime(art, event);
|
||||
});
|
||||
proxy($control, "mousemove", (event)=>{
|
||||
(0, _utils.setStyle)($tip, "display", "block");
|
||||
if ((0, _utils.includeFromEvent)(event, $highlight)) showHighlight(event);
|
||||
@@ -3991,6 +3993,7 @@ exports.default = resizeInit;
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
var _utils = require("../utils");
|
||||
var _progress = require("../control/progress");
|
||||
function gestureInit(art, events) {
|
||||
if ((0, _utils.isMobile) && !art.option.isLive) {
|
||||
const { $video , $progress } = art.template;
|
||||
@@ -4001,6 +4004,7 @@ function gestureInit(art, events) {
|
||||
let startTime = 0;
|
||||
const onTouchStart = (event)=>{
|
||||
if (event.touches.length === 1 && !art.isLock) {
|
||||
if (touchTarget === $progress) (0, _progress.setCurrentTime)(art, event);
|
||||
isDroging = true;
|
||||
const { clientX , clientY } = event.touches[0];
|
||||
startX = clientX;
|
||||
@@ -4045,7 +4049,7 @@ function gestureInit(art, events) {
|
||||
}
|
||||
exports.default = gestureInit;
|
||||
|
||||
},{"../utils":"euhMG","@parcel/transformer-js/src/esmodule-helpers.js":"8MjWm"}],"xZUxN":[function(require,module,exports) {
|
||||
},{"../utils":"euhMG","@parcel/transformer-js/src/esmodule-helpers.js":"8MjWm","../control/progress":"afGEi"}],"xZUxN":[function(require,module,exports) {
|
||||
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
|
||||
parcelHelpers.defineInteropFlag(exports);
|
||||
var _utils = require("../utils");
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"mappings":"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 truncated
|
||||
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA,0DAAmD;;AACnD,kDAAyC;;AACzC,yCAAsC;;AACtC,+BAAiC;AACjC,iCAA8B;;AAC9B,iCAA8B;;AAC9B,uCAAoC;;AACpC,qCAAkC;;AAClC,6BAA0B;;AAC1B,iCAA8B;;AAC9B,mCAAgC;;AAChC,2CAAwC;;AACxC,6BAA0B;;AAC1B,qCAAkC;;AAClC,iCAA8B;;AAC9B,iCAA8B;;AAC9B,+BAA4B;;AAC5B,mCAAgC;;AAChC,iCAA8B;;AAC9B,6BAA0B;;AAC1B,+BAA4B;;AAC5B,mCAAgC;;AAChC,mCAAgC;;AAChC,mCAAgC;;AAChC,iCAA8B;;AAE9B,IAAI,EAAE,GAAG,CAAC,AAAC;AACX,MAAM,SAAS,GAAG,EAAE,AAAC;AACN,MAAM,SAAS,SAAS,CAAA,GAAA,uBAAO,CAAA;IAC1C,YAAY,MAAM,EAAE,aAAa,CAAE;QAC/B,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC;QAEf,MAAM,WAAW,GAAG,MAAK,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,AAAC;QAC9D,IAAI,CAAC,MAAM,GAAG,CAAA,GAAA,+BAAS,CAAA,CAAC,WAAW,EAAE,CAAA,GAAA,sBAAM,CAAA,CAAC,CAAC;QAE7C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAEvB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA,GAAA,yBAAS,CAAA,CAAC,IAAI,CAAC,CAAC;QACrC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA,GAAA,wBAAQ,CAAA,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,GAAA,sBAAM,CAAA,CAAC,IAAI,CAAC,CAAC;QAE/B,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;YACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA,GAAA,uBAAO,CAAA,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA,GAAA,qBAAK,CAAA,CAAC,IAAI,CAAC,CAAC;YAC7B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA,GAAA,oBAAI,CAAA,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,GAAA,sBAAM,CAAA,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,GAAA,sBAAM,CAAA,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,GAAA,qBAAK,CAAA,CAAC,IAAI,CAAC,CAAC;YAC9B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA,GAAA,uBAAO,CAAA,CAAC,IAAI,CAAC,CAAC;YAClC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA,GAAA,2BAAW,CAAA,CAAC,IAAI,CAAC,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA,GAAA,wBAAQ,CAAA,CAAC,IAAI,CAAC,CAAC;YACnC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA,GAAA,oBAAI,CAAA,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA,GAAA,uBAAO,CAAA,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,GAAA,sBAAM,CAAA,CAAC,IAAI,CAAC,CAAC;YAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA,GAAA,oBAAI,CAAA,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA,GAAA,uBAAO,CAAA,CAAC,IAAI,CAAC,CAAC;YACjC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA,GAAA,uBAAO,CAAA,CAAC,IAAI,CAAC,CAAC;SACpC,MACG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA,GAAA,sBAAM,CAAA,CAAC,IAAI,CAAC,CAAC;QAGnC,IAAI,OAAO,aAAa,KAAK,UAAU,EACnC,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,IAAM,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAGrD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACxB;IAED,WAAW,SAAS,GAAG;QACnB,OAAO,SAAS,CAAC;KACpB;IAED,WAAW,OAAO,GAAG;QACjB,eAA2B;KAC9B;IAED,WAAW,GAAG,GAAG;QACb,qBAA4B;KAC/B;IAED,WAAW,KAAK,GAAG;QACf,uBAA8B;KACjC;IAED,WAAW,MAAM,GAAG;QAChB,OAAO,GAAA,sBAAM,CAAC;KACjB;IAED,WAAW,KAAK,GAAG;QACf,OAAO,MAAK,CAAC;KAChB;IAED,WAAW,MAAM,GAAG;QAChB,OAAO,GAAA,sBAAM,CAAC;KACjB;IAED,WAAW,OAAO,GAAG;QACjB,OAAO,GAAA,uBAAO,CAAC;KAClB;IAED,WAAW,SAAS,GAAG;QACnB,OAAO,GAAA,+BAAS,CAAC;KACpB;IAED,WAAW,MAAM,GAAG;QAChB,OAAO,CAAA,GAAA,+BAAS,CAAA,CAAC,MAAM,CAAC;KAC3B;IAED,WAAW,IAAI,GAAG;QACd,OAAO,CAAA,GAAA,wBAAQ,CAAA,CAAC,IAAI,CAAC;KACxB;IAED,WAAW,MAAM,GAAG;QAChB,OAAO;YACH,EAAE,EAAE,EAAE;YACN,SAAS,EAAE,YAAY;YACvB,GAAG,EAAE,EAAE;YACP,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,GAAG;YACX,MAAM,EAAE,KAAK;YACb,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,KAAK;YACX,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,KAAK;YAClB,UAAU,EAAE,KAAK;YACjB,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,IAAI;YACZ,GAAG,EAAE,KAAK;YACV,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,KAAK;YACjB,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,KAAK;YACrB,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,KAAK;YACb,WAAW,EAAE,IAAI;YACjB,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,KAAK;YACnB,eAAe,EAAE,KAAK;YACtB,OAAO,EAAE,KAAK;YACd,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,EAAE;YACf,QAAQ,EAAE,EAAE;YACZ,QAAQ,EAAE,EAAE;YACZ,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,EAAE;YACb,OAAO,EAAE,EAAE;YACX,SAAS,EAAE,EAAE;YACb,UAAU,EAAE;gBACR,GAAG,EAAE,EAAE;gBACP,MAAM,EAAE,EAAE;gBACV,MAAM,EAAE,EAAE;gBACV,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;aACZ;YACD,QAAQ,EAAE;gBACN,GAAG,EAAE,EAAE;gBACP,IAAI,EAAE,EAAE;gBACR,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,OAAO;aACpB;YACD,aAAa,EAAE;gBACX,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE,MAAK,CAAC,QAAQ,GAAG,MAAM,GAAG,UAAU;aAChD;YACD,KAAK,EAAE,EAAE;YACT,UAAU,EAAE,EAAE;YACd,IAAI,EAAE,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE;SACzC,CAAC;KACL;IAED,IAAI,KAAK,GAAG;QACR,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;KAC5B;IAED,IAAI,KAAK,GAAG;QACR,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;KAC9B;IAED,OAAO,CAAC,UAAU,GAAG,IAAI,EAAE;QACvB,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAClC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAC7C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACxB;CACJ;kBA7KoB,SAAS;AA+K9B,SAAS,CAAC,WAAW,GAAG,IALine truncated
|
||||
@@ -3,7 +3,7 @@ import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEve
|
||||
export function getPosFromEvent(art, event) {
|
||||
const { $progress } = art.template;
|
||||
const { left } = $progress.getBoundingClientRect();
|
||||
const eventLeft = event.pageX;
|
||||
const eventLeft = isMobile ? event.touches[0].clientX : event.pageX;
|
||||
const width = clamp(eventLeft - left, 0, $progress.clientWidth);
|
||||
const second = (width / $progress.clientWidth) * art.duration;
|
||||
const time = secondToTime(second);
|
||||
@@ -11,6 +11,19 @@ export function getPosFromEvent(art, event) {
|
||||
return { second, time, width, percentage };
|
||||
}
|
||||
|
||||
export function setCurrentTime(art, event) {
|
||||
if (art.isRotate) {
|
||||
const percentage = event.touches[0].clientY / art.height;
|
||||
const second = percentage * art.duration;
|
||||
art.emit('setBar', 'played', percentage);
|
||||
art.seek = second;
|
||||
} else {
|
||||
const { second, percentage } = getPosFromEvent(art, event);
|
||||
art.emit('setBar', 'played', percentage);
|
||||
art.seek = second;
|
||||
}
|
||||
}
|
||||
|
||||
export default function progress(options) {
|
||||
return (art) => {
|
||||
const { icons, option, proxy } = art;
|
||||
@@ -127,22 +140,13 @@ export default function progress(options) {
|
||||
setBar('played', 1);
|
||||
});
|
||||
|
||||
proxy($control, 'click', (event) => {
|
||||
if (event.target !== $indicator) {
|
||||
if (art.isRotate) {
|
||||
const percentage = event.pageY / art.height;
|
||||
const second = percentage * art.duration;
|
||||
setBar('played', percentage);
|
||||
art.seek = second;
|
||||
} else {
|
||||
const { second, percentage } = getPosFromEvent(art, event);
|
||||
setBar('played', percentage);
|
||||
art.seek = second;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (!isMobile) {
|
||||
proxy($control, 'click', (event) => {
|
||||
if (event.target !== $indicator) {
|
||||
setCurrentTime(art, event);
|
||||
}
|
||||
});
|
||||
|
||||
proxy($control, 'mousemove', (event) => {
|
||||
setStyle($tip, 'display', 'block');
|
||||
if (includeFromEvent(event, $highlight)) {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { clamp, secondToTime, isMobile } from '../utils';
|
||||
import { setCurrentTime } from '../control/progress';
|
||||
|
||||
export default function gestureInit(art, events) {
|
||||
if (isMobile && !art.option.isLive) {
|
||||
@@ -12,6 +13,10 @@ export default function gestureInit(art, events) {
|
||||
|
||||
const onTouchStart = (event) => {
|
||||
if (event.touches.length === 1 && !art.isLock) {
|
||||
if (touchTarget === $progress) {
|
||||
setCurrentTime(art, event);
|
||||
}
|
||||
|
||||
isDroging = true;
|
||||
const { clientX, clientY } = event.touches[0];
|
||||
startX = clientX;
|
||||
|
||||
@@ -317,6 +317,7 @@
|
||||
|
||||
&.art-mobile {
|
||||
.art-bottom {
|
||||
height: 105px;
|
||||
padding: 50px 7px 0;
|
||||
.art-controls {
|
||||
height: 40px;
|
||||
|
||||
Reference in new issue
Block a user