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.

docs/uncompiled/artplayer/index.js

@@ -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)(!this.cache.has(name), `Can't add an existing [${name}] to the [${this.name}]`);
-        (0, _error.errorHandle)(!item, `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 (this.cache.has(option.name)) {
-        if (item) {
+            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 (this.destroyEvents.has(destroyEvent)) try {
-        if (index > -1) {
             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);
+        if (this.keys[key]) {
-        else 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);
+            const handlers = {};
-            art.once('video:loadedmetadata', ()=>{
+            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>

docs/uncompiled/artplayer/index.js.map

@@ -1 +1 @@
-{"mappings":"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 truncated
+{"mappings":"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 truncated

packages/artplayer/src/control/progress.js

@@ -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)
           })
 

packages/artplayer/src/style/progress.less

@@ -81,7 +81,6 @@
                 }
 
                 .art-progress-tip {
-                    display: none;
                     position: absolute;
                     z-index: 50;
                     top: -25px;