options.js

const DEFAULT_SETTINGS = {
    speed: { min: 0.1, max: 4.0, step: 0.05 },
    volume: { min: 0, max: 2.5, step: 0.05 },
    timestamp: { step: 10 },
    popup: { width: 380, height: 480 },
    hotkeys: {
        toggleOverlay: 'Alt+KeyV',
        speedReset: 'Alt+KeyR',
        speedDown: 'Alt+KeyS',
        speedUp: 'Alt+KeyD',
        volumeMute: 'Alt+KeyM',
        volumeDown: 'Alt+KeyX',
        volumeUp: 'Alt+KeyC',
        seekBack: 'Alt+KeyJ',
        playPause: 'Alt+KeyK',
        seekForward: 'Alt+KeyL',
        fullscreen: 'Alt+Enter',
        prevMedia: 'Alt+ArrowLeft',
        nextMedia: 'Alt+ArrowRight'
    },
    overlayVisible: true,
    overlayPosition: 'top-left',
    overlayDisplayMode: 'full'
};

const HOTKEY_META = [
    ['toggleOverlay', 'Toggle Overlay', 'Show or hide the floating overlay.'],
    ['speedReset', 'Speed Reset', 'Toggle between 1.0x and the previous speed.'],
    ['speedDown', 'Speed Down', 'Decrease playback speed by one step.'],
    ['speedUp', 'Speed Up', 'Increase playback speed by one step.'],
    ['volumeMute', 'Volume Mute', 'Mute or unmute the captured tab audio.'],
    ['volumeDown', 'Volume Down', 'Decrease volume by one step.'],
    ['volumeUp', 'Volume Up', 'Increase volume by one step.'],
    ['seekBack', 'Seek Back', 'Jump backward by the configured timestamp step.'],
    ['playPause', 'Play or Pause', 'Toggle playback for the current media.'],
    ['seekForward', 'Seek Forward', 'Jump forward by the configured timestamp step.'],
    ['fullscreen', 'Fullscreen', 'Toggle fullscreen for the current media.'],
    ['prevMedia', 'Previous Media', 'Go to the previous track or media item.'],
    ['nextMedia', 'Next Media', 'Go to the next track or media item.']
];

let currentSettings = structuredClone(DEFAULT_SETTINGS);
let recordingHotkey = null;
let statusTimer = null;

const els = {
    speedMin: document.getElementById('speed-min'),
    speedMax: document.getElementById('speed-max'),
    speedStep: document.getElementById('speed-step'),
    volumeMin: document.getElementById('volume-min'),
    volumeMax: document.getElementById('volume-max'),
    volumeStep: document.getElementById('volume-step'),
    timestampStep: document.getElementById('timestamp-step'),
    popupWidth: document.getElementById('popup-width'),
    popupHeight: document.getElementById('popup-height'),
    overlayVisible: document.getElementById('overlay-visible'),
    overlayPosition: document.getElementById('overlay-position'),
    overlayDisplayMode: document.getElementById('overlay-display-mode'),
    saveButton: document.getElementById('save-settings'),
    resetButton: document.getElementById('reset-defaults'),
    status: document.getElementById('status-message'),
    hotkeyList: document.getElementById('hotkey-list'),
    hotkeyTemplate: document.getElementById('hotkey-row-template')
};

