@velor/remote-mouse 6.4.8

package/client/ui/main/bindings/bindSamsungRemoteButtons.js

@@ -0,0 +1,320 @@
+import {emitWithTimestamp} from '../../../core/socket-emit.js';
+import {
+    REMOTE_EVENT_SAMSUNG_ENTER,
+    REMOTE_EVENT_SAMSUNG_INPUT,
+    REMOTE_EVENT_SAMSUNG_MUTE,
+    REMOTE_EVENT_SAMSUNG_OFF,
+    REMOTE_EVENT_SAMSUNG_ON,
+    REMOTE_EVENT_SAMSUNG_PC_INPUT,
+    REMOTE_EVENT_SAMSUNG_VOL_DOWN,
+    REMOTE_EVENT_SAMSUNG_VOL_UP
+} from '../../../../utils/remoteCommands.js';
+import { bindTouchPassthrough } from '../../../touch/bindTouchPassthrough.js';
+
+const VOLUME_REPEAT_HOLD_DELAY_MS = 1000;
+const VOLUME_REPEAT_INTERVAL_MS = 170;
+const VOLUME_REPEAT_MOVE_CANCEL_THRESHOLD_PX = 10;
+
+function getPointerDistance(startPoint, event) {
+    if (!startPoint) {
+        return 0;
+    }
+
+    const dx = Number(event.clientX || 0) - startPoint.clientX;
+    const dy = Number(event.clientY || 0) - startPoint.clientY;
+    return Math.hypot(dx, dy);
+}
+
+function getTouchDistance(startPoint, touch) {
+    if (!startPoint || !touch) {
+        return 0;
+    }
+
+    const dx = Number(touch.clientX || 0) - startPoint.clientX;
+    const dy = Number(touch.clientY || 0) - startPoint.clientY;
+    return Math.hypot(dx, dy);
+}
+
+export function bindRepeatingButton(button, emitAction, {
+    holdDelayMs = VOLUME_REPEAT_HOLD_DELAY_MS,
+    repeatIntervalMs = VOLUME_REPEAT_INTERVAL_MS,
+    moveCancelThresholdPx = VOLUME_REPEAT_MOVE_CANCEL_THRESHOLD_PX,
+} = {}) {
+    if (!button || typeof emitAction !== 'function') {
+        return;
+    }
+
+    let isPressed = false;
+    let pointerPressHandled = false;
+    let activePointerId = null;
+    let activeTouchId = null;
+    let startPoint = null;
+    let holdTimer = null;
+    let repeatTimer = null;
+    let suppressClickTimer = null;
+
+    const clearTimers = () => {
+        if (holdTimer) {
+            window.clearTimeout(holdTimer);
+            holdTimer = null;
+        }
+        if (repeatTimer) {
+            window.clearInterval(repeatTimer);
+            repeatTimer = null;
+        }
+        if (suppressClickTimer) {
+            window.clearTimeout(suppressClickTimer);
+            suppressClickTimer = null;
+        }
+    };
+
+    const startPress = () => {
+        if (isPressed || button.disabled || button.hidden) {
+            return;
+        }
+
+        isPressed = true;
+        emitAction();
+        holdTimer = window.setTimeout(() => {
+            emitAction();
+            repeatTimer = window.setInterval(emitAction, repeatIntervalMs);
+        }, holdDelayMs);
+    };
+
+    const stopPress = () => {
+        if (!isPressed) {
+            return;
+        }
+
+        isPressed = false;
+        activePointerId = null;
+        activeTouchId = null;
+        startPoint = null;
+        if (holdTimer) {
+            window.clearTimeout(holdTimer);
+            holdTimer = null;
+        }
+        if (repeatTimer) {
+            window.clearInterval(repeatTimer);
+            repeatTimer = null;
+        }
+        suppressClickTimer = window.setTimeout(() => {
+            pointerPressHandled = false;
+            suppressClickTimer = null;
+        }, 500);
+    };
+
+    button.addEventListener('pointerdown', (event) => {
+        if (event.button !== undefined && event.button !== 0) {
+            return;
+        }
+
+        pointerPressHandled = true;
+        activePointerId = event.pointerId;
+        startPoint = {
+            clientX: Number(event.clientX || 0),
+            clientY: Number(event.clientY || 0),
+        };
+        event.preventDefault();
+        button.setPointerCapture?.(event.pointerId);
+        startPress();
+    });
+
+    button.addEventListener('touchstart', (event) => {
+        if (event.changedTouches?.length !== 1) {
+            return;
+        }
+
+        const touch = event.changedTouches[0];
+        activeTouchId = touch.identifier;
+        startPoint = {
+            clientX: Number(touch.clientX || 0),
+            clientY: Number(touch.clientY || 0),
+        };
+    }, {passive: true});
+
+    button.addEventListener('pointermove', (event) => {
+        if (!isPressed || event.pointerId !== activePointerId) {
+            return;
+        }
+
+        if (getPointerDistance(startPoint, event) >= moveCancelThresholdPx) {
+            stopPress();
+        }
+    });
+
+    button.addEventListener('touchmove', (event) => {
+        if (!isPressed || activeTouchId === null) {
+            return;
+        }
+
+        const touch = Array.from(event.changedTouches || [])
+            .find((entry) => entry.identifier === activeTouchId);
+        if (getTouchDistance(startPoint, touch) >= moveCancelThresholdPx) {
+            stopPress();
+        }
+    }, {passive: true});
+
+    button.addEventListener('pointerup', (event) => {
+        event.preventDefault();
+        button.releasePointerCapture?.(event.pointerId);
+        stopPress();
+    });
+
+    button.addEventListener('pointercancel', stopPress);
+    button.addEventListener('lostpointercapture', stopPress);
+    button.addEventListener('mouseleave', stopPress);
+    window.addEventListener('blur', stopPress);
+    document.addEventListener('visibilitychange', () => {
+        if (document.hidden) {
+            stopPress();
+        }
+    });
+
+    button.addEventListener('click', (event) => {
+        if (pointerPressHandled) {
+            pointerPressHandled = false;
+            if (suppressClickTimer) {
+                window.clearTimeout(suppressClickTimer);
+                suppressClickTimer = null;
+            }
+            event.preventDefault();
+            return;
+        }
+
+        emitAction();
+    });
+}
+
+export function bindSamsungRemoteButtons(services, dom) {
+    const socket = services.getTransport();
+    const clientConfig = services.getClientConfig();
+    const getConfigView = services.getConfigView;
+    const appState = services.getAppState();
+    const backend = services.getBackend();
+    const touchpad = dom.remotes.mouse.touchpad;
+    const {
+        root,
+        btnSamsungOn,
+        btnSamsungOff,
+        btnSamsungVolUp,
+        btnSamsungVolDown,
+        btnSamsungMute,
+        btnSamsungInput,
+        btnSamsungEnter,
+        btnSamsungPcInput,
+    } = dom.remotes.samsung;
+    bindTouchPassthrough([
+        btnSamsungOn,
+        btnSamsungOff,
+        btnSamsungVolUp,
+        btnSamsungVolDown,
+        btnSamsungMute,
+        btnSamsungInput,
+        btnSamsungEnter,
+        btnSamsungPcInput,
+    ], touchpad);
+
+    const requiresOnButtons = Array.from(root?.querySelectorAll('[data-samsung-requires-on="true"]') || []);
+    let samsungStatusInterval = null;
+    let currentSamsungPowerState = 'unknown';
+    let expeditedPollTimers = [];
+    const emit = (eventName) => () => emitWithTimestamp(socket, eventName);
+    const emitSamsungOn = emit(REMOTE_EVENT_SAMSUNG_ON);
+    const emitSamsungOff = emit(REMOTE_EVENT_SAMSUNG_OFF);
+
+    const clearExpeditedSamsungPolling = () => {
+        for (const timer of expeditedPollTimers) {
+            clearTimeout(timer);
+        }
+        expeditedPollTimers = [];
+    };
+
+    const applySamsungPowerState = (powerState) => {
+        currentSamsungPowerState = powerState || 'unknown';
+        console.debug('[samsung-remote] apply power state', {
+            powerState: currentSamsungPowerState,
+        });
+        const isOn = powerState === 'on' || powerState === 'unknown';
+        for (const button of requiresOnButtons) {
+            button.hidden = !isOn;
+        }
+    };
+
+    const refreshSamsungPowerState = async () => {
+        const samsungConfig = getConfigView().getSamsungConfig();
+        const locallyVisible = appState.get('effective.remote.samsung.visible');
+        if (!root || !samsungConfig.enabled || !locallyVisible) {
+            applySamsungPowerState('off');
+            return;
+        }
+
+        try {
+            console.debug('[samsung-remote] refresh power state');
+            const payload = await backend.getSamsungStatus();
+            console.debug('[samsung-remote] status payload', payload);
+            applySamsungPowerState(payload?.power || 'unknown');
+        } catch (_error) {
+            console.debug('[samsung-remote] status fetch failed');
+            applySamsungPowerState('unknown');
+        }
+    };
+
+    const startExpeditedSamsungPolling = (targetPowerState) => {
+        console.debug('[samsung-remote] start expedited polling', {targetPowerState});
+        clearExpeditedSamsungPolling();
+        const delaysMs = [0, 350, 900, 1800, 3200, 5200];
+
+        expeditedPollTimers = delaysMs.map((delayMs) => window.setTimeout(async () => {
+            await refreshSamsungPowerState();
+            if (currentSamsungPowerState === targetPowerState) {
+                clearExpeditedSamsungPolling();
+            }
+        }, delayMs));
+    };
+
+    const ensureSamsungStatusPolling = () => {
+        if (samsungStatusInterval) {
+            return;
+        }
+        samsungStatusInterval = window.setInterval(() => {
+            void refreshSamsungPowerState();
+        }, 4000);
+    };
+
+    const syncSamsungVisibility = () => {
+        if (!root) {
+            return;
+        }
+        const samsungConfig = getConfigView().getSamsungConfig();
+        const locallyVisible = appState.get('effective.remote.samsung.visible');
+        root.hidden = !samsungConfig.enabled || !locallyVisible;
+        if (root.hidden) {
+            clearExpeditedSamsungPolling();
+            applySamsungPowerState('off');
+        } else {
+            void refreshSamsungPowerState();
+        }
+    };
+
+    btnSamsungOn.addEventListener('click', () => {
+        console.debug('[samsung-remote] click on');
+        emitSamsungOn();
+        startExpeditedSamsungPolling('on');
+    });
+    btnSamsungOff.addEventListener('click', () => {
+        console.debug('[samsung-remote] click off');
+        emitSamsungOff();
+        startExpeditedSamsungPolling('off');
+    });
+    bindRepeatingButton(btnSamsungVolUp, emit(REMOTE_EVENT_SAMSUNG_VOL_UP));
+    bindRepeatingButton(btnSamsungVolDown, emit(REMOTE_EVENT_SAMSUNG_VOL_DOWN));
+    btnSamsungMute.addEventListener('click', emit(REMOTE_EVENT_SAMSUNG_MUTE));
+    btnSamsungInput.addEventListener('click', emit(REMOTE_EVENT_SAMSUNG_INPUT));
+    btnSamsungEnter.addEventListener('click', emit(REMOTE_EVENT_SAMSUNG_ENTER));
+    btnSamsungPcInput.addEventListener('click', emit(REMOTE_EVENT_SAMSUNG_PC_INPUT));
+    syncSamsungVisibility();
+    ensureSamsungStatusPolling();
+    clientConfig.onChange(syncSamsungVisibility);
+    appState.subscribeProperty('effective.remote.samsung.visible', syncSamsungVisibility);
+}

