@velor/remote-mouse 6.4.8

package/client/ui/main/keyboard-panel.js

@@ -0,0 +1,271 @@
+import { emitWithTimestamp } from '../../core/socket-emit.js';
+import {
+  REMOTE_EVENT_KEYBOARD_KEY,
+  REMOTE_EVENT_KEYBOARD_TEXT,
+} from '../../../utils/remoteCommands.js';
+import {APP_STATE_KEYBOARD_PREVIEW_ACTIVE} from '../../services/app-state/createAppStateService.js';
+
+export function bindKeyboardPanel(services, dom) {
+  const socket = services.getTransport();
+  const appState = services.getAppState();
+  const {
+    keyboardPanel,
+    keyboardPanelPreview,
+    keyboardTextMode,
+    keyboardLiveMode,
+    textInput,
+    liveTextInput,
+    keyboardEsc,
+    keyboardTab,
+    keyboardEnter,
+    keyboardShift,
+    keyboardAlt,
+    keyboardCtrl,
+    btnTextEntry,
+    btnLiveKeyboard,
+    btnSendText,
+  } = dom.remotes.keyboard;
+  const modifierState = {
+    control: false,
+    alt: false,
+    shift: false,
+  };
+  let activeMode = '';
+
+  function setPreviewActive(active) {
+    appState.set(APP_STATE_KEYBOARD_PREVIEW_ACTIVE, Boolean(active));
+  }
+
+  function forceViewportLayout(input) {
+    if (!input) {
+      return;
+    }
+
+    const run = () => {
+      // Force a layout read before asking the browser to reposition the field.
+      void document.body.offsetHeight;
+      input.scrollIntoView({
+        block: 'end',
+        inline: 'nearest',
+      });
+      window.dispatchEvent(new Event('resize'));
+    };
+
+    window.setTimeout(run, 50);
+    window.setTimeout(run, 250);
+  }
+
+  function getActiveInput() {
+    return activeMode === 'live' ? liveTextInput : textInput;
+  }
+
+  function restoreInputFocus() {
+    const input = getActiveInput();
+    if (!input || keyboardPanel.classList.contains('hidden')) {
+      return;
+    }
+
+    window.setTimeout(() => {
+      input.focus();
+    }, 0);
+  }
+
+  function preserveKeyboard(button) {
+    if (!button) {
+      return;
+    }
+
+    const handleMouseDown = (event) => {
+      event.preventDefault();
+    };
+
+    button.addEventListener('mousedown', handleMouseDown);
+  }
+
+  function syncModeButtons(mode = '') {
+    btnTextEntry.classList.toggle('is-active', mode === 'text');
+    btnLiveKeyboard.classList.toggle('is-active', mode === 'live');
+  }
+
+  function updatePreview(text = '') {
+    if (!keyboardPanelPreview) {
+      return;
+    }
+
+    keyboardPanelPreview.textContent = text;
+    keyboardPanelPreview.classList.toggle('is-empty', !text);
+  }
+
+  function closePanel() {
+    activeMode = '';
+    keyboardPanel.classList.add('hidden');
+    keyboardTextMode.classList.remove('hidden');
+    keyboardLiveMode.classList.add('hidden');
+    textInput.blur();
+    liveTextInput.blur();
+    modifierState.control = false;
+    modifierState.alt = false;
+    modifierState.shift = false;
+    syncModifierButtons();
+    syncModeButtons('');
+    setPreviewActive(false);
+  }
+
+  function openPanel(mode) {
+    activeMode = mode;
+    keyboardPanel.classList.remove('hidden');
+    keyboardTextMode.classList.toggle('hidden', mode !== 'text');
+    keyboardLiveMode.classList.toggle('hidden', mode !== 'live');
+    syncModeButtons(mode);
+    setPreviewActive(true);
+
+    const target = mode === 'live' ? liveTextInput : textInput;
+    updatePreview('');
+    setTimeout(() => {
+      target.focus();
+      forceViewportLayout(target);
+    }, 40);
+  }
+
+  function togglePanel(mode) {
+    const panelHidden = keyboardPanel.classList.contains('hidden');
+    const textModeHidden = keyboardTextMode.classList.contains('hidden');
+    const currentMode = textModeHidden ? 'live' : 'text';
+
+    if (!panelHidden && currentMode === mode) {
+      closePanel();
+      return;
+    }
+
+    openPanel(mode);
+  }
+
+  function sendText() {
+    const text = textInput.value;
+    if (!text.trim()) {
+      return;
+    }
+
+    emitWithTimestamp(socket, REMOTE_EVENT_KEYBOARD_TEXT, { text });
+    textInput.value = '';
+    updatePreview('');
+    setPreviewActive(true);
+    textInput.focus();
+  }
+
+  function sendSpecialKey(key, modifiers) {
+    emitWithTimestamp(socket, REMOTE_EVENT_KEYBOARD_KEY, { key, modifiers });
+  }
+
+  function getActiveModifiers() {
+    return Object.entries(modifierState)
+      .filter(([, enabled]) => enabled)
+      .map(([key]) => key);
+  }
+
+  function syncModifierButtons() {
+    const buttonMap = [
+      [keyboardShift, modifierState.shift],
+      [keyboardAlt, modifierState.alt],
+      [keyboardCtrl, modifierState.control],
+    ];
+
+    for (const [button, active] of buttonMap) {
+      button?.classList.toggle('is-active', active);
+      button?.setAttribute('aria-pressed', active ? 'true' : 'false');
+    }
+  }
+
+  function toggleModifier(modifier) {
+    modifierState[modifier] = !modifierState[modifier];
+    syncModifierButtons();
+    setPreviewActive(true);
+    restoreInputFocus();
+  }
+
+  function pressKeyboardAction(key) {
+    const modifiers = getActiveModifiers();
+    sendSpecialKey(key, modifiers.length ? modifiers : undefined);
+    setPreviewActive(true);
+    if (modifierState.shift || modifierState.alt || modifierState.control) {
+      modifierState.shift = false;
+      modifierState.alt = false;
+      modifierState.control = false;
+      syncModifierButtons();
+    }
+    restoreInputFocus();
+  }
+
+  [
+    keyboardEsc,
+    keyboardTab,
+    keyboardEnter,
+    keyboardShift,
+    keyboardAlt,
+    keyboardCtrl,
+    btnSendText,
+  ].forEach(preserveKeyboard);
+
+  btnTextEntry.addEventListener('click', () => togglePanel('text'));
+  btnLiveKeyboard.addEventListener('click', () => togglePanel('live'));
+  btnSendText.addEventListener('click', sendText);
+  keyboardEsc.addEventListener('click', () => pressKeyboardAction('escape'));
+  keyboardTab.addEventListener('click', () => pressKeyboardAction('tab'));
+  keyboardEnter.addEventListener('click', () => pressKeyboardAction('enter'));
+  keyboardShift.addEventListener('click', () => toggleModifier('shift'));
+  keyboardAlt.addEventListener('click', () => toggleModifier('alt'));
+  keyboardCtrl.addEventListener('click', () => toggleModifier('control'));
+
+  textInput.addEventListener('keydown', (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+      event.preventDefault();
+      sendText();
+    }
+  });
+
+  textInput.addEventListener('input', () => {
+    setPreviewActive(true);
+  });
+
+  textInput.addEventListener('focus', () => {
+    forceViewportLayout(textInput);
+  });
+
+  liveTextInput.addEventListener('beforeinput', (event) => {
+    const inputType = String(event.inputType || '');
+
+    if (inputType.startsWith('delete')) {
+      pressKeyboardAction('backspace');
+      setPreviewActive(true);
+      return;
+    }
+
+    const text = typeof event.data === 'string' ? event.data : '';
+    if (!text) {
+      return;
+    }
+
+    emitWithTimestamp(socket, REMOTE_EVENT_KEYBOARD_TEXT, { text });
+    setPreviewActive(true);
+  });
+
+  liveTextInput.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      pressKeyboardAction('enter');
+      return;
+    }
+
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      pressKeyboardAction('tab');
+    }
+  });
+
+  liveTextInput.addEventListener('focus', () => {
+    forceViewportLayout(liveTextInput);
+  });
+
+  syncModifierButtons();
+  updatePreview('');
+}

