Fix: Electron Screen-Picker nutzt jetzt temp-Datei statt data: URL
- data:text/html URLs werden in Electron BrowserWindows blockiert - Picker-HTML wird jetzt als temp-Datei geschrieben und via loadFile geladen - IPC-Kommunikation statt page-title-updated für die Source-Auswahl - nodeIntegration nur im Picker-Fenster aktiviert (nicht im Hauptfenster) - Temp-Datei wird nach Auswahl/Abbruch automatisch gelöscht Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel
parent
5f756a5404
commit
2a81bc216b
1 changed files with 58 additions and 29 deletions
|
|
@ -1,5 +1,7 @@
|
|||
const { app, BrowserWindow, session, shell, desktopCapturer, autoUpdater, dialog, ipcMain, Notification } = require('electron');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const os = require('os');
|
||||
const { setupAdBlocker } = require('./ad-blocker');
|
||||
|
||||
// Handle Squirrel events (Windows installer)
|
||||
|
|
@ -93,6 +95,9 @@ function createWindow() {
|
|||
setupAdBlocker(session.defaultSession);
|
||||
|
||||
// Enable screen capture (getDisplayMedia) in Electron — always show picker
|
||||
// IPC channel for picker result
|
||||
const PICKER_CHANNEL = 'screen-picker-result';
|
||||
|
||||
session.defaultSession.setDisplayMediaRequestHandler(async (_request, callback) => {
|
||||
const sources = await desktopCapturer.getSources({ types: ['screen', 'window'], thumbnailSize: { width: 320, height: 180 } });
|
||||
if (sources.length === 0) {
|
||||
|
|
@ -100,28 +105,14 @@ function createWindow() {
|
|||
return;
|
||||
}
|
||||
|
||||
// Build a picker window so the user always chooses
|
||||
const picker = new BrowserWindow({
|
||||
width: 680,
|
||||
height: 520,
|
||||
parent: mainWindow,
|
||||
modal: true,
|
||||
resizable: false,
|
||||
minimizable: false,
|
||||
maximizable: false,
|
||||
title: 'Bildschirm / Fenster ausw\u00e4hlen',
|
||||
backgroundColor: '#1a1b1e',
|
||||
autoHideMenuBar: true,
|
||||
webPreferences: { contextIsolation: true, nodeIntegration: false },
|
||||
});
|
||||
|
||||
const sourceData = sources.map(s => ({
|
||||
id: s.id,
|
||||
name: s.name,
|
||||
thumbnail: s.thumbnail.toDataURL(),
|
||||
}));
|
||||
|
||||
const html = `<!DOCTYPE html>
|
||||
// Write picker HTML to a temp file (data: URLs are blocked in Electron)
|
||||
const pickerHtml = `<!DOCTYPE html>
|
||||
<html><head><meta charset="utf-8"><style>
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
body{background:#1a1b1e;color:#e0e0e0;font-family:system-ui,sans-serif;padding:16px;overflow-y:auto}
|
||||
|
|
@ -135,32 +126,63 @@ h2{font-size:16px;margin-bottom:12px;color:#ccc}
|
|||
.cancel-btn{background:#3a3a4e;color:#e0e0e0;border:none;padding:8px 24px;border-radius:6px;cursor:pointer;font-size:14px}
|
||||
.cancel-btn:hover{background:#4a4a5e}
|
||||
</style></head><body>
|
||||
<h2>Bildschirm oder Fenster ausw\u00e4hlen</h2>
|
||||
<h2>Bildschirm oder Fenster w\\u00e4hlen</h2>
|
||||
<div class="grid" id="grid"></div>
|
||||
<div class="cancel-row"><button class="cancel-btn" onclick="choose(null)">Abbrechen</button></div>
|
||||
<div class="cancel-row"><button class="cancel-btn" id="cancelBtn">Abbrechen</button></div>
|
||||
<script>
|
||||
const sources = ${JSON.stringify(sourceData)};
|
||||
const grid = document.getElementById('grid');
|
||||
sources.forEach(s => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'item';
|
||||
div.innerHTML = '<img src="' + s.thumbnail + '"><div class="label">' + s.name.replace(/</g,'<') + '</div>';
|
||||
div.onclick = () => choose(s.id);
|
||||
const img = document.createElement('img');
|
||||
img.src = s.thumbnail;
|
||||
div.appendChild(img);
|
||||
const label = document.createElement('div');
|
||||
label.className = 'label';
|
||||
label.textContent = s.name;
|
||||
div.appendChild(label);
|
||||
div.addEventListener('click', () => {
|
||||
require('electron').ipcRenderer.send('${PICKER_CHANNEL}', s.id);
|
||||
});
|
||||
grid.appendChild(div);
|
||||
});
|
||||
function choose(id) {
|
||||
document.title = 'PICK:' + (id || '');
|
||||
}
|
||||
document.getElementById('cancelBtn').addEventListener('click', () => {
|
||||
require('electron').ipcRenderer.send('${PICKER_CHANNEL}', null);
|
||||
});
|
||||
</script></body></html>`;
|
||||
|
||||
picker.loadURL('data:text/html;charset=utf-8,' + encodeURIComponent(html));
|
||||
const tmpFile = path.join(os.tmpdir(), 'gaming-hub-screen-picker.html');
|
||||
fs.writeFileSync(tmpFile, pickerHtml, 'utf-8');
|
||||
|
||||
const picker = new BrowserWindow({
|
||||
width: 680,
|
||||
height: 520,
|
||||
parent: mainWindow,
|
||||
modal: true,
|
||||
resizable: false,
|
||||
minimizable: false,
|
||||
maximizable: false,
|
||||
title: 'Bildschirm / Fenster w\u00e4hlen',
|
||||
backgroundColor: '#1a1b1e',
|
||||
autoHideMenuBar: true,
|
||||
webPreferences: {
|
||||
contextIsolation: false,
|
||||
nodeIntegration: true,
|
||||
},
|
||||
});
|
||||
|
||||
picker.loadFile(tmpFile);
|
||||
|
||||
let resolved = false;
|
||||
picker.webContents.on('page-title-updated', (_ev, title) => {
|
||||
if (!title.startsWith('PICK:')) return;
|
||||
|
||||
const onPickerResult = (_event, selectedId) => {
|
||||
if (resolved) return;
|
||||
resolved = true;
|
||||
const selectedId = title.slice(5);
|
||||
ipcMain.removeListener(PICKER_CHANNEL, onPickerResult);
|
||||
picker.close();
|
||||
try { fs.unlinkSync(tmpFile); } catch {}
|
||||
|
||||
if (!selectedId) {
|
||||
callback({});
|
||||
return;
|
||||
|
|
@ -171,10 +193,17 @@ function choose(id) {
|
|||
} else {
|
||||
callback({});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
ipcMain.on(PICKER_CHANNEL, onPickerResult);
|
||||
|
||||
picker.on('closed', () => {
|
||||
if (!resolved) callback({});
|
||||
try { fs.unlinkSync(tmpFile); } catch {}
|
||||
if (!resolved) {
|
||||
resolved = true;
|
||||
ipcMain.removeListener(PICKER_CHANNEL, onPickerResult);
|
||||
callback({});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue