How to Use Space Bar on Komga Web Viewer

by Rian

There are two parts advantage of moving to web-based apps and platforms from my experience: one, web-based development seems to be more active (completely anecdotal), and two, web-based means I can come up with an add-on rather easily.

Komga is a comics and graphic novels DB manager — yet another Docker post I am still in the process of writing. In the manager itself, it offers rather robust web viewer, so much so I think average users would prefer it over paid reader apps. But for some odd reason, Komga doesn’t map the space bar as next page. The user has to be conscious of the reading direction of the material and the settings of the viewer every time.

This is where the userscript comes in. Add the userscript on to the userscript manager of your choice. Don’t forget to change [komga URL] to your Komga web UI address.

// ==UserScript==
// @name         Komga Spacebar Next Page
// @match        [komga URL]
// @run-at       document-ready
// ==/UserScript==

document.addEventListener('keydown', (e) => {
  if (e.code !== 'Space' || e.target.tagName === 'INPUT') return;

  e.preventDefault();

  const vuex = JSON.parse(localStorage.getItem('vuex') || '{}');
  const dir = vuex?.persistedState?.webreader?.readingDirection;

  if (dir === 'WEBTOON') {
    window.scrollBy({ top: window.innerHeight * 0.9, behavior: 'smooth' });
    return;
  }

  let key;
  if (dir === 'RIGHT_TO_LEFT') key = 'ArrowLeft';
  else if (dir === 'VERTICAL') key = 'ArrowDown';
  else key = 'ArrowRight';

  document.dispatchEvent(new KeyboardEvent('keydown', { key, code: key, bubbles: true }));
});

It’s a relatively short script and the product of vibe coding. There isn’t much of script to speak of. In fact, when I first thought to ask Claude to just whip one up, it consistently failed to make one script to work on all four possible reading directions. I would definitely credit the LLM for writing javascript, as I still cannot fathom wrap my head around, shall I say, extraordinary quirks.