From 0e58ce8cd9766d86d49be291af846f1b17e02f2f Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Sun, 2 Jun 2024 22:09:58 +0800 Subject: [PATCH] feat: Optimize setBar event and add artplayerPluginChapter plugin --- CHANGELOG_CN.md | 3 + docs/assets/example/chapter.js | 1 + .../artplayer-plugin-chapter/src/index.js | 62 ++++++++++--------- packages/artplayer/types/events.d.ts | 1 + 4 files changed, 39 insertions(+), 28 deletions(-) diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md index d68b09e72..095eba987 100644 --- a/CHANGELOG_CN.md +++ b/CHANGELOG_CN.md @@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## [Unreleased] +- 优化 `setBar` 事件 +- 新增 `artplayerPluginChapter` 插件 + ## [5.1.4] - 2024-6-1 - 重构 `artplayerPluginDanmuku` 插件 diff --git a/docs/assets/example/chapter.js b/docs/assets/example/chapter.js index be6d68c91..aec9a12a0 100644 --- a/docs/assets/example/chapter.js +++ b/docs/assets/example/chapter.js @@ -8,6 +8,7 @@ var art = new Artplayer({ fullscreen: true, fullscreenWeb: true, miniProgressBar: true, + autoOrientation: true, thumbnails: { url: '/assets/sample/thumbnails.png', number: 60, diff --git a/packages/artplayer-plugin-chapter/src/index.js b/packages/artplayer-plugin-chapter/src/index.js index 86750ac31..b08e29261 100644 --- a/packages/artplayer-plugin-chapter/src/index.js +++ b/packages/artplayer-plugin-chapter/src/index.js @@ -3,7 +3,7 @@ import style from 'bundle-text:./style.less'; export default function artplayerPluginChapter({ chapters = [] }) { return (art) => { const { $player } = art.template; - const { setStyle, append, clamp, query, isMobile, addClass } = art.constructor.utils; + const { setStyle, append, clamp, query, isMobile, addClass, removeClass } = art.constructor.utils; const html = `
@@ -17,36 +17,15 @@ export default function artplayerPluginChapter({ chapters = [] }) { let $chapters = []; - addClass($player, 'artplayer-plugin-chapter'); const $progress = art.query('.art-control-progress'); const $inner = art.query('.art-control-progress-inner'); const $control = append($inner, '
'); const $title = append($inner, '
'); - function showText(event) { - const $target = event.target.closest('.art-chapter'); - if ($target) { - setStyle($title, 'display', 'flex'); - $title.innerText = $target.dataset.title || ''; - const { left } = $inner.getBoundingClientRect(); - const eventLeft = isMobile ? event.touches[0].clientX : event.clientX; - const width = clamp(eventLeft - left, 0, $inner.clientWidth); - const titleWidth = $title.clientWidth; - if (width <= titleWidth / 2) { - setStyle($title, 'left', 0); - } else if (width > $inner.clientWidth - titleWidth / 2) { - setStyle($title, 'left', `${$inner.clientWidth - titleWidth}px`); - } else { - setStyle($title, 'left', `${width - titleWidth / 2}px`); - } - } else { - setStyle($title, 'display', 'none'); - } - } - art.on('setBar', (type, percentage) => { - const currentTime = art.duration * percentage; + if (!$chapters.length) return; + const currentTime = art.duration * percentage; const index = $chapters.findIndex(({ $chapter }) => { const start = parseFloat($chapter.dataset.start); const end = parseFloat($chapter.dataset.end); @@ -79,22 +58,43 @@ export default function artplayerPluginChapter({ chapters = [] }) { } if (currentTime >= start && currentTime <= end) { - const _percentage = (currentTime - start) / duration; - setStyle($target, 'width', `${_percentage * 100}%`); + const percentage = (currentTime - start) / duration; + setStyle($target, 'width', `${percentage * 100}%`); } } }); art.proxy($progress, 'mousemove', (event) => { - showText(event); + if (!$chapters.length) return; + + const $target = event.target.closest('.art-chapter'); + if ($target) { + setStyle($title, 'display', 'flex'); + $title.innerText = $target.dataset.title || ''; + const { left } = $inner.getBoundingClientRect(); + const eventLeft = isMobile ? event.touches[0].clientX : event.clientX; + const width = clamp(eventLeft - left, 0, $inner.clientWidth); + const titleWidth = $title.clientWidth; + if (width <= titleWidth / 2) { + setStyle($title, 'left', 0); + } else if (width > $inner.clientWidth - titleWidth / 2) { + setStyle($title, 'left', `${$inner.clientWidth - titleWidth}px`); + } else { + setStyle($title, 'left', `${width - titleWidth / 2}px`); + } + } else { + setStyle($title, 'display', 'none'); + } }); art.proxy($progress, 'mouseleave', () => { + if (!$chapters.length) return; setStyle($title, 'display', 'none'); }); art.on('video:loadedmetadata', () => { - $control.innerHTML = ''; + $control.innerText = ''; + $chapters = chapters.map((chapter) => { const $chapter = append($control, html); const start = clamp(chapter.start, 0, art.duration); @@ -114,6 +114,12 @@ export default function artplayerPluginChapter({ chapters = [] }) { $played: query('.art-progress-played', $chapter), }; }); + + if ($chapters.length) { + addClass($player, 'artplayer-plugin-chapter'); + } else { + removeClass($player, 'artplayer-plugin-chapter'); + } }); return { diff --git a/packages/artplayer/types/events.d.ts b/packages/artplayer/types/events.d.ts index 093293d51..081d159b7 100644 --- a/packages/artplayer/types/events.d.ts +++ b/packages/artplayer/types/events.d.ts @@ -64,4 +64,5 @@ export type Events = { subtitleOffset: [offset: number]; restart: [url: string]; muted: [state: boolean]; + setBar: [type: 'loaded' | 'played' | 'hover', event: Event]; };