@velor/remote-mouse 6.4.8

package/client/services/i18n/createI18nService.js

@@ -0,0 +1,86 @@
+import {I18N_CHANGED_EVENT} from '../../i18n/constants.js';
+import {interpolate, loadDictionary, resolveLocale} from '../../i18n/core.js';
+import {applyPageTranslations} from '../../i18n/apply-page-translations.js';
+import {createWindowEventListener, emitWindowEvent} from '../../core/window-events.js';
+
+export function createI18nService(services) {
+  const onChange = createWindowEventListener(I18N_CHANGED_EVENT);
+  let currentLocale = '';
+  let currentDictionary = null;
+
+  function getResolvedLocale(value = typeof navigator !== 'undefined' ? navigator.language : '') {
+    return resolveLocale(value);
+  }
+
+  function applyLocaleToDom(locale) {
+    if (typeof document !== 'undefined') {
+      document.documentElement.lang = locale;
+    }
+    return locale;
+  }
+
+  function ensureInitialized() {
+    if (!currentLocale || !currentDictionary) {
+      throw new Error('Client i18n not initialized.');
+    }
+  }
+
+  function t(key, params = {}) {
+    ensureInitialized();
+    const template = currentDictionary[key] ?? key;
+    return interpolate(template, params);
+  }
+
+  function getI18nView() {
+    ensureInitialized();
+    return {
+      locale: currentLocale,
+      t,
+    };
+  }
+
+  return {
+    async init(locale) {
+      const normalizedLocale = getResolvedLocale(locale);
+      if (currentLocale === normalizedLocale && currentDictionary) {
+        return getI18nView();
+      }
+
+      currentDictionary = await loadDictionary(normalizedLocale);
+      currentLocale = normalizedLocale;
+      applyLocaleToDom(currentLocale);
+      return getI18nView();
+    },
+    getLocale() {
+      return getResolvedLocale(currentLocale);
+    },
+    getI18n() {
+      return getI18nView();
+    },
+    t(key, params) {
+      return t(key, params);
+    },
+    translateRoot(root = document) {
+      applyPageTranslations(root, t);
+    },
+    async setLocale(locale) {
+      const normalizedLocale = getResolvedLocale(locale);
+      const previousLocale = currentLocale || '';
+      await this.init(normalizedLocale);
+
+      applyPageTranslations(document, t);
+      emitWindowEvent(I18N_CHANGED_EVENT, {
+        locale: currentLocale,
+        previousLocale,
+      });
+
+      return getI18nView();
+    },
+    applyLocaleToDom(locale = currentLocale) {
+      return applyLocaleToDom(getResolvedLocale(locale));
+    },
+    onChange(listener) {
+      return onChange(listener);
+    },
+  };
+}

package/client/services/notifications/createNotificationService.js

@@ -0,0 +1,56 @@
+import {REMOTE_EVENT_ADMIN_RESULT} from '../../../utils/remoteCommands.js';
+import {showToast} from '../../ui/notifications/show-toast.js';
+
+export function createNotificationService(services) {
+  const {getI18n, getPubSub, getTransport} = services;
+  let root = null;
+  let transportBound = false;
+  const queuedPayloads = [];
+
+  function flushQueue() {
+    if (!root) {
+      return;
+    }
+
+    while (queuedPayloads.length > 0) {
+      showToast(root, queuedPayloads.shift(), getI18n().t);
+    }
+  }
+
+  function notify(payload = {}) {
+    getPubSub().publish('notification.received', payload);
+
+    if (!root) {
+      queuedPayloads.push(payload);
+      return;
+    }
+
+    showToast(root, payload, getI18n().t);
+  }
+
+  function handleAdminResult(payload = {}) {
+    getPubSub().publish('admin.result.received', payload);
+
+    if (payload?.openUrl) {
+      window.open(String(payload.openUrl), '_blank', 'noopener,noreferrer');
+    }
+  }
+
+  return {
+    bindRoot(nextRoot) {
+      root = nextRoot || null;
+      flushQueue();
+    },
+    bindTransport() {
+      if (transportBound) {
+        return;
+      }
+
+      const transport = getTransport();
+      transport.on('notification', notify);
+      transport.on(REMOTE_EVENT_ADMIN_RESULT, handleAdminResult);
+      transportBound = true;
+    },
+    notify,
+  };
+}

