@velor/remote-mouse 6.4.8

package/client/preferences/state.js

@@ -0,0 +1,29 @@
+export const LOCAL_REMOTE_DEFINITIONS = [
+  {id: 'keyboard', labelKey: 'preferences.remote.keyboard'},
+];
+
+export function createPreferencesState() {
+  return {
+    availableRemotes: [],
+    availableBrowsers: [],
+  };
+}
+
+export function mergeAvailableRemotes(remotes = []) {
+  const byId = new Map();
+
+  for (const remote of remotes) {
+    if (!remote?.id) {
+      continue;
+    }
+    byId.set(remote.id, remote);
+  }
+
+  for (const remote of LOCAL_REMOTE_DEFINITIONS) {
+    if (!byId.has(remote.id)) {
+      byId.set(remote.id, remote);
+    }
+  }
+
+  return Array.from(byId.values());
+}

package/client/preview/create-preview-frame-receiver.js

@@ -0,0 +1,13 @@
+import {parsePreviewFrame} from "./parse-preview-frame.js";
+import {drawPreviewFrame} from "./draw.js";
+
+export function createPreviewFrameReceiver({ctx, previewCanvas, previewLabel}) {
+    return (meta, payload) => {
+        const frame = parsePreviewFrame(meta, payload);
+        if (!frame) {
+            return;
+        }
+
+        drawPreviewFrame({ctx, previewCanvas, previewLabel, frame});
+    };
+}

package/client/preview/draw.js

@@ -0,0 +1,77 @@
+function drawCursorOverlay(ctx, width, height, cursorFrameX, cursorFrameY) {
+    const cx = Math.round(Number.isFinite(cursorFrameX) ? cursorFrameX : width / 2);
+    const cy = Math.round(Number.isFinite(cursorFrameY) ? cursorFrameY : height / 2);
+
+    ctx.save();
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.95)';
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
+    ctx.lineWidth = 1.5;
+
+    // Pointe de curseur simplifiee.
+    ctx.beginPath();
+    ctx.moveTo(cx - 2, cy - 11);
+    ctx.lineTo(cx - 2, cy + 9);
+    ctx.lineTo(cx + 4, cy + 4);
+    ctx.lineTo(cx + 7, cy + 10);
+    ctx.lineTo(cx + 10, cy + 8);
+    ctx.lineTo(cx + 6, cy + 2);
+    ctx.lineTo(cx + 12, cy + 2);
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+    ctx.restore();
+}
+
+function readCssPx(name, fallback = 0) {
+    const value = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue(name));
+    return Number.isFinite(value) ? value : fallback;
+}
+
+function getPreviewViewportSize(width, height) {
+    const outerEdgePx = 6;
+    const previewGapPx = readCssPx('--preview-gap-from-scroll', 8);
+    const scrollZoneWidthPx = readCssPx('--scroll-zone-width', 36);
+    const scrollZoneEdgeGapPx = readCssPx('--scroll-zone-edge-gap', 10);
+    const menuHeightPx = readCssPx('--menu-h', 58);
+    const reservedSidePx = scrollZoneWidthPx + scrollZoneEdgeGapPx + previewGapPx + 12;
+    const availableWidth = Math.max(48, window.innerWidth - outerEdgePx - reservedSidePx);
+    const availableHeight = Math.max(48, window.innerHeight - menuHeightPx - scrollZoneEdgeGapPx - 20);
+
+    return {
+        width: Math.min(width, availableWidth),
+        height: Math.min(height, availableHeight),
+    };
+}
+
+export function drawPreviewFrame({ctx, previewCanvas, previewLabel, frame}) {
+    const {width, height, rgba, x, y, cursorX, cursorY, cursorFrameX, cursorFrameY} = frame;
+    if (previewCanvas.width !== width || previewCanvas.height !== height) {
+        previewCanvas.width = width;
+        previewCanvas.height = height;
+    }
+
+    const viewportSize = getPreviewViewportSize(width, height);
+    const offsetX = Math.max(0, Math.round((width - viewportSize.width) / 2));
+    const offsetY = Math.max(0, Math.round((height - viewportSize.height) / 2));
+
+    previewCanvas.style.width = `${width}px`;
+    previewCanvas.style.height = `${height}px`;
+    previewCanvas.style.marginLeft = `${-offsetX}px`;
+    previewCanvas.style.marginTop = `${-offsetY}px`;
+
+    const previewRoot = previewCanvas.closest('#cursor-preview');
+    if (previewRoot) {
+        previewRoot.style.width = `${viewportSize.width}px`;
+        previewRoot.style.height = `${viewportSize.height}px`;
+    }
+
+    const imageData = new ImageData(rgba, width, height);
+    ctx.putImageData(imageData, 0, 0);
+    drawCursorOverlay(ctx, width, height, cursorFrameX, cursorFrameY);
+
+    if (previewLabel) {
+        const labelX = Number.isFinite(cursorX) ? cursorX : x;
+        const labelY = Number.isFinite(cursorY) ? cursorY : y;
+        previewLabel.textContent = `(${labelX}, ${labelY})`;
+    }
+}

