pinokiod 8.2.25 → 8.2.26

package/package.json

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

package/server/views/anywhere.ejs

@@ -49,6 +49,14 @@ body.dark .anywhere-card { border-color: rgba(255,255,255,0.1); background: rgba
 }
 body.dark .anywhere-address { background: rgba(255,255,255,0.08); }
 .anywhere-address a { color: inherit; text-decoration: none; }
+.anywhere-copy { min-height: 44px; }
+.anywhere-copy:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
+.anywhere-copy-manual { width: 100%; min-width: 0; }
+.anywhere-copy-manual input {
+  box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px;
+  font-size: 16px; color: inherit; background: transparent; border: 1px solid currentColor;
+  border-radius: 8px; user-select: text; -webkit-user-select: text;
+}
 .anywhere-btn {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer;
@@ -201,6 +209,11 @@ document.addEventListener('DOMContentLoaded', function() {
               <div class='anywhere-qr'>
                 <img id='anywhere-qr' alt='QR code to connect' src=''>
                 <div class='anywhere-address'><a id='anywhere-address' href='#' target='_blank' rel='noopener'></a></div>
+                <button type='button' class='anywhere-btn secondary anywhere-copy' id='anywhere-copy' disabled><i class='fa-regular fa-copy' aria-hidden='true'></i> Copy URL</button>
+                <div id='anywhere-copy-status' class='anywhere-muted' role='status' aria-live='polite'></div>
+                <div id='anywhere-copy-manual' class='anywhere-copy-manual' hidden>
+                  <input id='anywhere-copy-value' type='text' readonly aria-label='Remote URL' aria-describedby='anywhere-copy-status'>
+                </div>
                 <div class='anywhere-muted'>signed in as <b id='anywhere-account'></b></div>
                 <div class='anywhere-waiting' id='anywhere-waiting'><i class="fa-solid fa-circle-notch fa-spin"></i> Waiting for another device to join…</div>
               </div>
@@ -254,8 +267,54 @@ document.addEventListener('DOMContentLoaded', function() {
   const switchEl = document.getElementById('anywhere-switch')
   const switchLabel = document.getElementById('anywhere-switch-label')
   const agent = document.body.getAttribute('data-agent')
+  const copyButton = document.getElementById('anywhere-copy')
+  const copyStatus = document.getElementById('anywhere-copy-status')
+  const copyManual = document.getElementById('anywhere-copy-manual')
+  const copyValue = document.getElementById('anywhere-copy-value')
   let current = <%- JSON.stringify(status || {}).replace(/</g, '\\u003c') %>
   let busy = false
+  let copying = false
+
+  copyButton.addEventListener('click', async () => {
+    const url = current.address
+    if (copying || current.phase !== 'ready' || !url) return
+    const previousFocus = document.activeElement
+    copying = true
+    copyButton.disabled = true
+    copyStatus.textContent = 'Copying…'
+    const stillCurrent = () => current.phase === 'ready' && current.address === url
+    let copied = false
+    try {
+      // Call directly from the click: Safari requires a user gesture.
+      if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+        await navigator.clipboard.writeText(url)
+        copied = true
+      }
+    } catch (_) { /* Try selection-based copying when clipboard access is denied. */ }
+    if (stillCurrent()) {
+      if (!copied) {
+        copyValue.value = url
+        copyManual.hidden = false
+        copyStatus.textContent = 'Automatic copy is unavailable. Touch and hold the URL to copy it, or press Ctrl+C / ⌘C.'
+        try {
+          copyValue.focus({ preventScroll: true })
+          copyValue.select()
+          copyValue.setSelectionRange(0, url.length)
+          copied = document.execCommand('copy') === true
+        } catch (_) { /* Leave the visible URL available for manual copying. */ }
+      }
+      if (copied) {
+        copyManual.hidden = true
+        copyStatus.textContent = 'URL copied.'
+      }
+    }
+    copying = false
+    copyButton.disabled = current.phase !== 'ready' || !current.address
+    if (copied && stillCurrent() && previousFocus &&
+        (document.activeElement === copyValue || document.activeElement === document.body)) {
+      previousFocus.focus({ preventScroll: true })
+    }
+  })
 
   const esc = (value) => String(value == null ? '' : value).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]))
   const openExternal = (href) => {
@@ -292,7 +351,12 @@ document.addEventListener('DOMContentLoaded', function() {
   }
 
   const render = (status) => {
+    if (current.address !== (status || {}).address || current.phase !== (status || {}).phase) {
+      copyManual.hidden = true
+      copyStatus.textContent = ''
+    }
     current = status || {}
+    copyButton.disabled = copying || current.phase !== 'ready' || !current.address
     const phase = current.phase && current.phase !== 'setup' ? current.phase : 'starting'
     const on = !!current.enabled && phase !== 'off' && phase !== 'setup'
     switchEl.dataset.on = on ? 'true' : 'false'

package/test/anywhere-clipboard.test.js

@@ -0,0 +1,184 @@
+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, VirtualConsole } = require('jsdom')
+
+const filename = path.resolve(__dirname, '../server/views/anywhere.ejs')
+const template = fs.readFileSync(filename, 'utf8')
+const address = 'https://pinokio-1.tail123.ts.net'
+const tick = () => new Promise((resolve) => setImmediate(resolve))
+
+function createHarness(t, options = {}) {
+  const state = { status: { phase: 'ready', enabled: true, address }, timers: [], opened: [] }
+  Object.assign(state.status, options.status)
+  const html = ejs.render(template, {
+    theme: 'light', agent: options.agent || 'browser', status: state.status
+  }, { filename, includer: () => ({ template: ' ' }) })
+  const virtualConsole = new VirtualConsole()
+  virtualConsole.on('jsdomError', (error) => { throw error })
+  const dom = new JSDOM(html, {
+    url: options.origin || 'http://127.0.0.1:42000/',
+    runScripts: 'dangerously', pretendToBeVisual: true, virtualConsole,
+    beforeParse(window) {
+      if (options.clipboard) {
+        Object.defineProperty(window.navigator, 'clipboard', { value: options.clipboard })
+      }
+      window.document.execCommand = options.execCommand
+      window.setTimeout = (callback, delay) => state.timers.push({ callback, delay })
+      window.fetch = async (url) => {
+        assert.equal(url, '/anywhere/status', 'copying must not use the server clipboard')
+        return { ok: true, json: async () => ({ ...state.status }) }
+      }
+      window.open = (...args) => state.opened.push(args)
+    }
+  })
+  t.after(() => dom.window.close())
+  const document = dom.window.document
+  return {
+    state, document,
+    button: document.getElementById('anywhere-copy'),
+    feedback: document.getElementById('anywhere-copy-status'),
+    manual: document.getElementById('anywhere-copy-manual'),
+    input: document.getElementById('anywhere-copy-value'),
+    poll: () => state.timers.shift().callback()
+  }
+}
+
+for (const agent of ['browser', 'electron']) {
+  test(`Remote copies the full URL directly from the ${agent} click without opening a window`, async (t) => {
+    const copied = []
+    const h = createHarness(t, {
+      agent,
+      clipboard: { writeText: async (text) => { copied.push(text) } },
+      execCommand: () => assert.fail('modern clipboard succeeded')
+    })
+    h.button.focus()
+    h.button.click()
+    assert.deepEqual(copied, [address], 'clipboard is invoked synchronously in the click')
+    assert.equal(h.button.disabled, true)
+    h.button.click()
+    await tick()
+    assert.deepEqual(copied, [address], 'pending copies are not duplicated')
+    assert.equal(h.feedback.textContent, 'URL copied.')
+    assert.equal(h.manual.hidden, true)
+    assert.equal(h.button.disabled, false)
+    assert.equal(h.document.activeElement, h.button)
+    assert.deepEqual(h.state.opened, [])
+    assert.equal(h.document.getElementById('anywhere-address').getAttribute('href'), address)
+    assert.equal(h.feedback.getAttribute('role'), 'status')
+    if (agent === 'electron') {
+      h.document.getElementById('anywhere-address').click()
+      assert.deepEqual(h.state.opened, [[address + '/', '_blank', 'browser']])
+    }
+  })
+}
+
+for (const scenario of ['insecure LAN', 'denied', 'synchronous failure', 'electron']) {
+  test(`Remote falls back to selected text copying: ${scenario}`, async (t) => {
+    const copied = []
+    let h
+    h = createHarness(t, {
+      agent: scenario === 'electron' ? 'electron' : 'browser',
+      origin: scenario === 'insecure LAN' ? 'http://192.168.1.10:42000/' : 'https://pinokio.tail123.ts.net/',
+      clipboard: scenario === 'denied'
+        ? { writeText: async () => { throw new Error('NotAllowedError') } }
+        : scenario === 'synchronous failure'
+          ? { writeText: () => { throw new Error('clipboard unavailable') } }
+          : undefined,
+      execCommand(command) {
+        assert.equal(command, 'copy')
+        assert.equal(h.document.activeElement, h.input)
+        assert.equal(h.input.readOnly, true)
+        assert.equal(h.manual.hidden, false)
+        copied.push(h.input.value.slice(h.input.selectionStart, h.input.selectionEnd))
+        return true
+      }
+    })
+    h.button.focus()
+    h.button.click()
+    await tick()
+    assert.deepEqual(copied, [address])
+    assert.equal(h.feedback.textContent, 'URL copied.')
+    assert.equal(h.manual.hidden, true)
+    assert.equal(h.document.activeElement, h.button)
+    assert.deepEqual(h.state.opened, [])
+  })
+}
+
+for (const failure of ['false', 'undefined', 'throws', 'unavailable']) {
+  test(`Remote offers selected manual copy without false success when execCommand ${failure}`, async (t) => {
+    const h = createHarness(t, {
+      clipboard: { writeText: async () => { throw new Error('denied') } },
+      execCommand: failure === 'unavailable' ? undefined : () => {
+        if (failure === 'throws') throw new Error('denied')
+        return failure === 'false' ? false : undefined
+      }
+    })
+    h.button.click()
+    await tick()
+    assert.equal(h.manual.hidden, false)
+    assert.equal(h.input.value, address)
+    assert.equal(h.input.selectionStart, 0)
+    assert.equal(h.input.selectionEnd, address.length)
+    assert.equal(h.document.activeElement, h.input)
+    assert.match(h.feedback.textContent, /Touch and hold.*Ctrl\+C \/ ⌘C/)
+    assert.doesNotMatch(h.feedback.textContent, /URL copied/)
+    assert.equal(h.button.disabled, false)
+    await h.poll()
+    assert.equal(h.manual.hidden, false, 'routine polling preserves the manual copy field')
+    assert.equal(h.input.selectionEnd, address.length)
+    h.state.status.address = 'https://renamed.tail123.ts.net'
+    await h.poll()
+    assert.equal(h.manual.hidden, true, 'a changed URL clears the stale manual field')
+    assert.equal(h.feedback.textContent, '')
+  })
+}
+
+test('Remote does not copy a placeholder or an unavailable address', async (t) => {
+  const h = createHarness(t, {
+    status: { address: '' },
+    clipboard: { writeText: () => assert.fail('no URL to copy') },
+    execCommand: () => assert.fail('no URL to copy')
+  })
+  assert.equal(h.button.disabled, true)
+  h.button.click()
+  await tick()
+  assert.equal(h.feedback.textContent, '')
+  h.state.status.address = address
+  await h.poll()
+  assert.equal(h.button.disabled, false)
+  h.state.status.phase = 'off'
+  await h.poll()
+  assert.equal(h.button.disabled, true)
+})
+
+test('Remote restores keyboard focus after disabling the button during modern copy', async (t) => {
+  let h
+  h = createHarness(t, {
+    clipboard: { writeText: async () => { h.button.blur() } }
+  })
+  h.button.focus()
+  h.button.click()
+  await tick()
+  assert.equal(h.document.activeElement, h.button)
+})
+
+test('Remote ignores a pending copy result if the address changes or Remote stops', async (t) => {
+  for (const change of [{ address: 'https://new.tail123.ts.net' }, { phase: 'off' }]) {
+    let rejectCopy
+    const h = createHarness(t, {
+      clipboard: { writeText: () => new Promise((resolve, reject) => { rejectCopy = reject }) },
+      execCommand: () => assert.fail('must not select a stale URL')
+    })
+    h.button.click()
+    Object.assign(h.state.status, change)
+    await h.poll()
+    rejectCopy(new Error('denied'))
+    await tick()
+    assert.equal(h.manual.hidden, true)
+    assert.equal(h.feedback.textContent, '')
+    assert.equal(h.button.disabled, change.phase === 'off')
+  }
+})