package/client/ui/main/mouse-buttons.js

@@ -0,0 +1,94 @@
+import { emitWithTimestamp } from '../../core/socket-emit.js';
+import { REMOTE_EVENT_MOUSE_BUTTON } from '../../../utils/remoteCommands.js';
+
+export function bindMouseButtons(services, dom) {
+  const socket = services.getTransport();
+  const {btnLeft, btnRight} = dom.remotes.mouse;
+
+  function bindHoldButton(buttonNode, button) {
+    if (!buttonNode) {
+      return;
+    }
+
+    let isPressed = false;
+    let activeTouchId = null;
+
+    const press = () => {
+      if (isPressed) {
+        return;
+      }
+
+      isPressed = true;
+      console.log('[mouse-buttons] emit down', { button });
+      emitWithTimestamp(socket, REMOTE_EVENT_MOUSE_BUTTON, { button, state: 'down' });
+    };
+
+    const release = () => {
+      if (!isPressed) {
+        return;
+      }
+
+      isPressed = false;
+      activeTouchId = null;
+      console.log('[mouse-buttons] emit up', { button });
+      emitWithTimestamp(socket, REMOTE_EVENT_MOUSE_BUTTON, { button, state: 'up' });
+    };
+
+    const onDocumentTouchEnd = (event) => {
+      if (activeTouchId === null) {
+        return;
+      }
+
+      const touchStillActive = Array.from(event.touches || []).some((touch) => touch.identifier === activeTouchId);
+      if (!touchStillActive) {
+        release();
+      }
+    };
+
+    const onDocumentMouseUp = () => {
+      release();
+    };
+
+    buttonNode.addEventListener('pointerdown', (event) => {
+      event.preventDefault();
+      buttonNode.setPointerCapture?.(event.pointerId);
+      press();
+    });
+
+    buttonNode.addEventListener('pointerup', (event) => {
+      event.preventDefault();
+      buttonNode.releasePointerCapture?.(event.pointerId);
+      release();
+    });
+
+    buttonNode.addEventListener('mousedown', (event) => {
+      event.preventDefault();
+      press();
+    });
+
+    buttonNode.addEventListener('mouseup', (event) => {
+      event.preventDefault();
+      release();
+    });
+
+    buttonNode.addEventListener('mouseleave', release);
+    buttonNode.addEventListener('touchstart', (event) => {
+      event.preventDefault();
+      activeTouchId = event.changedTouches?.[0]?.identifier ?? null;
+      press();
+    }, { passive: false });
+    buttonNode.addEventListener('touchend', (event) => {
+      event.preventDefault();
+      release();
+    }, { passive: false });
+    buttonNode.addEventListener('touchcancel', release, { passive: false });
+    buttonNode.addEventListener('pointercancel', release);
+    buttonNode.addEventListener('lostpointercapture', release);
+    document.addEventListener('touchend', onDocumentTouchEnd, { passive: false });
+    document.addEventListener('touchcancel', onDocumentTouchEnd, { passive: false });
+    document.addEventListener('mouseup', onDocumentMouseUp);
+  }
+
+  bindHoldButton(btnLeft, 'left');
+  bindHoldButton(btnRight, 'right');
+}