package/client/preview/parse-preview-frame.js

@@ -0,0 +1,39 @@
+export function parsePreviewFrame(meta, payload) {
+    if (!meta || !payload) {
+        return null;
+    }
+
+    const width = Number(meta.width) || 0;
+    const height = Number(meta.height) || 0;
+    if (width <= 0 || height <= 0) {
+        return null;
+    }
+
+    const arrayBuffer = typeof payload.byteLength === 'number' && !payload.buffer
+        ? payload
+        : payload.buffer;
+    if (!arrayBuffer) {
+        return null;
+    }
+
+    const rgba = new Uint8ClampedArray(arrayBuffer);
+    if (rgba.length < width * height * 4) {
+        return null;
+    }
+
+    return {
+        width,
+        height,
+        rgba,
+        x: Number(meta.x) || 0,
+        y: Number(meta.y) || 0,
+        cursorX: Number(meta.cursorX) || 0,
+        cursorY: Number(meta.cursorY) || 0,
+        cursorFrameX: Number.isFinite(Number(meta.cursorFrameX))
+            ? Number(meta.cursorFrameX)
+            : Math.round(width / 2),
+        cursorFrameY: Number.isFinite(Number(meta.cursorFrameY))
+            ? Number(meta.cursorFrameY)
+            : Math.round(height / 2),
+    };
+}

package/client/preview/preview-stream.js