package/client/services/pubsub/createPubSubService.js

@@ -0,0 +1,20 @@
+import {createWindowEventListener, emitWindowEvent} from '../../core/window-events.js';
+
+let nextPubSubInstanceId = 1;
+
+function toPubSubEventName(instanceId, eventName) {
+  return `client:pubsub:${instanceId}:${String(eventName || '').trim() || 'unknown'}`;
+}
+
+export function createPubSubService(services) {
+  const instanceId = nextPubSubInstanceId++;
+
+  return {
+    publish(eventName, payload = {}) {
+      emitWindowEvent(toPubSubEventName(instanceId, eventName), payload);
+    },
+    subscribe(eventName, listener) {
+      return createWindowEventListener(toPubSubEventName(instanceId, eventName))(listener);
+    },
+  };
+}

package/client/services/remotes/createRemotesService.js

@@ -0,0 +1,20 @@
+export function createRemotesService(services) {
+  const {getBackend, getTransport, getPubSub} = services;
+  return {
+    emit(eventName, payload = {}) {
+      getTransport().emitWithTimestamp(eventName, payload);
+    },
+    async loadAvailableRemotes() {
+      const payload = await getBackend().getAvailableRemotes();
+      const remotes = Array.isArray(payload?.remotes) ? payload.remotes : [];
+      getPubSub().publish('remotes.available.changed', {remotes});
+      return remotes;
+    },
+    async loadAvailableBrowsers() {
+      const payload = await getBackend().getAvailableBrowsers();
+      const browsers = Array.isArray(payload?.browsers) ? payload.browsers : [];
+      getPubSub().publish('remotes.browsers.changed', {browsers});
+      return browsers;
+    },
+  };
+}

package/client/services/transport/createSocketIoTransportService.js

@@ -0,0 +1,50 @@
+import {initSocketIo} from '../../core/init-socket-io.js';
+
+export function createSocketIoTransportService(services) {
+  const {getPubSub} = services;
+  let socket = null;
+
+  function ensureSocket() {
+    if (!socket) {
+      socket = initSocketIo();
+      getPubSub().publish('transport.connected-service', {transport: api});
+    }
+
+    return socket;
+  }
+
+  const api = {
+    connect() {
+      return ensureSocket();
+    },
+    getSocket() {
+      return ensureSocket();
+    },
+    emit(eventName, payload) {
+      ensureSocket().emit(eventName, payload);
+    },
+    emitWithTimestamp(eventName, payload = {}) {
+      ensureSocket().emit(eventName, {
+        ...payload,
+        ts: Date.now(),
+      });
+    },
+    on(eventName, handler) {
+      ensureSocket().on(eventName, handler);
+      return () => {
+        ensureSocket().off(eventName, handler);
+      };
+    },
+    once(eventName, handler) {
+      ensureSocket().once(eventName, handler);
+    },
+    off(eventName, handler) {
+      ensureSocket().off(eventName, handler);
+    },
+    get connected() {
+      return Boolean(socket?.connected);
+    },
+  };
+
+  return api;
+}

package/client/touch/bindTouchPassthrough.js