package/client/ui/main/bindings/bindSystemRemoteButtons.js

@@ -0,0 +1,41 @@
+import { emitWithTimestamp } from '../../../core/socket-emit.js';
+import { bindTouchPassthrough } from '../../../touch/bindTouchPassthrough.js';
+import {
+  REMOTE_EVENT_KEYBOARD_KEY,
+  REMOTE_EVENT_WINDOW_CLOSE,
+  REMOTE_EVENT_WINDOW_TOGGLE_MAXIMIZE,
+} from '../../../../utils/remoteCommands.js';
+
+export function bindSystemRemoteButtons(services, dom) {
+  const socket = services.getTransport();
+  const touchpad = dom.remotes.mouse.touchpad;
+  const {
+    btnSystemShowDesktop,
+    btnSystemWindowLeft,
+    btnSystemWindowRight,
+    btnSystemStartMenu,
+    btnSystemWindowToggle,
+    btnSystemWindowClose,
+  } = dom.remotes.system;
+  const buttons = [
+    btnSystemShowDesktop,
+    btnSystemWindowLeft,
+    btnSystemWindowRight,
+    btnSystemStartMenu,
+    btnSystemWindowToggle,
+    btnSystemWindowClose,
+  ].filter(Boolean);
+
+  const emitKey = (payload = {}) => () => emitWithTimestamp(socket, REMOTE_EVENT_KEYBOARD_KEY, payload);
+  const emitWindowToggle = () => emitWithTimestamp(socket, REMOTE_EVENT_WINDOW_TOGGLE_MAXIMIZE);
+  const emitWindowClose = () => emitWithTimestamp(socket, REMOTE_EVENT_WINDOW_CLOSE);
+
+  bindTouchPassthrough(buttons, touchpad);
+
+  btnSystemShowDesktop?.addEventListener('click', emitKey({ key: 'd', modifiers: ['command'] }));
+  btnSystemWindowLeft?.addEventListener('click', emitKey({ key: 'tab', modifiers: ['alt', 'shift'] }));
+  btnSystemWindowRight?.addEventListener('click', emitKey({ key: 'tab', modifiers: ['alt'] }));
+  btnSystemStartMenu?.addEventListener('click', emitKey({ key: 'command' }));
+  btnSystemWindowToggle?.addEventListener('click', emitWindowToggle);
+  btnSystemWindowClose?.addEventListener('click', emitWindowClose);
+}

