Current:
${this.currentSpeed}x
0 players
${CONFIG.speedPresets.map(speed =>
``
).join('')}
`;
document.body.appendChild(this.ui);
// Apply initial hidden state
if (this.isUIHidden) {
this.ui.classList.add('evsc-hidden');
}
this.addStyles();
this.setupUIEventListeners();
}
addStyles() {
GM_addStyle(`
#enhanced-video-speed-controller {
position: fixed;
top: ${CONFIG.uiPosition.top};
right: ${CONFIG.uiPosition.right};
width: 280px;
background: rgba(0, 0, 0, 0.9);
color: white;
border-radius: 8px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 13px;
z-index: 999999;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
#enhanced-video-speed-controller.evsc-collapsed .evsc-content {
display: none;
}
#enhanced-video-speed-controller.evsc-hidden {
display: none;
}
.evsc-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: rgba(0, 122, 204, 0.8);
border-radius: 8px 8px 0 0;
cursor: move;
}
.evsc-title {
font-weight: 600;
font-size: 14px;
}
.evsc-header-buttons {
display: flex;
gap: 4px;
}
.evsc-hide,
.evsc-toggle {
background: none;
border: none;
color: white;
cursor: pointer;
font-size: 18px;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
.evsc-toggle:hover {
background: rgba(255, 255, 255, 0.2);
}
.evsc-content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.evsc-current-speed {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
}
.evsc-speed-value {
font-weight: 600;
color: #4da6ff;
}
.evsc-player-info {
text-align: center;
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
padding: 4px;
}
.evsc-presets {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.evsc-preset-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 8px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s ease;
}
.evsc-preset-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #4da6ff;
}
.evsc-preset-btn[data-active="true"] {
background: #4da6ff;
border-color: #4da6ff;
color: white;
}
.evsc-slider-container {
display: flex;
flex-direction: column;
gap: 4px;
}
.evsc-slider {
width: 100%;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.2);
outline: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.evsc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #4da6ff;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.evsc-slider::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #4da6ff;
cursor: pointer;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.evsc-slider-labels {
display: flex;
justify-content: space-between;
font-size: 10px;
color: rgba(255, 255, 255, 0.6);
}
.evsc-custom-speed {
display: flex;
gap: 8px;
}
.evsc-custom-input {
flex: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 6px 8px;
border-radius: 4px;
font-size: 12px;
}
.evsc-custom-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.evsc-custom-input:focus {
outline: none;
border-color: #4da6ff;
}
.evsc-apply-btn {
background: #4da6ff;
border: none;
color: white;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
transition: background-color 0.2s ease;
}
.evsc-apply-btn:hover {
background: #3d8bd1;
}
.evsc-controls {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
}
.evsc-control-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 6px;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
transition: all 0.2s ease;
}
.evsc-control-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #4da6ff;
}
.evsc-control-btn[data-action="reset"] {
border-color: #28a745;
color: #28a745;
}
.evsc-control-btn[data-action="reset"]:hover {
background: #28a745;
color: white;
}
.evsc-details {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 8px;
}
.evsc-details summary {
cursor: pointer;
font-size: 11px;
color: rgba(255, 255, 255, 0.7);
padding: 4px 0;
}
.evsc-details[open] summary {
margin-bottom: 8px;
}
.evsc-player-list {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 120px;
overflow-y: auto;
}
.evsc-player-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
font-size: 10px;
}
.evsc-player-name {
color: rgba(255, 255, 255, 0.8);
}
.evsc-player-speed {
color: #4da6ff;
font-weight: 600;
}
.evsc-no-players {
text-align: center;
color: rgba(255, 255, 255, 0.5);
font-style: italic;
padding: 8px;
font-size: 10px;
}
/* Draggable functionality */
.evsc-dragging {
cursor: move;
user-select: none;
}
/* Scrollbar for player list */
.evsc-player-list::-webkit-scrollbar {
width: 4px;
}
.evsc-player-list::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
}
.evsc-player-list::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
.evsc-player-list::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
}
`);
}
setupUIEventListeners() {
if (!this.ui) return;
// Hide UI
const hideBtn = this.ui.querySelector('.evsc-hide');
hideBtn.addEventListener('click', () => {
this.toggleUI();
});
// Toggle UI (collapse/expand)
const toggleBtn = this.ui.querySelector('.evsc-toggle');
toggleBtn.addEventListener('click', () => {
this.ui.classList.toggle('evsc-collapsed');
toggleBtn.textContent = this.ui.classList.contains('evsc-collapsed') ? '+' : '−';
});
// Preset buttons
this.ui.querySelectorAll('.evsc-preset-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const speed = parseFloat(e.target.dataset.speed);
this.setAllPlayersSpeed(speed);
});
});
// Slider
const slider = this.ui.querySelector('.evsc-slider');
slider.addEventListener('input', (e) => {
const speed = parseFloat(e.target.value);
this.setAllPlayersSpeed(speed);
});
// Custom speed
const customInput = this.ui.querySelector('.evsc-custom-input');
const applyBtn = this.ui.querySelector('.evsc-apply-btn');
const applyCustomSpeed = () => {
const speed = parseFloat(customInput.value);
if (!isNaN(speed) && speed > 0 && speed <= 10) {
this.setAllPlayersSpeed(speed);
customInput.value = '';
}
};
applyBtn.addEventListener('click', applyCustomSpeed);
customInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') applyCustomSpeed();
});
// Control buttons
this.ui.querySelectorAll('.evsc-control-btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const action = e.target.dataset.action;
switch (action) {
case 'decrease':
this.adjustSpeed(-CONFIG.speedStep);
break;
case 'increase':
this.adjustSpeed(CONFIG.speedStep);
break;
case 'reset':
this.resetSpeed();
break;
}
});
});
// Make UI draggable
this.makeDraggable();
}
makeDraggable() {
const header = this.ui.querySelector('.evsc-header');
let isDragging = false;
let currentX, currentY, initialX, initialY, xOffset = 0, yOffset = 0;
header.addEventListener('mousedown', (e) => {
if (e.target.classList.contains('evsc-toggle') || e.target.classList.contains('evsc-hide')) return;
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === header || header.contains(e.target)) {
isDragging = true;
this.ui.classList.add('evsc-dragging');
}
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
this.ui.style.transform = `translate(${currentX}px, ${currentY}px)`;
}
});
document.addEventListener('mouseup', () => {
if (isDragging) {
isDragging = false;
this.ui.classList.remove('evsc-dragging');
}
});
}
updateUI() {
if (!this.ui) return;
// Update current speed display
const speedValue = this.ui.querySelector('.evsc-speed-value');
speedValue.textContent = `${this.currentSpeed}x`;
// Update slider
const slider = this.ui.querySelector('.evsc-slider');
slider.value = this.currentSpeed;
// Update preset button states
this.ui.querySelectorAll('.evsc-preset-btn').forEach(btn => {
const isActive = parseFloat(btn.dataset.speed) === this.currentSpeed;
btn.setAttribute('data-active', isActive);
});
// Update player count
const playerCount = this.ui.querySelector('.evsc-player-count');
const summary = this.getPlayerSummary();
const summaryText = Object.keys(summary).length > 0
? Object.entries(summary).map(([type, count]) => `${type}: ${count}`).join(', ')
: 'No players detected';
playerCount.textContent = `${this.detectedPlayers.length} players (${summaryText})`;
// Update player details
this.updatePlayerDetails();
}
updatePlayerDetails() {
const playerList = this.ui.querySelector('.evsc-player-list');
if (this.detectedPlayers.length === 0) {
playerList.innerHTML = '