x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-20 04:01:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update version to 1.0.2 and improve chapter plugin functionality

Browse Source 
- 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.
This commit is contained in:
Harvey Zhao committed 2025-12-14 11:05:34 +08:00
1 parent a93967d518
commit 51d49f857a
5 files changed
+135 -103
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer-plugin-chapter/index.js
+114 -67
View File
@@ -6,7 +6,16 @@
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles
(function (modules, entry, mainEntry, parcelRequireName, globalName) {
(function (
modules,
entry,
mainEntry,
parcelRequireName,
externals,
distDir,
publicUrl,
devServer
) {
/* eslint-disable no-undef */
var globalObject =
typeof globalThis !== 'undefined'
@@ -25,6 +34,7 @@
typeof globalObject[parcelRequireName] === 'function' &&
globalObject[parcelRequireName];
var importMap = previousRequire.i || {};
var cache = previousRequire.cache || {};
// Do not use `require` to prevent Webpack from trying to bundle this call
var nodeRequire =
@@ -35,6 +45,9 @@
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
if (externals[name]) {
return externals[name];
}
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
@@ -73,7 +86,7 @@
localRequire,
module,
module.exports,
this
globalObject
);
}
@@ -81,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) {
@@ -93,6 +153,7 @@
function Module(moduleName) {
this.id = moduleName;
this.bundle = newRequire;
this.require = nodeRequire;
this.exports = {};
}
@@ -101,6 +162,10 @@
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
newRequire.distDir = distDir;
newRequire.publicUrl = publicUrl;
newRequire.devServer = devServer;
newRequire.i = importMap;
newRequire.register = function (id, exports) {
modules[id] = [
function (require, module) {
@@ -110,6 +175,10 @@
];
};
// Only insert newRequire.load when it is actually used.
// The code in this file is linted against ES5, so dynamic import is not allowed.
// INSERT_LOAD_HERE
Object.defineProperty(newRequire, 'root', {
get: function () {
return globalObject[parcelRequireName];
@@ -136,13 +205,9 @@
define(function () {
return mainExports;
});
// <script>
} else if (globalName) {
this[globalName] = mainExports;
}
}
})({"4OysR":[function(require,module,exports) {
})({"4J69a":[function(require,module,exports,__globalThis) {
var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
parcelHelpers.defineInteropFlag(exports);
parcelHelpers.export(exports, "default", ()=>artplayerPluginChapter);
@@ -151,7 +216,7 @@ var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
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">
<div class="art-chapter-inner">
@@ -161,27 +226,24 @@ function artplayerPluginChapter(option = {}) {
</div>
</div>
`;
let titleTimer = null;
let $chapters = [];
const $progress = art.query(".art-control-progress");
const $inner = art.query(".art-control-progress-inner");
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>');
function showTitle({ $chapter, width }) {
const title = $chapter.dataset.title.trim();
if (title) {
setStyle($title, "display", "flex");
$title.innerText = title;
$title.textContent = title;
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");
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`);
}
}
function update(chapters = []) {
$chapters = [];
$control.innerText = "";
removeClass($player, "artplayer-plugin-chapter");
$control.textContent = '';
removeClass($player, 'artplayer-plugin-chapter');
if (!Array.isArray(chapters)) return;
if (!chapters.length) return;
if (!art.duration) return;
@@ -190,24 +252,24 @@ function artplayerPluginChapter(option = {}) {
const chapter = chapters[i];
const nextChapter = chapters[i + 1];
if (chapter.end === Infinity) chapter.end = art.duration;
if (typeof chapter.start !== "number" || typeof chapter.end !== "number" || typeof chapter.title !== "string") throw new Error("Illegal chapter data type");
if (chapter.start < 0 || chapter.end > art.duration || chapter.start >= chapter.end) throw new Error("Illegal chapter time point");
if (nextChapter && chapter.end > nextChapter.start) throw new Error("Illegal chapter time point");
if (typeof chapter.start !== 'number' || typeof chapter.end !== 'number' || typeof chapter.title !== 'string') throw new TypeError('Illegal chapter data type');
if (chapter.start < 0 || chapter.end > art.duration || chapter.start >= chapter.end) throw new Error('Illegal chapter time point');
if (nextChapter && chapter.end > nextChapter.start) throw new Error('Illegal chapter time point');
}
if (chapters[0].start > 0) chapters.unshift({
start: 0,
end: chapters[0].start,
title: ""
title: ''
});
if (chapters[chapters.length - 1].end < art.duration) chapters.push({
start: chapters[chapters.length - 1].end,
end: art.duration,
title: ""
title: ''
});
for(let i = 0; i < chapters.length - 1; i++)if (chapters[i].end !== chapters[i + 1].start) chapters.splice(i + 1, 0, {
start: chapters[i].end,
end: chapters[i + 1].start,
title: ""
title: ''
});
$chapters = chapters.map((chapter)=>{
const $chapter = append($control, html);
@@ -222,15 +284,15 @@ function artplayerPluginChapter(option = {}) {
$chapter.style.width = `${percentage * 100}%`;
return {
$chapter,
$hover: query(".art-progress-hover", $chapter),
$loaded: query(".art-progress-loaded", $chapter),
$played: query(".art-progress-played", $chapter)
$hover: query('.art-progress-hover', $chapter),
$loaded: query('.art-progress-loaded', $chapter),
$played: query('.art-progress-played', $chapter)
};
});
addClass($player, "artplayer-plugin-chapter");
art.emit("setBar", "loaded", art.loaded || 0);
addClass($player, 'artplayer-plugin-chapter');
art.emit('setBar', 'loaded', art.loaded || 0);
}
art.on("setBar", (type, percentage, event)=>{
art.on('setBar', (type, percentage)=>{
if (!$chapters.length) return;
for(let i = 0; i < $chapters.length; i++){
const { $chapter, $loaded, $played, $hover } = $chapters[i];
@@ -242,75 +304,60 @@ function artplayerPluginChapter(option = {}) {
if (!$target) return;
const width = $control.clientWidth * percentage;
const currentTime = art.duration * percentage;
const duration = parseFloat($chapter.dataset.duration);
const start = parseFloat($chapter.dataset.start);
const end = parseFloat($chapter.dataset.end);
if (currentTime < start) setStyle($target, "width", 0);
if (currentTime > end) setStyle($target, "width", "100%");
const duration = Number.parseFloat($chapter.dataset.duration);
const start = Number.parseFloat($chapter.dataset.start);
const end = Number.parseFloat($chapter.dataset.end);
if (currentTime < start) setStyle($target, 'width', 0);
if (currentTime > end) setStyle($target, 'width', '100%');
if (currentTime >= start && currentTime <= end) {
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({
setStyle($target, 'width', `${percentage * 100}%`);
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));
art.once('video:loadedmetadata', ()=>update(option.chapters));
return {
name: "artplayerPluginChapter",
name: 'artplayerPluginChapter',
update: ({ chapters })=>update(chapters)
};
};
}
if (typeof document !== "undefined") {
const id = "artplayer-plugin-chapter";
if (typeof document !== 'undefined') {
const id = 'artplayer-plugin-chapter';
let $style = document.getElementById(id);
if (!$style) {
$style = document.createElement("style");
$style = document.createElement('style');
$style.id = id;
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", ()=>{
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', ()=>{
document.head.appendChild($style);
});
else (document.head || document.documentElement).appendChild($style);
}
$style.textContent = (0, _styleLessDefault.default);
}
if (typeof window !== "undefined") window["artplayerPluginChapter"] = artplayerPluginChapter;
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 = ".artplayer-plugin-chapter .art-control-progress-inner {\n background-color: #0000 !important;\n height: 100% !important;\n}\n\n.artplayer-plugin-chapter .art-control-progress-inner > .art-progress-hover, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-loaded, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-played {\n display: none !important;\n}\n\n.artplayer-plugin-chapter .art-control-thumbnails {\n bottom: calc(var(--art-bottom-gap) + 64px) !important;\n}\n\n.artplayer-plugin-chapter .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.artplayer-plugin-chapter .art-chapters .art-chapter {\n align-items: center;\n height: 100%;\n display: flex;\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter .art-chapter-inner {\n cursor: pointer;\n transition: height var(--art-transition-duration) ease;\n background-color: var(--art-progress-color);\n border-radius: 10px;\n width: 100%;\n height: 50%;\n position: relative;\n overflow: hidden;\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter:hover .art-chapter-inner {\n height: 100%;\n}\n\n.artplayer-plugin-chapter .art-chapter-title {\n z-index: 70;\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: 14px;\n line-height: 1;\n display: none;\n position: absolute;\n top: -50px;\n left: 0;\n}\n";
},{"bundle-text:./style.less":"fshgG","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"fshgG":[function(require,module,exports,__globalThis) {
module.exports = ".artplayer-plugin-chapter .art-control-progress-inner {\n background-color: #0000 !important;\n height: 100% !important;\n}\n\n.artplayer-plugin-chapter .art-control-progress-inner > .art-progress-hover, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-loaded, .artplayer-plugin-chapter .art-control-progress-inner > .art-progress-played {\n display: none !important;\n}\n\n.artplayer-plugin-chapter .art-control-thumbnails {\n bottom: calc(var(--art-bottom-gap) + 64px) !important;\n}\n\n.artplayer-plugin-chapter .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.artplayer-plugin-chapter .art-chapters .art-chapter {\n align-items: center;\n height: 100%;\n display: flex;\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter .art-chapter-inner {\n cursor: pointer;\n width: 100%;\n height: 50%;\n transition: height var(--art-transition-duration) ease;\n background-color: var(--art-progress-color);\n border-radius: 10px;\n position: relative;\n overflow: hidden;\n}\n\n.artplayer-plugin-chapter .art-chapters .art-chapter:hover .art-chapter-inner {\n height: 100%;\n}\n\n.artplayer-plugin-chapter .art-chapter-title {\n transform-origin: bottom;\n opacity: 0;\n z-index: 70;\n border-radius: var(--art-border-radius);\n white-space: nowrap;\n background-color: var(--art-tip-background);\n transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;\n padding: 3px 5px;\n font-size: 14px;\n line-height: 1;\n position: absolute;\n top: -50px;\n left: 0;\n transform: scale(.5);\n}\n\n.artplayer-plugin-chapter.art-progress-hover .art-chapter-title {\n opacity: 1;\n transform: scale(1);\n}\n";
},{}],"5dUr6":[function(require,module,exports) {
},{}],"8oCsH":[function(require,module,exports,__globalThis) {
exports.interopDefault = function(a) {
return a && a.__esModule ? a : {
default: a
};
};
exports.defineInteropFlag = function(a) {
Object.defineProperty(a, "__esModule", {
Object.defineProperty(a, '__esModule', {
value: true
});
};
exports.exportAll = function(source, dest) {
Object.keys(source).forEach(function(key) {
if (key === "default" || key === "__esModule" || Object.prototype.hasOwnProperty.call(dest, key)) return;
if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) return;
Object.defineProperty(dest, key, {
enumerable: true,
get: function() {
@@ -327,6 +374,6 @@ exports.export = function(dest, destName, get) {
});
};
},{}]},["4OysR"], "4OysR", "parcelRequire4dc0")
},{}]},["4J69a"], "4J69a", "parcelRequire4dc0", {})
//# sourceMappingURL=index.js.map