package/client/ui/main/bindings/bindVlcRemoteButtons.js

@@ -0,0 +1,64 @@
+import { emitWithTimestamp } from '../../../core/socket-emit.js';
+import { bindTouchPassthrough } from '../../../touch/bindTouchPassthrough.js';
+import {
+  REMOTE_EVENT_VLC_COMMAND,
+  REMOTE_EVENT_VLC_OPEN,
+  REMOTE_EVENT_VLC_WINDOW_CLOSE,
+  REMOTE_EVENT_VLC_WINDOW_TOGGLE,
+} from '../../../../utils/remoteCommands.js';
+
+export function bindVlcRemoteButtons(services, dom) {
+  const socket = services.getTransport();
+  const touchpad = dom.remotes.mouse.touchpad;
+  const {
+    btnVlcOpen,
+    btnVlcWindowToggle,
+    btnVlcWindowClose,
+    btnVlcPrevious,
+    btnVlcPlayPause,
+    btnVlcNext,
+    btnVlcSeekBackward,
+    btnVlcStop,
+    btnVlcSeekForward,
+    btnVlcVolumeDown,
+    btnVlcMute,
+    btnVlcVolumeUp,
+    btnVlcFullscreen,
+  } = dom.remotes.vlc;
+  const buttons = [
+    btnVlcOpen,
+    btnVlcWindowToggle,
+    btnVlcWindowClose,
+    btnVlcPrevious,
+    btnVlcPlayPause,
+    btnVlcNext,
+    btnVlcSeekBackward,
+    btnVlcStop,
+    btnVlcSeekForward,
+    btnVlcVolumeDown,
+    btnVlcMute,
+    btnVlcVolumeUp,
+    btnVlcFullscreen,
+  ].filter(Boolean);
+
+  const emitCommand = (action) => () => emitWithTimestamp(socket, REMOTE_EVENT_VLC_COMMAND, { action });
+  const emitOpen = () => emitWithTimestamp(socket, REMOTE_EVENT_VLC_OPEN);
+  const emitWindowToggle = () => emitWithTimestamp(socket, REMOTE_EVENT_VLC_WINDOW_TOGGLE);
+  const emitWindowClose = () => emitWithTimestamp(socket, REMOTE_EVENT_VLC_WINDOW_CLOSE);
+
+  bindTouchPassthrough(buttons, touchpad);
+
+  btnVlcOpen?.addEventListener('click', emitOpen);
+  btnVlcWindowToggle?.addEventListener('click', emitWindowToggle);
+  btnVlcWindowClose?.addEventListener('click', emitWindowClose);
+  btnVlcPrevious?.addEventListener('click', emitCommand('previous'));
+  btnVlcPlayPause?.addEventListener('click', emitCommand('play-pause'));
+  btnVlcNext?.addEventListener('click', emitCommand('next'));
+  btnVlcSeekBackward?.addEventListener('click', emitCommand('seek-backward'));
+  btnVlcStop?.addEventListener('click', emitCommand('stop'));
+  btnVlcSeekForward?.addEventListener('click', emitCommand('seek-forward'));
+  btnVlcVolumeDown?.addEventListener('click', emitCommand('volume-down'));
+  btnVlcMute?.addEventListener('click', emitCommand('mute'));
+  btnVlcVolumeUp?.addEventListener('click', emitCommand('volume-up'));
+  btnVlcFullscreen?.addEventListener('click', emitCommand('fullscreen'));
+}

