状态:
未启动
视频检测:
未检测
当前课程:
${this.currentCourseTitle || '未知'}
`;
try {
document.body.appendChild(this.controlPanel);
this.log('控制面板已插入到页面', 'success');
} catch (err) {
document.documentElement.appendChild(this.controlPanel);
this.log('body插入失败，已插入到html根节点', 'warning');
}
this._bindControlPanelEvents();
this._updateControlPanelState();
}
_detectCurrentPage() {
const url = window.location.href.toLowerCase();
if (url.includes('/course/') || url.includes('/lesson/') || url.includes('/study/')) {
this.log('检测到课程播放页面', 'info');
this._extractPageInfo();
} else {
this.log('检测到其他页面', 'info');
}
}
_extractPageInfo() {
for (const selector of this.selectors.courseTitle) {
try {
const element = document.querySelector(selector);
if (element && element.textContent.trim()) {
this.currentCourseTitle = element.textContent.trim();
break;
}
} catch (error) {
this.log(`提取课程标题出错: ${error.message}`, 'debug');
}
}
for (const selector of this.selectors.lessonTitle) {
try {
const element = document.querySelector(selector);
if (element && element.textContent.trim()) {
this.currentLessonTitle = element.textContent.trim();
break;
}
} catch (error) {
this.log(`提取课时标题出错: ${error.message}`, 'debug');
}
}
this.log(`当前课程: ${this.currentCourseTitle || '未知'}`, 'info');
this.log(`当前课时: ${this.currentLessonTitle || '未知'}`, 'info');
this._updateControlPanelInfo();
}
_bindControlPanelEvents() {
if (!this.controlPanel) return;
this.controlPanel.addEventListener('click', (e) => {
const target = e.target.closest('button');
if (!target) return;
switch (target.id) {
case 'huayi-btn-start':
this.start();
this._updateControlPanelState();
break;
case 'huayi-btn-stop':
this.stop();
this._updateControlPanelState();
break;
case 'huayi-btn-mute':
this.options.autoMute = !this.options.autoMute;
target.textContent = this.options.autoMute ? '静音: 开' : '静音: 关';
this.updateOptions({ autoMute: this.options.autoMute });
this.log(`${this.options.autoMute ? '开启' : '关闭'}自动静音`, 'info');
break;
case 'huayi-btn-debug':
this.options.debugMode = !this.options.debugMode;
target.textContent = this.options.debugMode ? '调试: 开' : '调试: 关';
this.updateOptions({ debugMode: this.options.debugMode });
this.log(`${this.options.debugMode ? '开启' : '关闭'}调试模式`, 'info');
break;
case 'huayi-btn-clear-logs':
this._clearLogs();
break;
case 'huayi-btn-minimize':
this._togglePanelMinimize();
break;
default:
break;
}
});
this._makePanelDraggable();
}
_makePanelDraggable() {
if (!this.controlPanel) return;
const header = this.controlPanel.querySelector('.panel-header');
if (!header) return;
header.addEventListener('mousedown', (e) => {
if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
return;
}
this.dragState.isDragging = true;
const rect = this.controlPanel.getBoundingClientRect();
this.dragState.offsetX = e.clientX - rect.left;
this.dragState.offsetY = e.clientY - rect.top;
this.controlPanel.style.cursor = 'grabbing';
header.style.userSelect = 'none';
});
const handleMouseMove = (e) => {
if (!this.dragState.isDragging) return;
requestAnimationFrame(() => {
const x = e.clientX - this.dragState.offsetX;
const y = e.clientY - this.dragState.offsetY;
const maxX = window.innerWidth - this.controlPanel.offsetWidth;
const maxY = window.innerHeight - this.controlPanel.offsetHeight;
const boundedX = Math.max(0, Math.min(x, maxX));
const boundedY = Math.max(0, Math.min(y, maxY));
this.controlPanel.style.left = boundedX + 'px';
this.controlPanel.style.top = boundedY + 'px';
this.controlPanel.style.right = 'auto';
this.controlPanel.style.bottom = 'auto';
});
};
const handleMouseUp = () => {
if (this.dragState.isDragging) {
this.dragState.isDragging = false;
this.controlPanel.style.cursor = 'default';
header.style.userSelect = '';
}
};
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
header.addEventListener('dragstart', (e) => e.preventDefault());
}
_togglePanelMinimize() {
const content = document.getElementById('huayi-panel-content');
const minimizeBtn = document.getElementById('huayi-btn-minimize');
if (!content || !minimizeBtn) return;
if (content.style.display === 'none') {
content.style.display = 'block !important';
minimizeBtn.textContent = '▼';
} else {
content.style.display = 'none !important';
minimizeBtn.textContent = '▲';
}
}
_updateControlPanelState() {
if (!this.controlPanel) return;
const statusIndicator = document.getElementById('huayi-status-indicator');
const statusValue = document.getElementById('huayi-status-value');
const startBtn = document.getElementById('huayi-btn-start');
const stopBtn = document.getElementById('huayi-btn-stop');
if (statusIndicator && statusValue) {
if (this.isRunning) {
statusIndicator.style.backgroundColor = '#10b981';
statusValue.textContent = '运行中';
statusValue.style.color = '#10b981';
} else {
statusIndicator.style.backgroundColor = '#9ca3af';
statusValue.textContent = '已停止';
statusValue.style.color = '#9ca3af';
}
}
if (startBtn && stopBtn) {
if (this.isRunning) {
startBtn.style.backgroundColor = '#9ca3af';
startBtn.disabled = true;
stopBtn.style.backgroundColor = '#ef4444';
stopBtn.disabled = false;
} else {
startBtn.style.backgroundColor = '#10b981';
startBtn.disabled = false;
stopBtn.style.backgroundColor = '#9ca3af';
stopBtn.disabled = true;
}
}
}
_updateControlPanelInfo() {
if (!this.controlPanel) return;
const courseTitleElement = document.getElementById('huayi-course-title');
if (courseTitleElement) {
courseTitleElement.textContent = this.currentCourseTitle || '未知';
}
}
_updateVideoStatusDisplay(videoState) {
if (!this.controlPanel) return;
const videoStatusElement = document.getElementById('huayi-video-status');
if (!videoStatusElement) return;
const progressPercent = videoState.exists ? Math.round(videoState.progress * 100) : 0;
const displayText = videoState.exists ? `播放中 ${progressPercent}%` : '未检测';
const displayColor = videoState.exists ? (videoState.isPaused ? '#f59e0b' : '#10b981') : '#9ca3af';
if (videoStatusElement.textContent !== displayText || videoStatusElement.style.color !== displayColor) {
videoStatusElement.textContent = displayText;
videoStatusElement.style.color = displayColor;
}
}
_addLogToPanel(message, level = 'info') {
if (!this.controlPanel) return;
const logsContainer = document.getElementById('huayi-logs-container');
if (!logsContainer) return;
const logEntry = document.createElement('div');
logEntry.className = `log-entry ${level}`;
logEntry.style.marginBottom = '2px';
logEntry.style.padding = '1px 0';
switch (level) {
case 'error':
logEntry.style.color = '#dc2626';
break;
case 'warning':
logEntry.style.color = '#d97706';
break;
case 'success':
logEntry.style.color = '#059669';
break;
case 'debug':
logEntry.style.color = '#6366f1';
break;
default:
logEntry.style.color = '#374151';
break;
}
const shortMessage = message.length > 60 ? message.substring(0, 60) + '...' : message;
logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${shortMessage}`;
logsContainer.insertBefore(logEntry, logsContainer.firstChild);
const logEntries = logsContainer.querySelectorAll('.log-entry');
if (logEntries.length > 10) {
logsContainer.removeChild(logEntries[logEntries.length - 1]);
}
logsContainer.scrollTop = 0;
}
_clearLogs() {
const logsContainer = document.getElementById('huayi-logs-container');
if (logsContainer) {
logsContainer.innerHTML = '