feat(v3.1.1): Spout and Syphon output over the GPU

The picture now goes straight to another application on the same machine —
Resolume, OBS, TouchDesigner, any Spout or Syphon receiver — with no window
capture, no plugin and no CPU copy. A hidden offscreen window renders the
visualizer and Electron hands over the GPU texture on every paint.

Verified end to end on Windows rather than assumed: the sender appears in
Spout's own registry under its configured name, delivers 30 frames a second
with none dropped at the configured rate, and disappears from the registry when
stopped. The self-test asserts all of that, including the frame count — a
sender that registers but never delivers would look perfectly healthy from the
outside while the receiver shows a frozen image.

Two things the documentation got wrong, both of which fail silently:

- texture-bridge types the handle as a number. Electron 43 gives
  { ntHandle: Buffer } on Windows and { ioSurface: Buffer } on macOS, and the
  two platforms need different sender calls. Wrong extraction produces no error
  at all, just a black frame at the receiver. That conversion is a pure module
  with its own tests, which is the only way macOS gets any coverage here.
- A handle beyond the safe integer range is rejected rather than silently
  rounded, since a rounded handle names a different object.

The texture is released on every path, including failures. A missed release
leaks a GPU resource per frame.

Audio capture now stays alive when this output is the only consumer. Otherwise a
receiver would get a picture that never reacts, with no visualizer window open
to explain why.

Linux gets a card that explains why the feature is absent and points at the OBS
browser source, rather than no card at all. Unlike Dynamic Lighting there is
somewhere useful to send people.

Also fixes a bug this work introduced and the self-test caught: an unescaped
apostrophe in an English translation stopped i18n.js parsing in the browser, so
the entire interface stayed untranslated — reported as 698 untranslated strings
when the cause was one character. Every source file is now parsed by the unit
suite, which turns a CI round trip into a few milliseconds locally.

808 unit tests, smoke PASS.

Author: CaYatur

ROADMAP.md

@@ -80,7 +80,7 @@ hands, and a row only moves up once it ships.
 | macOS build | v3.1.1 | Built in CI and verified structurally — Apple Silicon only, unsigned, and system audio needs a virtual device such as BlackHole. Not yet run on a Mac |
 | Linux build | v3.1.1 | AppImage and deb built in CI. The audio engine loads there; device enumeration is still unverified on a real desktop |
 | OpenRGB | v3.1.1 | Works and is covered by tests against a protocol-level server. Not yet driven against real hardware |
-| Spout / Syphon | v3.1.1 | Not started. Windows and macOS only — Linux has no equivalent and will not be offered a switch that does nothing |
+| Spout / Syphon | v3.1.1 | Sending, and verified end to end on Windows: the sender registers with Spout, 30 frames a second with none dropped, and deregisters on stop. Syphon shares the same code path but has never been run on a Mac. Not offered on Linux |
 | Per-app audio capture | v3.1.2 | Not started. Needs a native module on both Windows and macOS; the same API family gives macOS its missing system-audio loopback |
 | Comprehensive video export | v3.1.3 | Not started |
 | Broadcast layout editor | v3.1.4 | Not started |

src/admin/admin.js

@@ -444,6 +444,8 @@
         return window.SVScenePanels ? window.SVScenePanels.artnetPanel() : null;
       case 'openrgbpanel':
         return window.SVOpenRGBPanel ? window.SVOpenRGBPanel.panel() : null;
+      case 'texturepanel':
+        return window.SVTexturePanel ? window.SVTexturePanel.panel() : null;
       case 'autovjpanel':
         return window.SVAutoVJ ? window.SVAutoVJ.panel() : null;
       case 'timelinepanel':
@@ -2105,6 +2107,19 @@
         desc: 'Ayarlarınızda açık görünüyor ama Windows Dynamic Lighting yalnızca Windows üzerinde çalışır. Bu sistemde RGB aygıtları için OpenRGB veya Art-Net/DMX kullanın.',
         controls: [],
       },
