pinokiod 3.180.0 → 3.181.0

package/server/public/common.js

@@ -1462,10 +1462,56 @@ if (typeof hotkeys === 'function') {
   })
 }
 
+// Stable per-browser device identifier
+(function initPinokioDeviceId() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    const KEY = 'pinokio:device-id';
+    const gen = () => `${Date.now()}-${Math.random().toString(16).slice(2)}-${Math.random().toString(16).slice(2)}`;
+    const get = () => {
+      try {
+        let id = localStorage.getItem(KEY);
+        if (typeof id !== 'string' || id.length < 8) {
+          id = gen();
+          localStorage.setItem(KEY, id);
+        }
+        return id;
+      } catch (_) {
+        // Fallback when localStorage is unavailable
+        if (!window.__pinokioVolatileDeviceId) {
+          window.__pinokioVolatileDeviceId = gen();
+        }
+        return window.__pinokioVolatileDeviceId;
+      }
+    };
+    // Expose helpers
+    if (!window.PinokioGetDeviceId) {
+      window.PinokioGetDeviceId = get;
+    }
+    // Convenience alias
+    window.PinokioDeviceId = get();
+  } catch (_) {
+    // ignore
+  }
+})();
+
 (function initNotificationAudioBridge() {
   if (typeof window === 'undefined') {
     return;
   }
+  // Avoid duplicate audio playback: if this is the top-level layout page, or if the
+  // top window already owns notification playback, skip initialising this bridge.
+  try {
+    const isTop = window.top === window;
+    if (isTop && document.getElementById('layout-root')) {
+      return; // layout shell handles notifications
+    }
+    if (!isTop && window.top && window.top.__pinokioTopNotifyListener) {
+      return; // top-level listener active; avoid duplicates from iframes
+    }
+  } catch (_) {}
   if (window.__pinokioNotificationAudioInitialized) {
     return;
   }
@@ -1478,6 +1524,64 @@ if (typeof hotkeys === 'function') {
   let reconnectTimeout = null;
   let activeAudio = null;
 
+  // Lightweight visual indicator to confirm notification receipt (mobile-friendly)
+  let notifyIndicatorEl = null;
+  let notifyIndicatorStyleInjected = false;
+  const ensureNotifyIndicator = () => {
+    if (!notifyIndicatorStyleInjected) {
+      try {
+        const style = document.createElement('style');
+        style.textContent = `
+.pinokio-notify-indicator{position:fixed;top:12px;right:12px;z-index:2147483647;display:none;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(15,23,42,0.92);color:#fff;font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
+.pinokio-notify-indicator .bell{font-size:14px}
+.pinokio-notify-indicator.show{display:inline-flex;animation:pinokioNotifyPop 160ms ease-out, pinokioNotifyFade 1600ms ease-in 700ms forwards}
+@keyframes pinokioNotifyPop{from{transform:translateY(-6px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
+@keyframes pinokioNotifyFade{to{opacity:0;transform:translateY(-4px)}}
+@media (max-width: 768px){.pinokio-notify-indicator{top:10px;right:10px;padding:7px 9px;font-size:12px}}
+        `;
+        document.head.appendChild(style);
+        notifyIndicatorStyleInjected = true;
+      } catch (_) {}
+    }
+    if (!notifyIndicatorEl) {
+      try {
+        const el = document.createElement('div');
+        el.className = 'pinokio-notify-indicator';
+        const icon = document.createElement('span');
+        icon.className = 'bell';
+        icon.textContent = '🔔';
+        const text = document.createElement('span');
+        text.className = 'text';
+        text.textContent = 'Notification received';
+        el.appendChild(icon);
+        el.appendChild(text);
+        document.body.appendChild(el);
+        notifyIndicatorEl = el;
+      } catch (_) {}
+    }
+  };
+  const flashNotifyIndicator = (payload) => {
+    try {
+      ensureNotifyIndicator();
+      if (!notifyIndicatorEl) return;
+      const text = notifyIndicatorEl.querySelector('.text');
+      if (text) {
+        const msg = (payload && typeof payload.message === 'string' && payload.message.trim()) ? payload.message.trim() : 'Notification received';
+        // Keep it short on mobile
+        text.textContent = msg.length > 80 ? (msg.slice(0, 77) + '…') : msg;
+      }
+      // retrigger animation
+      notifyIndicatorEl.classList.remove('show');
+      // force reflow
+      void notifyIndicatorEl.offsetWidth;
+      notifyIndicatorEl.classList.add('show');
+      // Auto-hide handled by CSS animation; keep element for reuse
+      window.setTimeout(() => {
+        if (notifyIndicatorEl) notifyIndicatorEl.classList.remove('show');
+      }, 2600);
+    } catch (_) {}
+  };
+
   const leaderStorageKey = 'pinokio.notification.leader';
   const leaderHeartbeatMs = 5000;
   const leaderStaleMs = 15000;
@@ -1629,6 +1733,18 @@ if (typeof hotkeys === 'function') {
       return;
     }
     const payload = packet.data || {};
+    // If targeted to a specific device, ignore only when our id exists and mismatches
+    try {
+      const targetId = (typeof payload.device_id === 'string' && payload.device_id.trim()) ? payload.device_id.trim() : null;
+      if (targetId) {
+        const myId = (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : null;
+        if (myId && myId !== targetId) {
+          return;
+        }
+      }
+    } catch (_) {}
+    // Visual confirmation regardless of audio outcome (useful on mobile)
+    flashNotifyIndicator(payload);
     if (typeof payload.sound === 'string' && payload.sound) {
       enqueueSound(payload.sound);
     }
@@ -1696,6 +1812,7 @@ if (typeof hotkeys === 'function') {
         {
           method: CHANNEL_ID,
           mode: 'listen',
+          device_id: (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : undefined,
         },
         handlePacket
       );
@@ -1768,6 +1885,127 @@ if (typeof hotkeys === 'function') {
   // Attempt to become leader immediately on load.
   attemptLeadership();
 })();
+
+// Mobile "Tap to connect" curtain to prime audio on the top-level page
+(function initMobileConnectCurtain() {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return;
+  }
+  try {
+    if (window.__pinokioConnectCurtainInstalled || window.__pinokioConnectCurtainInstalling) {
+      return;
+    }
+  } catch (_) {}
+  try {
+    if (window.top && window.top !== window) {
+      return; // only top-level
+    }
+  } catch (_) {
+    // cross-origin parent; just bail
+    return;
+  }
+  if (window.__pinokioConnectCurtainInstalled) {
+    return;
+  }
+
+  const isLikelyMobile = () => {
+    try {
+      if (navigator.userAgentData && typeof navigator.userAgentData.mobile === 'boolean') {
+        if (navigator.userAgentData.mobile) return true;
+      }
+    } catch (_) {}
+    try {
+      const ua = (navigator.userAgent || '').toLowerCase();
+      if (/iphone|ipad|ipod|android|mobile/.test(ua)) return true;
+    } catch (_) {}
+    try {
+      if (navigator.maxTouchPoints && navigator.maxTouchPoints > 1) return true;
+    } catch (_) {}
+    try {
+      if (window.matchMedia && window.matchMedia('(pointer: coarse)').matches) return true;
+    } catch (_) {}
+    try {
+      if (window.matchMedia && window.matchMedia('(max-width: 900px)').matches) return true;
+    } catch (_) {}
+    return false;
+  };
+
+  const createCurtain = () => {
+    const style = document.createElement('style');
+    style.textContent = `
+.pinokio-connect-curtain{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2147483646;background:rgba(15,23,42,0.35);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}
+.pinokio-connect-msg{user-select:none;-webkit-user-select:none;color:#fff;background:rgba(15,23,42,0.85);padding:14px 18px;border-radius:12px;font:600 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;box-shadow:0 16px 40px rgba(0,0,0,.38)}
+@media (max-width:768px){.pinokio-connect-msg{font-size:15px;padding:12px 16px}}
+    `;
+    document.head.appendChild(style);
+
+    const overlay = document.createElement('div');
+    overlay.className = 'pinokio-connect-curtain';
+    overlay.setAttribute('role', 'button');
+    overlay.setAttribute('aria-label', 'Tap to connect');
+    overlay.tabIndex = 0;
+    const msg = document.createElement('div');
+    msg.className = 'pinokio-connect-msg';
+    msg.textContent = 'Tap to connect';
+    overlay.appendChild(msg);
+    window.__pinokioConnectCurtainInstalled = true;
+    return overlay;
+  };
+
+  const primeAudio = async () => {
+    try {
+      let a = window.__pinokioChimeAudio;
+      if (!a) {
+        a = new Audio('/chime.mp3');
+        a.preload = 'auto';
+        a.loop = false;
+        a.muted = false;
+        window.__pinokioChimeAudio = a;
+      }
+      a.currentTime = 0;
+      await a.play(); // must be called synchronously in gesture handler
+      try { a.pause(); a.currentTime = 0; } catch (_) {}
+      try { window.__pinokioAudioArmed = true; } catch (_) {}
+      return true;
+    } catch (_) {
+      try { window.__pinokioAudioArmed = true; } catch (_) {}
+      return false;
+    }
+  };
+
+  const setup = () => {
+    let forceParam = false;
+    try {
+      const usp = new URLSearchParams(window.location.search);
+      forceParam = usp.has('connect') || usp.get('connect') === '1';
+    } catch (_) {}
+    if (!(forceParam || isLikelyMobile())) {
+      return;
+    }
+    if (window.__pinokioConnectCurtainInstalled || window.__pinokioConnectCurtainInstalling) {
+      return;
+    }
+    try { window.__pinokioConnectCurtainInstalling = true; } catch (_) {}
+    const overlay = createCurtain();
+    let handled = false;
+    const onTap = async (e) => {
+      if (handled) return;
+      handled = true;
+      try { e.preventDefault(); e.stopPropagation(); } catch (_) {}
+      try { await primeAudio(); } catch (_) {}
+      try { overlay.remove(); } catch (_) {}
+      try { window.__pinokioConnectCurtainInstalled = true; window.__pinokioConnectCurtainInstalling = false; } catch (_) {}
+    };
+    overlay.addEventListener('pointerdown', onTap, { once: true, capture: true });
+    document.body.appendChild(overlay);
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setup, { once: true });
+  } else {
+    setup();
+  }
+})();
 const refreshParent = (e) => {
   let dispatched = false;
   if (typeof window !== 'undefined' && typeof window.PinokioBroadcastMessage === 'function') {
@@ -1967,6 +2205,12 @@ document.addEventListener("DOMContentLoaded", () => {
   }
   if (document.querySelector("#refresh-page")) {
     document.querySelector("#refresh-page").addEventListener("click", (e) => {
+      try {
+        const headerEl = document.querySelector("header.navheader");
+        const isMinimized = !!(headerEl && headerEl.classList.contains("minimized"));
+        const key = `pinokio:header-restore-once:${location.pathname}`;
+        sessionStorage.setItem(key, isMinimized ? "1" : "0");
+      } catch (_) {}
       location.reload()
       /*
       let browserview = document.querySelector(".browserview")

package/server/public/layout.js

@@ -790,4 +790,118 @@
   };
 
   window.PinokioLayout = api;
+  // Mobile "Tap to connect" curtain is centralized in common.js to avoid duplicates
+  
+  // Top-level notification listener (indicator + optional chime) for mobile
+  (function initTopLevelNotificationListener() {
+    try { if (window.top && window.top !== window) return; } catch (_) { return; }
+    if (window.__pinokioTopNotifyListener) {
+      return;
+    }
+    window.__pinokioTopNotifyListener = true;
+
+    const ensureIndicator = (() => {
+      let el = null;
+      let styleInjected = false;
+      return () => {
+        if (!styleInjected) {
+          const style = document.createElement('style');
+          style.textContent = `
+.pinokio-notify-indicator{position:fixed;top:12px;right:12px;z-index:2147483647;display:none;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(15,23,42,0.92);color:#fff;font:600 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,0.35)}
+.pinokio-notify-indicator .bell{font-size:14px}
+.pinokio-notify-indicator.show{display:inline-flex;animation:pinokioNotifyPop 160ms ease-out, pinokioNotifyFade 1600ms ease-in 700ms forwards}
+@keyframes pinokioNotifyPop{from{transform:translateY(-6px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
+@keyframes pinokioNotifyFade{to{opacity:0;transform:translateY(-4px)}}
+@media (max-width: 768px){.pinokio-notify-indicator{top:10px;right:10px;padding:7px 9px;font-size:12px}}
+          `;
+          document.head.appendChild(style);
+          styleInjected = true;
+        }
+        if (!el) {
+          el = document.createElement('div');
+          el.className = 'pinokio-notify-indicator';
+          const icon = document.createElement('span');
+          icon.className = 'bell';
+          icon.textContent = '🔔';
+          const text = document.createElement('span');
+          text.className = 'text';
+          text.textContent = 'Notification received';
+          el.appendChild(icon);
+          el.appendChild(text);
+          document.body.appendChild(el);
+        }
+        return el;
+      };
+    })();
+
+    const flashIndicator = (message) => {
+      const node = ensureIndicator();
+      const text = node.querySelector('.text');
+      if (text) {
+        const msg = (message && typeof message === 'string' && message.trim()) ? message.trim() : 'Notification received';
+        text.textContent = msg.length > 80 ? (msg.slice(0,77) + '…') : msg;
+      }
+      node.classList.remove('show');
+      void node.offsetWidth;
+      node.classList.add('show');
+      setTimeout(() => node.classList.remove('show'), 2400);
+    };
+
+    const tryPlay = (url) => {
+      try {
+        const src = (typeof url === 'string' && url) ? url : '/chime.mp3';
+        let a = window.__pinokioChimeAudio;
+        if (!a) {
+          a = new Audio(src);
+          a.preload = 'auto';
+          a.loop = false;
+          a.muted = false;
+          window.__pinokioChimeAudio = a;
+        } else {
+          try { if (a.src && !a.src.endsWith(src)) a.src = src; } catch (_) {}
+        }
+        try { a.currentTime = 0; } catch (_) {}
+        const p = a.play();
+        if (p && typeof p.catch === 'function') { p.catch(() => {}); }
+        if (typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function') {
+          try { navigator.vibrate(80); } catch (_) {}
+        }
+      } catch (_) {}
+    };
+
+    const listen = () => {
+      const SocketCtor = typeof window.Socket === 'function' ? window.Socket : (typeof Socket === 'function' ? Socket : null);
+      if (!SocketCtor || typeof WebSocket === 'undefined') {
+        return;
+      }
+      const socket = new SocketCtor();
+      try {
+        socket.run({ method: 'kernel.notifications', mode: 'listen', device_id: (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : undefined }, (packet) => {
+          if (!packet || packet.id !== 'kernel.notifications' || packet.type !== 'notification') {
+            return;
+          }
+          const payload = packet.data || {};
+          // If targeted to a specific device, ignore only when our id exists and mismatches
+          try {
+            const targetId = (typeof payload.device_id === 'string' && payload.device_id.trim()) ? payload.device_id.trim() : null;
+            if (targetId) {
+              const myId = (typeof window.PinokioGetDeviceId === 'function') ? window.PinokioGetDeviceId() : null;
+              if (myId && myId !== targetId) return;
+            }
+          } catch (_) {}
+          flashIndicator(payload.message);
+          tryPlay(payload.sound);
+        }).then(() => {
+          // socket closed; ignore
+        }).catch(() => {});
+        window.__pinokioTopNotifySocket = socket;
+      } catch (_) {}
+    };
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', listen, { once: true });
+    } else {
+      listen();
+    }
+  })();
 })();