T
TopVideoDrawerUI
油猴脚本顶部下拉UI库
#UI库
#顶部下拉抽屉
#视频UI
#脚本UI库
#HLS支持
Statistics
Total Installs
245
Last 24h
+7
User Rating
-
Ad
Description
Versions2
Ratings0
Permissions
A top dropdown video drawer UI library supporting HLS/m3u8 p
Loading…
// ==UserScript==
// @name [tools]📺顶部下拉UI示例
// @name:en [tools] Top Video Drawer Example
// @namespace http://tampermonkey.net/tampermonkey-dev
// @version 3.1.0
// @description 顶部视频抽屉 UI 库示例脚本，演示全部对外接口（公共信息区、设置页、帮助页、scriptInfo 回调、对外日志 addLog 等）。
// @description:en Example script for the TopVideoDrawer UI library. Demonstrates all public APIs including external addLog.
// @author Tampermonkey Dev
// @match *://*/*
// @icon data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' font-size='18'%3E▶%3C/text%3E%3C/svg%3E
// @require https://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js
// @require2 https://scriptcat.org/lib/7537/1.0.0/TopVideoDrawerUI.js#sha384=ENYREWJUrQrtzWgHbsLOesINN9Zuz0wtQUF+Ffu+J9WUn7T0n4eIDRLLdNR4fbRq
// @require file:///c:/GitProject/tampermonkey-js/lib/top-video-drawer-ui.js
// @grant none
// @run-at document-end
// @license MIT
// ==/UserScript==
(function () {
'use strict';
// 本示例脚本通过 @require 引用本地 UI 库（file:///...）。
// 若需要在 Safari / iOS 扩展等无法读取本地文件的环境中使用，
// 请先将 UI 库托管到可访问的 CDN，再修改上方 @require 行。
// ==================== 配置区 ====================
const CONFIG = {
// 抽屉默认高度（也是最大高度关闭时视频区最高高度）
defaultHeight: '40vh',
// 最大高度开启时视频区最高高度
autoHeightMax: '100vh',
autoHeightMin: '180px',
// 默认开启最大高度
autoHeightEnabled: true,
// 切换动画时长
transitionDuration: '0.35s',
// 默认开启视频多开（竖屏自动上限 2，宽屏自动上限 4）
multiVideoEnabled: true,
// 默认开启视频右侧操作栏
videoActionsEnabled: true,
// 日志开关
debug: true,
// ---- 帮助页信息（初始化时传入，也可后续通过 setScriptInfo() 动态更新）----
scriptInfo: {
name: '顶部视频抽屉示例',
version: '3.1.0',
description: '一个可嵌入任意网页的顶部下拉式视频播放抽屉，支持 HLS/m3u8、多开、智能布局、播放历史与收藏、进度记忆等。',
notifications: [
{ date: '2026-08-24', text: 'v3.1 发布：新增对外日志接口 addLog()，外部脚本可将诊断信息写入「日志」页，不受调试开关限制' },
{ date: '2026-08-17', text: 'v3.0 发布：历史区升级为公共信息区（历史/设置/帮助/日志四页签），新增 setScriptInfo() 回调接口' },
{ date: '2026-08-16', text: 'v2.0 发布：智能布局算法、最大高度语义、卡片式历史列表' },
],
},
// ---- 回调函数 ----
// 喜欢按钮点击回调（此回调在 toggleFavorite 内部状态更新之后触发）
onLike: (videoInfo) => {
console.log('[示例] 点赞回调:', videoInfo.content, videoInfo.video_url);
},
// 下载按钮点击回调
onDownload: (videoInfo) => {
const downurl = `https://tools.thatwind.com/tool/m3u8downloader#m3u8=${videoInfo.video_url}&referer=${videoInfo.url}&filename=${videoInfo.content}`;
window.open(downurl, '_blank');
},
};
// ==================== 初始化 UI 库 ====================
// Safari / iOS 原生支持 HLS，可不传 Hls；
// 非 Safari 浏览器需要 hls.js 解码 m3u8，因此通过 @require 引入并传入 window.Hls。
const drawer = new TopVideoDrawer({
...CONFIG,
Hls: window.Hls,
});
// 打印 UI 库版本到日志页（TopVideoDrawer.VERSION 静态属性，drawer.version 实例属性亦可）
console.log(`%c[TopVideoDrawer] 库版本 v${TopVideoDrawer.VERSION}`, 'color:#4fc3f7;font-weight:bold;');
drawer.addLog('TopVideoDrawer 库已加载，版本', TopVideoDrawer.VERSION);
// ==================== 对外接口演示 ====================
//
// 以下代码演示 TopVideoDrawer 实例的全部公开方法。
// 在浏览器控制台中可通过 window.__topVideoDrawer 调用。
// ---- 1. play(videoInfo) —— 播放视频 ----
// videoInfo 字段：{ url, content, video_url, image_url }
// - url: 页面地址（用于历史记录来源、下载 referer）
// - content: 视频标题/内容
// - video_url: 实际视频地址（m3u8 / mp4 等）
// - image_url: 封面图地址（可选，为空时会在收藏时自动截帧）
let videoIndex = 1;
function addDemoVideo() {
let tmp = Date.now();
const url = `http://api.yujn.cn/api/wmsc.php?type=video&t=${tmp}`;
drawer.play({
url,
content: `演示视频 #${videoIndex}`,
video_url: url,
image_url: '',
});
// 通过对外日志接口 addLog() 记录一条外部诊断信息（不受调试开关影响）
drawer.addLog('请求演示视频', `#${videoIndex}`, url);
videoIndex++;
}
// 启动时播放一个视频，之后每 15 秒自动添加一个（演示多开 / 替换）
addDemoVideo();
setInterval(addDemoVideo, 15000);
// ---- 2. setScriptInfo(info) —— 动态更新帮助页信息 ----
// 适用场景：脚本信息需要异步获取（如从 API 拉取版本号、通知公告等）
// 传入后如果帮助页正打开，会自动刷新内容
setTimeout(() => {
drawer.setScriptInfo({
version: '3.1.0-demo',
notifications: [
{ date: '2026-08-24', text: '【动态通知】这是通过 setScriptInfo() 异步传入的通知，可用于推送更新公告' },
...CONFIG.scriptInfo.notifications,
],
});
console.log('[示例] setScriptInfo() 已调用，帮助页信息已更新');
// 同时把这次异步更新记录到抽屉日志页
drawer.addLog('已通过 setScriptInfo() 异步更新帮助页');
}, 3000);
// ---- 8. addLog(...args) —— 对外日志接口（新增）----
// 外部脚本（宿主脚本）调用 drawer.addLog(...) 可将任意诊断信息写入抽屉「日志」页，
// 即使「设置 → 调试日志」关闭也始终收集并输出，方便集中排查问题。
// 日志页中外部日志以左侧蓝色高亮标识，与内部运行日志区分。
// 典型用法：
// drawer.addLog('视频加载失败', url, err);
// window.addEventListener('error', (e) => drawer.addLog('全局错误', e.message));
//
// 下面演示：捕获页面全局错误并推送到日志页
window.addEventListener('error', (e) => {
drawer.addLog('全局错误', e.message || e.error, e.filename ? `${e.filename}:${e.lineno}` : '');
});
window.addEventListener('unhandledrejection', (e) => {
drawer.addLog('未处理的 Promise 异常', e.reason && (e.reason.message || e.reason));
});
// 演示：每 15 秒写一条心跳日志，可在日志页观察外部日志持续累积
setInterval(() => {
drawer.addLog('心跳', new Date().toLocaleTimeString(), `已播放 ${videoIndex - 1} 个演示视频`);
}, 15000);
// ---- 3. 公共信息区页签控制 ----
// toggleHistory() —— 打开/收起「历史」页
// toggleSettings() —— 打开/收起「设置」页（含开关：操作栏 / 多开 / 最大高度 / 自动播放 / 循环播放 / 调试日志）
// toggleHelp() —— 打开/收起「帮助」页（展示 scriptInfo）
// 点击同一按钮再次触发 = 收起信息区
// 也可直接在 UI 中点击右上角 ⚙ 设置按钮（公共信息区页签：历史 / 设置 / 帮助 / 日志，含关闭 ✕）
// ---- 4. 设置页中的三个开关（也可通过代码直接调用）----
// toggleActions() —— 切换视频右侧操作栏（标题栏）的显示
// toggleMultiVideo() —— 切换多开模式（开启后每次 play 新增一个视频槽位）
// toggleAutoHeight() —— 切换最大高度（开启：最高 100vh；关闭：最高 40vh）
// 示例：
// drawer.toggleMultiVideo(); // 开启/关闭多开
// drawer.toggleAutoHeight(); // 开启/关闭最大高度
// drawer.toggleActions(); // 开启/关闭操作栏
// ---- 5. toggleFavorite(videoInfo) —— 切换收藏状态 ----
// 传入 videoInfo 对象（需包含 url 或 video_url）
// 切换后自动同步历史列表与播放区的喜欢标记
// 示例：
// drawer.toggleFavorite({ url: 'xxx', video_url: 'xxx', content: '标题' });
// ---- 6. clearHistory() —— 清空历史记录 ----
// 清空所有未喜欢的记录，已喜欢的视频永久保留
// 示例：
// drawer.clearHistory();
// ---- 7. destroy() —— 销毁抽屉 ----
// 移除所有 DOM、事件监听、Hls 实例，清理 localStorage 不会清除
// 示例：
// drawer.destroy();
// ==================== 控制台快捷方法 ====================
// 导出到 window，方便在浏览器控制台中调试
if (typeof window !== 'undefined') {
window.__topVideoDrawer = drawer;
// 快捷别名
window.__tvd = {
drawer,
// UI 库版本（TopVideoDrawer.VERSION 静态属性的便捷别名）
version: TopVideoDrawer.VERSION,
// 播放一个演示视频
play: addDemoVideo,
// 打开/收起各页签
history: () => drawer.toggleHistory(),
settings: () => drawer.toggleSettings(),
help: () => drawer.toggleHelp(),
// 切换开关
multi: () => drawer.toggleMultiVideo(),
height: () => drawer.toggleAutoHeight(),
actions: () => drawer.toggleActions(),
// 清空历史
clear: () => drawer.clearHistory(),
// 对外日志接口：drawer.addLog(...) 的快捷方式，日志写入「日志」页
log: (...args) => drawer.addLog(...args),
// 销毁
destroy: () => drawer.destroy(),
};
console.log(
'%c[TopVideoDrawer] 示例已加载，控制台可调用 window.__tvd 或 window.__topVideoDrawer',
'color:#4fc3f7;font-weight:bold;'
);
console.log('%c __tvd.play() — 播放演示视频', 'color:#aaa');
console.log('%c __tvd.history() — 打开历史页', 'color:#aaa');
console.log('%c __tvd.settings() — 打开设置页', 'color:#aaa');
console.log('%c __tvd.help() — 打开帮助页', 'color:#aaa');
console.log('%c __tvd.multi() — 切换多开', 'color:#aaa');
console.log('%c __tvd.height() — 切换最大高度', 'color:#aaa');
console.log('%c __tvd.actions() — 切换操作栏', 'color:#aaa');
console.log('%c __tvd.clear() — 清空历史', 'color:#aaa');
console.log('%c __tvd.log(...) — 写入日志页（对外 addLog 接口）', 'color:#aaa');
console.log('%c __tvd.version — UI 库版本：v' + TopVideoDrawer.VERSION, 'color:#aaa');
console.log('%c __tvd.destroy() — 销毁抽屉', 'color:#aaa');
}
})();