+      {
+        /* Spout (Windows) / Syphon (macOS): goruntuyu ayni makinedeki
+           baska bir uygulamaya GPU uzerinden verir. Linux'ta yok, ama
+           kart yine cizilir: orada NEDEN olmadigini ve yerine ne
+           kullanilacagini soylemek, olmayan bir ayari aratmaktan iyidir. */
+        id: 'textureShare',
+        category: 'output',
+        icon: '🎬',
+        wide: true,
+        title: 'Spout / Syphon Çıkışı',
+        desc: 'Görüntüyü aynı bilgisayardaki başka bir uygulamaya GPU üzerinden verir: Resolume, OBS, TouchDesigner. Pencere yakalama ve eklenti gerekmez.',
+        controls: [{ type: 'texturepanel' }],
+      },
       {
         /* Windows'ta Dynamic Lighting'in YERINE degil YANINA: LampArray
            yalniz Windows'un tanidigi aygitlari surer, OpenRGB cok daha

src/admin/index.html

@@ -284,6 +284,7 @@ <h2 id="settingsTitle">Ayarlar</h2>
     <script src="clipdeck-panel.js"></script>
     <script src="../shared/lighting-render.js"></script>
     <script src="openrgb-panel.js"></script>
+    <script src="texture-panel.js"></script>
     <script src="perform-view.js"></script>
     <script src="analysis-panel.js"></script>
     <script src="transition-panel.js"></script>

src/admin/texture-panel.js

@@ -0,0 +1,161 @@
+'use strict';
+/* Spout / Syphon paneli.
+ *
+ * Protokolün adı platforma göre değişiyor (Windows'ta Spout, macOS'ta
+ * Syphon) ve kullanıcı hangisini aradığını bilmeli: alıcı uygulamada
+ * arayacağı menü öğesinin adı bu.
+ *
+ * Linux'ta özellik YOK. Ama kartı tümden gizlemiyoruz: burada gizlemek
+ * kullanıcıyı olmayan bir ayarı aramaya bırakır. Onun yerine neden
+ * olmadığı ve yerine ne kullanılacağı yazılı — Dynamic Lighting'den farkı
+ * bu, orada gidilecek bir yer yoktu.
+ */
+(function () {
+  const P = () => window.SVPanel;
+
+  let watching = false;
+  let state = { running: false, supported: null, protocol: '', frames: 0, dropped: 0, error: null, reason: null };
+  let senders = [];
+
+  function protocolName() {
+    if (state.protocol === 'syphon') return 'Syphon';
+    if (state.protocol === 'spout') return 'Spout';
+    const p = window.SV_PLATFORM || {};
+    if (p.isMac) return 'Syphon';
+    if (p.isWindows) return 'Spout';
+    return 'Spout / Syphon';
+  }
+
+  function panel() {
+    const el = P().el;
+    const cfg = P().cfg();
+    const t = cfg.textureShare;
+    const nodes = [];
+
+    if (!watching) {
+      watching = true;
+      window.api.onTextureStatus((s) => { state = s; });
+      window.api.textureStatus().then((s) => { state = s; }).catch(() => {});
+    }
+
+    /* Bu platformda hiç yoksa: sebebini ve alternatifini söyle, bitir. */
+    if (state.supported === false) {
+      nodes.push(el('div', {
+        class: 'settings-io-note',
+        text: 'Spout bir Windows, Syphon bir macOS teknolojisidir; bu sistemde ikisi de yok ve yerleşik bir eşdeğeri bulunmuyor. Görüntüyü başka bir uygulamaya vermek için Çıkış bölümündeki OBS tarayıcı kaynağını kullanın — o her platformda çalışır.',
+      }));
+      return el('div', { class: 'texture-panel' }, nodes);
+    }
+
+    const enable = el('input', {
+      type: 'checkbox',
+      onchange: async (e) => {
+        t.enabled = e.target.checked;
+        P().push(true);
+        try { state = await window.api.textureSync(); } catch {}
+        P().rerender();
+      },
+    });
+    enable.checked = !!t.enabled;
+    nodes.push(P().row(protocolName() + ' Çıkışı', el('label', { class: 'switch' }, [enable, el('span', { class: 'track' })])));
+
+    // --- Durum. Sayılar ayrı düğümlerde: birleşik metin çevrilemez. ---
+    const st = el('div', { class: 'studio-status ' + (state.running && !state.error ? 'ok' : state.error ? 'err' : '') });
+    if (state.running && !state.error) {
+      st.appendChild(el('span', { text: '✓ ' }));
+      st.appendChild(el('span', { text: 'Yayında' }));
+      st.appendChild(el('span', { class: 'st-sep', text: ' · ' }));
+      st.appendChild(el('span', { class: 'st-num', text: state.width + '×' + state.height }));
+      st.appendChild(el('span', { class: 'st-sep', text: ' · ' }));
+      st.appendChild(el('span', { class: 'st-num', text: String(state.frames || 0) + ' ' }));
+      st.appendChild(el('span', { text: 'kare' }));
+      if (state.dropped) {
+        st.appendChild(el('span', { class: 'st-sep', text: ' · ' }));
+        st.appendChild(el('span', { class: 'st-num', text: String(state.dropped) + ' ' }));
+        st.appendChild(el('span', { text: 'düşen' }));
+      }
+    } else if (state.error) {
+      st.appendChild(el('span', { text: '✕ ' }));
+      st.appendChild(el('span', { text: 'Hata' }));
+    } else {
+      st.appendChild(el('span', { text: 'Kapalı' }));
+    }
+    nodes.push(st);
+
+    if (!t.enabled) {
+      nodes.push(el('div', {
+        class: 'settings-io-note',
+        text: 'Açıldığında görüntü, aynı bilgisayardaki alıcı uygulamalara GPU üzerinden verilir: Resolume, OBS, TouchDesigner veya başka bir alıcı. Pencere yakalamaya, eklenti kurmaya ve CPU kopyasına gerek yok.',
+      }));
+      return el('div', { class: 'texture-panel' }, nodes);
+    }
+
+    /* Kaynak adı: alıcı uygulamada BU ad görünecek. */
+    nodes.push(P().row('Kaynak Adı', el('input', {
+      type: 'text',
+      value: t.name || 'CAYADEV Visualizer',
+      onchange: (e) => {
+        t.name = e.target.value.trim() || 'CAYADEV Visualizer';
+        P().push(true);
+        window.api.textureSync().catch(() => {});
+      },
+    })));
+
+    const sizes = [[1280, 720], [1920, 1080], [2560, 1440], [3840, 2160]];
+    const sizeSel = el('select', {
+      onchange: (e) => {
+        const [w, h] = e.target.value.split('x').map(Number);
+        t.width = w;
+        t.height = h;
+        P().push(true);
+        window.api.textureSync().catch(() => {});
+      },
+    });
+    for (const [w, h] of sizes) {
+      const v = w + 'x' + h;
+      const opt = el('option', { value: v, text: v });
+      if (Number(t.width) === w && Number(t.height) === h) opt.selected = true;
+      sizeSel.appendChild(opt);
+    }
+    nodes.push(P().row('Çözünürlük', sizeSel));
+
+    nodes.push(P().row('Kare Hızı', el('input', {
+      type: 'range', min: 10, max: 60, step: 1, value: t.fps || 60,
+      oninput: (e) => { t.fps = Number(e.target.value); P().push(false); },
+      onchange: () => { P().push(true); window.api.textureSync().catch(() => {}); },
+    })));
+
+    /* Aynı makinedeki kaynaklar: kullanıcının kendi göndericisini alıcı
+       tarafta göremediğinde ilk sorduğu şey "gerçekten yayında mı?" */
+    const refresh = el('button', { class: 'btn small', type: 'button', text: 'Kaynakları Listele' });
+    refresh.addEventListener('click', async () => {
+      try { senders = await window.api.textureSenders(); } catch { senders = []; }
+      try { state = await window.api.textureStatus(); } catch {}
+      P().rerender();
+    });
+    nodes.push(P().row('Bu Makinedeki Kaynaklar', refresh));
+
+    if (senders.length) {
+      const list = el('div', { class: 'orgb-devices' });
+      for (const s of senders) {
+        const mine = s.name === (t.name || 'CAYADEV Visualizer');
+        const row = el('div', { class: 'orgb-device' });
+        row.appendChild(el('span', { class: 'orgb-name', text: s.name }));
+        if (mine) row.appendChild(el('span', { class: 'orgb-meta', text: 'bu uygulama' }));
+        list.appendChild(row);
+      }
+      nodes.push(list);
+    }
+
+    nodes.push(el('div', {
+      class: 'settings-io-note',
+      text: 'Alıcı uygulamada yukarıdaki kaynak adını seçin. Görüntü, ana ekranınızın yapılandırmasıyla üretilir; ekranlarda pencere açık olmasa bile yayın sürer.',
+    }));
+
+    return el('div', { class: 'texture-panel' }, nodes);
+  }
+
+  const api = { panel, protocolName };
+  if (typeof window !== 'undefined') window.SVTexturePanel = api;
+  if (typeof module !== 'undefined' && module.exports) module.exports = api;
+})();

src/main/main.js

@@ -17,6 +17,7 @@ const streamServer = require('./stream-server');
 const oscServer = require('./osc-server');
 const artnet = require('./artnet');
 const openrgb = require('./openrgb');
+const textureShare = require('./texture-share');
 const presetsStore = require('./presets-store');
 const mediaUrl = require('../shared/media-url');
 const { serveMediaFile } = require('./media-file');
@@ -267,6 +268,11 @@ function meterWindow() {
 // Tüm görselleştirme pencerelerine mesaj yolla
 function sendToVisualizers(channel, payload) {
   for (const win of openWindows()) win.webContents.send(channel, payload);
+  /* Spout/Syphon penceresi görünmez ve visualizerWins içinde DEĞİL
+     (orası ekranlara ait). Ama aynı yapılandırmayı ve aynı ses
+     karelerini alması gerekiyor, yoksa donmuş bir kare yayınlar. */
+  const ts = textureShare.window();
+  if (ts) ts.webContents.send(channel, payload);
 }
 
 // İstenen ekran kimliklerini çöz (tek sayı, dizi veya boş kabul edilir)
@@ -456,6 +462,9 @@ function captureWanted() {
   return (
     anyVisualizerOpen() ||
     previewSubscribed ||
+    /* Hiçbir ekranda pencere olmasa bile Spout/Syphon çıkışı sesi
+       istiyor: aksi halde alıcı sessiz bir görüntü alır. */
+    !!textureShare.window() ||
     // Yalnızca yayın KATMANI ses karesi tüketir; tek başına bağlı bir mobil
     // kumanda yakalamayı ayakta tutmamalı (ses aygıtını boşuna meşgul eder).
     streamServer.overlayCount() > 0
@@ -770,6 +779,7 @@ ipcMain.on('update-config', (e, config) => {
   syncOscServer();
   syncArtnet();
   syncOpenRgb();
+  syncTextureShare();
   // Ses kaynağı değiştiyse yakalamayı yeniden başlat. Bu, görselleştirici kapalıyken
   // yalnızca panel önizlemesi dinliyor olsa da geçerlidir.
   syncCapture();
@@ -1176,6 +1186,22 @@ function syncArtnet() {
   });
 }
 
+function syncTextureShare() {
+  const t = (currentConfig && currentConfig.textureShare) || {};
+  if (!t.enabled) {
+    return textureShare.stop().then((st) => {
+      syncCapture();
+      return st;
+    });
+  }
+  return textureShare.start(t).then((st) => {
+    notifyAdmin('texture-share-status', st);
+    /* Pencere yeni açıldıysa yakalama gerekiyor olabilir. */
+    syncCapture();
+    return st;
+  });
+}
+
 function syncOpenRgb() {
   const o = (currentConfig && currentConfig.openrgb) || {};
   if (!o.enabled) return openrgb.stop().then(() => openrgb.status());
@@ -1211,6 +1237,9 @@ ipcMain.handle('artnet:sync', () => syncArtnet());
 ipcMain.handle('openrgb:status', () => openrgb.status());
 ipcMain.handle('openrgb:sync', () => syncOpenRgb());
 ipcMain.handle('openrgb:rescan', () => openrgb.rescan());
+ipcMain.handle('texture:status', () => textureShare.status());
+ipcMain.handle('texture:sync', () => syncTextureShare());
+ipcMain.handle('texture:senders', () => textureShare.listSenders());
 
 // ----------------------------------------------------------------------------
 // Medya katmanı: video dosyası seçimi
@@ -1632,6 +1661,7 @@ app.whenReady().then(async () => {
   syncOscServer().catch(() => {});
   syncArtnet().catch(() => {});
   syncOpenRgb().catch(() => {});
+  syncTextureShare().catch(() => {});
 
   // Ekran değişikliklerini admin'e bildir
   screen.on('display-added', () => notifyAdmin('displays-changed', getDisplayList()));
@@ -2634,6 +2664,10 @@ async function runSmoke() {
       /* OpenRGB de varsayılan kapalı: açılmazsa panelin bütün etiketleri
          DOM'a hiç girmez ve çevrilmemiş metin fark edilmeden çıkar. */
       c.openrgb.enabled = true;
+      /* Spout/Syphon paneli de varsayilan kapali. Linux'ta bu anahtar
+         hicbir sey yapmaz ama panel yine cizilir (orada NEDEN olmadigini
+         anlatan metin var) ve o metnin de cevrilmis olmasi gerekir. */
+      if (c.textureShare) c.textureShare.enabled = true;
       window.SVPanel.rerender();
       return 'açıldı';
     })()`);
@@ -2838,6 +2872,63 @@ async function runSmoke() {
     }
   }
 
+  /* Spout/Syphon paneli ciziliyor mu? Panel dizi dondurse ya da
+     yuklenmese kart tumuyle kaybolur ve konsolda tek satir hata kalir. */
+  const texPanel = await adminWin.webContents.executeJavaScript(`(function(){
+    if (!window.SVTexturePanel || !window.SVPanel) return JSON.stringify({ hata: 'panel yok' });
+    var c = window.SVPanel.cfg();
+    if (c.textureShare) c.textureShare.enabled = true;
+    window.SVPanel.rerender();
+    var n = window.SVTexturePanel.panel();
+    return JSON.stringify({
+      düğümTürü: (n && n.nodeType) || 0,
+      çocuk: (n && n.childNodes) ? n.childNodes.length : -1,
+      protokol: window.SVTexturePanel.protocolName(),
+    });
+  })()`);
+  console.log('[SMOKE] Spout/Syphon paneli: ' + texPanel);
+  {
+    const t = JSON.parse(texPanel);
+    if (t.hata) errors.push('texture-share: ' + t.hata);
+    else {
+      if (t.düğümTürü !== 1) errors.push('texture-share: the panel did not return a single element node');
+      if (!(t.çocuk > 2)) errors.push('texture-share: the panel drew almost nothing (' + t.çocuk + ' children)');
+      if (!/^(Spout|Syphon)/.test(t.protokol)) errors.push('texture-share: protocol name is wrong for this platform: ' + t.protokol);
+    }
+  }
+
+  /* Spout/Syphon: gerçekten yayında mı ve kare AKIYOR mu?
+     Gönderici kaydı görünüp kare akmazsa alıcı donmuş bir görüntü
+     alır ve her şey yolunda sanır — sessizce yanlış olan durum bu. */
+  {
+    const av = textureShare.available();
+    if (!av.ok) {
+      console.log('[SMOKE] Spout/Syphon: bu platformda yok (' + av.reason + ')');
+    } else {
+      currentConfig.textureShare = Object.assign({}, currentConfig.textureShare, {
+        enabled: true, name: 'CAYADEV Smoke', width: 640, height: 360, fps: 30,
+      });
+      await syncTextureShare();
+      await wait(3000);
+      const ts = textureShare.status();
+      const senders = textureShare.listSenders().map((x) => x.name);
+      const mine = senders.indexOf('CAYADEV Smoke') >= 0;
+      console.log('[SMOKE] Spout/Syphon: ' + JSON.stringify({
+        protokol: ts.protocol, kare: ts.frames, düşen: ts.dropped,
+        boyut: ts.width + 'x' + ts.height, kayıt: mine, hata: ts.error,
+      }));
+      if (!ts.running) errors.push('texture-share: did not start');
+      if (!mine) errors.push('texture-share: the sender is not registered with ' + ts.protocol);
+      if (!(ts.frames > 20)) errors.push('texture-share: only ' + ts.frames + ' frames in 3s — the receiver would see a frozen image');
+      if (ts.dropped > ts.frames / 10) errors.push('texture-share: dropped ' + ts.dropped + ' of ' + (ts.frames + ts.dropped) + ' frames');
+      const stopped = await textureShare.stop();
+      const after = textureShare.listSenders().map((x) => x.name);
+      if (after.indexOf('CAYADEV Smoke') >= 0) errors.push('texture-share: the sender stayed registered after stop');
+      if (stopped.running) errors.push('texture-share: still running after stop');
+      currentConfig.textureShare.enabled = false;
+    }
+  }
+
   /* OpenRGB paneli gerçekten çiziliyor mu ve mod listesini Dynamic
      Lighting ile PAYLAŞIYOR mu? İki ayrı liste olsaydı aynı mod iki
      kartta iki farklı adla görünürdü ve bunu kimse fark etmezdi. */

src/main/preload-admin.js

@@ -29,6 +29,10 @@ contextBridge.exposeInMainWorld('api', {
   openrgbStatus: () => ipcRenderer.invoke('openrgb:status'),
   openrgbSync: () => ipcRenderer.invoke('openrgb:sync'),
   openrgbRescan: () => ipcRenderer.invoke('openrgb:rescan'),
+  textureStatus: () => ipcRenderer.invoke('texture:status'),
+  textureSync: () => ipcRenderer.invoke('texture:sync'),
+  textureSenders: () => ipcRenderer.invoke('texture:senders'),
+  onTextureStatus: (cb) => ipcRenderer.on('texture-share-status', (e, d) => cb(d)),
   onOpenRgbStatus: (cb) => ipcRenderer.on('openrgb-status', (e, d) => cb(d)),
   applyLighting: (lighting) => ipcRenderer.invoke('lighting:apply', lighting),
   getLightingIdentityStatus: () => ipcRenderer.invoke('lighting:identity-status'),