00:00
00:00
累计 0:00
就绪
`;
document.body.appendChild(panel);
$('#ch-collapse', panel).addEventListener('click', () => {
state.collapsed = !state.collapsed;
panel.classList.toggle('collapsed', state.collapsed);
$('#ch-collapse', panel).textContent = state.collapsed ? '+' : '−';
});
$('#ch-close', panel).addEventListener('click', () => { panel.style.display = 'none'; });
$('#ch-video-toggle', panel).addEventListener('click', toggleVideoPlayback);
$('#ch-prev', panel).addEventListener('click', () => navigateRow(-1));
$('#ch-next', panel).addEventListener('click', () => navigateRow(1));
$('#ch-speed', panel).addEventListener('change', event => setPlaybackSpeed(Number(event.target.value)));
$('#ch-run-toggle', panel).addEventListener('click', toggleStudyTimer);
$('#ch-timer-stop', panel).addEventListener('click', stopStudyTimer);
$('#ch-refresh', panel).addEventListener('click', () => { refreshPageData(); renderCourseList(); setNotice('目录已刷新'); });
$('#ch-mark', panel).addEventListener('click', markCurrentReviewed);
$('#ch-list-toggle', panel).addEventListener('click', toggleCourseList);
$('#ch-seek', panel).addEventListener('input', onSeekInput);
$('#ch-seek', panel).addEventListener('change', onSeekChange);
makeDraggable(panel, $('#ch-drag', panel));
}
function makeDraggable(panel, handle) {
let dragging = false;
let startX = 0, startY = 0, startLeft = 0, startTop = 0;
handle.addEventListener('pointerdown', event => {
if (event.target.closest('button')) return;
const rect = panel.getBoundingClientRect();
dragging = true; startX = event.clientX; startY = event.clientY;
startLeft = rect.left; startTop = rect.top;
handle.setPointerCapture?.(event.pointerId);
});
handle.addEventListener('pointermove', event => {
if (!dragging) return;
const left = Math.max(0, Math.min(window.innerWidth - panel.offsetWidth, startLeft + event.clientX - startX));
const top = Math.max(0, Math.min(window.innerHeight - 48, startTop + event.clientY - startY));
panel.style.left = `${left}px`; panel.style.top = `${top}px`; panel.style.right = 'auto';
});
handle.addEventListener('pointerup', () => { dragging = false; });
handle.addEventListener('pointercancel', () => { dragging = false; });
}
function toggleVideoPlayback() {
const video = state.video || getVideoElement();
if (!video) { setNotice('当前页面未检测到视频'); return; }
if (video.paused || video.ended) {
video.play().then(() => setNotice('视频播放中')).catch(() => setNotice('播放未成功，请先点击页面播放器'));
} else {
video.pause();
setNotice('视频已暂停');
}
renderVideoState();
}
function setPlaybackSpeed(speed) {
if (!Number.isFinite(speed) || speed <= 0) return;
state.speed = speed;
const video = state.video || getVideoElement();
if (video) video.playbackRate = speed;
const select = $('#ch-speed');
if (select) select.value = String(speed);
setNotice(`播放速度 ${speed}×`);
}
function navigateRow(offset) {
if (!state.rows.length) { setNotice('尚未读取到课件目录'); return; }
let index = state.rows.indexOf(state.activeRow);
if (index < 0) index = offset > 0 ? -1 : state.rows.length;
const next = Math.max(0, Math.min(state.rows.length - 1, index + offset));
const row = state.rows[next];
if (!row) return;
row.scrollIntoView({ behavior: 'smooth', block: 'center' });
row.click();
setNotice(`已选择：${getRowName(row)}`);
setTimeout(refreshPageData, 700);
setTimeout(refreshPageData, 1600);
}
function toggleCourseList() {
state.listOpen = !state.listOpen;
$('#ch-list-panel')?.classList.toggle('open', state.listOpen);
if (state.listOpen) renderCourseList();
}
function renderCourseList() {
const panel = $('#ch-list-panel');
if (!panel) return;
if (!state.rows.length) {
panel.innerHTML = '