@velor/remote-mouse 6.4.8

package/client/ui/main/applyRemoteVisibilityState.js

@@ -0,0 +1,60 @@
+import {
+  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,
+} from '../../services/app-state/createAppStateService.js';
+
+export function applyRemoteVisibilityState({
+  services,
+  dom,
+}) {
+  const {remotes} = dom;
+  const appState = services.getAppState();
+  
+  const browserVisible = appState.get(APP_STATE_EFFECTIVE_BROWSER_REMOTE_VISIBLE);
+  
+  const keyboardVisible = appState.get(APP_STATE_EFFECTIVE_KEYBOARD_REMOTE_VISIBLE);
+  
+  const vlcVisible = appState.get(APP_STATE_EFFECTIVE_VLC_REMOTE_VISIBLE);
+  
+  const samsungVisible = appState.get(APP_STATE_EFFECTIVE_SAMSUNG_REMOTE_VISIBLE);
+  
+  const previewVisible = appState.get(APP_STATE_EFFECTIVE_PREVIEW_REMOTE_VISIBLE);
+
+  if (remotes.browser.root) {
+    remotes.browser.root.hidden = !browserVisible;
+  }
+  dom.app?.classList.toggle('keyboard-remote-hidden', !keyboardVisible);
+  
+  if (remotes.keyboard.menu) {
+    remotes.keyboard.menu.style.display = keyboardVisible ? '' : 'none';
+  }
+  
+  if (remotes.keyboard.keyboardShortcutsBar) {
+    remotes.keyboard.keyboardShortcutsBar.style.display = keyboardVisible ? '' : 'none';
+  }
+  
+  if (remotes.keyboard.keyboardPanel) {
+    if (!keyboardVisible) {
+      remotes.keyboard.keyboardPanel.classList.add('hidden');
+    }
+    remotes.keyboard.keyboardPanel.style.display = keyboardVisible ? '' : 'none';
+  }
+  
+  if (remotes.samsung.root) {
+    remotes.samsung.root.hidden = !samsungVisible;
+  }
+  
+  if (remotes.vlc.root) {
+    remotes.vlc.root.hidden = !vlcVisible;
+  }
+  
+  if (remotes.preview.root) {
+    remotes.preview.root.hidden = !previewVisible;
+    if (!previewVisible) {
+      remotes.preview.root.classList.remove('is-visible');
+    }
+  }
+}

package/client/ui/main/bind-client-notifications.js

@@ -0,0 +1,3 @@
+export function bindClientNotifications(services, dom) {
+  services.getNotifications().bindRoot(dom.notificationsRoot);
+}

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