@@ -0,0 +1,94 @@
+import {dispatchSyntheticTouch} from "./dispatchSyntheticTouch.js";
+
+const MOVE_THRESHOLD_PX = 10;
+
+function distanceFrom(startTouch, nextTouch) {
+    const dx = nextTouch.clientX - startTouch.clientX;
+    const dy = nextTouch.clientY - startTouch.clientY;
+    return Math.hypot(dx, dy);
+}
+
+export function bindTouchPassthrough(buttons, touchpad) {
+    if (!touchpad) {
+        return;
+    }
+
+    for (const button of buttons || []) {
+        if (!button) {
+            continue;
+        }
+
+        let activeTouchId = null;
+        let startTouch = null;
+        let isPassthrough = false;
+        let suppressNextClick = false;
+
+        const resetState = () => {
+            activeTouchId = null;
+            startTouch = null;
+            isPassthrough = false;
+        };
+
+        const getTrackedTouch = (touchList) => Array.from(touchList || []).find((touch) => touch.identifier === activeTouchId);
+
+        const onTouchMove = (event) => {
+            const trackedTouch = getTrackedTouch(event.changedTouches) || getTrackedTouch(event.touches);
+            if (!trackedTouch || !startTouch) {
+                return;
+            }
+
+            const distance = distanceFrom(startTouch, trackedTouch);
+            if (!isPassthrough && distance < MOVE_THRESHOLD_PX) {
+                return;
+            }
+
+            if (!isPassthrough) {
+                isPassthrough = true;
+                suppressNextClick = true;
+                dispatchSyntheticTouch(touchpad, 'touchstart', startTouch);
+            }
+
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            dispatchSyntheticTouch(touchpad, 'touchmove', trackedTouch);
+        };
+
+        const onTouchEnd = (event) => {
+            const trackedTouch = getTrackedTouch(event.changedTouches) || getTrackedTouch(event.touches) || startTouch;
+            if (isPassthrough && trackedTouch) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                dispatchSyntheticTouch(touchpad, event.type === 'touchcancel' ? 'touchcancel' : 'touchend', trackedTouch);
+            }
+
+            resetState();
+        };
+
+        const onTouchStart = (event) => {
+            if (activeTouchId !== null || event.changedTouches.length !== 1) {
+                return;
+            }
+
+            const touch = event.changedTouches[0];
+            activeTouchId = touch.identifier;
+            startTouch = touch;
+            isPassthrough = false;
+        };
+
+        const onClickCapture = (event) => {
+            if (!suppressNextClick) {
+                return;
+            }
+
+            suppressNextClick = false;
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        };
+
+        button.addEventListener('touchstart', onTouchStart, {passive: true});
+        button.addEventListener('click', onClickCapture, true);
+        document.addEventListener('touchmove', onTouchMove, {passive: false});
+        document.addEventListener('touchend', onTouchEnd, {passive: false});
+        document.addEventListener('touchcancel', onTouchEnd, {passive: false});
+    }
+}

package/client/touch/createTouchList.js

@@ -0,0 +1,18 @@
+export function createTouchList(touchpad, touch) {
+    return [
+        new Touch({
+            identifier: touch.identifier,
+            target: touchpad,
+            clientX: touch.clientX,
+            clientY: touch.clientY,
+            screenX: touch.screenX ?? touch.clientX,
+            screenY: touch.screenY ?? touch.clientY,
+            pageX: touch.pageX ?? touch.clientX,
+            pageY: touch.pageY ?? touch.clientY,
+            radiusX: touch.radiusX ?? 1,
+            radiusY: touch.radiusY ?? 1,
+            rotationAngle: touch.rotationAngle ?? 0,
+            force: touch.force ?? 0.5,
+        }),
+    ];
+}

package/client/touch/dispatchSyntheticTouch.js

@@ -0,0 +1,20 @@
+import {createTouchList} from "./createTouchList.js";
+
+export function dispatchSyntheticTouch(touchpad, type, sourceTouch) {
+    if (!touchpad || typeof Touch !== 'function' || typeof TouchEvent !== 'function') {
+        return;
+    }
+
+    const touches = type === 'touchend' || type === 'touchcancel'
+        ? []
+        : createTouchList(touchpad, sourceTouch);
+    const changedTouches = createTouchList(touchpad, sourceTouch);
+
+    touchpad.dispatchEvent(new TouchEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        touches,
+        targetTouches: touches,
+        changedTouches,
+    }));
+}

package/client/touch/gesture-zone.js

@@ -0,0 +1,28 @@
+import { clamp } from '../../utils/math.js';
+
+export function getScrollZoneWidth(width) {
+  return clamp(Math.round(width * 0.11), 36, 64);
+}
+
+export function getScrollZoneLayout(width, height, handedness = 'right') {
+  const edgeGap = clamp(Math.round(width * 0.012), 10, 14);
+  const zoneWidth = getScrollZoneWidth(width);
+  const isLeftHanded = String(handedness || '').toLowerCase() === 'left';
+  const x = isLeftHanded
+    ? edgeGap
+    : Math.max(0, width - zoneWidth - edgeGap);
+  const y = edgeGap;
+  const h = Math.max(24, height - edgeGap * 2);
+
+  return {
+    x,
+    y,
+    width: zoneWidth,
+    height: h,
+    edgeGap,
+  };
+}
+
+export function getRightScrollZoneLayout(width, height) {
+  return getScrollZoneLayout(width, height, 'right');
+}