package/client/ui/main/page.js

@@ -0,0 +1,21 @@
+import { initUi } from './init-ui.js';
+import {createServicesRegistry} from '../../services/createServicesRegistry.js';
+import {
+  initializeCoreServices,
+  initializeRealtimeServices,
+} from '../../services/createServicesContainer.js';
+
+async function initClient() {
+  const services = createServicesRegistry();
+  await initializeCoreServices(services);
+  initializeRealtimeServices(services);
+  initUi(services);
+}
+
+void initClient();
+
+if ('serviceWorker' in navigator) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js').catch(() => {});
+  });
+}

package/client/ui/notifications/show-toast.js

@@ -0,0 +1,48 @@
+export function showToast(root, payload = {}, t) {
+  if (!root) {
+    return;
+  }
+  const params = payload.params && typeof payload.params === 'object' ? payload.params : {};
+
+  const title = String(
+    payload.titleKey
+      ? t(payload.titleKey, params)
+      : (payload.title || t('common.notification')),
+  );
+  const message = String(
+    payload.messageKey
+      ? t(payload.messageKey, params)
+      : (payload.message || ''),
+  ).trim();
+  if (!message) {
+    return;
+  }
+
+  const level = String(payload.level || 'info');
+  const ttlMs = Number(payload.ttlMs) > 0 ? Number(payload.ttlMs) : 4500;
+
+  const toast = document.createElement('article');
+  toast.className = `toast ${level}`;
+
+  const titleEl = document.createElement('p');
+  titleEl.className = 'toast-title';
+  titleEl.textContent = title;
+
+  const msgEl = document.createElement('p');
+  msgEl.className = 'toast-msg';
+  msgEl.textContent = message;
+
+  toast.appendChild(titleEl);
+  toast.appendChild(msgEl);
+  root.prepend(toast);
+
+  while (root.children.length > 5) {
+    root.removeChild(root.lastElementChild);
+  }
+
+  setTimeout(() => {
+    if (toast.parentElement === root) {
+      root.removeChild(toast);
+    }
+  }, ttlMs);
+}