@@ -0,0 +1,121 @@
+import {APP_STATE_REMOTE_ACCORDION_EXPANDED_PANEL} from '../../../services/app-state/createAppStateService.js';
+
+function getVisiblePanels(panels) {
+  return panels.filter((panel) => !panel.hidden);
+}
+
+function getPanelToggle(panel, toggleSelector) {
+  return panel.querySelector(toggleSelector);
+}
+
+function setExpanded(panel, expanded, {toggleSelector, contentSelector}) {
+  const toggle = getPanelToggle(panel, toggleSelector);
+  const content = panel.querySelector(contentSelector);
+  if (!toggle || !content) {
+    return;
+  }
+  toggle.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+  content.classList.toggle('is-collapsed', !expanded);
+}
+
+export function bindAccordion(panels = [], {
+  appState,
+  toggleSelector = '.remote-panel-toggle',
+  contentSelector = '.remote-panel-content',
+} = {}) {
+  const accordionPanels = panels.filter(Boolean);
+
+  if (!accordionPanels.length) {
+    return {syncVisiblePanels: () => {}};
+  }
+
+  const selectors = {
+    toggleSelector,
+    contentSelector,
+  };
+  let initialStateSynced = false;
+
+  function getPanelId(panel) {
+    return String(panel?.id || '');
+  }
+
+  function getExpandedPanelId() {
+    return String(appState?.get(APP_STATE_REMOTE_ACCORDION_EXPANDED_PANEL) || '');
+  }
+
+  function setExpandedPanelId(panelId) {
+    appState?.set(APP_STATE_REMOTE_ACCORDION_EXPANDED_PANEL, String(panelId || ''));
+  }
+
+  function applyExpandedPanelId(panelId) {
+    accordionPanels.forEach((panel) => {
+      setExpanded(panel, getPanelId(panel) === panelId, selectors);
+    });
+  }
+
+  function ensureValidExpanded() {
+    const visiblePanels = getVisiblePanels(accordionPanels);
+    if (!visiblePanels.length) {
+      return;
+    }
+
+    const expandedPanelId = getExpandedPanelId();
+    const expandedVisible = visiblePanels.find((panel) => getPanelId(panel) === expandedPanelId);
+
+    if (!initialStateSynced) {
+      initialStateSynced = true;
+      if (!expandedPanelId) {
+        const initiallyExpanded = visiblePanels.find(
+          (panel) => getPanelToggle(panel, toggleSelector)?.getAttribute('aria-expanded') === 'true',
+        );
+        setExpandedPanelId(getPanelId(initiallyExpanded || visiblePanels[0]));
+        return;
+      }
+    }
+
+    if (expandedVisible || expandedPanelId === '') {
+      applyExpandedPanelId(expandedPanelId);
+      return;
+    }
+
+    setExpandedPanelId(getPanelId(visiblePanels[0]));
+  }
+
+  appState?.subscribeProperty(APP_STATE_REMOTE_ACCORDION_EXPANDED_PANEL, ({value}) => {
+    applyExpandedPanelId(String(value || ''));
+  });
+
+  accordionPanels.forEach((panel) => {
+    const toggle = getPanelToggle(panel, toggleSelector);
+    if (!toggle) {
+      return;
+    }
+    toggle.addEventListener('click', () => {
+      const panelId = getPanelId(panel);
+      if (getExpandedPanelId() === panelId) {
+        setExpandedPanelId('');
+        return;
+      }
+      setExpandedPanelId(panelId);
+    });
+  });
+
+  if (typeof MutationObserver === 'function') {
+    const observer = new MutationObserver(() => {
+      ensureValidExpanded();
+    });
+
+    accordionPanels.forEach((panel) => {
+      observer.observe(panel, {
+        attributes: true,
+        attributeFilter: ['hidden'],
+      });
+    });
+  }
+
+  ensureValidExpanded();
+
+  return {
+    syncVisiblePanels: ensureValidExpanded,
+  };
+}

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

@@ -0,0 +1,13 @@
+import {bindBrowserRemoteButtons} from "./bindBrowserRemoteButtons.js";
+import {bindSystemRemoteButtons} from "./bindSystemRemoteButtons.js";
+import {bindSamsungRemoteButtons} from "./bindSamsungRemoteButtons.js";
+import {bindAdminRemoteButtons} from "./bindAdminRemoteButtons.js";
+import {bindVlcRemoteButtons} from "./bindVlcRemoteButtons.js";
+
+export function bindActionButtons(services, dom) {
+  bindBrowserRemoteButtons(services, dom);
+  bindSystemRemoteButtons(services, dom);
+  bindVlcRemoteButtons(services, dom);
+  bindSamsungRemoteButtons(services, dom);
+  bindAdminRemoteButtons(services, dom);
+}

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

