mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
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.
This commit is contained in:
Harvey Zhao committed
1 parent
a93967d518
commit
51d49f857a
5 files changed
+135
-103
No files matched your search
@@ -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
|
||||
@@ -1 +1 @@
|
||||
{"mappings":"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","sources":["packages/artplayer-plugin-chapter/src/index.js","node_modules/@parcel/runtime-js/lib/bunLine truncated
|
||||
{"mappings":"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","sources":["packages/artplayer-plugin-chapter/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-3c6e83237a7eb6ba.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less'\n\nexport default function artplayerPluginChapter(option = {}) {\n return (art) => {\n const { $player } =Line truncated
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "artplayer-plugin-chapter",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "chapter plugin for ArtPlayer",
|
||||
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user