状态:
未启动
视频检测:
未检测
当前课程:
${this.currentCourseTitle || '未知'}
`;
// 添加到页面
document.body.appendChild(this.controlPanel);
// 绑定事件监听器
this._bindControlPanelEvents();
// 初始化状态
this._updateControlPanelState();
}
/**
* 绑定控制面板事件
* @private
*/
_bindControlPanelEvents() {
if (!this.controlPanel) return;
// 启动按钮
const startBtn = document.getElementById('huayi-btn-start');
if (startBtn) {
startBtn.addEventListener('click', () => {
this.start();
this._updateControlPanelState();
});
}
// 停止按钮
const stopBtn = document.getElementById('huayi-btn-stop');
if (stopBtn) {
stopBtn.addEventListener('click', () => {
this.stop();
this._updateControlPanelState();
});
}
// 静音按钮
const muteBtn = document.getElementById('huayi-btn-mute');
if (muteBtn) {
muteBtn.addEventListener('click', () => {
this.options.autoMute = !this.options.autoMute;
muteBtn.textContent = this.options.autoMute ? '静音: 开' : '静音: 关';
this.updateOptions({ autoMute: this.options.autoMute });
this.log(`${this.options.autoMute ? '开启' : '关闭'}自动静音`, 'info');
});
}
// 调试按钮
const debugBtn = document.getElementById('huayi-btn-debug');
if (debugBtn) {
debugBtn.addEventListener('click', () => {
this.options.debugMode = !this.options.debugMode;
debugBtn.textContent = this.options.debugMode ? '调试: 开' : '调试: 关';
this.updateOptions({ debugMode: this.options.debugMode });
this.log(`${this.options.debugMode ? '开启' : '关闭'}调试模式`, 'info');
});
}
// 切换延迟输入
const switchDelayInput = document.getElementById('huayi-switch-delay');
if (switchDelayInput) {
switchDelayInput.addEventListener('change', (e) => {
const value = parseFloat(e.target.value);
if (!isNaN(value) && value >= 0) {
this.updateOptions({ switchDelay: value });
this.log(`切换延迟已设置为 ${value} 秒`, 'info');
}
});
}
// 检查间隔输入
const checkIntervalInput = document.getElementById('huayi-check-interval');
if (checkIntervalInput) {
checkIntervalInput.addEventListener('change', (e) => {
const value = parseFloat(e.target.value);
if (!isNaN(value) && value > 0) {
this.updateOptions({ checkInterval: value });
this.log(`检查间隔已设置为 ${value} 秒`, 'info');
}
});
}
// 清空日志按钮
const clearLogsBtn = document.getElementById('huayi-btn-clear-logs');
if (clearLogsBtn) {
clearLogsBtn.addEventListener('click', () => {
this._clearLogs();
});
}
// 最小化按钮
const minimizeBtn = document.getElementById('huayi-btn-minimize');
if (minimizeBtn) {
minimizeBtn.addEventListener('click', () => {
this._togglePanelMinimize();
});
}
// 面板拖动功能
this._makePanelDraggable();
}
/**
* 使面板可拖动
* @private
*/
_makePanelDraggable() {
if (!this.controlPanel) return;
const header = this.controlPanel.querySelector('.panel-header');
if (!header) return;
let isDragging = false;
let offsetX, offsetY;
header.addEventListener('mousedown', (e) => {
if (e.target.tagName === 'BUTTON' || e.target.closest('button')) {
return; // 避免点击按钮时触发拖动
}
isDragging = true;
offsetX = e.clientX - this.controlPanel.getBoundingClientRect().left;
offsetY = e.clientY - this.controlPanel.getBoundingClientRect().top;
this.controlPanel.style.cursor = 'grabbing';
header.style.userSelect = 'none';
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const x = e.clientX - offsetX;
const y = e.clientY - 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';
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
this.controlPanel.style.cursor = 'default';
header.style.userSelect = '';
}
});
}
/**
* 切换面板最小化状态
* @private
*/
_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';
minimizeBtn.textContent = '▼';
} else {
content.style.display = 'none';
minimizeBtn.textContent = '▲';
}
}
/**
* 更新控制面板状态
* @private
*/
_updateControlPanelState() {
if (!this.controlPanel) return;
// 更新状态指示器
const statusIndicator = document.getElementById('huayi-status-indicator');
const statusValue = document.getElementById('huayi-status-value');
if (statusIndicator && statusValue) {
if (this.isRunning) {
statusIndicator.style.backgroundColor = '#10b981'; // 绿色
statusValue.textContent = '运行中';
statusValue.style.color = '#10b981';
} else {
statusIndicator.style.backgroundColor = '#6b7280'; // 灰色
statusValue.textContent = '已停止';
statusValue.style.color = '#6b7280';
}
}
// 更新按钮状态
const startBtn = document.getElementById('huayi-btn-start');
const stopBtn = document.getElementById('huayi-btn-stop');
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;
}
}
}
/**
* 更新控制面板信息
* @private
*/
_updateControlPanelInfo() {
if (!this.controlPanel) return;
// 更新课程标题
const courseTitleElement = document.getElementById('huayi-course-title');
if (courseTitleElement) {
courseTitleElement.textContent = this.currentCourseTitle || '未知';
}
}
/**
* 更新视频状态显示
* @param {Object} videoState - 视频状态
* @private
*/
_updateVideoStatusDisplay(videoState) {
if (!this.controlPanel) return;
const videoStatusElement = document.getElementById('huayi-video-status');
if (!videoStatusElement) return;
if (videoState.exists) {
const progressPercent = Math.round(videoState.progress * 100);
videoStatusElement.textContent = `播放中 ${progressPercent}%`;
videoStatusElement.style.color = videoState.isPaused ? '#f59e0b' : '#10b981';
} else {
videoStatusElement.textContent = '未检测';
videoStatusElement.style.color = '#9ca3af';
}
}
/**
* 添加日志到面板
* @param {string} message - 日志消息
* @param {string} level - 日志级别
* @private
*/
_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;
case 'info':
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;
}
/**
* 清空日志
* @private
*/
_clearLogs() {
const logsContainer = document.getElementById('huayi-logs-container');
if (logsContainer) {
logsContainer.innerHTML = '