CringeStudios/element-desktop
5
0
Fork 0
mirror of https://github.com/CringeStudios/element-desktop.git synced 2025-01-31 13:39:58 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Some improvements

Browse Source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2020-12-25 16:24:21 +01:00
parent 353f5b35df
commit a36321b697
No known key found for this signature in database
GPG Key ID: 9760693FDD98A790
1 changed files with 48 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/preload.js
View File

@ -23,6 +23,7 @@ window.ipcRenderer = ipcRenderer;
window.navigator.mediaDevices.getDisplayMedia = () => { window.navigator.mediaDevices.getDisplayMedia = () => {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
try { try {
// Get screen-sharing sources
const sources = await desktopCapturer.getSources({ const sources = await desktopCapturer.getSources({
types: ["screen", "window"], types: ["screen", "window"],
}); });
@ -32,16 +33,15 @@ window.navigator.mediaDevices.getDisplayMedia = () => {
const windows = sources.filter((source) => { const windows = sources.filter((source) => {
return source.id.startsWith("window"); return source.id.startsWith("window");
}); });
console.log(screens);
console.log(windows);
const selectionElem = document.createElement("div"); const streamSelector = document.createElement("div");
selectionElem.classList = "desktop-capturer-selection"; streamSelector.classList = "stream-selector";
selectionElem.innerHTML = ` streamSelector.innerHTML = `
<h1>Screens</h1>
<div class="desktop-capturer-selection-scroller"> <div class="desktop-capturer-selection-scroller">
<ul class="desktop-capturer-selection-list"> <ul class="desktop-capturer-selection-list">
${ ${
sources.map(({ screens.map(({
id, id,
name, name,
thumbnail, thumbnail,
@ -50,9 +50,28 @@ window.navigator.mediaDevices.getDisplayMedia = () => {
}) => ` }) => `
<li class="desktop-capturer-selection-item"> <li class="desktop-capturer-selection-item">
<button class="desktop-capturer-selection-button" data-id="${id}" title="${name}"> <button class="desktop-capturer-selection-button" data-id="${id}" title="${name}">
<img class="desktop-capturer-selection-thumbnail" src="${ <img class="desktop-capturer-selection-thumbnail" src="${thumbnail.toDataURL()}"/>
thumbnail.toDataURL() <span class="desktop-capturer-selection-name">${name}</span>
}" /> </button>
</li>
`).join("")
}
</ul>
</div>
<h1>Windows</h1>
<div class="desktop-capturer-selection-scroller">
<ul class="desktop-capturer-selection-list">
${
windows.map(({
id,
name,
thumbnail,
displayId,
appIcon,
}) => `
<li class="desktop-capturer-selection-item">
<button class="desktop-capturer-selection-button" data-id="${id}" title="${name}">
<img class="desktop-capturer-selection-thumbnail" src="${thumbnail.toDataURL()}"/>
<span class="desktop-capturer-selection-name">${name}</span> <span class="desktop-capturer-selection-name">${name}</span>
</button> </button>
</li> </li>
@ -62,18 +81,19 @@ window.navigator.mediaDevices.getDisplayMedia = () => {
</div> </div>
<style> <style>
.desktop-capturer-selection { .stream-selector {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: rgba(30,30,30,.75); background: rgba(0,0,0,0.8);
color: #fff; color: #fff;
z-index: 10000000; z-index: 10000000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column;
} }
.desktop-capturer-selection-scroller { .desktop-capturer-selection-scroller {
width: 100%; width: 100%;
@ -82,7 +102,7 @@ window.navigator.mediaDevices.getDisplayMedia = () => {
} }
.desktop-capturer-selection-list { .desktop-capturer-selection-list {
max-width: calc(100% - 100px); max-width: calc(100% - 100px);
margin: 50px; margin: 0 50px 0 50px;
padding: 0; padding: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -125,16 +145,18 @@ window.navigator.mediaDevices.getDisplayMedia = () => {
} }
</style> </style>
`; `;
document.body.appendChild(selectionElem); document.body.appendChild(streamSelector);
document.querySelectorAll(".desktop-capturer-selection-button").forEach((button) => { document.querySelectorAll(".desktop-capturer-selection-button").forEach((button) => {
button.addEventListener("click", async () => { button.addEventListener("click", async (ev) => {
console.log("Click"); ev.stopPropagation();
try { try {
const id = button.getAttribute("data-id"); const id = button.getAttribute("data-id");
const source = sources.find((source) => source.id === id); const source = sources.find((source) => source.id === id);
if (! source) { if (!source) {
throw new Error(`Source with id ${id} does not exist`); streamSelector.remove();
reject(new Error(`Source with id ${id} does not exist`));
} }
const stream = await window.navigator.mediaDevices.getUserMedia({ const stream = await window.navigator.mediaDevices.getUserMedia({
@ -146,17 +168,22 @@ window.navigator.mediaDevices.getDisplayMedia = () => {
}, },
}, },
}); });
resolve(stream);
selectionElem.remove(); streamSelector.remove();
resolve(stream);
} catch (err) { } catch (err) {
console.error("Error selecting desktop capture source:", err); streamSelector.remove();
reject(err); reject(err);
} }
}); });
}); });
const background = document.querySelector(".stream-selector");
background.addEventListener("click", async (ev) => {
streamSelector.remove();
reject(new Error("No source selected"));
});
} catch (err) { } catch (err) {
console.error("Error displaying desktop capture sources:", err);
reject(err); reject(err);
} }
}); });