function mergeSettings(rawSettings) {
    const merged = structuredClone(DEFAULT_SETTINGS);
    if (!rawSettings) return merged;

    if (rawSettings.speed) merged.speed = { ...merged.speed, ...rawSettings.speed };
    if (rawSettings.volume) merged.volume = { ...merged.volume, ...rawSettings.volume };
    if (rawSettings.timestamp) merged.timestamp = { ...merged.timestamp, ...rawSettings.timestamp };
    if (rawSettings.popup) merged.popup = { ...merged.popup, ...rawSettings.popup };
    if (rawSettings.hotkeys) merged.hotkeys = { ...merged.hotkeys, ...rawSettings.hotkeys };
    if (rawSettings.overlayVisible !== undefined) merged.overlayVisible = rawSettings.overlayVisible;
    if (['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(rawSettings.overlayPosition)) {
        merged.overlayPosition = rawSettings.overlayPosition;
    }
    if (['full', 'dot'].includes(rawSettings.overlayDisplayMode)) {
        merged.overlayDisplayMode = rawSettings.overlayDisplayMode;
    }

    return merged;
}

function setStatus(message, isError = false) {
    clearTimeout(statusTimer);
    els.status.textContent = message;
    els.status.style.color = isError ? '#b91c1c' : '#115e59';
    if (message) {
        statusTimer = setTimeout(() => {
            els.status.textContent = '';
        }, 2800);
    }
}

function formatHotkey(hotkey) {
    return hotkey || 'Not set';
}

function renderHotkeys() {
    els.hotkeyList.innerHTML = '';

    HOTKEY_META.forEach(([id, label, hint]) => {
        const fragment = els.hotkeyTemplate.content.cloneNode(true);
        const row = fragment.querySelector('.hotkey-row');
        const labelEl = fragment.querySelector('.hotkey-label');
        const hintEl = fragment.querySelector('.hotkey-hint');
        const valueEl = fragment.querySelector('.hotkey-value');
        const recordBtn = fragment.querySelector('.hotkey-record');
        const clearBtn = fragment.querySelector('.hotkey-clear');

        row.dataset.hotkeyId = id;
        labelEl.textContent = label;
        hintEl.textContent = hint;
        valueEl.value = formatHotkey(currentSettings.hotkeys[id]);

        recordBtn.addEventListener('click', () => {
            recordingHotkey = id;
            renderHotkeys();
            setStatus(`Recording ${label}. Press the new shortcut.`);
        });

        clearBtn.addEventListener('click', () => {
            currentSettings.hotkeys[id] = '';
            renderHotkeys();
        });

        if (recordingHotkey === id) {
            recordBtn.classList.add('is-recording');
            recordBtn.textContent = 'Press Keys';
        }

        els.hotkeyList.appendChild(fragment);
    });
}

function fillForm() {
    els.speedMin.value = currentSettings.speed.min;
    els.speedMax.value = currentSettings.speed.max;
    els.speedStep.value = currentSettings.speed.step;
    els.volumeMin.value = Math.round(currentSettings.volume.min * 100);
    els.volumeMax.value = Math.round(currentSettings.volume.max * 100);
    els.volumeStep.value = Math.round(currentSettings.volume.step * 100);
    els.timestampStep.value = currentSettings.timestamp.step;
    els.popupWidth.value = currentSettings.popup.width;
    els.popupHeight.value = currentSettings.popup.height;
    els.overlayVisible.checked = !!currentSettings.overlayVisible;
    els.overlayPosition.value = currentSettings.overlayPosition;
    els.overlayDisplayMode.value = currentSettings.overlayDisplayMode;
    renderHotkeys();
}

function readNumber(input, fallback) {
    const value = parseFloat(input.value);
    return Number.isFinite(value) ? value : fallback;
}

function readSettingsFromForm() {
    return {
        speed: {
            min: readNumber(els.speedMin, DEFAULT_SETTINGS.speed.min),
            max: readNumber(els.speedMax, DEFAULT_SETTINGS.speed.max),
            step: readNumber(els.speedStep, DEFAULT_SETTINGS.speed.step)
        },
        volume: {
            min: readNumber(els.volumeMin, DEFAULT_SETTINGS.volume.min * 100) / 100,
            max: readNumber(els.volumeMax, DEFAULT_SETTINGS.volume.max * 100) / 100,
            step: readNumber(els.volumeStep, DEFAULT_SETTINGS.volume.step * 100) / 100
        },
        timestamp: {
            step: Math.round(readNumber(els.timestampStep, DEFAULT_SETTINGS.timestamp.step))
        },
        popup: {
            width: Math.round(readNumber(els.popupWidth, DEFAULT_SETTINGS.popup.width)),
            height: Math.round(readNumber(els.popupHeight, DEFAULT_SETTINGS.popup.height))
        },
        hotkeys: { ...currentSettings.hotkeys },
        overlayVisible: els.overlayVisible.checked,
        overlayPosition: els.overlayPosition.value,
        overlayDisplayMode: els.overlayDisplayMode.value
    };
}

function validateSettings(settings) {
    if (settings.speed.min <= 0 || settings.speed.max < settings.speed.min || settings.speed.step <= 0) {
        return 'Speed settings are invalid.';
    }
    if (settings.volume.min < 0 || settings.volume.max < settings.volume.min || settings.volume.step <= 0) {
        return 'Volume settings are invalid.';
    }
    if (settings.timestamp.step <= 0) {
        return 'Seek step must be greater than 0.';
    }
    if (settings.popup.width < 320) {
        return 'Popup width must be at least 320px.';
    }
    if (settings.popup.height < 240) {
        return 'Popup height must be at least 240px.';
    }
    if (!['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(settings.overlayPosition)) {
        return 'Overlay position is invalid.';
    }
    if (!['full', 'dot'].includes(settings.overlayDisplayMode)) {
        return 'Overlay style is invalid.';
    }
    return '';
}

function eventToHotkey(event) {
    const modifiers = [];
    if (event.ctrlKey) modifiers.push('Ctrl');
    if (event.altKey) modifiers.push('Alt');
    if (event.shiftKey) modifiers.push('Shift');
    if (event.metaKey) modifiers.push('Meta');

    const ignored = ['ShiftLeft', 'ShiftRight', 'ControlLeft', 'ControlRight', 'AltLeft', 'AltRight', 'MetaLeft', 'MetaRight'];
    if (ignored.includes(event.code)) return '';

    modifiers.push(event.code);
    return modifiers.join('+');
}

document.addEventListener('keydown', (event) => {
    if (!recordingHotkey) return;

    event.preventDefault();
    event.stopPropagation();

    if (event.key === 'Escape') {
        recordingHotkey = null;
        renderHotkeys();
        setStatus('Hotkey recording cancelled.');
        return;
    }

    const hotkey = eventToHotkey(event);
    if (!hotkey) return;

    currentSettings.hotkeys[recordingHotkey] = hotkey;
    recordingHotkey = null;
    renderHotkeys();
});

els.saveButton.addEventListener('click', () => {
    const nextSettings = readSettingsFromForm();
    const error = validateSettings(nextSettings);

    if (error) {
        setStatus(error, true);
        return;
    }

    currentSettings = mergeSettings(nextSettings);
    chrome.storage.sync.set({ settings: currentSettings }, () => {
        if (chrome.runtime.lastError) {
            setStatus(chrome.runtime.lastError.message, true);
            return;
        }
        setStatus('Settings saved.');
        fillForm();
    });
});

els.resetButton.addEventListener('click', () => {
    currentSettings = structuredClone(DEFAULT_SETTINGS);
    recordingHotkey = null;
    fillForm();
    setStatus('Defaults restored locally. Save to apply.');
});

chrome.storage.sync.get('settings', (result) => {
    currentSettings = mergeSettings(result.settings);
    fillForm();
});