chore: update version to 1.0.2 and improve chapter plugin functionality

- Bump version from 1.0.1 to 1.0.2 in package.json.
- Refactor index.js to remove unused variables and simplify event handling.
- Enhance title display logic in the chapter plugin for better user experience.
- Update styles in style.less for smoother transitions and improved visibility of chapter titles.

packages/artplayer-plugin-chapter/src/index.js

@@ -3,7 +3,7 @@ import style from 'bundle-text:./style.less'
 export default function artplayerPluginChapter(option = {}) {
   return (art) => {
     const { $player } = art.template
-    const { setStyle, append, clamp, query, isMobile, addClass, removeClass } = art.constructor.utils
+    const { setStyle, append, clamp, query, addClass, removeClass } = art.constructor.utils
 
     const html = `
                 <div class="art-chapter">
@@ -15,10 +15,8 @@ export default function artplayerPluginChapter(option = {}) {
                 </div>
         `
 
-    let titleTimer = null
     let $chapters = []
 
-    const $progress = art.query('.art-control-progress')
     const $inner = art.query('.art-control-progress-inner')
     const $control = append($inner, '<div class="art-chapters"></div>')
     const $title = append($inner, '<div class="art-chapter-title"></div>')
@@ -26,7 +24,6 @@ export default function artplayerPluginChapter(option = {}) {
     function showTitle({ $chapter, width }) {
       const title = $chapter.dataset.title.trim()
       if (title) {
-        setStyle($title, 'display', 'flex')
         $title.textContent = title
         const titleWidth = $title.clientWidth
         if (width <= titleWidth / 2) {
@@ -39,9 +36,6 @@ export default function artplayerPluginChapter(option = {}) {
           setStyle($title, 'left', `${width - titleWidth / 2}px`)
         }
       }
-      else {
-        setStyle($title, 'display', 'none')
-      }
     }
 
     function update(chapters = []) {
@@ -125,7 +119,7 @@ export default function artplayerPluginChapter(option = {}) {
       art.emit('setBar', 'loaded', art.loaded || 0)
     }
 
-    art.on('setBar', (type, percentage, event) => {
+    art.on('setBar', (type, percentage) => {
       if (!$chapters.length)
         return
 
@@ -159,32 +153,13 @@ export default function artplayerPluginChapter(option = {}) {
           const percentage = (currentTime - start) / duration
           setStyle($target, 'width', `${percentage * 100}%`)
 
-          if (isMobile) {
-            if (type === 'played' && event) {
-              showTitle({ $chapter, width })
-              clearTimeout(titleTimer)
-              titleTimer = setTimeout(() => {
-                setStyle($title, 'display', 'none')
-              }, 500)
-            }
-          }
-          else {
-            if (type === 'hover') {
-              showTitle({ $chapter, width })
-            }
+          if (type === 'hover' && width > 0) {
+            showTitle({ $chapter, width })
           }
         }
       }
     })
 
-    if (!isMobile) {
-      art.proxy($progress, 'mouseleave', () => {
-        if (!$chapters.length)
-          return
-        setStyle($title, 'display', 'none')
-      })
-    }
-
     art.once('video:loadedmetadata', () => update(option.chapters))
 
     return {

packages/artplayer-plugin-chapter/src/style.less

@@ -3,9 +3,9 @@
         height: 100% !important;
         background-color: transparent !important;
 
-        & > .art-progress-hover,
-        & > .art-progress-loaded,
-        & > .art-progress-played {
+        &>.art-progress-hover,
+        &>.art-progress-loaded,
+        &>.art-progress-played {
             display: none !important;
         }
     }
@@ -47,7 +47,9 @@
     }
 
     .art-chapter-title {
-        display: none;
+        transform-origin: bottom center;
+        transform: scale(0.5);
+        opacity: 0;
         position: absolute;
         z-index: 70;
         top: -50px;
@@ -58,5 +60,13 @@
         border-radius: var(--art-border-radius);
         white-space: nowrap;
         background-color: var(--art-tip-background);
+        transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
     }
-}
+
+    &.art-progress-hover {
+        .art-chapter-title {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+}