control.js

const $ = (id) => document.getElementById(id);
let cfg = {};

function bind(id, key, opts = {}) {
  const el = $(id);
  const valEl = $(id + 'V');
  const read = () => {
    let v = el.type === 'checkbox' ? el.checked : el.value;
    if (opts.num) v = Number(v);
    if (opts.scale) v = v / opts.scale;
    return v;
  };
  const showVal = () => { if (valEl) valEl.textContent = opts.fmt ? opts.fmt(read()) : read(); };
  el.addEventListener('input', () => {
    cfg[key] = read();
    showVal();
    window.api.setConfig({ [key]: cfg[key] });
  });
  return { el, showVal };
}

const binders = {
  fontSize:   bind('fontSize', 'fontSize', { num: true, fmt: v => v + 'px' }),
  lineHeight: bind('lineHeight', 'lineHeight', { num: true, scale: 10, fmt: v => v.toFixed(1) }),
  opacity:    bind('opacity', 'opacity', { num: true, scale: 100, fmt: v => Math.round(v*100) + '%' }),
  scrollSpeed:bind('scrollSpeed', 'scrollSpeed', { num: true, fmt: v => v + 'px/s' }),
  textColor:  bind('textColor', 'textColor'),
  bgColor:    bind('bgColor', 'bgColor'),
  fontFamily: bind('fontFamily', 'fontFamily'),
  language:   bind('language', 'language'),
  direction:  bind('direction', 'direction'),
  contentProtection: bind('contentProtection', 'contentProtection'),
  arrowControl: bind('arrowControl', 'arrowControl'),
  mirror:     bind('mirror', 'mirror'),
  pageDelimiter: bind('pageDelimiter', 'pageDelimiter')
};

$('script').addEventListener('input', () => {
  cfg.script = $('script').value;
  window.api.setConfig({ script: cfg.script });
});

$('save').onclick = () => {
  window.api.setConfig({ script: $('script').value });
  $('save').textContent = 'Saved';
  setTimeout(() => $('save').textContent = 'Save and Apply', 1200);
};
$('lock').onclick = () => window.api.toggleLock();

function fill(c) {
  cfg = c;
  $('script').value = c.script || '';
  $('fontSize').value = c.fontSize;
  $('lineHeight').value = Math.round(c.lineHeight * 10);
  $('opacity').value = Math.round(c.opacity * 100);
  $('scrollSpeed').value = c.scrollSpeed;
  $('textColor').value = c.textColor;
  $('bgColor').value = c.bgColor;
  $('fontFamily').value = c.fontFamily || '';
  $('language').value = c.language || 'en';
  $('direction').value = c.direction || 'auto';
  $('contentProtection').checked = !!c.contentProtection;
  $('arrowControl').checked = c.arrowControl !== false;
  $('mirror').checked = !!c.mirror;
  $('pageDelimiter').value = c.pageDelimiter || '\\n\\n';
  Object.values(binders).forEach(b => b.showVal && b.showVal());
}

window.api.getConfig().then(fill);