@@ -0,0 +1,152 @@
+import {createPreviewFrameReceiver} from "./create-preview-frame-receiver.js";
+import {emitWithTimestamp} from "../core/socket-emit.js";
+import {
+  REMOTE_EVENT_PREVIEW_START,
+  REMOTE_EVENT_PREVIEW_STOP,
+} from '../../utils/remoteCommands.js';
+import {
+  APP_STATE_EFFECTIVE_PREVIEW_REMOTE_VISIBLE,
+  APP_STATE_KEYBOARD_PREVIEW_ACTIVE,
+  APP_STATE_PREVIEW_ACTIVITY_AT,
+  getAppStatePropertyChangedEventName,
+} from '../services/app-state/createAppStateService.js';
+
+export function bindPreviewStream(services, dom) {
+  const socket = services.getTransport();
+  const clientConfig = services.getClientConfig();
+  const appState = services.getAppState();
+  const pubsub = services.getPubSub();
+  const {previewCanvas, previewLabel} = dom.remotes.preview;
+
+  if (!previewCanvas) {
+    return;
+  }
+
+  const ctx = previewCanvas.getContext('2d');
+  const onPreviewFrame = createPreviewFrameReceiver({ ctx, previewCanvas, previewLabel });
+  const previewRoot = previewCanvas.closest('#cursor-preview');
+  let isPreviewActive = false;
+  let stopTimer = null;
+  let keyboardPreviewActive = false;
+
+  const isPreviewEnabled = () =>
+    appState.get(APP_STATE_EFFECTIVE_PREVIEW_REMOTE_VISIBLE);
+
+  const getInactivityDelayMs = () => {
+    const configuredDelay = Number(services.getConfigView().getPreviewConfig()?.hideDelayMs);
+    if (Number.isFinite(configuredDelay) && configuredDelay >= 200) {
+      return configuredDelay;
+    }
+    return 10_000;
+  };
+
+  const showPreview = () => {
+    if (!isPreviewEnabled()) {
+      return;
+    }
+    if (previewRoot) {
+      previewRoot.classList.add('is-visible');
+    }
+  };
+
+  const hidePreview = () => {
+    if (previewRoot) {
+      previewRoot.classList.remove('is-visible');
+    }
+  };
+
+  const clearStopTimer = () => {
+    if (stopTimer) {
+      clearTimeout(stopTimer);
+      stopTimer = null;
+    }
+  };
+
+  const stopPreview = () => {
+    clearStopTimer();
+    if (keyboardPreviewActive) {
+      return;
+    }
+    if (isPreviewActive) {
+      emitWithTimestamp(socket, REMOTE_EVENT_PREVIEW_STOP);
+      isPreviewActive = false;
+    }
+    hidePreview();
+  };
+
+  const armInactivityStop = () => {
+    if (keyboardPreviewActive) {
+      return;
+    }
+    clearStopTimer();
+    stopTimer = setTimeout(() => {
+      stopPreview();
+    }, getInactivityDelayMs());
+  };
+
+  const startPreview = () => {
+    if (!isPreviewEnabled()) {
+      stopPreview();
+      return;
+    }
+    if (!socket.connected) {
+      return;
+    }
+    if (!isPreviewActive) {
+      emitWithTimestamp(socket, REMOTE_EVENT_PREVIEW_START);
+      isPreviewActive = true;
+      showPreview();
+    }
+    armInactivityStop();
+  };
+
+  const onMouseMoveActivity = () => {
+    startPreview();
+  };
+
+  const setKeyboardPreviewActive = (active) => {
+    keyboardPreviewActive = active;
+
+    if (active) {
+      startPreview();
+      clearStopTimer();
+      return;
+    }
+
+    armInactivityStop();
+  };
+
+  pubsub.subscribe(getAppStatePropertyChangedEventName(APP_STATE_PREVIEW_ACTIVITY_AT), onMouseMoveActivity);
+  pubsub.subscribe(getAppStatePropertyChangedEventName(APP_STATE_KEYBOARD_PREVIEW_ACTIVE), ({value}) => {
+    setKeyboardPreviewActive(Boolean(value));
+  });
+
+  socket.on('preview:frame', onPreviewFrame);
+  socket.on('disconnect', stopPreview);
+  window.addEventListener('beforeunload', stopPreview);
+  clientConfig.onChange(() => {
+    if (!isPreviewEnabled()) {
+      stopPreview();
+      return;
+    }
+
+    if (isPreviewActive) {
+      armInactivityStop();
+    }
+  });
+  appState.subscribeProperty(APP_STATE_EFFECTIVE_PREVIEW_REMOTE_VISIBLE, () => {
+    if (!isPreviewEnabled()) {
+      stopPreview();
+      return;
+    }
+
+    if (keyboardPreviewActive || isPreviewActive) {
+      showPreview();
+      armInactivityStop();
+    }
+  });
+
+  hidePreview();
+
+  setKeyboardPreviewActive(Boolean(appState.get(APP_STATE_KEYBOARD_PREVIEW_ACTIVE)));
+}

package/client/services/app-state/appStateKeys.js

