@velor/remote-mouse 6.4.8

package/client/ui/preferences/switchers.js

@@ -0,0 +1,200 @@
+import {localeRegistry} from '../../i18n/locale-registry.js';
+
+function applySwitcherLabelStyle(label) {
+  label.style.fontSize = '12px';
+  label.style.color = 'var(--muted)';
+}
+
+function applySwitcherSelectStyle(select) {
+  select.style.fontSize = '12px';
+  select.style.borderRadius = '8px';
+  select.style.padding = '3px 8px';
+  select.style.border = '1px solid var(--border, rgba(255, 255, 255, 0.16))';
+  select.style.background = 'var(--panel-strong, rgba(255, 255, 255, 0.08))';
+  select.style.color = 'var(--text)';
+}
+
+function ensureSwitcherRoot({
+  rootSelector,
+  rootDatasetKey,
+  labelDatasetKey,
+  selectDatasetKey,
+  hostSelectors,
+}) {
+  const host = hostSelectors
+    .map((selector) => document.querySelector(selector))
+    .find(Boolean);
+
+  let root = document.querySelector(rootSelector);
+  if (!root) {
+    root = document.createElement('div');
+    root.dataset[rootDatasetKey] = 'true';
+    root.style.display = 'flex';
+    root.style.alignItems = 'center';
+    root.style.gap = '6px';
+
+    const label = document.createElement('span');
+    label.dataset[labelDatasetKey] = 'true';
+    applySwitcherLabelStyle(label);
+
+    const select = document.createElement('select');
+    select.dataset[selectDatasetKey] = 'true';
+    applySwitcherSelectStyle(select);
+
+    root.append(label, select);
+    (host || document.body).appendChild(root);
+  }
+
+  return root;
+}
+
+export function mountLanguageSwitcher({locale, t, onChange}) {
+  const root = ensureSwitcherRoot({
+    rootSelector: '[data-language-switcher]',
+    rootDatasetKey: 'languageSwitcher',
+    labelDatasetKey: 'languageLabel',
+    selectDatasetKey: 'languageSelect',
+    hostSelectors: ['[data-client-prefs-host]', '[data-language-switcher-host]'],
+  });
+
+  const select = root.querySelector('[data-language-select]');
+  if (select && select.options.length === 0) {
+    for (const nextLocale of Object.keys(localeRegistry)) {
+      const option = document.createElement('option');
+      option.value = nextLocale;
+      option.textContent = localeRegistry[nextLocale].label;
+      select.appendChild(option);
+    }
+
+    if (typeof onChange === 'function') {
+      select.addEventListener('change', () => {
+        void onChange(select.value);
+      });
+    }
+  }
+
+  if (select) {
+    select.value = locale;
+    select.setAttribute('aria-label', t('common.language'));
+  }
+
+  const label = root.querySelector('[data-language-label]');
+  if (label) {
+    label.textContent = t('common.languageShort');
+  }
+}
+
+export function mountThemeSwitcher({theme, t, onChange}) {
+  const root = ensureSwitcherRoot({
+    rootSelector: '[data-theme-switcher]',
+    rootDatasetKey: 'themeSwitcher',
+    labelDatasetKey: 'themeLabel',
+    selectDatasetKey: 'themeSelect',
+    hostSelectors: ['[data-client-prefs-host]', '[data-language-switcher-host]'],
+  });
+
+  const select = root.querySelector('[data-theme-select]');
+  if (select && select.options.length === 0) {
+    for (const nextTheme of ['dark', 'light']) {
+      const option = document.createElement('option');
+      option.value = nextTheme;
+      select.appendChild(option);
+    }
+
+    if (typeof onChange === 'function') {
+      select.addEventListener('change', () => {
+        onChange(select.value);
+      });
+    }
+  }
+
+  if (select) {
+    select.value = theme;
+    select.setAttribute('aria-label', t('common.theme'));
+    for (const option of select.options) {
+      option.textContent = t(`common.theme.${option.value}`);
+    }
+  }
+
+  const label = root.querySelector('[data-theme-label]');
+  if (label) {
+    label.textContent = t('common.themeShort');
+  }
+}
+
+export function mountHandednessSwitcher({handedness, t, onChange}) {
+  const root = ensureSwitcherRoot({
+    rootSelector: '[data-handedness-switcher]',
+    rootDatasetKey: 'handednessSwitcher',
+    labelDatasetKey: 'handednessLabel',
+    selectDatasetKey: 'handednessSelect',
+    hostSelectors: ['[data-client-prefs-host]', '[data-language-switcher-host]'],
+  });
+
+  const select = root.querySelector('[data-handedness-select]');
+  if (select && select.options.length === 0) {
+    for (const nextHandedness of ['right', 'left']) {
+      const option = document.createElement('option');
+      option.value = nextHandedness;
+      select.appendChild(option);
+    }
+
+    if (typeof onChange === 'function') {
+      select.addEventListener('change', () => {
+        onChange(select.value);
+      });
+    }
+  }
+
+  if (select) {
+    select.value = handedness;
+    select.setAttribute('aria-label', t('common.handedness'));
+    for (const option of select.options) {
+      option.textContent = t(`common.handedness.${option.value}`);
+    }
+  }
+
+  const label = root.querySelector('[data-handedness-label]');
+  if (label) {
+    label.textContent = t('common.handednessShort');
+  }
+}
+
+export function mountRemoteAutoHideSwitcher({enabled, t, onChange}) {
+  const root = ensureSwitcherRoot({
+    rootSelector: '[data-remote-auto-hide-switcher]',
+    rootDatasetKey: 'remoteAutoHideSwitcher',
+    labelDatasetKey: 'remoteAutoHideLabel',
+    selectDatasetKey: 'remoteAutoHideSelect',
+    hostSelectors: ['[data-remote-auto-hide-host]', '[data-client-prefs-host]', '[data-language-switcher-host]'],
+  });
+
+  const select = root.querySelector('[data-remote-auto-hide-select]');
+  if (select && select.options.length === 0) {
+    for (const [value, key] of [['true', 'common.enabled'], ['false', 'common.disabled']]) {
+      const option = document.createElement('option');
+      option.value = value;
+      option.dataset.i18nKey = key;
+      select.appendChild(option);
+    }
+
+    if (typeof onChange === 'function') {
+      select.addEventListener('change', () => {
+        onChange(select.value === 'true');
+      });
+    }
+  }
+
+  if (select) {
+    select.value = enabled ? 'true' : 'false';
+    select.setAttribute('aria-label', t('common.remoteAutoHide'));
+    for (const option of select.options) {
+      option.textContent = t(option.dataset.i18nKey);
+    }
+  }
+
+  const label = root.querySelector('[data-remote-auto-hide-label]');
+  if (label) {
+    label.textContent = t('common.remoteAutoHideShort');
+  }
+}

