mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 22:06:17 -08:00
feat(progress): enhance progress tooltip and hover effects
- Updated the progress tooltip to display the current time or '00:00' when no time is available. - Improved hover functionality by adding/removing a class on the player element based on the hover state. - Refactored mousemove event handling to streamline tooltip visibility and highlight display logic. - Removed unnecessary display property manipulation for the tooltip in CSS.
This commit is contained in:
Harvey Zhao committed
1 parent
7d8034ca18
commit
911c88d95f
4 files changed
+130
-47
No files matched your search
@@ -94,7 +94,54 @@
|
||||
|
||||
function localRequire(x) {
|
||||
var res = localRequire.resolve(x);
|
||||
return res === false ? {} : newRequire(res);
|
||||
if (res === false) {
|
||||
return {};
|
||||
}
|
||||
// Synthesize a module to follow re-exports.
|
||||
if (Array.isArray(res)) {
|
||||
var m = {__esModule: true};
|
||||
res.forEach(function (v) {
|
||||
var key = v[0];
|
||||
var id = v[1];
|
||||
var exp = v[2] || v[0];
|
||||
var x = newRequire(id);
|
||||
if (key === '*') {
|
||||
Object.keys(x).forEach(function (key) {
|
||||
if (
|
||||
key === 'default' ||
|
||||
key === '__esModule' ||
|
||||
Object.prototype.hasOwnProperty.call(m, key)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.defineProperty(m, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
return x[key];
|
||||
},
|
||||
});
|
||||
});
|
||||
} else if (exp === '*') {
|
||||
Object.defineProperty(m, key, {
|
||||
enumerable: true,
|
||||
value: x,
|
||||
});
|
||||
} else {
|
||||
Object.defineProperty(m, key, {
|
||||
enumerable: true,
|
||||
get: function () {
|
||||
if (exp === 'default') {
|
||||
return x.__esModule ? x.default : x;
|
||||
}
|
||||
return x[exp];
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
return m;
|
||||
}
|
||||
return newRequire(res);
|
||||
}
|
||||
|
||||
function resolve(x) {
|
||||
@@ -432,7 +479,7 @@ if (_utils.isBrowser) {
|
||||
}
|
||||
|
||||
},{"bundle-text:./style/index.less":"bFGMG","option-validator":"9hUEm","../package.json":"3r4tp","./config":"1dlGA","./contextmenu":"dx7Zz","./control":"cNVpy","./events":"dQzlM","./hotkey":"drylQ","./i18n":"3Jf1s","./icons":"avFu3","./info":"gvEup","./layer":"7Oas9","./loading":"glZdQ","./mask":"iGxU6","./notice":"jZEIz","./player":"iA4EC","./plugins":"6P64r","./scheme":"8YPbR","./setting":"7ATN8","./storage":"grHII","./subtitle":"hxr0l","./template":"5JwMQ","./utils":"gGxPm","./utils/emitter":"2qvfs","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"bFGMG":[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-progress-top-gap: 8px;\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
Line truncated
|
||||
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-progress-top-gap: 8px;\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
Line truncated
|
||||
|
||||
},{}],"9hUEm":[function(require,module,exports,__globalThis) {
|
||||
!function(r, t) {
|
||||
@@ -1213,8 +1260,7 @@ class Component {
|
||||
(0, _optionValidatorDefault.default)(option, (0, _scheme.ComponentOption));
|
||||
if (!this.$parent || !this.name || option.disable) return;
|
||||
const name = option.name || `${this.name}${this.id}`;
|
||||
const item = this.cache.get(name);
|
||||
(0, _error.errorHandle)(!item, `Can't add an existing [${name}] to the [${this.name}]`);
|
||||
(0, _error.errorHandle)(!this.cache.has(name), `Can't add an existing [${name}] to the [${this.name}]`);
|
||||
this.id += 1;
|
||||
const $ref = (0, _dom.createElement)('div');
|
||||
(0, _dom.addClass)($ref, `art-${this.name}`);
|
||||
@@ -1249,17 +1295,17 @@ class Component {
|
||||
return $ref;
|
||||
}
|
||||
remove(name) {
|
||||
(0, _error.errorHandle)(this.cache.has(name), `Can't find [${name}] from the [${this.name}]`);
|
||||
const item = this.cache.get(name);
|
||||
(0, _error.errorHandle)(item, `Can't find [${name}] from the [${this.name}]`);
|
||||
if (item.option.beforeUnmount) item.option.beforeUnmount.call(this.art, item.$ref);
|
||||
for(let index = 0; index < item.events.length; index++)this.art.events.remove(item.events[index]);
|
||||
for (const event of item.events)this.art.events.remove(event);
|
||||
this.cache.delete(name);
|
||||
delete this[name];
|
||||
(0, _dom.remove)(item.$ref);
|
||||
}
|
||||
update(option) {
|
||||
const item = this.cache.get(option.name);
|
||||
if (item) {
|
||||
if (this.cache.has(option.name)) {
|
||||
const item = this.cache.get(option.name);
|
||||
option = Object.assign(item.option, option);
|
||||
this.remove(option.name);
|
||||
}
|
||||
@@ -1902,6 +1948,7 @@ function setCurrentTime(art, event) {
|
||||
function progress(options) {
|
||||
return (art)=>{
|
||||
const { icons, option, proxy } = art;
|
||||
const { $player } = art.template;
|
||||
return {
|
||||
...options,
|
||||
html: `
|
||||
@@ -1911,7 +1958,7 @@ function progress(options) {
|
||||
<div class="art-progress-played"></div>
|
||||
<div class="art-progress-highlight"></div>
|
||||
<div class="art-progress-indicator"></div>
|
||||
<div class="art-progress-tip"></div>
|
||||
<div class="art-progress-tip">00:00</div>
|
||||
</div>
|
||||
`,
|
||||
mounted: ($control)=>{
|
||||
@@ -1936,7 +1983,7 @@ function progress(options) {
|
||||
}
|
||||
function showTime(event, touch) {
|
||||
const { width, time } = touch || getPosFromEvent(art, event);
|
||||
$tip.textContent = time;
|
||||
$tip.textContent = time || '00:00';
|
||||
const tipWidth = $tip.clientWidth;
|
||||
if (width <= tipWidth / 2) (0, _utils.setStyle)($tip, 'left', 0);
|
||||
else if (width > $control.clientWidth - tipWidth / 2) (0, _utils.setStyle)($tip, 'left', `${$control.clientWidth - tipWidth}px`);
|
||||
@@ -1954,13 +2001,19 @@ function progress(options) {
|
||||
function setBar(type, percentage, event) {
|
||||
const isMobileDragging = type === 'played' && event && (0, _utils.isMobile);
|
||||
if (type === 'loaded') (0, _utils.setStyle)($loaded, 'width', `${percentage * 100}%`);
|
||||
if (type === 'hover') (0, _utils.setStyle)($hover, 'width', `${percentage * 100}%`);
|
||||
if (type === 'hover') {
|
||||
(0, _utils.setStyle)($hover, 'width', `${percentage * 100}%`);
|
||||
if ((0, _utils.includeFromEvent)(event, $highlight)) showHighlight(event);
|
||||
else showTime(event);
|
||||
if (percentage === 0) (0, _utils.removeClass)($player, 'art-progress-hover');
|
||||
else (0, _utils.addClass)($player, 'art-progress-hover');
|
||||
}
|
||||
if (type === 'played') {
|
||||
(0, _utils.setStyle)($played, 'width', `${percentage * 100}%`);
|
||||
(0, _utils.setStyle)($indicator, 'left', `${percentage * 100}%`);
|
||||
}
|
||||
if (isMobileDragging) {
|
||||
(0, _utils.setStyle)($tip, 'display', 'flex');
|
||||
(0, _utils.addClass)($player, 'art-progress-hover');
|
||||
const width = $control.clientWidth * percentage;
|
||||
const time = (0, _utils.secondToTime)(percentage * art.duration);
|
||||
showTime(event, {
|
||||
@@ -1969,7 +2022,7 @@ function progress(options) {
|
||||
});
|
||||
clearTimeout(tipTimer);
|
||||
tipTimer = setTimeout(()=>{
|
||||
(0, _utils.setStyle)($tip, 'display', 'none');
|
||||
(0, _utils.removeClass)($player, 'art-progress-hover');
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
@@ -1998,12 +2051,8 @@ function progress(options) {
|
||||
proxy($control, 'mousemove', (event)=>{
|
||||
const { percentage } = getPosFromEvent(art, event);
|
||||
art.emit('setBar', 'hover', percentage, event);
|
||||
(0, _utils.setStyle)($tip, 'display', 'flex');
|
||||
if ((0, _utils.includeFromEvent)(event, $highlight)) showHighlight(event);
|
||||
else showTime(event);
|
||||
});
|
||||
proxy($control, 'mouseleave', (event)=>{
|
||||
(0, _utils.setStyle)($tip, 'display', 'none');
|
||||
art.emit('setBar', 'hover', 0, event);
|
||||
});
|
||||
proxy($control, 'mousedown', (event)=>{
|
||||
@@ -2187,7 +2236,7 @@ var _viewInit = require("./viewInit");
|
||||
var _viewInitDefault = parcelHelpers.interopDefault(_viewInit);
|
||||
class Events {
|
||||
constructor(art){
|
||||
this.destroyEvents = [];
|
||||
this.destroyEvents = new Set();
|
||||
this.proxy = this.proxy.bind(this);
|
||||
this.hover = this.hover.bind(this);
|
||||
(0, _clickInitDefault.default)(art, this);
|
||||
@@ -2203,7 +2252,7 @@ class Events {
|
||||
if (Array.isArray(name)) return name.map((item)=>this.proxy(target, item, callback, option));
|
||||
target.addEventListener(name, callback, option);
|
||||
const destroy = ()=>target.removeEventListener(name, callback, option);
|
||||
this.destroyEvents.push(destroy);
|
||||
this.destroyEvents.add(destroy);
|
||||
return destroy;
|
||||
}
|
||||
hover(target, mouseenter, mouseleave) {
|
||||
@@ -2211,14 +2260,21 @@ class Events {
|
||||
if (mouseleave) this.proxy(target, 'mouseleave', mouseleave);
|
||||
}
|
||||
remove(destroyEvent) {
|
||||
const index = this.destroyEvents.indexOf(destroyEvent);
|
||||
if (index > -1) {
|
||||
if (this.destroyEvents.has(destroyEvent)) try {
|
||||
destroyEvent();
|
||||
this.destroyEvents.splice(index, 1);
|
||||
} catch (error) {
|
||||
console.warn('Failed to remove event listener:', error);
|
||||
} finally{
|
||||
this.destroyEvents.delete(destroyEvent);
|
||||
}
|
||||
}
|
||||
destroy() {
|
||||
for(let index = 0; index < this.destroyEvents.length; index++)this.destroyEvents[index]();
|
||||
for (const destroyEvent of this.destroyEvents)try {
|
||||
destroyEvent();
|
||||
} catch (error) {
|
||||
console.warn('Failed to destroy event listener:', error);
|
||||
}
|
||||
this.destroyEvents.clear();
|
||||
}
|
||||
}
|
||||
exports.default = Events;
|
||||
@@ -2534,8 +2590,9 @@ class Hotkey {
|
||||
});
|
||||
}
|
||||
add(key, event) {
|
||||
if (this.keys[key]) this.keys[key].push(event);
|
||||
else this.keys[key] = [
|
||||
if (this.keys[key]) {
|
||||
if (!this.keys[key].includes(event)) this.keys[key].push(event);
|
||||
} else this.keys[key] = [
|
||||
event
|
||||
];
|
||||
return this;
|
||||
@@ -2544,6 +2601,7 @@ class Hotkey {
|
||||
if (this.keys[key]) {
|
||||
const index = this.keys[key].indexOf(event);
|
||||
if (index !== -1) this.keys[key].splice(index, 1);
|
||||
if (this.keys[key].length === 0) delete this.keys[key];
|
||||
}
|
||||
return this;
|
||||
}
|
||||
@@ -2897,6 +2955,13 @@ class Notice {
|
||||
constructor(art){
|
||||
this.art = art;
|
||||
this.timer = null;
|
||||
art.on('destroy', ()=>this.destroy());
|
||||
}
|
||||
destroy() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}
|
||||
set show(msg) {
|
||||
const { constructor, template: { $player, $noticeInner } } = this.art;
|
||||
@@ -4092,22 +4157,34 @@ var _utils = require("../utils");
|
||||
function switchMix(art) {
|
||||
function switchUrl(url, currentTime) {
|
||||
return new Promise((resolve, reject)=>{
|
||||
if (url === art.url) return;
|
||||
if (url === art.url) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
const { playing, aspectRatio, playbackRate } = art;
|
||||
art.pause();
|
||||
art.url = url;
|
||||
art.notice.show = '';
|
||||
art.once('video:error', reject);
|
||||
art.once('video:loadedmetadata', ()=>{
|
||||
const handlers = {};
|
||||
handlers.error = (error)=>{
|
||||
art.off('video:canplay', handlers.canplay);
|
||||
art.off('video:loadedmetadata', handlers.metadata);
|
||||
reject(error);
|
||||
};
|
||||
handlers.metadata = ()=>{
|
||||
art.currentTime = currentTime;
|
||||
});
|
||||
art.once('video:canplay', async ()=>{
|
||||
};
|
||||
handlers.canplay = async ()=>{
|
||||
art.off('video:error', handlers.error);
|
||||
art.playbackRate = playbackRate;
|
||||
art.aspectRatio = aspectRatio;
|
||||
if (playing) await art.play();
|
||||
art.notice.show = '';
|
||||
resolve();
|
||||
});
|
||||
};
|
||||
art.once('video:error', handlers.error);
|
||||
art.once('video:loadedmetadata', handlers.metadata);
|
||||
art.once('video:canplay', handlers.canplay);
|
||||
});
|
||||
}
|
||||
(0, _utils.def)(art, 'switchQuality', {
|
||||
@@ -5404,7 +5481,7 @@ class Template {
|
||||
</div>
|
||||
<div class="art-info-item">
|
||||
<div class="art-info-title">Video url:</div>
|
||||
<div class="art-info-content" data-video="src"></div>
|
||||
<div class="art-info-content" data-video="currentSrc"></div>
|
||||
</div>
|
||||
<div class="art-info-item">
|
||||
<div class="art-info-title">Video volume:</div>
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"mappings":"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 truncated
|
||||
{"mappings":"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 truncated
|
||||
@@ -1,4 +1,4 @@
|
||||
import { append, clamp, getRect, includeFromEvent, isMobile, query, secondToTime, setStyle } from '../utils'
|
||||
import { addClass, append, clamp, getRect, includeFromEvent, isMobile, query, removeClass, secondToTime, setStyle } from '../utils'
|
||||
|
||||
export function getPosFromEvent(art, event) {
|
||||
const { $progress } = art.template
|
||||
@@ -28,6 +28,7 @@ export function setCurrentTime(art, event) {
|
||||
export default function progress(options) {
|
||||
return (art) => {
|
||||
const { icons, option, proxy } = art
|
||||
const { $player } = art.template
|
||||
|
||||
return {
|
||||
...options,
|
||||
@@ -38,7 +39,7 @@ export default function progress(options) {
|
||||
<div class="art-progress-played"></div>
|
||||
<div class="art-progress-highlight"></div>
|
||||
<div class="art-progress-indicator"></div>
|
||||
<div class="art-progress-tip"></div>
|
||||
<div class="art-progress-tip">00:00</div>
|
||||
</div>
|
||||
`,
|
||||
mounted: ($control) => {
|
||||
@@ -77,7 +78,7 @@ export default function progress(options) {
|
||||
|
||||
function showTime(event, touch) {
|
||||
const { width, time } = touch || getPosFromEvent(art, event)
|
||||
$tip.textContent = time
|
||||
$tip.textContent = time || '00:00'
|
||||
const tipWidth = $tip.clientWidth
|
||||
if (width <= tipWidth / 2) {
|
||||
setStyle($tip, 'left', 0)
|
||||
@@ -109,6 +110,20 @@ export default function progress(options) {
|
||||
|
||||
if (type === 'hover') {
|
||||
setStyle($hover, 'width', `${percentage * 100}%`)
|
||||
|
||||
if (includeFromEvent(event, $highlight)) {
|
||||
showHighlight(event)
|
||||
}
|
||||
else {
|
||||
showTime(event)
|
||||
}
|
||||
|
||||
if (percentage === 0) {
|
||||
removeClass($player, 'art-progress-hover')
|
||||
}
|
||||
else {
|
||||
addClass($player, 'art-progress-hover')
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'played') {
|
||||
@@ -117,13 +132,13 @@ export default function progress(options) {
|
||||
}
|
||||
|
||||
if (isMobileDragging) {
|
||||
setStyle($tip, 'display', 'flex')
|
||||
addClass($player, 'art-progress-hover')
|
||||
const width = $control.clientWidth * percentage
|
||||
const time = secondToTime(percentage * art.duration)
|
||||
showTime(event, { width, time })
|
||||
clearTimeout(tipTimer)
|
||||
tipTimer = setTimeout(() => {
|
||||
setStyle($tip, 'display', 'none')
|
||||
removeClass($player, 'art-progress-hover')
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
@@ -163,17 +178,9 @@ export default function progress(options) {
|
||||
proxy($control, 'mousemove', (event) => {
|
||||
const { percentage } = getPosFromEvent(art, event)
|
||||
art.emit('setBar', 'hover', percentage, event)
|
||||
setStyle($tip, 'display', 'flex')
|
||||
if (includeFromEvent(event, $highlight)) {
|
||||
showHighlight(event)
|
||||
}
|
||||
else {
|
||||
showTime(event)
|
||||
}
|
||||
})
|
||||
|
||||
proxy($control, 'mouseleave', (event) => {
|
||||
setStyle($tip, 'display', 'none')
|
||||
art.emit('setBar', 'hover', 0, event)
|
||||
})
|
||||
|
||||
|
||||
@@ -81,7 +81,6 @@
|
||||
}
|
||||
|
||||
.art-progress-tip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: -25px;
|
||||
|
||||
Reference in new issue
Block a user