pinokiod 8.2.27 → 8.2.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pinokiod",
-  "version": "8.2.27",
+  "version": "8.2.28",
   "description": "",
   "main": "index.js",
   "scripts": {

package/server/public/remote-nav.js

@@ -0,0 +1,84 @@
+(() => {
+  const trigger = document.querySelector('[data-remote-nav]')
+  if (!trigger || trigger.dataset.initialized) return
+  trigger.dataset.initialized = 'true'
+
+  let payload = null
+  let revision = 0
+  let inFlight = false
+  const labels = {
+    ready: 'Connected',
+    off: 'Off',
+    setup: 'Setup required',
+    starting: 'Connecting',
+    login: 'Sign-in required',
+    machine_auth: 'Device approval required',
+    https: 'HTTPS approval required',
+    error: 'Connection error'
+  }
+  const render = (data) => {
+    const phase = data && data.phase
+    const label = labels[phase] || 'Connection status unavailable'
+    const pending = ['starting', 'login', 'machine_auth', 'https', 'setup'].includes(phase)
+    trigger.dataset.remoteStatus = phase === 'ready' ? 'ready' : phase === 'error' ? 'error' : pending ? 'pending' : phase === 'off' ? 'off' : 'unknown'
+    const description = `Remote — ${label}`
+    trigger.setAttribute('title', description)
+    trigger.setAttribute('aria-label', description)
+    trigger.setAttribute('data-tippy-content', description)
+    if (trigger._tippy) trigger._tippy.setContent(description)
+
+    const tab = document.querySelector('[data-main-sidebar-anywhere-tab]')
+    const badge = document.querySelector('[data-main-sidebar-anywhere-status]')
+    if (!tab || !badge) return
+    tab.setAttribute('title', description)
+    tab.setAttribute('aria-label', description)
+    badge.hidden = !labels[phase] || phase === 'setup'
+    badge.textContent = phase === 'ready' ? 'ON' : phase === 'off' || phase === 'error' ? 'OFF' : '…'
+    badge.dataset.state = phase === 'ready' ? 'on' : 'off'
+  }
+  document.addEventListener('pinokio:anywhere-status', (event) => {
+    revision += 1
+    const detail = event.detail || {}
+    payload = detail.payload || detail
+    render(payload)
+  })
+
+  const refresh = async () => {
+    if (inFlight || document.hidden) return
+    inFlight = true
+    const requestRevision = revision
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 10000)
+    try {
+      const response = await fetch('/anywhere/status?light=1', { cache: 'no-store', signal: controller.signal })
+      if (!response.ok) throw new Error(`Remote status failed: ${response.status}`)
+      const data = await response.json()
+      if (revision === requestRevision) {
+        payload = data
+        render(payload)
+      }
+    } catch (_) {
+      if (revision === requestRevision) {
+        payload = {}
+        render(payload)
+      }
+    } finally {
+      clearTimeout(timeout)
+      inFlight = false
+    }
+  }
+  const init = () => {
+    if (payload) render(payload)
+    // The Remote page already polls and broadcasts its full status.
+    if (document.getElementById('anywhere-root')) return
+    refresh()
+    setInterval(refresh, 5000)
+    document.addEventListener('visibilitychange', refresh)
+    window.addEventListener('focus', refresh)
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true })
+  } else {
+    init()
+  }
+})()

package/server/views/partials/home_server_popover.ejs

@@ -21,3 +21,4 @@
     </div>
   </div>
 </div>
+<%- include('remote_nav_button') %>

package/server/views/partials/home_server_popover_assets.ejs

@@ -1,4 +1,54 @@
 <style>