@@ -0,0 +1,137 @@
+const EDGE_START_PX = 46;
+const SWIPE_OPEN_PX = 64;
+const SWIPE_CLOSE_PX = 54;
+const SWIPE_INTENT_PX = 12;
+const MAX_VERTICAL_DRIFT_PX = 44;
+
+export function bindAdminDrawer(_services, dom) {
+  const app = dom.app;
+  const touchpad = dom.remotes.mouse.touchpad;
+  const scrim = dom.adminDrawerScrim;
+  const adminPanel = dom.leftMenu;
+
+  if (!app || !touchpad) {
+    return;
+  }
+
+  let gesture = null;
+
+  function openDrawer() {
+    app.classList.add('admin-drawer-open');
+  }
+
+  function closeDrawer() {
+    app.classList.remove('admin-drawer-open');
+  }
+
+  function onTouchStart(event) {
+    if (event.touches.length !== 1) {
+      gesture = null;
+      return;
+    }
+
+    const t = event.touches[0];
+    const rect = touchpad.getBoundingClientRect();
+    const localX = t.clientX - rect.left;
+    const isOpen = app.classList.contains('admin-drawer-open');
+    const fromLeftEdge = localX >= 0 && localX <= EDGE_START_PX;
+
+    if (!isOpen && !fromLeftEdge) {
+      gesture = null;
+      return;
+    }
+
+    if (isOpen && !adminPanel?.contains(event.target)) {
+      gesture = null;
+      return;
+    }
+
+    if (!isOpen) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+
+    gesture = {
+      startX: t.clientX,
+      startY: t.clientY,
+      mode: isOpen ? 'close' : 'open',
+      cancelled: false,
+      engaged: !isOpen,
+    };
+  }
+
+  function onTouchMove(event) {
+    if (!gesture || gesture.cancelled || event.touches.length !== 1) {
+      return;
+    }
+
+    const t = event.touches[0];
+    const dx = t.clientX - gesture.startX;
+    const dy = t.clientY - gesture.startY;
+    if (Math.abs(dy) > MAX_VERTICAL_DRIFT_PX) {
+      gesture.cancelled = true;
+      return;
+    }
+
+    if (!gesture.engaged) {
+      const horizontalIntent = Math.abs(dx) >= SWIPE_INTENT_PX && Math.abs(dx) > Math.abs(dy);
+      const validDirection = gesture.mode === 'open' ? dx > 0 : dx < 0;
+
+      if (!horizontalIntent || !validDirection) {
+        return;
+      }
+
+      gesture.engaged = true;
+    }
+
+    event.preventDefault();
+    event.stopImmediatePropagation();
+
+    if (gesture.mode === 'open' && dx >= SWIPE_OPEN_PX) {
+      openDrawer();
+      gesture.cancelled = true;
+      return;
+    }
+
+    if (gesture.mode === 'close' && dx <= -SWIPE_CLOSE_PX) {
+      closeDrawer();
+      gesture.cancelled = true;
+    }
+  }
+
+  function onTouchEnd(event) {
+    if (gesture?.engaged) {
+      event?.preventDefault?.();
+      event?.stopImmediatePropagation?.();
+    }
+    gesture = null;
+  }
+
+  function onScrimClick() {
+    closeDrawer();
+  }
+
+  function onKeyDown(event) {
+    if (event.key === 'Escape') {
+      closeDrawer();
+    }
+  }
+
+  touchpad.addEventListener('touchstart', onTouchStart, { passive: false, capture: true });
+  touchpad.addEventListener('touchmove', onTouchMove, { passive: false, capture: true });
+  touchpad.addEventListener('touchend', onTouchEnd, { passive: false, capture: true });
+  touchpad.addEventListener('touchcancel', onTouchEnd, { passive: false, capture: true });
+
+  if (adminPanel) {
+    adminPanel.addEventListener('touchstart', onTouchStart, { passive: false, capture: true });
+    adminPanel.addEventListener('touchmove', onTouchMove, { passive: false, capture: true });
+    adminPanel.addEventListener('touchend', onTouchEnd, { passive: false, capture: true });
+    adminPanel.addEventListener('touchcancel', onTouchEnd, { passive: false, capture: true });
+  }
+
+  if (scrim) {
+    scrim.addEventListener('click', onScrimClick);
+    scrim.addEventListener('touchstart', onScrimClick, { passive: true });
+  }
+  window.addEventListener('keydown', onKeyDown);
+}

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

@@ -0,0 +1,77 @@
+import {emitWithTimestamp} from '../../../core/socket-emit.js';
+import {
+    REMOTE_EVENT_ADMIN_OPEN_QR_BROWSER_CLIENT,
+    REMOTE_EVENT_ADMIN_OPEN_QR_BROWSER_SERVER,
+    REMOTE_EVENT_ADMIN_OPEN_SERVER_INFO_BROWSER_CLIENT,
+    REMOTE_EVENT_ADMIN_OPEN_SERVER_INFO_BROWSER_SERVER,
+    REMOTE_EVENT_ADMIN_ROTATE_ENTRY_TOKEN,
+    REMOTE_EVENT_ADMIN_SERVICE_RESTART,
+    REMOTE_EVENT_ADMIN_TOGGLE_QR_OVERLAY,
+    REMOTE_EVENT_ADMIN_UPDATE_CHECK,
+    REMOTE_EVENT_ADMIN_UPDATE_INSTALL
+} from '../../../../utils/remoteCommands.js';
+
+export function bindAdminRemoteButtons(services, dom) {
+    const socket = services.getTransport();
+    const clientConfig = services.getClientConfig();
+    const getConfigView = services.getConfigView;
+    const {
+        btnForceUpdateCheck,
+        btnInstallUpdate,
+        btnRestartService,
+        btnOpenQrBrowserServer,
+        btnOpenQrBrowserClient,
+        btnToggleQrOverlay,
+        btnOpenServerInfoBrowserServer,
+        btnOpenServerInfoBrowserClient,
+        btnOpenConfigPage,
+        btnOpenPreferencesPage,
+        btnRotateEntryToken,
+        adminActionsDisabledMessage,
+    } = dom.remotes.admin;
+    const adminButtons = [
+        btnForceUpdateCheck,
+        btnInstallUpdate,
+        btnRestartService,
+        btnOpenQrBrowserServer,
+        btnOpenQrBrowserClient,
+        btnToggleQrOverlay,
+        btnOpenServerInfoBrowserServer,
+        btnOpenServerInfoBrowserClient,
+        btnOpenConfigPage,
+        btnRotateEntryToken,
+    ];
+    const emit = (eventName) => () => emitWithTimestamp(socket, eventName);
+
+    const syncAdminButtonsState = () => {
+        const {adminActionsEnabled = true} = getConfigView().getSystemConfig();
+        for (const button of adminButtons) {
+            if (!button) {
+                continue;
+            }
+            button.disabled = !adminActionsEnabled;
+            button.setAttribute('aria-disabled', adminActionsEnabled ? 'false' : 'true');
+        }
+
+        adminActionsDisabledMessage?.classList.toggle('hidden', adminActionsEnabled);
+    };
+
+    btnForceUpdateCheck.addEventListener('click', emit(REMOTE_EVENT_ADMIN_UPDATE_CHECK));
+    btnInstallUpdate.addEventListener('click', emit(REMOTE_EVENT_ADMIN_UPDATE_INSTALL));
+    btnRestartService.addEventListener('click', emit(REMOTE_EVENT_ADMIN_SERVICE_RESTART));
+    btnOpenQrBrowserServer.addEventListener('click', emit(REMOTE_EVENT_ADMIN_OPEN_QR_BROWSER_SERVER));
+    btnOpenQrBrowserClient.addEventListener('click', emit(REMOTE_EVENT_ADMIN_OPEN_QR_BROWSER_CLIENT));
+    btnToggleQrOverlay.addEventListener('click', emit(REMOTE_EVENT_ADMIN_TOGGLE_QR_OVERLAY));
+    btnOpenServerInfoBrowserServer.addEventListener('click', emit(REMOTE_EVENT_ADMIN_OPEN_SERVER_INFO_BROWSER_SERVER));
+    btnOpenServerInfoBrowserClient.addEventListener('click', emit(REMOTE_EVENT_ADMIN_OPEN_SERVER_INFO_BROWSER_CLIENT));
+    btnOpenConfigPage.addEventListener('click', () => {
+        window.location.href = '/ui/admin/config';
+    });
+    btnOpenPreferencesPage?.addEventListener('click', () => {
+        window.location.href = '/ui/admin/preferences';
+    });
+    btnRotateEntryToken.addEventListener('click', emit(REMOTE_EVENT_ADMIN_ROTATE_ENTRY_TOKEN));
+
+    syncAdminButtonsState();
+    clientConfig.onChange(syncAdminButtonsState);
+}

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

@@ -0,0 +1,27 @@
+export async function bindAdminVersion(services, dom) {
+  const versionNode = dom.remotes.admin.adminAppVersion;
+  const i18n = services.getI18n();
+
+  if (!versionNode) {
+    return;
+  }
+
+  async function refreshVersion() {
+    const {t} = i18n.getI18n();
+
+    try {
+      const response = await fetch('/health', { cache: 'no-store' });
+      const payload = await response.json();
+      const version = String(payload?.version || '').trim() || t('common.unknown');
+      versionNode.textContent = t('main.adminAppVersion').replace('--', version);
+    } catch (_error) {
+      versionNode.textContent = t('main.adminAppVersion').replace('--', t('common.unknown'));
+    }
+  }
+
+  i18n.onChange(() => {
+    void refreshVersion();
+  });
+
+  await refreshVersion();
+}

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

@@ -0,0 +1,119 @@
+import {emitWithTimestamp} from '../../../core/socket-emit.js';
+import {bindTouchPassthrough} from '../../../touch/bindTouchPassthrough.js';
+import {
+    REMOTE_EVENT_BROWSER_OPEN,
+    REMOTE_EVENT_KEYBOARD_KEY
+} from '../../../../utils/remoteCommands.js';
+
+export function bindBrowserRemoteButtons(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 {
+        browserLaunchers,
+        btnBrowserBack,
+        btnBrowserForward,
+        btnPrevTab,
+        btnNextTab,
+        btnNewTab,
+        btnCloseTab,
+        btnAddressBar,
+        btnHardReload,
+        btnFullscreen,
+        btnVideoPlayPause,
+        btnVideoMute,
+        btnVideoFullscreen,
+    } = dom.remotes.browser;
+    let launcherButtons = [];
+    const staticButtons = [
+        btnBrowserBack,
+        btnBrowserForward,
+        btnPrevTab,
+        btnNextTab,
+        btnNewTab,
+        btnCloseTab,
+        btnAddressBar,
+        btnHardReload,
+        btnFullscreen,
+        btnVideoPlayPause,
+        btnVideoMute,
+        btnVideoFullscreen,
+    ];
+    const emit = (payload = {}) => () => emitWithTimestamp(socket, REMOTE_EVENT_KEYBOARD_KEY, payload);
+    const emitBrowserOpen = (browserId) => () => emitWithTimestamp(socket, REMOTE_EVENT_BROWSER_OPEN, {browserId});
+
+    bindTouchPassthrough(staticButtons, touchpad);
+
+    function isBrowserRemoteEnabled() {
+        return getConfigView().getBrowserConfig().enabled !== false;
+    }
+
+    function isBrowserLauncherEnabled(browserId) {
+        return appState.get(`effective.browser.${browserId}.visible`);
+    }
+
+    async function loadBrowserLaunchers() {
+        if (!browserLaunchers) {
+            return;
+        }
+
+        browserLaunchers.textContent = '';
+        launcherButtons = [];
+
+        if (!isBrowserRemoteEnabled()) {
+            return;
+        }
+
+        try {
+            const payload = await backend.getAvailableBrowsers();
+            const browsers = Array.isArray(payload?.browsers) ? payload.browsers : [];
+
+            for (const browser of browsers) {
+                if (!browser?.id || browser.enabled === false || !isBrowserLauncherEnabled(browser.id)) {
+                    continue;
+                }
+
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.textContent = String(browser.shortLabel || browser.name || browser.id);
+                button.title = String(browser.name || browser.id);
+                button.setAttribute('aria-label', String(browser.name || browser.id));
+                button.dataset.browserId = browser.id;
+                button.addEventListener('click', emitBrowserOpen(browser.id));
+                browserLaunchers.appendChild(button);
+                launcherButtons.push(button);
+            }
+
+            if (launcherButtons.length > 0) {
+                bindTouchPassthrough(launcherButtons, touchpad);
+            }
+        } catch (_error) {
+            browserLaunchers.textContent = '';
+            launcherButtons = [];
+        }
+    }
+
+    void loadBrowserLaunchers();
+    clientConfig.onChange(() => {
+        void loadBrowserLaunchers();
+    });
+    appState.subscribeProperty('preferences.browserVisibility', () => {
+        void loadBrowserLaunchers();
+    });
+
+    btnBrowserBack.addEventListener('click', emit({key: 'left', modifiers: ['alt']}));
+    btnBrowserForward.addEventListener('click', emit({key: 'right', modifiers: ['alt']}));
+    btnPrevTab.addEventListener('click', emit({key: 'tab', modifiers: ['control', 'shift']}));
+    btnNextTab.addEventListener('click', emit({key: 'tab', modifiers: ['control']}));
+    btnNewTab.addEventListener('click', emit({key: 't', modifiers: ['control']}));
+    btnCloseTab.addEventListener('click', emit({key: 'w', modifiers: ['control']}));
+    btnAddressBar.addEventListener('click', emit({key: 'l', modifiers: ['control']}));
+    btnHardReload.addEventListener('click', emit({key: 'f5', modifiers: ['control']}));
+    btnFullscreen.addEventListener('click', emit({key: 'f11'}));
+    btnVideoPlayPause.addEventListener('click', emit({key: 'space'}));
+    btnVideoMute.addEventListener('click', emit({key: 'm'}));
+    btnVideoFullscreen.addEventListener('click', emit({key: 'f'}));
+}

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

@@ -0,0 +1,23 @@
+import {bindAccordion} from './bindAccordion.js';
+import {bindTouchPassthrough} from '../../../touch/bindTouchPassthrough.js';
+
+export function bindRemoteAccordion(services, dom) {
+  const {remotes} = dom;
+  const panels = [
+    remotes.browser.root,
+    remotes.samsung.root,
+    remotes.vlc.root,
+    remotes.system.root,
+  ];
+
+  bindTouchPassthrough(
+    panels
+      .filter(Boolean)
+      .map((panel) => panel.querySelector('.remote-panel-toggle')),
+    remotes.mouse.touchpad,
+  );
+
+  return bindAccordion(panels, {
+    appState: services.getAppState(),
+  });
+}