@@ -0,0 +1,30 @@
+export const APP_STATE_PROPERTY_CHANGED_EVENT = 'app-state.property.changed';
+
+export const APP_STATE_PREVIEW_ACTIVITY_AT = 'ui.previewActivityAt';
+export const APP_STATE_KEYBOARD_PREVIEW_ACTIVE = 'ui.keyboardPreviewActive';
+export const APP_STATE_REMOTE_ACCORDION_EXPANDED_PANEL = 'ui.remoteAccordionExpandedPanel';
+
+export const APP_STATE_THEME = 'preferences.theme';
+export const APP_STATE_LOCALE = 'preferences.locale';
+export const APP_STATE_HANDEDNESS = 'preferences.handedness';
+export const APP_STATE_REMOTE_AUTO_HIDE = 'preferences.remoteAutoHide';
+export const APP_STATE_REMOTE_VISIBILITY = 'preferences.remoteVisibility';
+export const APP_STATE_BROWSER_VISIBILITY = 'preferences.browserVisibility';
+
+export const APP_STATE_EFFECTIVE_BROWSER_REMOTE_VISIBLE = 'effective.remote.browser.visible';
+export const APP_STATE_EFFECTIVE_KEYBOARD_REMOTE_VISIBLE = 'effective.remote.keyboard.visible';
+export const APP_STATE_EFFECTIVE_VLC_REMOTE_VISIBLE = 'effective.remote.vlc.visible';
+export const APP_STATE_EFFECTIVE_SAMSUNG_REMOTE_VISIBLE = 'effective.remote.samsung.visible';
+export const APP_STATE_EFFECTIVE_PREVIEW_REMOTE_VISIBLE = 'effective.remote.preview.visible';
+
+export const EFFECTIVE_APP_STATE_KEYS = [
+  APP_STATE_EFFECTIVE_BROWSER_REMOTE_VISIBLE,
+  APP_STATE_EFFECTIVE_KEYBOARD_REMOTE_VISIBLE,
+  APP_STATE_EFFECTIVE_VLC_REMOTE_VISIBLE,
+  APP_STATE_EFFECTIVE_SAMSUNG_REMOTE_VISIBLE,
+  APP_STATE_EFFECTIVE_PREVIEW_REMOTE_VISIBLE,
+];
+
+export function getAppStatePropertyChangedEventName(property) {
+  return `app-state.${String(property || '').trim()}.changed`;
+}

package/client/services/app-state/createAppStateService.js