package/client/ui/main/canvas-ui.js

@@ -0,0 +1,33 @@
+import { getScrollZoneLayout } from '../../touch/gesture-zone.js';
+import {APP_STATE_HANDEDNESS} from '../../services/app-state/createAppStateService.js';
+
+export function createCanvasUI(touchpad, appState) {
+  const ctx = touchpad.getContext('2d');
+
+  function drawHint() {
+    const width = touchpad.clientWidth;
+    const height = touchpad.clientHeight;
+
+    ctx.clearRect(0, 0, width, height);
+  }
+
+  function resize() {
+    const ratio = window.devicePixelRatio || 1;
+    const rect = touchpad.getBoundingClientRect();
+    touchpad.width = Math.round(rect.width * ratio);
+    touchpad.height = Math.round(rect.height * ratio);
+    ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+
+    const layout = getScrollZoneLayout(touchpad.clientWidth, touchpad.clientHeight, appState.get(APP_STATE_HANDEDNESS));
+    document.documentElement.style.setProperty('--scroll-zone-width', `${layout.width}px`);
+    document.documentElement.style.setProperty('--scroll-zone-edge-gap', `${layout.edgeGap}px`);
+
+    drawHint();
+  }
+
+  appState.subscribeProperty(APP_STATE_HANDEDNESS, () => {
+    resize();
+  });
+
+  return { resize };
+}