package/client/touch/throttle.js

@@ -0,0 +1,46 @@
+export function createAccumulatedThrottle(emitFn, intervalMs) {
+  let pendingDx = 0;
+  let pendingDy = 0;
+  let timer = null;
+  let lastFlushAt = 0;
+
+  function flush() {
+    timer = null;
+    if (pendingDx === 0 && pendingDy === 0) {
+      return;
+    }
+
+    const payload = { dx: pendingDx, dy: pendingDy };
+    pendingDx = 0;
+    pendingDy = 0;
+    lastFlushAt = Date.now();
+    emitFn(payload);
+  }
+
+  function schedule() {
+    if (timer) {
+      return;
+    }
+
+    const elapsed = Date.now() - lastFlushAt;
+    const delay = Math.max(0, intervalMs - elapsed);
+    timer = setTimeout(flush, delay);
+  }
+
+  function addDelta(dx, dy) {
+    pendingDx += dx;
+    pendingDy += dy;
+    schedule();
+  }
+
+  function flushNow() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    flush();
+  }
+
+  return { addDelta, flushNow };
+}
+

package/client/touch/touch-handlers.js

@@ -0,0 +1,193 @@
+import { getScrollZoneLayout } from './gesture-zone.js';
+import {
+  applyNonLinearAcceleration,
+  distance2D,
+  scaleSigned,
+} from '../../utils/math.js';
+
+const SCROLL_GAIN = 1.1;
+const REMOTE_HIDE_MOVEMENT_THRESHOLD_PX = 10;
+
+function getDragHoldMs(handler) {
+  const value = Number(handler.getInputConfig?.().touchDragHoldMs);
+  return Number.isFinite(value) && value > 0 ? value : 420;
+}
+
+function getDragStillDistancePx(handler) {
+  const value = Number(handler.getInputConfig?.().touchDragStillDistancePx);
+  return Number.isFinite(value) && value > 0 ? value : 8;
+}
+
+function startDrag(state, handler) {
+  if (state.dragActive) {
+    return;
+  }
+
+  state.dragActive = true;
+  handler.buttonState('left', 'down');
+}
+
+function stopDrag(state, handler) {
+  if (!state.dragActive) {
+    return;
+  }
+
+  state.dragActive = false;
+  handler.buttonState('left', 'up');
+}
+
+function notifyMovementStartIfNeeded(state, handler, distancePx, kind = 'move') {
+  if (state.movementStarted) {
+    return;
+  }
+
+  if (!Number.isFinite(distancePx) || distancePx < REMOTE_HIDE_MOVEMENT_THRESHOLD_PX) {
+    return;
+  }
+
+  state.movementStarted = true;
+  handler.interactionStart?.(kind);
+}
+
+export function handleTouchStart(event, { touchpad, state, handler }) {
+  event.preventDefault();
+  const touches = event.touches;
+
+  if (!state.interactionActive && touches.length > 0) {
+    state.interactionActive = true;
+  }
+
+  if (touches.length === 1) {
+    const t = touches[0];
+    const rect = touchpad.getBoundingClientRect();
+    const layout = getScrollZoneLayout(rect.width, rect.height, handler.getHandedness?.());
+    const localX = t.clientX - rect.left;
+    const localY = t.clientY - rect.top;
+    const inRightZone =
+      localX >= layout.x
+      && localX <= layout.x + layout.width
+      && localY >= layout.y
+      && localY <= layout.y + layout.height;
+    state.oneFinger = { x: t.clientX, y: t.clientY };
+    state.oneFingerStart = { x: t.clientX, y: t.clientY };
+    state.oneFingerMode = inRightZone ? 'scroll' : 'move';
+    state.twoFinger = null;
+    state.movementStarted = false;
+    state.moved = false;
+    state.dragEligible = !inRightZone;
+    state.touchStartedAt = Date.now();
+    state.lastMoveAt = state.touchStartedAt;
+  }
+
+  if (touches.length === 2) {
+    stopDrag(state, handler);
+    const t1 = touches[0];
+    const t2 = touches[1];
+    state.twoFinger = {
+      p1: { x: t1.clientX, y: t1.clientY },
+      p2: { x: t2.clientX, y: t2.clientY },
+    };
+    state.movementStarted = false;
+    state.oneFinger = null;
+    state.oneFingerStart = null;
+    state.touchStartedAt = Date.now();
+    state.moved = false;
+    state.dragEligible = false;
+    state.lastMoveAt = state.touchStartedAt;
+  }
+}
+
+export function handleTouchMove(event, { state, handler }) {
+  event.preventDefault();
+  const touches = event.touches;
+
+  if (touches.length === 1 && state.oneFinger) {
+    const t = touches[0];
+    const dx = t.clientX - state.oneFinger.x;
+    const dy = t.clientY - state.oneFinger.y;
+    const now = Date.now();
+    const elapsed = now - state.lastMoveAt;
+    const holdDuration = now - state.touchStartedAt;
+    const travelFromStart = state.oneFingerStart
+      ? distance2D(state.oneFingerStart, { x: t.clientX, y: t.clientY })
+      : 0;
+
+    if (!state.dragActive && travelFromStart > getDragStillDistancePx(handler)) {
+      state.dragEligible = false;
+    }
+
+    notifyMovementStartIfNeeded(state, handler, travelFromStart, state.oneFingerMode === 'scroll' ? 'scroll' : 'move');
+
+    if (state.oneFingerMode === 'scroll') {
+      if (Math.abs(dy) > 0.12) {
+        state.moved = true;
+        handler.scroll(scaleSigned(dy, SCROLL_GAIN));
+      }
+    } else if (state.dragActive || (state.dragEligible && holdDuration >= getDragHoldMs(handler))) {
+      startDrag(state, handler);
+      if (Math.abs(dx) + Math.abs(dy) > 0.5) {
+        state.moved = true;
+        const adjusted = applyNonLinearAcceleration(dx, dy, elapsed);
+        handler.move(adjusted.dx, adjusted.dy);
+      }
+    } else if (Math.abs(dx) + Math.abs(dy) > 0.5) {
+      state.moved = true;
+      const adjusted = applyNonLinearAcceleration(dx, dy, elapsed);
+      handler.move(adjusted.dx, adjusted.dy);
+    }
+
+    state.oneFinger = { x: t.clientX, y: t.clientY };
+    state.lastMoveAt = now;
+  }
+
+  if (touches.length === 2 && state.twoFinger) {
+    const t1 = { x: touches[0].clientX, y: touches[0].clientY };
+    const t2 = { x: touches[1].clientX, y: touches[1].clientY };
+    const travelP1 = distance2D(state.twoFinger.p1, t1);
+    const travelP2 = distance2D(state.twoFinger.p2, t2);
+    const prevMidY = (state.twoFinger.p1.y + state.twoFinger.p2.y) / 2;
+    const nextMidY = (t1.y + t2.y) / 2;
+    const deltaY = nextMidY - prevMidY;
+
+    notifyMovementStartIfNeeded(state, handler, Math.max(travelP1, travelP2), 'scroll');
+
+    if (Math.abs(deltaY) > 0.12) {
+      state.moved = true;
+      handler.scroll(scaleSigned(deltaY, SCROLL_GAIN));
+    }
+
+    state.twoFinger = { p1: t1, p2: t2 };
+  }
+}
+
+export function handleTouchEnd(event, { state, handler }) {
+  event.preventDefault();
+  const duration = Date.now() - state.touchStartedAt;
+
+  if (event.touches.length === 0) {
+    if (state.dragActive) {
+      stopDrag(state, handler);
+    } else if (!state.moved && duration < 220 && state.oneFingerMode !== 'scroll') {
+      if (state.twoFinger) {
+        const space = distance2D(state.twoFinger.p1, state.twoFinger.p2);
+        if (space > 20) {
+          handler.click('right');
+        }
+      } else {
+        handler.click('left');
+      }
+    }
+
+    state.oneFinger = null;
+    state.oneFingerStart = null;
+    state.oneFingerMode = 'move';
+    state.twoFinger = null;
+    state.movementStarted = false;
+    state.moved = false;
+    state.dragActive = false;
+    state.dragEligible = false;
+    state.interactionActive = false;
+    handler.flush();
+    handler.interactionEnd?.();
+  }
+}