package/index.js

@@ -0,0 +1,9 @@
+import { startServer } from './server/index.js';
+import { createLogger } from './server/application/logger.js';
+
+const log = createLogger('bootstrap');
+
+startServer().catch((error) => {
+  log.error({ err: error }, 'Erreur au démarrage');
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@velor/remote-mouse",
+  "version": "6.4.8",
+  "type": "module",
+  "description": "Remote mouse and keyboard with mobile client",
+  "main": "index.js",
+  "bin": {
+    "remote-mouse": "./bin/remote-mouse.js"
+  },
+  "scripts": {
+    "start": "node index.js",
+    "dev": "node index.js",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --runInBand --coverage",
+    "test:install": "NODE_OPTIONS=--experimental-vm-modules jest test/unit/install-scripts.test.js --runInBand",
+    "test:install:integration": "node test/integration/install/run-linux-install.mjs",
+    "test:all": "npm test && npm run test:e2e",
+    "test:e2e": "playwright test",
+    "screenshots:mobile": "node scripts/generate-mobile-screenshots.mjs",
+    "commit:codex": "bash scripts/codex-commit.sh"
+  },
+  "dependencies": {
+    "@hurdlegroup/robotjs": "^0.12.3",
+    "better-sqlite3": "^12.8.0",
+    "cookie-parser": "^1.4.7",
+    "dotenv": "^17.3.1",
+    "express": "^4.21.2",
+    "node-notifier": "^10.0.1",
+    "pino": "^9.5.0",
+    "pino-pretty": "^13.0.0",
+    "qrcode": "^1.5.4",
+    "qrcode-terminal": "^0.12.0",
+    "samsung-tv-remote": "^3.0.4",
+    "socket.io": "^4.8.1",
+    "yargs": "^15.4.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.59.1",
+    "jest": "^30.3.0",
+    "sinon": "^21.0.3"
+  }
+}

package/public/admin-config.css

@@ -0,0 +1,447 @@
+:root {
+  color-scheme: dark;
+  --bg: #11161a;
+  --bg-soft: #192127;
+  --panel: rgba(21, 29, 35, 0.84);
+  --panel-strong: rgba(31, 43, 51, 0.96);
+  --border: rgba(174, 212, 226, 0.16);
+  --text: #eef5f8;
+  --muted: #9bb2bd;
+  --accent: #80e3ff;
+  --accent-2: #ffd27b;
+  --danger: #ff8f8f;
+}
+
+html[data-theme="light"] {
+  color-scheme: light;
+  --bg: #eef4f7;
+  --bg-soft: #dde8ee;
+  --panel: rgba(255, 255, 255, 0.9);
+  --panel-strong: rgba(244, 249, 252, 0.98);
+  --border: rgba(32, 75, 97, 0.14);
+  --text: #18303a;
+  --muted: #5e7886;
+  --accent: #0a8ab8;
+  --accent-2: #b67d17;
+  --danger: #c25a5a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  background:
+    radial-gradient(circle at top left, rgba(62, 98, 120, 0.28), transparent 32%),
+    linear-gradient(180deg, #0d1215, #12191e 55%, #0f1519);
+  color: var(--text);
+  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
+}
+
+body {
+  padding: 20px;
+}
+
+.page-toolbar {
+  width: min(1200px, 100%);
+  margin: 0 auto 12px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.page-toolbar-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.page-toolbar-actions[data-client-prefs-host] {
+  display: grid;
+  gap: 12px;
+  justify-items: stretch;
+}
+
+.page-toolbar-actions[data-client-prefs-host] > div,
+.page-toolbar-actions[data-remote-auto-hide-host] > div {
+  display: grid !important;
+  grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
+  gap: 10px !important;
+  align-items: center !important;
+}
+
+.preferences-remotes-settings {
+  display: grid;
+  gap: 12px;
+  justify-items: stretch;
+}
+
+.preferences-section-separator {
+  width: 100%;
+  height: 1px;
+  margin: -4px 0 0;
+  border: 0;
+  background: var(--border);
+}
+
+.preferences-remotes-list {
+  display: grid;
+  gap: 12px;
+}
+
+.preferences-remote-row {
+  display: grid;
+  grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
+  gap: 10px;
+  align-items: center !important;
+}
+
+.preferences-remote-label {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.preferences-remote-select {
+  width: 100%;
+  font: inherit;
+  font-size: 12px;
+  border-radius: 8px;
+  min-height: 0;
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  background: var(--panel-strong);
+  color: var(--text);
+}
+
+.config-page {
+  width: min(1200px, 100%);
+  margin: 0 auto;
+  display: grid;
+  gap: 18px;
+}
+
+.config-hero,
+.status-bar,
+.config-section {
+  border: 1px solid var(--border);
+  background: var(--panel);
+  backdrop-filter: blur(10px);
+  border-radius: 22px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
+}
+
+html[data-theme="light"] .config-hero,
+html[data-theme="light"] .status-bar,
+html[data-theme="light"] .config-section {
+  box-shadow: 0 18px 44px rgba(73, 111, 130, 0.14);
+}
+
+.config-hero {
+  padding: 22px;
+  display: grid;
+  gap: 16px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+}
+
+.eyebrow,
+.section-key {
+  margin: 0 0 8px;
+  color: var(--accent);
+  font-size: 0.76rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.config-hero h1,
+.config-section h2 {
+  margin: 0;
+  line-height: 1.05;
+}
+
+.hero-copy,
+.section-description,
+#config-status {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+button,
+.secondary-link {
+  appearance: none;
+  border: 1px solid rgba(128, 227, 255, 0.22);
+  border-radius: 999px;
+  min-height: 44px;
+  padding: 0 16px;
+  color: var(--text);
+  background: linear-gradient(180deg, rgba(43, 77, 92, 0.92), rgba(28, 50, 60, 0.98));
+  font: inherit;
+  font-weight: 650;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.secondary-link {
+  background: rgba(21, 29, 35, 0.5);
+}
+
+html[data-theme="light"] button,
+html[data-theme="light"] .secondary-link {
+  color: var(--text);
+  border-color: rgba(10, 138, 184, 0.18);
+  background: linear-gradient(180deg, rgba(208, 231, 240, 0.96), rgba(191, 220, 231, 0.98));
+}
+
+html[data-theme="light"] .secondary-link {
+  background: rgba(255, 255, 255, 0.72);
+}
+
+button:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+button[hidden] {
+  display: none !important;
+}
+
+.status-bar {
+  padding: 14px 18px;
+}
+
+.config-grid {
+  display: grid;
+  gap: 18px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.config-section {
+  padding: 18px;
+  display: grid;
+  gap: 18px;
+  align-content: start;
+}
+
+.section-header {
+  position: relative;
+}
+
+.section-heading {
+  position: relative;
+  padding-right: 86px;
+}
+
+.section-heading-copy {
+  display: grid;
+  gap: 6px;
+}
+
+.section-toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 74px;
+  min-height: 24px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: rgba(21, 29, 35, 0.5);
+  font-size: 0.72rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.config-section.is-collapsed .section-fields {
+  display: none;
+}
+
+.section-fields {
+  display: grid;
+  gap: 12px;
+}
+
+.section-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.notifications-matrix {
+  overflow-x: auto;
+}
+
+.notifications-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  background: var(--panel-strong);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.notifications-table th,
+.notifications-table td {
+  padding: 12px 14px;
+  text-align: left;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.notifications-table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.notifications-table th {
+  color: var(--muted);
+  font-size: 0.82rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.notifications-table-label {
+  min-width: 220px;
+  font-weight: 600;
+}
+
+.notifications-table-toggle {
+  width: 96px;
+  text-align: center;
+}
+
+.notifications-table-toggle input {
+  width: 20px;
+  height: 20px;
+}
+
+.section-action-button {
+  min-height: 36px;
+  padding: 0 12px;
+  font-size: 0.82rem;
+}
+
+.field-card {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--panel-strong);
+}
+
+.field-header {
+  display: grid;
+  gap: 4px;
+}
+
+.field-label {
+  font-weight: 700;
+}
+
+.field-path {
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.field-control {
+  display: grid;
+}
+
+.field-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  align-items: center;
+}
+
+.field-control input[type="text"],
+.field-control input[type="number"],
+.field-control select {
+  width: 100%;
+  min-height: 44px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(7, 12, 15, 0.7);
+  color: var(--text);
+  padding: 0 12px;
+  font: inherit;
+}
+
+.field-control input:disabled,
+.field-control select:disabled,
+.toggle-row:has(input:disabled) {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.field-reset {
+  min-height: 44px;
+  padding: 0 14px;
+  border-radius: 12px;
+}
+
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 44px;
+  padding: 0 12px;
+  border-radius: 12px;
+  background: rgba(7, 12, 15, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.toggle-row input {
+  width: 20px;
+  height: 20px;
+}
+
+.status-success {
+  color: var(--accent);
+}
+
+.status-error {
+  color: var(--danger);
+}
+
+.status-pending {
+  color: var(--accent-2);
+}
+
+@media (max-width: 760px) {
+  body {
+    padding: 12px;
+  }
+
+  .config-hero {
+    grid-template-columns: 1fr;
+    align-items: start;
+  }
+
+  .hero-actions {
+    justify-content: stretch;
+  }
+
+  .hero-actions > * {
+    flex: 1 1 100%;
+  }
+
+  .field-body {
+    grid-template-columns: 1fr;
+  }
+}