package/client/ui/main/connection-overlay.js

@@ -0,0 +1,57 @@
+export function bindConnectionOverlay(services, dom) {
+  const socket = services.getTransport();
+  const i18n = services.getI18n();
+  const overlay = dom.connectionOverlay;
+
+  if (!overlay) {
+    return;
+  }
+
+  const titleEl = overlay.querySelector('[data-connection-title]');
+  const messageEl = overlay.querySelector('[data-connection-message]');
+
+  function setContent(title, message) {
+    if (titleEl) {
+      titleEl.textContent = title;
+    }
+    if (messageEl) {
+      messageEl.textContent = message;
+    }
+  }
+
+  function update() {
+    const {t} = i18n.getI18n();
+    const connected = socket.connected;
+    if (!connected) {
+      setContent(t('main.connectionUnavailableTitle'), t('main.connectionWaiting'));
+    }
+    overlay.classList.toggle('hidden', connected);
+  }
+
+  function handleConnectError(error) {
+    const {t} = i18n.getI18n();
+    const isUnauthorized = error?.message === 'unauthorized'
+      || error?.data?.code === 'ENTRY_TOKEN_INVALID';
+
+    if (isUnauthorized) {
+      setContent(
+        t('main.connectionExpiredTitle'),
+        t('main.connectionExpiredMessage')
+      );
+      overlay.classList.remove('hidden');
+      return;
+    }
+
+    update();
+  }
+
+  socket.on('connect', update);
+  socket.on('disconnect', update);
+  socket.on('reconnect', update);
+  socket.on('connect_error', handleConnectError);
+  i18n.onChange(() => {
+    update();
+  });
+
+  update();
+}

package/client/ui/main/init-ui.js

@@ -0,0 +1,54 @@
+import { getDom } from '../../core/dom.js';
+import { createCanvasUI } from './canvas-ui.js';
+import { bindTouchpad } from '../../touch/touchpad.js';
+import { bindKeyboardPanel } from './keyboard-panel.js';
+import { bindMouseButtons } from './mouse-buttons.js';
+import { bindActionButtons } from './bindings/bindActionButtons.js';
+import { bindConnectionOverlay } from './connection-overlay.js';
+import { bindPreviewStream } from '../../preview/preview-stream.js';
+import { bindClientNotifications } from './bind-client-notifications.js';
+import { bindAdminDrawer } from './bindings/bindAdminDrawer.js';
+import { bindAdminVersion } from './bindings/bindAdminVersion.js';
+import { bindRemoteAccordion } from './bindings/bindRemoteAccordion.js';
+import {applyRemoteVisibilityState} from './applyRemoteVisibilityState.js';
+
+export function initUi(services) {
+
+  services.getI18n().translateRoot(document);
+
+  const dom = getDom();
+  const {remotes} = dom;
+  const canvasUI = createCanvasUI(remotes.mouse.touchpad, services.getAppState());
+  bindRemoteAccordion(services, dom);
+
+  const syncRemoteVisibilityState = () => applyRemoteVisibilityState({
+    services,
+    dom,
+  });
+
+  bindPreviewStream(services, dom);
+  bindTouchpad(services, dom);
+  bindKeyboardPanel(services, dom);
+  bindMouseButtons(services, dom);
+  bindActionButtons(services, dom);
+  bindConnectionOverlay(services, dom);
+  bindClientNotifications(services, dom);
+  bindAdminDrawer(services, dom);
+  bindAdminVersion(services, dom);
+
+  for (const key of [
+    'effective.remote.browser.visible',
+    'effective.remote.keyboard.visible',
+    'effective.remote.vlc.visible',
+    'effective.remote.samsung.visible',
+    'effective.remote.preview.visible',
+  ]) {
+    services.getAppState().subscribeProperty(key, syncRemoteVisibilityState);
+  }
+
+  syncRemoteVisibilityState();
+
+  window.addEventListener('resize', canvasUI.resize);
+
+  canvasUI.resize();
+}