From 0804d1790b3b5e38c3177341ec23880be3bc11e4 Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Sun, 2 Jun 2024 18:51:16 +0800 Subject: [PATCH] feat: Add chapter text display on progress hover in artplayer-plugin-chapter --- .../artplayer-plugin-chapter/index.js | 22 +++++++++++++-- .../artplayer-plugin-chapter/index.js.map | 2 +- .../artplayer-plugin-chapter/src/index.js | 28 ++++++++++++++++++- .../artplayer-plugin-chapter/src/style.less | 14 ++++++++++ packages/artplayer/src/control/progress.js | 2 +- 5 files changed, 63 insertions(+), 5 deletions(-) diff --git a/docs/uncompiled/artplayer-plugin-chapter/index.js b/docs/uncompiled/artplayer-plugin-chapter/index.js index bbb2cf507..82c7b6cfc 100644 --- a/docs/uncompiled/artplayer-plugin-chapter/index.js +++ b/docs/uncompiled/artplayer-plugin-chapter/index.js @@ -150,7 +150,7 @@ var _styleLess = require("bundle-text:./style.less"); var _styleLessDefault = parcelHelpers.interopDefault(_styleLess); function artplayerPluginChapter({ chapters = [] }) { return (art)=>{ - const { setStyle, append, clamp, query } = art.constructor.utils; + const { setStyle, append, clamp, query, isMobile } = art.constructor.utils; const html = `
@@ -161,6 +161,7 @@ function artplayerPluginChapter({ chapters = [] }) { let $chapters = []; const $progress = art.query(".art-control-progress-inner"); const $control = append($progress, '
'); + const $text = append($progress, '
'); art.on("setBar", (type, percentage)=>{ const currentTime = art.duration * percentage; const index = $chapters.findIndex(({ $chapter })=>{ @@ -188,6 +189,23 @@ function artplayerPluginChapter({ chapters = [] }) { } } }); + art.proxy($control, "mousemove", (event)=>{ + const $target = event.target.closest(".art-chapter"); + if ($target) { + setStyle($text, "display", "flex"); + $text.innerText = $target.dataset.text || ""; + const { left } = $control.getBoundingClientRect(); + const eventLeft = isMobile ? event.touches[0].clientX : event.clientX; + const width = clamp(eventLeft - left, 0, $control.clientWidth); + const textWidth = $text.clientWidth; + if (width <= textWidth / 2) setStyle($text, "left", 0); + else if (width > $control.clientWidth - textWidth / 2) setStyle($text, "left", `${$control.clientWidth - textWidth}px`); + else setStyle($text, "left", `${width - textWidth / 2}px`); + } else setStyle($text, "display", "none"); + }); + art.proxy($control, "mouseleave", ()=>{ + setStyle($text, "display", "none"); + }); art.on("video:loadedmetadata", ()=>{ $control.innerHTML = ""; $chapters = chapters.map((chapter)=>{ @@ -229,7 +247,7 @@ if (typeof document !== "undefined") { if (typeof window !== "undefined") window["artplayerPluginChapter"] = artplayerPluginChapter; },{"bundle-text:./style.less":"8SOjD","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"8SOjD":[function(require,module,exports) { -module.exports = ".art-progress .art-control-progress-inner {\n background-color: #0000 !important;\n height: 100% !important;\n}\n\n.art-progress .art-control-progress-inner > .art-progress-hover, .art-progress .art-control-progress-inner > .art-progress-loaded, .art-progress .art-control-progress-inner > .art-progress-played {\n display: none !important;\n}\n\n.art-progress .art-chapters {\n z-index: 0;\n align-items: center;\n gap: 4px;\n height: 100%;\n display: flex;\n position: absolute;\n inset: 0;\n transform: scaleY(1.25);\n}\n\n.art-progress .art-chapters .art-chapter {\n cursor: pointer;\n transition: height var(--art-transition-duration) ease;\n background-color: var(--art-progress-color);\n border-radius: 10px;\n height: 50%;\n position: relative;\n overflow: hidden;\n}\n\n.art-progress .art-chapters .art-chapter:hover {\n height: 100%;\n}\n"; +module.exports = ".art-progress .art-control-progress-inner {\n background-color: #0000 !important;\n height: 100% !important;\n}\n\n.art-progress .art-control-progress-inner > .art-progress-hover, .art-progress .art-control-progress-inner > .art-progress-loaded, .art-progress .art-control-progress-inner > .art-progress-played {\n display: none !important;\n}\n\n.art-progress .art-chapters {\n z-index: 0;\n align-items: center;\n gap: 4px;\n height: 100%;\n display: flex;\n position: absolute;\n inset: 0;\n transform: scaleY(1.25);\n}\n\n.art-progress .art-chapters .art-chapter {\n cursor: pointer;\n transition: height var(--art-transition-duration) ease;\n background-color: var(--art-progress-color);\n border-radius: 10px;\n height: 50%;\n position: relative;\n overflow: hidden;\n}\n\n.art-progress .art-chapters .art-chapter:hover {\n height: 100%;\n}\n\n.art-progress .art-chapter-text {\n z-index: 50;\n border-radius: var(--art-border-radius);\n white-space: nowrap;\n background-color: var(--art-tip-background);\n padding: 3px 5px;\n font-size: 16px;\n line-height: 1;\n display: none;\n position: absolute;\n top: -50px;\n left: 0;\n}\n"; },{}],"5dUr6":[function(require,module,exports) { exports.interopDefault = function(a) { diff --git a/docs/uncompiled/artplayer-plugin-chapter/index.js.map b/docs/uncompiled/artplayer-plugin-chapter/index.js.map index 3674ba514..5dade71ef 100644 --- a/docs/uncompiled/artplayer-plugin-chapter/index.js.map +++ b/docs/uncompiled/artplayer-plugin-chapter/index.js.map @@ -1 +1 @@ -{"mappings":"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","sources":["packages/artplayer-plugin-chapter/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-e8c48f234731c5ef.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginChapter({ chapters = [] }) {\n return (art) => {\n const { setStyle, append, clamp, query } = art.constructor.utils;\n\n const html = `\n
\n
\n
\n
\n
\n `;\n\n let $chapters = [];\n const $progress = art.query('.art-control-progress-inner');\n const $control = append($progress, '
');\n\n art.on('setBar', (type, percentage) => {\n const currentTime = art.duration * percentage;\n\n const index = $chapters.findIndex(({ $chapter }) => {\n const start = parseFloat($chapter.dataset.start);\n const end = parseFloat($chapter.dataset.end);\n return art.currentTime >= start && art.currentTime <= end;\n });\n\n if (index === -1) return;\n\n for (let i = 0; i < $chapters.length; i++) {\n const { $chapter, $loaded, $played, $hover } = $chapters[i];\n\n const $target = {\n hover: $hover,\n loaded: $loaded,\n played: $played,\n }[type];\n\n if (!$target) return;\n\n const duration = parseFloat($chapter.dataset.duration);\n const start = parseFloat($chapter.dataset.start);\n const end = parseFloat($chapter.dataset.end);\n\n if (currentTime < start) {\n setStyle($target, 'width', 0);\n }\n\n if (currentTime > end) {\n setStyle($target, 'width', '100%');\n }\n\n if (currentTime >= start && currentTime <= end) {\n const _percentage = (currentTime - start) / duration;\n setStyle($target, 'width', `${_percentage * 100}%`);\n }\n }\n });\n\n art.on('video:loadedmetadata', () => {\n $control.innerHTML = '';\n $chapters = chapters.map((chapter) => {\n const $chapter = append($control, html);\n const start = clamp(chapter.start, 0, art.duration);\n const end = clamp(chapter.end, 0, art.duration);\n const duration = end - start;\n const percentage = duration / art.duration;\n $chapter.dataset.start = start;\n $chapter.dataset.end = end;\n $chapter.dataset.duration = duration;\n $chapter.dataset.text = chapter.text;\n $chapter.dataset.percentage = percentage;\n $chapter.style.width = `${percentage * 100}%`;\n return {\n $chapter,\n $hover: query('.art-progress-hover', $chapter),\n $loaded: query('.art-progress-loaded', $chapter),\n $played: query('.art-progress-played', $chapter),\n };\n });\n });\n\n return {\n name: 'artplayerPluginChapter',\n };\n };\n}\n\nif (typeof document !== 'undefined') {\n const id = 'artplayer-plugin-chapter';\n const $style = document.getElementById(id);\n if ($style) {\n $style.textContent = style;\n } else {\n const $style = document.createElement('style');\n $style.id = id;\n $style.textContent = style;\n document.head.appendChild($style);\n }\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerPluginChapter'] = artplayerPluginChapter;\n}\n","module.exports = \"644995735844259b\";","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (\n key === 'default' ||\n key === '__esModule' ||\n Object.prototype.hasOwnProperty.call(dest, key)\n ) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"} \ No newline at end of file +{"mappings":"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","sources":["packages/artplayer-plugin-chapter/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-e8c48f234731c5ef.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginChapter({ chapters = [] }) {\n return (art) => {\n const { setStyle, append, clamp, query, isMobile } = art.constructor.utils;\n\n const html = `\n
\n
\n
\n
\n
\n `;\n\n let $chapters = [];\n const $progress = art.query('.art-control-progress-inner');\n const $control = append($progress, '
');\n const $text = append($progress, '
');\n\n art.on('setBar', (type, percentage) => {\n const currentTime = art.duration * percentage;\n\n const index = $chapters.findIndex(({ $chapter }) => {\n const start = parseFloat($chapter.dataset.start);\n const end = parseFloat($chapter.dataset.end);\n return art.currentTime >= start && art.currentTime <= end;\n });\n\n if (index === -1) return;\n\n for (let i = 0; i < $chapters.length; i++) {\n const { $chapter, $loaded, $played, $hover } = $chapters[i];\n\n const $target = {\n hover: $hover,\n loaded: $loaded,\n played: $played,\n }[type];\n\n if (!$target) return;\n\n const duration = parseFloat($chapter.dataset.duration);\n const start = parseFloat($chapter.dataset.start);\n const end = parseFloat($chapter.dataset.end);\n\n if (currentTime < start) {\n setStyle($target, 'width', 0);\n }\n\n if (currentTime > end) {\n setStyle($target, 'width', '100%');\n }\n\n if (currentTime >= start && currentTime <= end) {\n const _percentage = (currentTime - start) / duration;\n setStyle($target, 'width', `${_percentage * 100}%`);\n }\n }\n });\n\n art.proxy($control, 'mousemove', (event) => {\n const $target = event.target.closest('.art-chapter');\n if ($target) {\n setStyle($text, 'display', 'flex');\n $text.innerText = $target.dataset.text || '';\n const { left } = $control.getBoundingClientRect();\n const eventLeft = isMobile ? event.touches[0].clientX : event.clientX;\n const width = clamp(eventLeft - left, 0, $control.clientWidth);\n const textWidth = $text.clientWidth;\n if (width <= textWidth / 2) {\n setStyle($text, 'left', 0);\n } else if (width > $control.clientWidth - textWidth / 2) {\n setStyle($text, 'left', `${$control.clientWidth - textWidth}px`);\n } else {\n setStyle($text, 'left', `${width - textWidth / 2}px`);\n }\n } else {\n setStyle($text, 'display', 'none');\n }\n });\n\n art.proxy($control, 'mouseleave', () => {\n setStyle($text, 'display', 'none');\n });\n\n art.on('video:loadedmetadata', () => {\n $control.innerHTML = '';\n $chapters = chapters.map((chapter) => {\n const $chapter = append($control, html);\n const start = clamp(chapter.start, 0, art.duration);\n const end = clamp(chapter.end, 0, art.duration);\n const duration = end - start;\n const percentage = duration / art.duration;\n $chapter.dataset.start = start;\n $chapter.dataset.end = end;\n $chapter.dataset.duration = duration;\n $chapter.dataset.text = chapter.text;\n $chapter.dataset.percentage = percentage;\n $chapter.style.width = `${percentage * 100}%`;\n return {\n $chapter,\n $hover: query('.art-progress-hover', $chapter),\n $loaded: query('.art-progress-loaded', $chapter),\n $played: query('.art-progress-played', $chapter),\n };\n });\n });\n\n return {\n name: 'artplayerPluginChapter',\n };\n };\n}\n\nif (typeof document !== 'undefined') {\n const id = 'artplayer-plugin-chapter';\n const $style = document.getElementById(id);\n if ($style) {\n $style.textContent = style;\n } else {\n const $style = document.createElement('style');\n $style.id = id;\n $style.textContent = style;\n document.head.appendChild($style);\n }\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerPluginChapter'] = artplayerPluginChapter;\n}\n","module.exports = \"644995735844259b\";","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (\n key === 'default' ||\n key === '__esModule' ||\n Object.prototype.hasOwnProperty.call(dest, key)\n ) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"} \ No newline at end of file diff --git a/packages/artplayer-plugin-chapter/src/index.js b/packages/artplayer-plugin-chapter/src/index.js index 22b740cdc..ac85b15ae 100644 --- a/packages/artplayer-plugin-chapter/src/index.js +++ b/packages/artplayer-plugin-chapter/src/index.js @@ -2,7 +2,7 @@ import style from 'bundle-text:./style.less'; export default function artplayerPluginChapter({ chapters = [] }) { return (art) => { - const { setStyle, append, clamp, query } = art.constructor.utils; + const { setStyle, append, clamp, query, isMobile } = art.constructor.utils; const html = `
@@ -15,6 +15,7 @@ export default function artplayerPluginChapter({ chapters = [] }) { let $chapters = []; const $progress = art.query('.art-control-progress-inner'); const $control = append($progress, '
'); + const $text = append($progress, '
'); art.on('setBar', (type, percentage) => { const currentTime = art.duration * percentage; @@ -57,6 +58,31 @@ export default function artplayerPluginChapter({ chapters = [] }) { } }); + art.proxy($control, 'mousemove', (event) => { + const $target = event.target.closest('.art-chapter'); + if ($target) { + setStyle($text, 'display', 'flex'); + $text.innerText = $target.dataset.text || ''; + const { left } = $control.getBoundingClientRect(); + const eventLeft = isMobile ? event.touches[0].clientX : event.clientX; + const width = clamp(eventLeft - left, 0, $control.clientWidth); + const textWidth = $text.clientWidth; + if (width <= textWidth / 2) { + setStyle($text, 'left', 0); + } else if (width > $control.clientWidth - textWidth / 2) { + setStyle($text, 'left', `${$control.clientWidth - textWidth}px`); + } else { + setStyle($text, 'left', `${width - textWidth / 2}px`); + } + } else { + setStyle($text, 'display', 'none'); + } + }); + + art.proxy($control, 'mouseleave', () => { + setStyle($text, 'display', 'none'); + }); + art.on('video:loadedmetadata', () => { $control.innerHTML = ''; $chapters = chapters.map((chapter) => { diff --git a/packages/artplayer-plugin-chapter/src/style.less b/packages/artplayer-plugin-chapter/src/style.less index c553323fe..a293b9971 100644 --- a/packages/artplayer-plugin-chapter/src/style.less +++ b/packages/artplayer-plugin-chapter/src/style.less @@ -34,4 +34,18 @@ } } } + + .art-chapter-text { + display: none; + position: absolute; + z-index: 50; + top: -50px; + left: 0; + padding: 3px 5px; + line-height: 1; + font-size: 16px; + border-radius: var(--art-border-radius); + white-space: nowrap; + background-color: var(--art-tip-background); + } } diff --git a/packages/artplayer/src/control/progress.js b/packages/artplayer/src/control/progress.js index 8711cd23c..edf09b2ef 100644 --- a/packages/artplayer/src/control/progress.js +++ b/packages/artplayer/src/control/progress.js @@ -58,7 +58,7 @@ export default function progress(options) { function showHighlight(event) { const { width } = getPosFromEvent(art, event); const { text } = event.target.dataset; - $tip.innerHTML = text; + $tip.innerText = text; const tipWidth = $tip.clientWidth; if (width <= tipWidth / 2) { setStyle($tip, 'left', 0);