Browse Source

Format 87d48a6

pull/3163/head
prettifier[bot] 4 years ago committed by GitHub
parent
commit
c82d2e3bb2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1199
      electron/main.js
  2. 7
      resources/css/screenselector.css
  3. 94
      resources/js/rambox-service-api.js
  4. 86
      resources/js/screenselector.js
  5. 36
      screenselector.html

1199
electron/main.js

File diff suppressed because it is too large Load Diff

7
resources/css/screenselector.css

@ -1,4 +1,5 @@
html, body { html,
body {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
@ -36,7 +37,8 @@ html, body {
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.screen-selector ul.type li.active, .screen-selector ul.type li:hover { .screen-selector ul.type li.active,
.screen-selector ul.type li:hover {
color: #426ba3; color: #426ba3;
border-color: #426ba3; border-color: #426ba3;
} }
@ -113,7 +115,6 @@ html, body {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
border-top: solid 1px #cdcdcd; border-top: solid 1px #cdcdcd;
} }
.screen-selector .footer button { .screen-selector .footer button {

94
resources/js/rambox-service-api.js

@ -2,8 +2,11 @@
* This file is loaded in the service web views to provide a Rambox API. * This file is loaded in the service web views to provide a Rambox API.
*/ */
const { desktopCapturer, ipcRenderer } = require('electron'); const { desktopCapturer, ipcRenderer } = require("electron");
const { ContextMenuBuilder, ContextMenuListener } = require('electron-contextmenu-wrapper'); const {
ContextMenuBuilder,
ContextMenuListener,
} = require("electron-contextmenu-wrapper");
/** /**
* Make the Rambox API available via a global "rambox" variable. * Make the Rambox API available via a global "rambox" variable.
@ -17,92 +20,107 @@ window.rambox = {};
* *
* @param {*} count The unread count * @param {*} count The unread count
*/ */
window.rambox.setUnreadCount = function(count) { window.rambox.setUnreadCount = function (count) {
ipcRenderer.sendToHost('rambox.setUnreadCount', count); ipcRenderer.sendToHost("rambox.setUnreadCount", count);
}; };
/** /**
* Clears the unread count. * Clears the unread count.
*/ */
window.rambox.clearUnreadCount = function() { window.rambox.clearUnreadCount = function () {
ipcRenderer.sendToHost('rambox.clearUnreadCount'); ipcRenderer.sendToHost("rambox.clearUnreadCount");
} };
/** /**
* Override to add notification click event to display Rambox window and activate service tab * Override to add notification click event to display Rambox window and activate service tab
*/ */
var NativeNotification = Notification; var NativeNotification = Notification;
Notification = function(title, options) { Notification = function (title, options) {
var notification = new NativeNotification(title, options); var notification = new NativeNotification(title, options);
notification.addEventListener('click', function() {
ipcRenderer.sendToHost('rambox.showWindowAndActivateTab');
});
//It seems that gmail is checking if such event handler func are available. Just remplacing them by a void function that is always returning true is making the thing right! notification.addEventListener("click", function () {
notification.addEventListener = function() {return true}; ipcRenderer.sendToHost("rambox.showWindowAndActivateTab");
notification.attachEvent = function() {return true}; });
notification.addListener = function() {return true};
return notification; //It seems that gmail is checking if such event handler func are available. Just remplacing them by a void function that is always returning true is making the thing right!
} notification.addEventListener = function () {
return true;
};
notification.attachEvent = function () {
return true;
};
notification.addListener = function () {
return true;
};
return notification;
};
Notification.prototype = NativeNotification.prototype; Notification.prototype = NativeNotification.prototype;
Notification.permission = NativeNotification.permission; Notification.permission = NativeNotification.permission;
Notification.requestPermission = NativeNotification.requestPermission.bind(Notification); Notification.requestPermission = NativeNotification.requestPermission.bind(
Notification
);
window.rambox.contextMenuBuilder = new ContextMenuBuilder(); window.rambox.contextMenuBuilder = new ContextMenuBuilder();
window.rambox.contextMenuListener = new ContextMenuListener(function(event, info) { window.rambox.contextMenuListener = new ContextMenuListener(function (
window.rambox.contextMenuBuilder.showPopupMenu(info); event,
}); info
) {
const mousetrap = require('mousetrap'); window.rambox.contextMenuBuilder.showPopupMenu(info);
mousetrap.bind(process.platform === 'darwin' ? ['command+left', 'command+right'] : ['alt+left', 'alt+right'], e => {
if (location.href.indexOf('slack.com') !== -1) return;
e.key === 'ArrowLeft' ? history.back() : history.forward();
}); });
const mousetrap = require("mousetrap");
mousetrap.bind(
process.platform === "darwin"
? ["command+left", "command+right"]
: ["alt+left", "alt+right"],
(e) => {
if (location.href.indexOf("slack.com") !== -1) return;
e.key === "ArrowLeft" ? history.back() : history.forward();
}
);
// ScreenShare // ScreenShare
window.navigator.mediaDevices.getDisplayMedia = () => window.navigator.mediaDevices.getDisplayMedia = () =>
new Promise(async (resolve, reject) => { new Promise(async (resolve, reject) => {
try { try {
const sources = await desktopCapturer.getSources({ const sources = await desktopCapturer.getSources({
types: ['screen', 'window'], types: ["screen", "window"],
}); });
const unlisten = () => { const unlisten = () => {
ipcRenderer.removeAllListeners('screenShare:cancel'); ipcRenderer.removeAllListeners("screenShare:cancel");
ipcRenderer.removeAllListeners('screenShare:share'); ipcRenderer.removeAllListeners("screenShare:share");
}; };
ipcRenderer.on('screenShare:cancel', () => { ipcRenderer.on("screenShare:cancel", () => {
unlisten(); unlisten();
reject(new Error('Cancelled by user')); reject(new Error("Cancelled by user"));
}); });
ipcRenderer.on('screenShare:share', (_, shareId) => { ipcRenderer.on("screenShare:share", (_, shareId) => {
unlisten(); unlisten();
window.navigator.mediaDevices window.navigator.mediaDevices
.getUserMedia({ .getUserMedia({
audio: false, audio: false,
video: { video: {
mandatory: { mandatory: {
chromeMediaSource: 'desktop', chromeMediaSource: "desktop",
chromeMediaSourceId: shareId, chromeMediaSourceId: shareId,
}, },
}, },
}) })
.then(stream => resolve(stream)); .then((stream) => resolve(stream));
}); });
const mappedSources = sources.map(it => ({ const mappedSources = sources.map((it) => ({
id: it.id, id: it.id,
name: it.name, name: it.name,
thumbnail: it.thumbnail.toDataURL(), thumbnail: it.thumbnail.toDataURL(),
})); }));
ipcRenderer.send('screenShare:show', mappedSources); ipcRenderer.send("screenShare:show", mappedSources);
} catch (err) { } catch (err) {
reject(err); reject(err);
} }

86
resources/js/screenselector.js

@ -1,77 +1,91 @@
const { ipcRenderer } = require('electron'); const { ipcRenderer } = require("electron");
let sourceList, contentList, typeButtons, shareButton, cancelButton, activeItem, activeTab = 'screen'; let sourceList,
contentList,
typeButtons,
shareButton,
cancelButton,
activeItem,
activeTab = "screen";
const getItemDOM = item => { const getItemDOM = (item) => {
const li = document.createElement('li'); const li = document.createElement("li");
li.setAttribute('data-id', item.id); 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.innerHTML = `<div class="content"><div class="img-wrapper"><img src="${item.thumbnail}" /></div><span>${item.name}</span></div>`;
li.addEventListener('click', onItemClick, false); li.addEventListener("click", onItemClick, false);
return li; return li;
}; };
const updateTab = () => { const updateTab = () => {
const sources = sourceList.filter(it => it.id.indexOf(activeTab) === 0); const sources = sourceList.filter((it) => it.id.indexOf(activeTab) === 0);
contentList.innerHTML = ''; contentList.innerHTML = "";
sources.forEach(source => contentList.appendChild(getItemDOM(source))); sources.forEach((source) => contentList.appendChild(getItemDOM(source)));
}; };
const bindTypeClick = () => { const bindTypeClick = () => {
typeButtons.forEach(it => it.addEventListener('click', onChangeType, false)); typeButtons.forEach((it) =>
it.addEventListener("click", onChangeType, false)
);
}; };
const bindActionsClick = () => { const bindActionsClick = () => {
shareButton.addEventListener('click', onShareClick, false); shareButton.addEventListener("click", onShareClick, false);
cancelButton.addEventListener('click', onCancelClick, false); cancelButton.addEventListener("click", onCancelClick, false);
}; };
const onChangeType = event => { const onChangeType = (event) => {
event.preventDefault(); event.preventDefault();
if (!event.target.classList.contains('active')) { if (!event.target.classList.contains("active")) {
activeTab = event.target.dataset.type; activeTab = event.target.dataset.type;
typeButtons.forEach(it => it.classList.remove('active')); typeButtons.forEach((it) => it.classList.remove("active"));
event.target.classList.add('active'); event.target.classList.add("active");
updateTab(); updateTab();
} }
}; };
const onItemClick = event => { const onItemClick = (event) => {
event.preventDefault(); event.preventDefault();
if (!event.currentTarget.classList.contains('active')) { if (!event.currentTarget.classList.contains("active")) {
activeItem = event.currentTarget.dataset.id; activeItem = event.currentTarget.dataset.id;
document.querySelectorAll('.preview li').forEach(it => it.classList.remove('active')); document
event.currentTarget.classList.add('active'); .querySelectorAll(".preview li")
.forEach((it) => it.classList.remove("active"));
event.currentTarget.classList.add("active");
changeShareState(); changeShareState();
} }
}; };
const onCancelClick = event => { const onCancelClick = (event) => {
event.preventDefault(); event.preventDefault();
ipcRenderer.send('screenShare:cancelSelection'); ipcRenderer.send("screenShare:cancelSelection");
}; };
const onShareClick = event => { const onShareClick = (event) => {
event.preventDefault(); event.preventDefault();
if (activeItem) { if (activeItem) {
ipcRenderer.send('screenShare:selectScreen', activeItem); ipcRenderer.send("screenShare:selectScreen", activeItem);
} }
}; };
const changeShareState = () => { const changeShareState = () => {
if (shareButton.getAttribute('disabled') !== null) { if (shareButton.getAttribute("disabled") !== null) {
shareButton.removeAttribute('disabled'); shareButton.removeAttribute("disabled");
} }
}; };
window.addEventListener('load', async () => { window.addEventListener(
sourceList = await ipcRenderer.invoke('screenShare:getSources'); "load",
async () => {
sourceList = await ipcRenderer.invoke("screenShare:getSources");
contentList = document.querySelector('.preview'); contentList = document.querySelector(".preview");
typeButtons = document.querySelectorAll('.type li'); typeButtons = document.querySelectorAll(".type li");
shareButton = document.querySelector('#share'); shareButton = document.querySelector("#share");
cancelButton = document.querySelector('#cancel'); cancelButton = document.querySelector("#cancel");
bindTypeClick(); bindTypeClick();
bindActionsClick(); bindActionsClick();
updateTab(); updateTab();
}, false); },
false
);

36
screenselector.html

@ -1,22 +1,22 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<link rel="stylesheet" href="resources/css/screenselector.css" /> <link rel="stylesheet" href="resources/css/screenselector.css" />
</head> </head>
<body> <body>
<div class="screen-selector"> <div class="screen-selector">
<ul class="type"> <ul class="type">
<li class="active" data-type="screen">Entire Screen</li> <li class="active" data-type="screen">Entire Screen</li>
<li data-type="window">Window</li> <li data-type="window">Window</li>
</ul> </ul>
<div class="content"> <div class="content">
<ul class="preview"></ul> <ul class="preview"></ul>
</div>
<div class="footer">
<button id="share" disabled>Share</button>
<button id="cancel">Cancel</button>
</div>
</div> </div>
<div class="footer"> <script src="resources/js/screenselector.js"></script>
<button id="share" disabled>Share</button> </body>
<button id="cancel">Cancel</button>
</div>
</div>
<script src="resources/js/screenselector.js"></script>
</body>
</html> </html>

Loading…
Cancel
Save