@@ -0,0 +1,216 @@
+import {createQueuedRecompute} from '../../../utils/functional.js';
+import {
+  APP_STATE_HANDEDNESS,
+  APP_STATE_PROPERTY_CHANGED_EVENT,
+  APP_STATE_REMOTE_AUTO_HIDE,
+  APP_STATE_THEME,
+  EFFECTIVE_APP_STATE_KEYS,
+  getAppStatePropertyChangedEventName,
+} from './appStateKeys.js';
+import {
+  APP_STATE_STORE_PERSIST,
+  APP_STATE_STORE_STATE,
+  getAppStateDefinition,
+} from './stateDefinitions.js';
+import {resolveEffectiveStateValue} from './resolveEffectiveStateValue.js';
+import {
+  applyHandednessToDocument,
+  applyRemoteAutoHideToDocument,
+  applyThemeToDocument,
+} from '../../preferences/effects.js';
+
+export {
+  APP_STATE_BROWSER_VISIBILITY,
+  APP_STATE_EFFECTIVE_BROWSER_REMOTE_VISIBLE,
+  APP_STATE_EFFECTIVE_KEYBOARD_REMOTE_VISIBLE,
+  APP_STATE_EFFECTIVE_PREVIEW_REMOTE_VISIBLE,
+  APP_STATE_EFFECTIVE_SAMSUNG_REMOTE_VISIBLE,
+  APP_STATE_EFFECTIVE_VLC_REMOTE_VISIBLE,
+  APP_STATE_HANDEDNESS,
+  APP_STATE_KEYBOARD_PREVIEW_ACTIVE,
+  APP_STATE_LOCALE,
+  APP_STATE_PREVIEW_ACTIVITY_AT,
+  APP_STATE_PROPERTY_CHANGED_EVENT,
+  APP_STATE_REMOTE_ACCORDION_EXPANDED_PANEL,
+  APP_STATE_REMOTE_AUTO_HIDE,
+  APP_STATE_REMOTE_VISIBILITY,
+  APP_STATE_THEME,
+  getAppStatePropertyChangedEventName,
+} from './appStateKeys.js';
+
+function cloneValue(value) {
+  return value && typeof value === 'object' ? structuredClone(value) : value;
+}
+
+function applyPreferenceEffect(key, value) {
+  if (key === APP_STATE_THEME) {
+    applyThemeToDocument(value);
+    return;
+  }
+  if (key === APP_STATE_HANDEDNESS) {
+    applyHandednessToDocument(value);
+    return;
+  }
+  if (key === APP_STATE_REMOTE_AUTO_HIDE) {
+    applyRemoteAutoHideToDocument(value);
+  }
+}
+
+export function createAppStateService(services) {
+  const stateStore = services.getStateStore();
+  const persistStore = services.getPersistStore();
+  const clientConfig = services.getClientConfig();
+  const pubsub = services.getPubSub();
+  const effectiveCache = new Map();
+  const listeners = new Set();
+  const propertyListeners = new Map();
+  let initialized = false;
+
+  function publishChange(key, value, previousValue) {
+    const payload = {
+      key,
+      property: key,
+      value: cloneValue(value),
+      previousValue: cloneValue(previousValue),
+      state: getSnapshot(),
+    };
+
+    for (const listener of listeners) {
+      listener(payload);
+    }
+
+    for (const listener of propertyListeners.get(key) || []) {
+      listener(payload);
+    }
+
+    pubsub.publish(APP_STATE_PROPERTY_CHANGED_EVENT, payload);
+    pubsub.publish(getAppStatePropertyChangedEventName(key), payload);
+  }
+
+  function getRaw(key) {
+    const definition = getAppStateDefinition(key);
+    if (!definition) {
+      return undefined;
+    }
+
+    if (definition.store === APP_STATE_STORE_STATE) {
+      return stateStore.get(key);
+    }
+    if (definition.store === APP_STATE_STORE_PERSIST) {
+      return persistStore.get(key);
+    }
+
+    return undefined;
+  }
+
+  function get(key) {
+    if (String(key).startsWith('effective.')) {
+      return resolveEffectiveStateValue(key, {stateStore, persistStore, clientConfig});
+    }
+
+    return getRaw(key);
+  }
+
+  function set(key, value) {
+    const definition = getAppStateDefinition(key);
+    if (!definition) {
+      throw new Error(`Unknown app state key: ${key}`);
+    }
+
+    const normalizedValue = definition.normalize(value);
+    if (definition.store === APP_STATE_STORE_STATE) {
+      return stateStore.set(key, normalizedValue);
+    }
+    if (definition.store === APP_STATE_STORE_PERSIST) {
+      return persistStore.set(key, normalizedValue);
+    }
+
+    throw new Error(`Read-only app state key: ${key}`);
+  }
+
+  function getSnapshot() {
+    const snapshot = {
+      ...stateStore.getSnapshot(),
+      ...persistStore.getSnapshot(),
+    };
+
+    for (const key of EFFECTIVE_APP_STATE_KEYS) {
+      snapshot[key] = get(key);
+    }
+
+    return snapshot;
+  }
+
+  const recomputeEffectiveState = createQueuedRecompute(() => {
+    for (const key of EFFECTIVE_APP_STATE_KEYS) {
+      const nextValue = get(key);
+      const previousValue = effectiveCache.get(key);
+      if (!Object.is(previousValue, nextValue)) {
+        effectiveCache.set(key, cloneValue(nextValue));
+        publishChange(key, nextValue, previousValue);
+      }
+    }
+  });
+
+  function handleStoreChange({key, value, previousValue}) {
+    applyPreferenceEffect(key, value);
+    publishChange(key, value, previousValue);
+    recomputeEffectiveState();
+  }
+
+  function init() {
+    if (initialized) {
+      return this;
+    }
+
+    persistStore.init();
+    stateStore.subscribe(handleStoreChange);
+    persistStore.subscribe(handleStoreChange);
+    clientConfig.onChange(recomputeEffectiveState);
+
+    for (const key of [APP_STATE_THEME, APP_STATE_HANDEDNESS, APP_STATE_REMOTE_AUTO_HIDE]) {
+      applyPreferenceEffect(key, persistStore.get(key));
+    }
+
+    recomputeEffectiveState();
+    initialized = true;
+    return this;
+  }
+
+  function subscribe(keyOrListener, maybeListener) {
+    if (typeof keyOrListener === 'function') {
+      listeners.add(keyOrListener);
+      return () => {
+        listeners.delete(keyOrListener);
+      };
+    }
+
+    return subscribeProperty(keyOrListener, maybeListener);
+  }
+
+  function subscribeProperty(key, listener) {
+    if (typeof listener !== 'function') {
+      return () => {};
+    }
+
+    const listenersForProperty = propertyListeners.get(key) || new Set();
+    listenersForProperty.add(listener);
+    propertyListeners.set(key, listenersForProperty);
+
+    return () => {
+      listenersForProperty.delete(listener);
+      if (!listenersForProperty.size) {
+        propertyListeners.delete(key);
+      }
+    };
+  }
+
+  return {
+    get,
+    getSnapshot,
+    init,
+    set,
+    subscribe,
+    subscribeProperty,
+  };
+}

