// ==UserScript==
// @name 海豚知道学习平台 · 视频增强（快捷键 / 进度条标记 / 收藏笔记）
// @namespace https://learn.htknow.com/
// @version 1.1.0
// @description 为 learn.htknow.com 课程视频增加：空格播放暂停、F 全屏、进度条标记点、时间点收藏与笔记、倍速记忆。数据保存在浏览器 localStorage，纯本地不上传。
// @author dogkun
// @match https://learn.htknow.com/*
// @run-at document-idle
// @grant none
// @license MIT
// ==/UserScript==
(function () {
'use strict';
var CONFIG = {
debug: false,
keys: {
playPause: ['Space'],
fullscreen: ['KeyF'],
addMarker: ['KeyM'],
addNote: ['KeyB'],
togglePanel: ['KeyC'],
seekBack: ['ArrowLeft'],
seekFwd: ['ArrowRight'],
volumeUp: ['ArrowUp'],
volumeDown: ['ArrowDown'],
speedDown: ['BracketLeft'],
speedUp: ['BracketRight'],
speedReset: ['Backslash']
},
seekStep: 5,
volumeStep: 0.1,
speedPresets: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3],
rememberSpeed: true,
jumpAutoplay: false,
autoFocusNewMarker: false,
autoFocusNewNote: true,
stripHeight: 12,
stripOffsetBottom: 0,
autoAvoidControlBar: true,
geomHeartbeatMs: 400,
markerColor: '#ffcc33',
markerSymbol: '?',
noteColor: '#ffcc33',
noteSymbol: '★',
stretchVideoInFullscreen: true,
fullscreenObjectFit: 'contain',
storagePrefix: { markers: 'htknow_markers_', notes: 'htknow_notes_' },
prefsKey: 'htknow_enh_prefs_v1'
};
var VERSION = '1.0.0';
var GUARDED_ACTIONS = { seekBack: 1, seekFwd: 1, volumeUp: 1, volumeDown: 1 };
var Util = {
fmtTime: function (sec) {
var s = Number(sec);
if (!isFinite(s) || s < 0) s = 0;
s = Math.floor(s);
var h = Math.floor(s / 3600);
var m = Math.floor((s % 3600) / 60);
var ss = s % 60;
var pad = function (n) { return n < 10 ? '0' + n : String(n); };
return h > 0 ? h + ':' + pad(m) + ':' + pad(ss) : pad(m) + ':' + pad(ss);
},
clamp: function (v, lo, hi) {
v = Number(v);
if (!isFinite(v)) return lo;
return v < lo ? lo : (v > hi ? hi : v);
},
pctOf: function (t, duration) {
var d = Number(duration);
if (!isFinite(d) || d <= 0) return 0;
return Util.clamp((Number(t) || 0) / d * 100, 0, 100);
},
esc: function (s) {
return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) {
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c];
});
},
hashStr: function (s) {
var str = String(s), h = 5381;
for (var i = 0; i < str.length; i++) h = ((h << 5) + h + str.charCodeAt(i)) >>> 0;
return h.toString(36);
},
createId: function () {
return Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 7);
},
sanitizeKey: function (v) {
return String(v == null ? '' : v).replace(/[^A-Za-z0-9_-]/g, '').slice(0, 60);
},
sortByTime: function (list) {
return (Array.isArray(list) ? list.slice() : []).sort(function (a, b) {
return (Number(a.t) || 0) - (Number(b.t) || 0);
});
},
findItem: function (list, id) {
if (!Array.isArray(list)) return null;
for (var i = 0; i < list.length; i++) if (list[i].id === id) return list[i];
return null;
},
addItem: function (list, item) {
return Util.sortByTime((Array.isArray(list) ? list.slice() : []).concat([item]));
},
removeItem: function (list, id) {
return (Array.isArray(list) ? list : []).filter(function (x) { return x.id !== id; });
},
updateItem: function (list, id, patch) {
return (Array.isArray(list) ? list : []).map(function (x) {
if (x.id !== id) return x;
var next = {};
for (var k in x) if (Object.prototype.hasOwnProperty.call(x, k)) next[k] = x[k];
for (var j in patch) if (Object.prototype.hasOwnProperty.call(patch, j)) next[j] = patch[j];
return next;
});
},
mergeByKey: function (existing, incoming, keyOf) {
var out = (Array.isArray(existing) ? existing : []).slice();
var seen = {};
out.forEach(function (x) { seen[keyOf(x)] = 1; });
var added = 0;
(Array.isArray(incoming) ? incoming : []).forEach(function (x) {
var k = keyOf(x);
if (seen[k]) return;
seen[k] = 1;
out.push(x);
added++;
});
return { list: out, added: added };
},
fillEmptyText: function (existing, incoming, field) {
var out = (Array.isArray(existing) ? existing : []).slice();
var filled = 0;
(Array.isArray(incoming) ? incoming : []).forEach(function (inc) {
var raw = inc ? inc[field] : '';
var incText = String(raw == null ? '' : raw).trim();
if (!incText) return;
for (var i = 0; i < out.length; i++) {
var cur = out[i];
if (Math.round(Number(cur.t) * 10) !== Math.round(Number(inc.t) * 10)) continue;
var curText = String(cur[field] == null ? '' : cur[field]).trim();
if (curText) continue;
var patch = {};
patch[field] = inc[field];
out[i] = Util.updateItem([cur], cur.id, patch)[0];
filled++;
break;
}
});
return { list: out, filled: filled };
},
normalizeMarker: function (m) {
m = m || {};
return {
id: String(m.id || Util.createId()),
t: Number(m.t) || 0,
label: String(m.label == null ? '' : m.label),
createdAt: Number(m.createdAt) || Date.now()
};
},
normalizeNote: function (n) {
n = n || {};
var created = Number(n.createdAt) || Date.now();
return {
id: String(n.id || Util.createId()),
t: Number(n.t) || 0,
text: String(n.text == null ? '' : n.text),
createdAt: created,
updatedAt: Number(n.updatedAt) || created
};
},
isTypingTarget: function (el) {
if (!el || !el.tagName) return false;
var tag = String(el.tagName).toLowerCase();
if (tag === 'input' || tag === 'textarea' || tag === 'select') return true;
if (el.isContentEditable === true) return true;
return false;
},
videoKeyFrom: function (loc, video) {
var KEY_PARAMS = ['lessonId', 'lesson_id', 'lessonid', 'videoId', 'video_id', 'videoid',
'courseId', 'course_id', 'courseid', 'chapterId', 'chapter_id', 'chapterid',
'sectionId', 'catalogId', 'id', 'cid', 'vid', 'lid'];
var parts = [];
var search = (loc && loc.search) || '';
var hash = (loc && loc.hash) || '';
try {
var sp = new URLSearchParams(search);
for (var i = 0; i < KEY_PARAMS.length; i++) {
var n = KEY_PARAMS[i];
var v = sp.get(n);
if (v != null && v !== '') parts.push(n.toLowerCase() + '-' + Util.sanitizeKey(v));
}
} catch (e) { }
if (hash) {
var qi = hash.indexOf('?');
if (qi >= 0) {
try {
var hp = new URLSearchParams(hash.slice(qi));
for (var j = 0; j < KEY_PARAMS.length; j++) {
var hn = KEY_PARAMS[j];
var hv = hp.get(hn);
if (hv != null && hv !== '') parts.push('h' + hn.toLowerCase() + '-' + Util.sanitizeKey(hv));
}
} catch (e2) { }
} else {
var segs = hash.split(/[\/?#]+/).filter(Boolean);
if (segs.length) parts.push('hseg-' + Util.sanitizeKey(segs.slice(-2).join('-')));
}
}
if (parts.length) return { key: parts.join('_').slice(0, 180), mode: 'params' };
var path = ((loc && loc.pathname) || '/').replace(/\/+$/, '') || '/';
return { key: 'path-' + Util.hashStr(path), mode: 'path' };
},
parseImport: function (text) {
var data = JSON.parse(text);
if (!data || typeof data !== 'object' || Array.isArray(data)) throw new Error('不是有效的 JSON 对象');
return {
markers: Array.isArray(data.markers) ? data.markers : [],
notes: Array.isArray(data.notes) ? data.notes : []
};
}
};
function createStore(storage, prefix) {
var P = prefix || CONFIG.storagePrefix;
function keyOf(kind, videoId) {
return (kind === 'notes' ? P.notes : P.markers) + videoId;
}
function read(kind, videoId) {
var raw;
try { raw = storage.getItem(keyOf(kind, videoId)); } catch (e) { return []; }
if (!raw) return [];
try {
var parsed = JSON.parse(raw);
if (!Array.isArray(parsed)) return [];
return kind === 'notes' ? parsed.map(Util.normalizeNote) : parsed.map(Util.normalizeMarker);
} catch (e2) {
return [];
}
}
function write(kind, videoId, list) {
var norm = (Array.isArray(list) ? list : []).map(kind === 'notes' ? Util.normalizeNote : Util.normalizeMarker);
var payload = JSON.stringify(Util.sortByTime(norm));
try {
storage.setItem(keyOf(kind, videoId), payload);
return { ok: true, count: norm.length };
} catch (e) {
var quota = e && (e.name === 'QuotaExceededError' ||
e.name === 'NS_ERROR_DOM_QUOTA_REACHED' ||
e.code === 22 || e.code === 1014);
return {
ok: false,
quota: !!quota,
message: quota
? '浏览器本地存储已满，本次修改未保存。请删除部分旧笔记后重试，或用「导出」备份后清理。'
: ('保存失败：' + String((e && e.message) || e))
};
}
}
return {
keyOf: keyOf,
loadMarkers: function (videoId) { return read('markers', videoId); },
saveMarkers: function (videoId, list) { return write('markers', videoId, list); },
loadNotes: function (videoId) { return read('notes', videoId); },
saveNotes: function (videoId, list) { return write('notes', videoId, list); },
exportJSON: function (videoId, markers, notes) {
return JSON.stringify({
app: 'htknow-enhancer',
version: VERSION,
videoId: videoId,
exportedAt: new Date().toISOString(),
markers: Util.sortByTime(markers || []),
notes: Util.sortByTime(notes || [])
}, null, 2);
}
};
}
var API = {
version: VERSION,
CONFIG: CONFIG,
Util: Util,
createStore: createStore
};
try { if (typeof globalThis !== 'undefined') globalThis.__HTKNOW_ENH__ = API; } catch (e) { }
if (typeof document === 'undefined' || typeof window === 'undefined') return;
var doc = document;
function log() {
if (!CONFIG.debug) return;
var args = Array.prototype.slice.call(arguments);
args.unshift('[htknow-enh]');
console.log.apply(console, args);
}
var store = createStore(window.localStorage, CONFIG.storagePrefix);
var state = {
video: null,
videoId: '',
keyMode: '',
markers: [],
notes: [],
overlay: null,
strip: null,
markerNodes: {},
noteNodes: {},
panel: null,
overlayParent: null,
overlayMode: '',
parentOrigPosition: null,
overlayHome: null,
controlBarOffset: 0,
stripGeom: null,
lastGeomAt: 0,
geomTimer: 0,
geomRaf: 0,
settleT1: 0, settleT2: 0,
barRO: null,
barROEl: null,
panelHome: null,
fitSaved: null,
panelHome: null,
prefsCollapsedBeforeFs: null,
prefs: {},
bound: null,
keyMap: {},
urlSnapshot: '',
rectTimer: 0,
lastMouse: { x: -1, y: -1 },
toastTimer: 0,
fileInput: null
};
function loadPrefs() {
try {
var raw = window.localStorage.getItem(CONFIG.prefsKey);
var o = raw ? JSON.parse(raw) : null;
return (o && typeof o === 'object') ? o : {};
} catch (e) { return {}; }
}
function savePrefs(patch) {
state.prefs = Object.assign({}, state.prefs, patch);
try { window.localStorage.setItem(CONFIG.prefsKey, JSON.stringify(state.prefs)); } catch (e) { }
}
function el(tag, cls, html) {
var n = doc.createElement(tag);
if (cls) n.className = cls;
if (html != null) n.innerHTML = html;
return n;
}
function on(target, type, fn, opts) {
if (!target) return;
target.addEventListener(type, fn, opts || false);
}
function debounce(fn, wait) {
var timer = 0;
return function () {
var args = arguments, self = this;
clearTimeout(timer);
timer = setTimeout(function () { fn.apply(self, args); }, wait);
};
}
function toast(msg, kind) {
var box = doc.getElementById('htknow-enh-toast');
if (!box) {
box = el('div', 'htknow-enh-toast');
box.id = 'htknow-enh-toast';
(doc.body || doc.documentElement).appendChild(box);
}
box.textContent = String(msg);
box.className = 'htknow-enh-toast is-show' + (kind === 'error' ? ' is-error' : '');
clearTimeout(state.toastTimer);
state.toastTimer = setTimeout(function () {
box.className = 'htknow-enh-toast' + (kind === 'error' ? ' is-error' : '');
}, kind === 'error' ? 4200 : 1800);
}
function isElementVisible(v) {
if (!v || !v.getBoundingClientRect) return false;
var r = v.getBoundingClientRect();
if (r.width < 80 || r.height < 45) return false;
var cs = window.getComputedStyle(v);
if (cs.display === 'none' || cs.visibility === 'hidden') return false;
if (Number(cs.opacity) === 0) return false;
return true;
}
function collectVideosIn(root, out, depth) {
out = out || [];
depth = depth || 0;
if (!root || depth > 6 || !root.querySelectorAll) return out;
try {
var direct = root.querySelectorAll('video');
for (var i = 0; i < direct.length; i++) out.push(direct[i]);
} catch (e) { }
if (!out.length) {
try {
var all = root.querySelectorAll('*');
for (var j = 0; j < all.length; j++) {
if (all[j].shadowRoot) collectVideosIn(all[j].shadowRoot, out, depth + 1);
}
} catch (e2) { }
}
return out;
}
function pickVideo() {
var vids = collectVideosIn(doc, [], 0);
if (!vids.length) return null;
var best = null, bestScore = -Infinity;
for (var i = 0; i < vids.length; i++) {
var v = vids[i];
var score = 0;
if (isElementVisible(v)) score += 1000;
var dur = isFinite(v.duration) ? v.duration : 0;
var cur = isFinite(v.currentTime) ? v.currentTime : 0;
score += Math.min(dur, 100000) * 0.01;
score += Math.min(cur, 100000) * 0.02;
if (v.paused === false && !v.ended) score += 500;
if (score > bestScore) { bestScore = score; best = v; }
}
return best;
}
function computeVideoId() {
var r = Util.videoKeyFrom(window.location, state.video);
state.keyMode = r.mode;
return r.key;
}
function teardownOverlay() {
if (state.rectTimer) { clearInterval(state.rectTimer); state.rectTimer = 0; }
restoreOverlayHome();
if (state.overlay && state.overlay.parentNode) state.overlay.parentNode.removeChild(state.overlay);
if (state.overlayParent && state.parentOrigPosition != null) {
try { state.overlayParent.style.position = state.parentOrigPosition; } catch (e) { }
}
state.overlay = null;
state.strip = null;
state.markerNodes = {};
state.noteNodes = {};
state.overlayParent = null;
state.parentOrigPosition = null;
state.overlayMode = '';
state.overlayHome = null;
state.stripGeom = null;
state.lastGeomAt = 0;
if (state.barRO) { try { state.barRO.disconnect(); } catch (e) { } }
state.barRO = null;
state.barROEl = null;
if (state.geomRaf) {
try { (window.cancelAnimationFrame || clearTimeout)(state.geomRaf); } catch (e) { }
state.geomRaf = 0;
}
if (state.settleT1) { clearTimeout(state.settleT1); state.settleT1 = 0; }
if (state.settleT2) { clearTimeout(state.settleT2); state.settleT2 = 0; }
}
function restoreOverlayHome() {
var home = state.overlayHome;
if (!home) return;
state.overlayHome = null;
if (!state.overlay) return;
try {
if (home.parent && doc.contains(home.parent)) {
home.parent.insertBefore(state.overlay, home.next && doc.contains(home.next) ? home.next : null);
} else if (state.video && state.video.parentElement) {
state.video.parentElement.appendChild(state.overlay);
}
} catch (e) { }
}
function findControlBar(scope, video) {
if (!scope || !scope.getBoundingClientRect) return null;
var sr = scope.getBoundingClientRect();
if (sr.width <= 0 || sr.height <= 0) return null;
var kids = scope.children;
for (var i = 0; i < kids.length; i++) {
var k = kids[i];
if (k === video || (k.contains && k.contains(video))) continue;
var r = k.getBoundingClientRect();
if (r.height < 8 || r.height > sr.height * 0.4) continue;
if (r.width < sr.width * 0.5) continue;
if (Math.abs(r.bottom - sr.bottom) > 8) continue;
var cs = window.getComputedStyle(k);
if (cs.position === 'static') continue;
if (cs.visibility === 'hidden' || cs.display === 'none') continue;
return k;
}
return null;
}
function detectControlBarOffset() {
var v = state.video;
if (!v) return 0;
var node = v.parentElement;
for (var depth = 0; depth < 4 && node && node !== doc.body && node !== doc.documentElement; depth++) {
var bar = findControlBar(node, v);
if (bar) return Math.round(bar.getBoundingClientRect().height);
node = node.parentElement;
}
return 0;
}
function findPlayerContainer(video) {
if (!video || !video.parentElement) return null;
var vr = video.getBoundingClientRect();
var node = video.parentElement;
var fallback = null;
for (var i = 0; i < 5 && node && node !== doc.body && node !== doc.documentElement; i++) {
var nr = node.getBoundingClientRect();
if (nr.width <= 0 || nr.height <= 0) break;
if (findControlBar(node, video)) return node;
if (!fallback && nr.width <= vr.width * 1.8 + 60 && nr.height <= vr.height * 1.8 + 60) fallback = node;
node = node.parentElement;
}
return fallback || video.parentElement;
}
function videoBox(video, scope) {
var vr = video.getBoundingClientRect();
var box = { left: vr.left, top: vr.top, right: vr.right, bottom: vr.bottom, width: vr.width, height: vr.height };
if (!(box.height > 0) && scope && scope.getBoundingClientRect) {
var sr = scope.getBoundingClientRect();
if (sr.height > 0) { box.top = sr.top; box.bottom = sr.bottom; box.height = sr.height; }
}
if (!(box.height > 0) && box.width > 0) box.height = box.width * 0.75;
return box;
}
function findProgressBar(video, scope, box) {
if (!video || !scope || !scope.querySelectorAll) return null;
box = box || videoBox(video, scope);
var vw = box.width, vh = box.height;
if (!(vw > 0) || !(vh > 0)) return null;
var sels = ['.vjs-progress-holder', '.vjs-slider-bar', '.vjs-progress-control',
'[class*="progress"]', '[class*="slider"]', '[class*="track"]', '[class*="timeline"]'];
for (var s = 0; s < sels.length; s++) {
var list;
try { list = scope.querySelectorAll(sels[s]); } catch (e) { continue; }
var best = null, bestArea = Infinity;
for (var i = 0; i < list.length; i++) {
var node = list[i];
if (node.id === 'htknow-enh-strip' || node.id === 'htknow-enh-overlay') continue;
if (typeof node.className === 'string' && node.className.indexOf('htknow-enh') >= 0) continue;
var r = node.getBoundingClientRect();
if (!(r.width >= vw * 0.25)) continue;
if (!(r.height >= 1) || r.height > vh * 0.2) continue;
var area = r.width * r.height;
if (area < bestArea) { bestArea = area; best = node; }
}
if (best) return best;
}
return null;
}
function findProgressBarAnywhere(video) {
var box = videoBox(video, state.overlayParent);
var bar = findProgressBar(video, doc, box);
if (!bar) return null;
var r = bar.getBoundingClientRect();
var cy = r.top + r.height / 2;
if (cy < box.top || cy > box.bottom) return null;
if (r.left < box.left - 8 || r.right > box.right + 8) return null;
return bar;
}
function overlayRefRect() {
var cands = [state.overlay, state.overlayParent];
for (var i = 0; i < cands.length; i++) {
var n = cands[i];
if (!n || !n.getBoundingClientRect) continue;
var r = n.getBoundingClientRect();
if (r.width > 0 && r.height > 0) return r;
}
return null;
}
function measureStripGeometry() {
var video = state.video;
if (!video) return null;
var host = state.overlayParent;
var bar = host ? findProgressBar(video, host) : null;
if (!bar) bar = findProgressBarAnywhere(video);
if (!bar) return null;
var r = bar.getBoundingClientRect();
if (r.width < 10 || r.height < 1) return null;
var ref = overlayRefRect();
if (!ref) return null;
return {
left: r.left - ref.left,
width: r.width,
bottom: ref.bottom - r.bottom,
height: r.height,
refW: ref.width,
refH: ref.height,
el: bar,
rawLeft: r.left,
rawWidth: r.width,
rawBottom: r.bottom
};
}
function observeBar(bar) {
if (!bar || typeof ResizeObserver === 'undefined') return;
if (state.barRO && state.barROEl === bar) return;
if (state.barRO) { try { state.barRO.disconnect(); } catch (e) { } }
state.barRO = null;
state.barROEl = bar;
try {
state.barRO = new ResizeObserver(function () { scheduleGeomApply(); });
state.barRO.observe(bar);
if (bar.parentElement) state.barRO.observe(bar.parentElement);
} catch (e) { state.barRO = null; state.barROEl = null; }
}
function scheduleGeomApply() {
if (state.geomRaf) return;
var raf = window.requestAnimationFrame || function (fn) { return setTimeout(fn, 16); };
state.geomRaf = raf(function () {
state.geomRaf = 0;
applyStripGeometry();
});
}
function geometryHeartbeat() {
/* 先同步可见性：未开播时量不到轨道（stripGeom 为 null），不能因为下面的 return 就不判可见性 */
syncStripVisibility();
var g = state.stripGeom;
if (!state.strip || !g || !g.el || !doc.contains(g.el)) return;
var r = g.el.getBoundingClientRect();
if (r.width < 10 || r.height < 1) return;
if (Math.abs(r.left - g.rawLeft) > 0.5 || Math.abs(r.width - g.rawWidth) > 0.5 ||
Math.abs(r.bottom - g.rawBottom) > 0.5) {
applyStripGeometry();
return;
}
if (!state.prefs.panel && state.panel && state.video) {
var vr = state.video.getBoundingClientRect();
var sc = window.scrollY || 0;
var home = state.panelHome;
if (!home) {
state.panelHome = { left: vr.left, top: vr.top, scroll: sc };
} else if (Math.abs(sc - home.scroll) < 2 &&
(Math.abs(vr.left - home.left) > 12 || Math.abs(vr.top - home.top) > 12)) {
state.panelHome = { left: vr.left, top: vr.top, scroll: sc };
autoPlacePanel();
}
}
}
function settleGeometry() {
if (state.settleT1) clearTimeout(state.settleT1);
if (state.settleT2) clearTimeout(state.settleT2);
state.settleT1 = setTimeout(function () { applyStripGeometry(); }, 220);
state.settleT2 = setTimeout(function () { applyStripGeometry(); }, 620);
syncStripVisibility();
}
function scaledStripGeom(g, refW) {
if (!g || !(g.refW > 0) || !(refW > 0) || Math.abs(refW - g.refW) < 1) return g;
return {
left: g.left,
width: Math.max(10, g.width + (refW - g.refW)),
bottom: g.bottom,
height: g.height, refW: refW, refH: g.refH, el: g.el
};
}
function applyStripGeometry() {
if (!state.strip) return;
if (state.stripGeom && state.stripGeom.el && !doc.contains(state.stripGeom.el)) state.stripGeom = null;
var ref = overlayRefRect();
var fresh = measureStripGeometry();
if (fresh) { state.stripGeom = fresh; observeBar(fresh.el); }
var g = fresh || scaledStripGeom(state.stripGeom, ref ? ref.width : 0);
if (g) {
var stripH = CONFIG.stripHeight;
var bottom = Math.max(0, g.bottom + g.height / 2 - stripH / 2);
state.strip.style.setProperty('left', g.left + 'px', 'important');
state.strip.style.setProperty('width', g.width + 'px', 'important');
state.strip.style.setProperty('right', 'auto', 'important');
state.strip.style.setProperty('bottom', bottom + 'px', 'important');
syncStripVisibility();
return bottom;
}
state.controlBarOffset = CONFIG.autoAvoidControlBar ? detectControlBarOffset() : 0;
var off = Math.max(CONFIG.stripOffsetBottom, state.controlBarOffset);
state.strip.style.setProperty('left', '0px', 'important');
state.strip.style.setProperty('right', '0px', 'important');
state.strip.style.removeProperty('width');
state.strip.style.setProperty('bottom', off + 'px', 'important');
syncStripVisibility();
return off;
}
function refreshStripGeometry() {
if (!state.strip) return;
var now = Date.now();
if (now - state.lastGeomAt < 500) return;
state.lastGeomAt = now;
applyStripGeometry();
}
function attachOverlay() {
var video = state.video;
if (!video) return;
var parent = video.parentElement;
var overlay = el('div');
overlay.id = 'htknow-enh-overlay';
var strip = el('div', 'htknow-enh-strip');
strip.id = 'htknow-enh-strip';
strip.style.height = CONFIG.stripHeight + 'px';
overlay.appendChild(strip);
if (parent && parent !== doc.body && parent !== doc.documentElement) {
state.overlayMode = 'absolute';
try {
var cs = window.getComputedStyle(parent);
if (cs.position === 'static') {
state.parentOrigPosition = parent.style.position || '';
parent.style.position = 'relative';
}
} catch (e) { }
state.overlayParent = parent;
parent.appendChild(overlay);
} else {
state.overlayMode = 'fixed';
overlay.classList.add('htknow-enh-overlay-fix');
(doc.body || doc.documentElement).appendChild(overlay);
syncOverlayRect();
state.rectTimer = setInterval(syncOverlayRect, 500);
}
state.overlay = overlay;
state.strip = strip;
applyStripGeometry();
renderStrip();
}
function syncOverlayRect() {
if (state.overlayMode !== 'fixed' || !state.overlay || !state.video) return;
var r = state.video.getBoundingClientRect();
var s = state.overlay.style;
s.left = r.left + 'px';
s.top = r.top + 'px';
s.width = r.width + 'px';
s.height = r.height + 'px';
}
function renderStrip() {
var strip = state.strip;
if (!strip) return;
strip.innerHTML = '';
state.markerNodes = {};
state.noteNodes = {};
var dur = state.video && isFinite(state.video.duration) ? state.video.duration : 0;
state.markers.forEach(function (m) {
var pct = dur > 0 ? Util.pctOf(m.t, dur) : 0;
var node = el('div', 'htknow-enh-marker');
node.style.left = pct + '%';
node.setAttribute('data-id', m.id);
node.title = Util.fmtTime(m.t) + (m.label ? ' · ' + m.label : '') + '\n单击跳转 · 右键删除';
node.innerHTML = '' + CONFIG.markerSymbol + ' ';
on(node, 'click', function (e) {
e.preventDefault(); e.stopPropagation();
jumpTo(m.t);
});
on(node, 'contextmenu', function (e) {
e.preventDefault(); e.stopPropagation();
deleteMarker(m.id);
});
strip.appendChild(node);
state.markerNodes[m.id] = node;
});
/* 收藏在进度条上是五角星（用户要求：收藏=★、标记=?） */
state.notes.forEach(function (n) {
var pct = dur > 0 ? Util.pctOf(n.t, dur) : 0;
var node = el('div', 'htknow-enh-marker is-note');
node.style.left = pct + '%';
node.setAttribute('data-id', n.id);
node.title = Util.fmtTime(n.t) + (n.text ? ' · ' + n.text : '') + '\n单击跳转 · 右键删除';
node.innerHTML = '' + CONFIG.noteSymbol + ' ';
on(node, 'click', function (e) {
e.preventDefault(); e.stopPropagation();
jumpTo(n.t);
});
on(node, 'contextmenu', function (e) {
e.preventDefault(); e.stopPropagation();
deleteNote(n.id);
});
strip.appendChild(node);
state.noteNodes[n.id] = node;
});
syncStripVisibility();
highlightActiveMarker();
}
/** 站点控制条元素：优先 Video.js 标准类名（隐藏时也找得到 —— 几何探测在 display:none 时必然落空），
再退到已量到的轨道元素。 */
function controlBarEl() {
var v = state.video;
var node = v && v.parentElement;
for (var i = 0; i < 4 && node && node !== doc.body && node !== doc.documentElement; i++) {
var bar = node.querySelector ? node.querySelector('.vjs-control-bar') : null;
if (bar) return bar;
node = node.parentElement;
}
return (state.stripGeom && state.stripGeom.el) || null;
}
/** 元素「实际」是否可见：祖先的 display/visibility/opacity 都会影响它。
opacity 不被子元素继承 —— getComputedStyle(子).opacity 永远是 1，
所以站点给控制条写 opacity:0 时，必须自己沿祖先链把 opacity 乘起来才看得出隐藏。 */
function effectiveVisible(el) {
var node = el, op = 1;
for (var i = 0; i < 12 && node && node.nodeType === 1; i++) {
var cs = window.getComputedStyle(node);
if (cs.display === 'none') return false;
if (cs.visibility === 'hidden' || cs.visibility === 'collapse') return false;
var o = parseFloat(cs.opacity);
if (isFinite(o)) op *= o;
if (op <= 0.05) return false;
if (node === doc.body || node === doc.documentElement) break;
node = node.parentElement;
}
return true;
}
/** 控制条（进度条）真的显示时才让标记露出来 —— 站点用 display:none / visibility:hidden / opacity:0 藏它 */
function syncStripVisibility() {
if (!state.strip) return;
var el = controlBarEl();
var show = true;
if (el && doc.contains(el)) {
var r = el.getBoundingClientRect();
show = r.width > 0.5 && r.height > 0.5 && effectiveVisible(el);
}
state.strip.classList.toggle('is-bar-hidden', !show);
}
function highlightActiveMarker() {
var v = state.video;
if (!v) return;
var t = v.currentTime || 0;
var activeId = null;
for (var i = 0; i < state.markers.length; i++) {
if (state.markers[i].t <= t + 0.25) activeId = state.markers[i].id;
else break;
}
for (var id in state.markerNodes) {
if (!Object.prototype.hasOwnProperty.call(state.markerNodes, id)) continue;
var node = state.markerNodes[id];
if (id === activeId) node.classList.add('is-active');
else node.classList.remove('is-active');
}
}
function persist(kind) {
var r = kind === 'notes'
? store.saveNotes(state.videoId, state.notes)
: store.saveMarkers(state.videoId, state.markers);
if (!r.ok) toast(r.message, 'error');
return r.ok;
}
function jumpTo(t) {
var v = state.video;
if (!v) return;
try {
v.currentTime = Util.clamp(t, 0, isFinite(v.duration) && v.duration > 0 ? v.duration : t);
if (CONFIG.jumpAutoplay && v.paused) {
var p = v.play();
if (p && p.catch) p.catch(function () { });
}
renderClock();
highlightActiveMarker();
} catch (e) {
toast('跳转失败：' + String(e && e.message || e), 'error');
}
}
function addMarkerAt(t, label) {
var item = Util.normalizeMarker({ id: Util.createId(), t: t, label: label || '' });
state.markers = Util.addItem(state.markers, item);
if (persist('markers')) {
renderStrip();
renderLists();
return item;
}
return null;
}
function deleteMarker(id) {
var m = Util.findItem(state.markers, id);
if (!m) return;
if (!window.confirm('删除标记 ' + Util.fmtTime(m.t) + (m.label ? '（' + m.label + '）' : '') + ' ？')) return;
state.markers = Util.removeItem(state.markers, id);
persist('markers');
renderStrip();
renderLists();
}
function addNoteAt(t, text) {
var item = Util.normalizeNote({ id: Util.createId(), t: t, text: text || '' });
state.notes = Util.addItem(state.notes, item);
if (persist('notes')) {
renderLists();
return item;
}
return null;
}
function deleteNote(id) {
var n = Util.findItem(state.notes, id);
if (!n) return;
if (!window.confirm('删除收藏 ' + Util.fmtTime(n.t) + ' ？笔记内容也会一并删除。')) return;
state.notes = Util.removeItem(state.notes, id);
persist('notes');
renderLists();
}
var PANEL_HTML = [
'',
' ▶ ',
' 视频助手 ',
' --:-- / --:-- ',
' – ',
'
',
'',
' ＋ 标记 ',
' ★ 收藏 ',
' 导出 ',
' 导入 ',
'
',
'',
' 倍速 ',
'
',
'',
' 标记 0 ',
' 收藏笔记 0 ',
'
',
'',
'',
'还没有标记点。M 或点上方「＋ 标记」。
';
return;
}
list.innerHTML = state.markers.map(function (m) {
return '' +
'' + Util.fmtTime(m.t) + ' ' +
'× ' +
'
';
}).join('');
}
function renderNotes() {
if (!state.panel) return;
var list = state.panel.querySelector('#htknow-enh-list-notes');
if (!list) return;
if (!state.notes.length) {
list.innerHTML = '还没有收藏。B 或点上方「★ 收藏」，然后写笔记。
';
return;
}
list.innerHTML = state.notes.map(function (n) {
return '' +
'
' +
'' + CONFIG.noteSymbol + ' ' +
'' + Util.fmtTime(n.t) + ' ' +
'× ' +
'
' +
'
' +
'