+.remote-nav-button {
+  position: relative;
+  width: 40px;
+  height: 30px;
+  min-width: 40px;
+  min-height: 30px;
+  padding: 0;
+  border-radius: 9px;
+  box-sizing: border-box;
+}
+.remote-nav-button__icon {
+  position: relative;
+  display: inline-flex;
+  width: 18px;
+  height: 18px;
+}
+.remote-nav-button__icon::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  -webkit-mask: url('/remote-control.svg') center / contain no-repeat;
+  mask: url('/remote-control.svg') center / contain no-repeat;
+}
+.remote-nav-button__dot {
+  position: absolute;
+  top: -4px;
+  right: -5px;
+  width: 7px;
+  height: 7px;
+  border: 1.5px solid var(--home-page-nav-bg, #fff);
+  border-radius: 999px;
+  background: #9aa1ad;
+}
+.remote-nav-button[data-remote-status="ready"] .remote-nav-button__dot {
+  background: #2db45c;
+}
+.remote-nav-button[data-remote-status="pending"] .remote-nav-button__dot {
+  background: #d98b1f;
+}
+.remote-nav-button[data-remote-status="error"] .remote-nav-button__dot {
+  background: #cf4545;
+}
+.remote-nav-button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+body.dark .remote-nav-button__dot {
+  border-color: var(--home-page-nav-bg, #1b1c1d);
+}
 .home-server-popover {
   position: relative;
   display: inline-flex;
@@ -15,6 +65,8 @@
   border-radius: 9px;
   box-sizing: border-box;
 }
+.remote-nav-button:hover,
+.remote-nav-button:focus-visible,
 .home-server-popover__trigger:hover,
 .home-server-popover__trigger:focus-visible,
 .home-server-popover[data-home-server-open="true"] .home-server-popover__trigger {
@@ -512,6 +564,8 @@ body.dark .home-server-popover__panel {
   box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
   color: rgba(239, 242, 247, 0.92);
 }
+body.dark .remote-nav-button:hover,
+body.dark .remote-nav-button:focus-visible,
 body.dark .home-server-popover__trigger:hover,
 body.dark .home-server-popover__trigger:focus-visible,
 body.dark .home-server-popover[data-home-server-open="true"] .home-server-popover__trigger {
@@ -1265,3 +1319,4 @@ body.dark .home-server-popover__qr-close:focus-visible {
   })
 })()
 </script>
+<script src="/remote-nav.js"></script>

package/server/views/partials/main_sidebar.ejs

@@ -122,43 +122,6 @@
 
     initHomeServerStatusBadge();
 
-    const initAnywhereStatusBadge = () => {
-      if (!sidebar || window.__pinokioMainSidebarAnywhereStatusInit) return;
-      const tab = sidebar.querySelector("[data-main-sidebar-anywhere-tab]");
-      const badge = sidebar.querySelector("[data-main-sidebar-anywhere-status]");
-      if (!tab || !badge) return;
-      window.__pinokioMainSidebarAnywhereStatusInit = true;
-      const render = (data) => {
-        const phase = data && data.phase ? String(data.phase) : "off";
-        if (phase === "setup") {
-          badge.hidden = true;
-          delete badge.dataset.state;
-          return;
-        }
-        const on = phase === "ready";
-        const label = on ? "ON" : (phase === "off" || phase === "error" ? "OFF" : "…");
-        badge.textContent = label;
-        badge.hidden = false;
-        badge.dataset.state = on ? "on" : "off";
-        tab.setAttribute("title", `Remote ${label}`);
-      };
-      document.addEventListener("pinokio:anywhere-status", (event) => {
-        const detail = event && event.detail ? event.detail : {};
-        render(detail.payload || detail);
-      });
-      fetch("/anywhere/status?light=1", { cache: "no-store" })
-        .then((response) => {
-          if (!response.ok) throw new Error(`Anywhere status failed: ${response.status}`);
-          return response.json();
-        })
-        .then(render)
-        .catch(() => {
-          badge.hidden = true;
-          delete badge.dataset.state;
-        });
-    };
-    initAnywhereStatusBadge();
-
     if (body && sidebar && headerToggle && !headerToggle.dataset.mainSidebarHeaderToggle) {
       headerToggle.dataset.mainSidebarHeaderToggle = "true";
       headerToggle.classList.add("sidebar-toggle", "main-sidebar-header-toggle");

package/server/views/partials/remote_nav_button.ejs

@@ -0,0 +1,5 @@
+<a class="btn2 remote-nav-button" href="/anywhere" data-remote-nav data-remote-status="loading" data-tippy-content="Remote — Checking connection" title="Remote — Checking connection" aria-label="Remote — Checking connection">
+  <span class="remote-nav-button__icon" aria-hidden="true">
+    <span class="remote-nav-button__dot"></span>
+  </span>
+</a>

package/test/remote-nav-ui.test.js

@@ -0,0 +1,124 @@
+const assert = require('node:assert/strict')
+const fs = require('node:fs')
+const path = require('node:path')
+const test = require('node:test')
+const ejs = require('ejs')
+const { JSDOM } = require('jsdom')
+
+const root = path.resolve(__dirname, '..')
+const script = fs.readFileSync(path.join(root, 'server/public/remote-nav.js'), 'utf8')
+const render = (file, data = {}) => ejs.render(fs.readFileSync(file, 'utf8'), data, { filename: file })
+const tick = () => new Promise(resolve => setImmediate(resolve))
+
+async function harness(t, { remotePage = false, fetch } = {}) {
+  const header = render(path.join(root, 'server/views/partials/app_navheader.ejs'), { agent: 'electron' })
+  const sidebar = render(path.join(root, 'server/views/partials/main_sidebar.ejs'), { selected: 'home' })
+  const dom = new JSDOM(`<!doctype html><body>${header}${sidebar}${remotePage ? '<div id="anywhere-root"></div>' : ''}</body>`, {
+    url: 'http://localhost:42000/home', runScripts: 'outside-only', pretendToBeVisual: true
+  })
+  t.after(() => dom.window.close())
+  const state = { payload: { phase: 'ready', enabled: true }, requests: [], intervals: [] }
+  dom.window.fetch = async (...args) => {
+    state.requests.push(args)
+    return fetch ? fetch(...args) : { ok: true, json: async () => state.payload }
+  }
+  dom.window.setInterval = (callback, delay) => {
+    state.intervals.push({ callback, delay })
+    return state.intervals.length
+  }
+  await tick()
+  dom.window.eval(script)
+  await tick()
+  const document = dom.window.document
+  const trigger = document.querySelector('[data-remote-nav]')
+  const badge = document.querySelector('[data-main-sidebar-anywhere-status]')
+  const dispatch = (payload) => document.dispatchEvent(new dom.window.CustomEvent('pinokio:anywhere-status', { detail: { payload } }))
+  return { dom, document, state, trigger, badge, dispatch }
+}
+
+test('Remote links to the current-view page beside Home Server and shares live status with the sidebar', async t => {
+  const { document, state, trigger, badge, dispatch } = await harness(t)
+  assert.equal(document.querySelector('[data-home-server-popover]').nextElementSibling, trigger)
+  assert.equal(trigger.getAttribute('href'), '/anywhere')
+  assert.equal(trigger.getAttribute('target'), null)
+  assert.equal(trigger.dataset.remoteStatus, 'ready')
+  assert.equal(badge.textContent, 'ON')
+  assert.equal(state.requests.length, 1)
+  assert.equal(state.requests[0][0], '/anywhere/status?light=1')
+  assert.equal(state.requests[0][1].cache, 'no-store')
+
+  let tooltip
+  trigger._tippy = { setContent: value => { tooltip = value } }
+  const phases = [
+    ['off', 'off', 'Off', 'OFF'],
+    ['starting', 'pending', 'Connecting', '…'],
+    ['login', 'pending', 'Sign-in required', '…'],
+    ['machine_auth', 'pending', 'Device approval required', '…'],
+    ['https', 'pending', 'HTTPS approval required', '…'],
+    ['setup', 'pending', 'Setup required', '…'],
+    ['error', 'error', 'Connection error', 'OFF'],
+    ['ready', 'ready', 'Connected', 'ON']
+  ]
+  for (const [phase, status, label, badgeLabel] of phases) {
+    dispatch({ phase, enabled: true })
+    assert.equal(trigger.dataset.remoteStatus, status)
+    assert.equal(trigger.getAttribute('aria-label'), `Remote — ${label}`)
+    assert.equal(tooltip, `Remote — ${label}`)
+    assert.equal(badge.textContent, badgeLabel)
+    assert.equal(badge.hidden, phase === 'setup')
+    assert.equal(document.querySelector('[data-main-sidebar-anywhere-tab]').getAttribute('aria-label'), `Remote — ${label}`)
+  }
+})
+
+test('Remote status refreshes off-page, pauses when hidden, and recovers from a failed request', async t => {
+  let fail = false
+  const { dom, document, state, trigger, badge } = await harness(t, {
+    fetch: async () => {
+      if (fail) throw new Error('network unavailable')
+      return { ok: true, json: async () => ({ phase: 'off' }) }
+    }
+  })
+  assert.equal(state.intervals.length, 1)
+  assert.equal(state.intervals[0].delay, 5000)
+  fail = true
+  await state.intervals[0].callback()
+  assert.equal(trigger.dataset.remoteStatus, 'unknown')
+  assert.match(trigger.getAttribute('aria-label'), /status unavailable/)
+  assert.equal(badge.hidden, true)
+  Object.defineProperty(document, 'hidden', { configurable: true, value: true })
+  await state.intervals[0].callback()
+  assert.equal(state.requests.length, 2)
+  fail = false
+  Object.defineProperty(document, 'hidden', { configurable: true, value: false })
+  document.dispatchEvent(new dom.window.Event('visibilitychange'))
+  await tick()
+  assert.equal(trigger.dataset.remoteStatus, 'off')
+  assert.equal(badge.hidden, false)
+  assert.equal(badge.textContent, 'OFF')
+})
+
+test('an older status request cannot overwrite a Remote page action; duplicate initialization does not add polling', async t => {
+  let resolveResponse
+  const response = new Promise(resolve => { resolveResponse = resolve })
+  const { dom, state, trigger, dispatch } = await harness(t, { fetch: () => response })
+  await state.intervals[0].callback()
+  assert.equal(state.requests.length, 1)
+  dispatch({ phase: 'off' })
+  resolveResponse({ ok: true, json: async () => ({ phase: 'ready' }) })
+  await tick()
+  assert.equal(trigger.dataset.remoteStatus, 'off')
+  dom.window.eval(script)
+  assert.equal(state.intervals.length, 1)
+})
+
+test('the Remote page uses its existing status broadcasts without another poller', async t => {
+  const { state, trigger, badge, dispatch } = await harness(t, { remotePage: true })
+  assert.equal(state.requests.length, 0)
+  assert.equal(state.intervals.length, 0)
+  dispatch({ phase: 'ready' })
+  assert.equal(trigger.dataset.remoteStatus, 'ready')
+  assert.equal(badge.textContent, 'ON')
+  dispatch({ phase: 'login', enabled: true })
+  assert.equal(trigger.dataset.remoteStatus, 'pending')
+  assert.equal(badge.textContent, '…')
+})