mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
3.8 KiB
HTML
139 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Capturer Picker</title>
|
|
<style>
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.desktop-capturer-selection {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(30, 30, 30, 0.75);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.desktop-capturer-selection__scroller {
|
|
width: 100%;
|
|
max-height: 100vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.desktop-capturer-selection__list {
|
|
max-width: calc(100% - 100px);
|
|
margin: auto;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
justify-content: center;
|
|
}
|
|
|
|
.desktop-capturer-selection__item {
|
|
display: flex;
|
|
margin: 4px;
|
|
}
|
|
|
|
.desktop-capturer-selection__btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
margin: 0;
|
|
border: 0;
|
|
width: 160px;
|
|
height: auto;
|
|
border-radius: 3px;
|
|
padding: 4px;
|
|
background: #252626;
|
|
text-align: left;
|
|
transition: background-color 0.15s, box-shadow 0.15s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.desktop-capturer-selection__btn:hover,
|
|
.desktop-capturer-selection__btn:focus {
|
|
background: rgba(98, 100, 167, 0.8);
|
|
}
|
|
|
|
.desktop-capturer-selection__thumbnail {
|
|
width: 100%;
|
|
height: 90px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.desktop-capturer-selection__name {
|
|
margin: 6px 0 6px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body></body>
|
|
<script>
|
|
window.electron.ipcRenderer.on('SEND_SCREEN_SHARE_SOURCES', (sources) => {
|
|
try {
|
|
const selectionElem = document.createElement('div');
|
|
selectionElem.classList = 'desktop-capturer-selection';
|
|
selectionElem.innerHTML = `
|
|
<div class="desktop-capturer-selection__scroller">
|
|
<ul class="desktop-capturer-selection__list">
|
|
${sources
|
|
.map(
|
|
({ id, name, thumbnail, display_id, appIcon }) => `
|
|
<li class="desktop-capturer-selection__item">
|
|
<button class="desktop-capturer-selection__btn" data-id="${id}" title="${name}">
|
|
<img class="desktop-capturer-selection__thumbnail" src="${String(
|
|
thumbnail
|
|
)}" />
|
|
<span class="desktop-capturer-selection__name">${name}</span>
|
|
</button>
|
|
</li>
|
|
`
|
|
)
|
|
.join('')}
|
|
</ul>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(selectionElem);
|
|
|
|
document
|
|
.querySelectorAll('.desktop-capturer-selection__btn')
|
|
.forEach((button) => {
|
|
button.addEventListener('dblclick', async () => {
|
|
try {
|
|
const id = button.getAttribute('data-id');
|
|
const source = sources.find((source) => source.id === id);
|
|
if (!source) {
|
|
throw new Error(`Source with id ${id} does not exist`);
|
|
}
|
|
|
|
window.electron.ipcRenderer.sendMessage(
|
|
'selectCapturerSource',
|
|
source
|
|
);
|
|
} catch (err) {
|
|
console.error('Error selecting desktop capture source:', err);
|
|
window.electron.ipcRenderer.sendMessage(null);
|
|
}
|
|
});
|
|
});
|
|
} catch (err) {
|
|
console.error('Error displaying desktop capture sources:', err);
|
|
window.electron.ipcRenderer.sendMessage(null);
|
|
}
|
|
});
|
|
</script>
|
|
</html>
|