package/client/ui/preferences/bindPreferenceSwitchers.js

@@ -0,0 +1,49 @@
+import {
+  mountLanguageSwitcher,
+  mountHandednessSwitcher,
+  mountRemoteAutoHideSwitcher,
+  mountThemeSwitcher,
+} from './switchers.js';
+import {
+  APP_STATE_HANDEDNESS,
+  APP_STATE_LOCALE,
+  APP_STATE_REMOTE_AUTO_HIDE,
+  APP_STATE_THEME,
+} from '../../services/app-state/createAppStateService.js';
+
+export function bindPreferenceSwitchers(services) {
+  const appState = services.getAppState();
+  const i18n = services.getI18n();
+
+  mountLanguageSwitcher({
+    locale: appState.get(APP_STATE_LOCALE),
+    t: i18n.t,
+    onChange(locale) {
+      appState.set(APP_STATE_LOCALE, locale);
+    },
+  });
+
+  mountThemeSwitcher({
+    theme: appState.get(APP_STATE_THEME),
+    t: i18n.t,
+    onChange(theme) {
+      appState.set(APP_STATE_THEME, theme);
+    },
+  });
+
+  mountHandednessSwitcher({
+    handedness: appState.get(APP_STATE_HANDEDNESS),
+    t: i18n.t,
+    onChange(handedness) {
+      appState.set(APP_STATE_HANDEDNESS, handedness);
+    },
+  });
+
+  mountRemoteAutoHideSwitcher({
+    enabled: appState.get(APP_STATE_REMOTE_AUTO_HIDE),
+    t: i18n.t,
+    onChange(value) {
+      appState.set(APP_STATE_REMOTE_AUTO_HIDE, value);
+    },
+  });
+}

package/client/ui/preferences/page.js

@@ -0,0 +1,61 @@
+import {
+  loadAvailableBrowsers,
+  loadAvailableRemotes,
+} from '../../preferences/load.js';
+import {
+  renderBrowserVisibilityList as renderBrowserVisibilityListView,
+  renderRemoteVisibilityList as renderRemoteVisibilityListView,
+} from '../../preferences/render.js';
+import {createPreferencesState} from '../../preferences/state.js';
+import {createServicesRegistry} from '../../services/createServicesRegistry.js';
+import {initializeCoreServices} from '../../services/createServicesContainer.js';
+import {bindPreferenceSwitchers} from './bindPreferenceSwitchers.js';
+
+const services = createServicesRegistry();
+await initializeCoreServices(services);
+services.getI18n().translateRoot(document);
+bindPreferenceSwitchers(services);
+
+const remotesRoot = document.getElementById('preferences-remotes');
+const browsersRoot = document.getElementById('preferences-browsers');
+const state = createPreferencesState();
+
+function t(key, params) {
+  return services.getI18n().t(key, params);
+}
+
+function renderRemotes() {
+  renderRemoteVisibilityListView(remotesRoot, state.availableRemotes, t, services);
+}
+
+function renderBrowsers() {
+  renderBrowserVisibilityListView(browsersRoot, state.availableBrowsers, t, services);
+}
+
+async function refreshAvailableRemotes() {
+  state.availableRemotes = await loadAvailableRemotes(services);
+  renderRemotes();
+}
+
+async function refreshAvailableBrowsers() {
+  state.availableBrowsers = await loadAvailableBrowsers(services);
+  renderBrowsers();
+}
+
+services.getI18n().onChange(() => {
+  services.getI18n().translateRoot(document);
+  bindPreferenceSwitchers(services);
+  renderRemotes();
+  renderBrowsers();
+});
+
+services.getAppState().subscribeProperty('preferences.remoteVisibility', () => {
+  renderRemotes();
+});
+
+services.getAppState().subscribeProperty('preferences.browserVisibility', () => {
+  renderBrowsers();
+});
+
+await refreshAvailableRemotes();
+await refreshAvailableBrowsers();