package/client/services/app-state/createPersistStoreService.js

@@ -0,0 +1,122 @@
+import {createStorageBinding} from './localStorageBinding.js';
+import {getPersistStateDefinitions} from './stateDefinitions.js';
+
+function cloneValue(value) {
+  return value && typeof value === 'object' ? structuredClone(value) : value;
+}
+
+export function createPersistStoreService() {
+  const definitions = new Map(getPersistStateDefinitions());
+  const storageKeyIndex = new Map();
+  const state = {};
+  const listeners = new Set();
+  let initialized = false;
+  let storageBound = false;
+
+  for (const [key, definition] of definitions.entries()) {
+    storageKeyIndex.set(definition.storageKey, {key, definition});
+    state[key] = cloneValue(definition.defaultValue);
+  }
+
+  function notify(key, value, previousValue) {
+    const payload = {
+      key,
+      value: cloneValue(value),
+      previousValue: cloneValue(previousValue),
+      state: getSnapshot(),
+    };
+
+    for (const listener of listeners) {
+      listener(payload);
+    }
+  }
+
+  function applyValue(key, value) {
+    const previousValue = state[key];
+    if (Object.is(previousValue, value)) {
+      return value;
+    }
+
+    state[key] = cloneValue(value);
+    notify(key, value, previousValue);
+    return value;
+  }
+
+  function readStorageValue(definition) {
+    const rawValue = createStorageBinding(definition.storageKey).read();
+    return definition.normalize(rawValue || definition.defaultValue);
+  }
+
+  function bindStorageSync() {
+    if (storageBound || typeof window === 'undefined') {
+      return;
+    }
+
+    window.addEventListener('storage', (event) => {
+      const entry = storageKeyIndex.get(event.key);
+      if (!entry) {
+        return;
+      }
+
+      applyValue(entry.key, entry.definition.normalize(event.newValue || entry.definition.defaultValue));
+    });
+
+    storageBound = true;
+  }
+
+  function init() {
+    if (initialized) {
+      return;
+    }
+
+    for (const [key, definition] of definitions.entries()) {
+      state[key] = readStorageValue(definition);
+    }
+    bindStorageSync();
+    initialized = true;
+  }
+
+  function get(key) {
+    init();
+    return cloneValue(state[key]);
+  }
+
+  function getSnapshot() {
+    init();
+    return Object.fromEntries(
+      Object.entries(state).map(([key, value]) => [key, cloneValue(value)]),
+    );
+  }
+
+  function set(key, value) {
+    init();
+    const definition = definitions.get(key);
+    if (!definition) {
+      throw new Error(`Unknown persisted app state key: ${key}`);
+    }
+
+    const normalizedValue = definition.normalize(value);
+    const storage = createStorageBinding(definition.storageKey);
+    storage.write(definition.serialize(normalizedValue));
+    return applyValue(key, normalizedValue);
+  }
+
+  function subscribe(listener) {
+    if (typeof listener !== 'function') {
+      return () => {};
+    }
+
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  }
+
+  return {
+    init,
+    get,
+    getSnapshot,
+    set,
+    subscribe,
+  };
+}