slackgmailskypefacebook-workplaceoutlookemailmicrosoft-teamsdiscordmessengercustom-servicesmacoslinuxwindowsinboxwhatsappicloudtweetdeckhipchattelegramhangouts
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
272 lines
6.1 KiB
272 lines
6.1 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<style type="text/css"> |
|
html, |
|
body { |
|
width: 100%; |
|
height: 100%; |
|
margin: 0; |
|
overflow: hidden; |
|
} |
|
|
|
.screen-selector { |
|
background-color: #fff; |
|
width: 100%; |
|
height: 100%; |
|
border-radius: 5px; |
|
border: solid 1px #cdcdcd; |
|
box-sizing: border-box; |
|
} |
|
|
|
.screen-selector ul.type { |
|
display: inline-block; |
|
padding: 0; |
|
margin: 0; |
|
border-bottom: solid 1px #cdcdcd; |
|
width: 100%; |
|
-webkit-app-region: drag; |
|
} |
|
|
|
.screen-selector ul.type li { |
|
display: inline-block; |
|
height: 40px; |
|
line-height: 40px; |
|
color: #65696c; |
|
border-bottom: 2px solid transparent; |
|
font-family: sans-serif; |
|
font-weight: bold; |
|
padding: 0 15px; |
|
cursor: pointer; |
|
-webkit-app-region: no-drag; |
|
} |
|
|
|
.screen-selector ul.type li.active, |
|
.screen-selector ul.type li:hover { |
|
color: #426ba3; |
|
border-color: #426ba3; |
|
} |
|
|
|
.screen-selector > .content { |
|
height: calc(100% - 92px); |
|
} |
|
|
|
.screen-selector ul.preview { |
|
display: flex; |
|
margin: 0; |
|
padding: 0; |
|
width: 100%; |
|
max-height: 100%; |
|
box-sizing: border-box; |
|
padding: 10px; |
|
overflow-y: auto; |
|
flex-wrap: wrap; |
|
list-style-type: none; |
|
} |
|
|
|
.screen-selector ul.preview li { |
|
display: inline-block; |
|
box-sizing: border-box; |
|
width: calc(33% - 1px); |
|
cursor: pointer; |
|
padding: 5px; |
|
} |
|
|
|
.screen-selector ul.preview li .content { |
|
display: flex; |
|
box-sizing: border-box; |
|
padding: 10px; |
|
border: solid 2px transparent; |
|
border-radius: 5px; |
|
height: 100%; |
|
flex-direction: column; |
|
} |
|
|
|
.screen-selector ul.preview li.active .content, |
|
.screen-selector ul.preview li:hover .content { |
|
border-color: #88abdb; |
|
} |
|
|
|
.screen-selector ul.preview li.active .content { |
|
color: #000; |
|
height: 100%; |
|
} |
|
|
|
.screen-selector ul.preview li .content .img-wrapper { |
|
display: flex; |
|
height: 100%; |
|
align-items: center; |
|
background: #f0f0f0; |
|
} |
|
|
|
.screen-selector ul.preview li .content img { |
|
display: inline-block; |
|
width: 100%; |
|
} |
|
|
|
.screen-selector ul.preview li .content span { |
|
display: inline-block; |
|
width: 100%; |
|
height: 20px; |
|
font-family: sans-serif; |
|
text-align: center; |
|
font-size: 14px; |
|
margin-top: 10px; |
|
color: #333; |
|
box-sizing: border-box; |
|
white-space: nowrap; |
|
overflow: hidden; |
|
text-overflow: ellipsis; |
|
} |
|
|
|
.screen-selector .footer { |
|
display: inline-block; |
|
width: 100%; |
|
border-top: solid 1px #cdcdcd; |
|
} |
|
|
|
.screen-selector .footer button { |
|
float: right; |
|
margin-top: 10px; |
|
margin-right: 10px; |
|
border: none; |
|
border-radius: 5px; |
|
padding: 5px 10px; |
|
font-size: 14px; |
|
cursor: pointer; |
|
font-weight: bold; |
|
} |
|
|
|
.screen-selector .footer button#cancel { |
|
border: solid 1px #cdcdcd; |
|
background: #fff; |
|
color: #1c73e4; |
|
} |
|
|
|
.screen-selector .footer button#share { |
|
border: solid 1px #186ddd; |
|
background: #1c73e4; |
|
color: #fff; |
|
} |
|
|
|
.screen-selector .footer button#share[disabled] { |
|
background: #666; |
|
border: solid 1px #666; |
|
cursor: not-allowed; |
|
opacity: 0.4; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="screen-selector"> |
|
<ul class="type"> |
|
<li class="active" data-type="screen">Entire screen</li> |
|
<li data-type="window">Window</li> |
|
</ul> |
|
<div class="content"> |
|
<ul class="preview"></ul> |
|
</div> |
|
<div class="footer"> |
|
<button id="share" disabled>Share</button> |
|
<button id="cancel">Cancel</button> |
|
</div> |
|
</div> |
|
<script> |
|
const { ipcRenderer } = require("electron"); |
|
|
|
let sourceList, |
|
contentList, |
|
typeButtons, |
|
shareButton, |
|
cancelButton, |
|
activeItem, |
|
activeTab = "screen"; |
|
|
|
const getItemDOM = (item) => { |
|
const li = document.createElement("li"); |
|
li.setAttribute("data-id", item.id); |
|
li.innerHTML = `<div class="content"><div class="img-wrapper"><img src="${item.thumbnail}" /></div><span>${item.name}</span></div>`; |
|
li.addEventListener("click", onItemClick, false); |
|
return li; |
|
}; |
|
|
|
const updateTab = () => { |
|
const sources = sourceList.filter( |
|
(it) => it.id.indexOf(activeTab) === 0 |
|
); |
|
contentList.innerHTML = ""; |
|
sources.forEach((source) => |
|
contentList.appendChild(getItemDOM(source)) |
|
); |
|
}; |
|
|
|
const bindTypeClick = () => { |
|
typeButtons.forEach((it) => |
|
it.addEventListener("click", onChangeType, false) |
|
); |
|
}; |
|
|
|
const bindActionsClick = () => { |
|
shareButton.addEventListener("click", onShareClick, false); |
|
cancelButton.addEventListener("click", onCancelClick, false); |
|
}; |
|
|
|
const onChangeType = (event) => { |
|
event.preventDefault(); |
|
if (!event.target.classList.contains("active")) { |
|
activeTab = event.target.dataset.type; |
|
typeButtons.forEach((it) => it.classList.remove("active")); |
|
event.target.classList.add("active"); |
|
updateTab(); |
|
} |
|
}; |
|
|
|
const onItemClick = (event) => { |
|
event.preventDefault(); |
|
if (!event.currentTarget.classList.contains("active")) { |
|
activeItem = event.currentTarget.dataset.id; |
|
document |
|
.querySelectorAll(".preview li") |
|
.forEach((it) => it.classList.remove("active")); |
|
event.currentTarget.classList.add("active"); |
|
changeShareState(); |
|
} |
|
}; |
|
|
|
const onCancelClick = (event) => { |
|
event.preventDefault(); |
|
ipcRenderer.send("screenShare:cancelSelection"); |
|
}; |
|
|
|
const onShareClick = (event) => { |
|
event.preventDefault(); |
|
if (activeItem) { |
|
ipcRenderer.send("screenShare:selectScreen", activeItem); |
|
} |
|
}; |
|
|
|
const changeShareState = () => { |
|
if (shareButton.getAttribute("disabled") !== null) { |
|
shareButton.removeAttribute("disabled"); |
|
} |
|
}; |
|
|
|
window.addEventListener( |
|
"load", |
|
async () => { |
|
sourceList = await ipcRenderer.invoke("screenShare:getSources"); |
|
|
|
contentList = document.querySelector(".preview"); |
|
typeButtons = document.querySelectorAll(".type li"); |
|
shareButton = document.querySelector("#share"); |
|
cancelButton = document.querySelector("#cancel"); |
|
|
|
bindTypeClick(); |
|
bindActionsClick(); |
|
updateTab(); |
|
}, |
|
false |
|
); |
|
</script> |
|
</body> |
|
</html>
|
|
|