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%;
height: 100%;
margin: 0;
@ -36,7 +37,8 @@ html, body {
-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;
border-color: #426ba3;
}
@ -113,7 +115,6 @@ html, body {
display: inline-block;
width: 100%;
border-top: solid 1px #cdcdcd;
}
.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.
*/
const { desktopCapturer, ipcRenderer } = require('electron');
const { ContextMenuBuilder, ContextMenuListener } = require('electron-contextmenu-wrapper');
const { desktopCapturer, ipcRenderer } = require("electron");
const {
ContextMenuBuilder,
ContextMenuListener,
} = require("electron-contextmenu-wrapper");
/**
* Make the Rambox API available via a global "rambox" variable.
@ -17,92 +20,107 @@ window.rambox = {};
*
* @param {*} count The unread count
*/
window.rambox.setUnreadCount = function(count) {
ipcRenderer.sendToHost('rambox.setUnreadCount', count);
window.rambox.setUnreadCount = function (count) {
ipcRenderer.sendToHost("rambox.setUnreadCount", count);
};
/**
* Clears the unread count.
*/
window.rambox.clearUnreadCount = function() {
ipcRenderer.sendToHost('rambox.clearUnreadCount');
}
window.rambox.clearUnreadCount = function () {
ipcRenderer.sendToHost("rambox.clearUnreadCount");
};
/**
* Override to add notification click event to display Rambox window and activate service tab
*/
var NativeNotification = Notification;
Notification = function(title, options) {
var notification = new NativeNotification(title, options);
notification.addEventListener('click', function() {
ipcRenderer.sendToHost('rambox.showWindowAndActivateTab');
});
Notification = function (title, options) {
var notification = new NativeNotification(title, options);
//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};
notification.addEventListener("click", function () {
ipcRenderer.sendToHost("rambox.showWindowAndActivateTab");
});
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.permission = NativeNotification.permission;
Notification.requestPermission = NativeNotification.requestPermission.bind(Notification);
Notification.requestPermission = NativeNotification.requestPermission.bind(
Notification
);
window.rambox.contextMenuBuilder = new ContextMenuBuilder();
window.rambox.contextMenuListener = new ContextMenuListener(function(event, info) {
window.rambox.contextMenuBuilder.showPopupMenu(info);
});
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();
window.rambox.contextMenuListener = new ContextMenuListener(function (
event,
info
) {
window.rambox.contextMenuBuilder.showPopupMenu(info);
});
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
window.navigator.mediaDevices.getDisplayMedia = () =>
new Promise(async (resolve, reject) => {
try {
const sources = await desktopCapturer.getSources({
types: ['screen', 'window'],
types: ["screen", "window"],
});
const unlisten = () => {
ipcRenderer.removeAllListeners('screenShare:cancel');
ipcRenderer.removeAllListeners('screenShare:share');
ipcRenderer.removeAllListeners("screenShare:cancel");
ipcRenderer.removeAllListeners("screenShare:share");
};
ipcRenderer.on('screenShare:cancel', () => {
ipcRenderer.on("screenShare:cancel", () => {
unlisten();
reject(new Error('Cancelled by user'));
reject(new Error("Cancelled by user"));
});
ipcRenderer.on('screenShare:share', (_, shareId) => {
ipcRenderer.on("screenShare:share", (_, shareId) => {
unlisten();
window.navigator.mediaDevices
.getUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSource: "desktop",
chromeMediaSourceId: shareId,
},
},
})
.then(stream => resolve(stream));
.then((stream) => resolve(stream));
});
const mappedSources = sources.map(it => ({
const mappedSources = sources.map((it) => ({
id: it.id,
name: it.name,
thumbnail: it.thumbnail.toDataURL(),
}));
ipcRenderer.send('screenShare:show', mappedSources);
ipcRenderer.send("screenShare:show", mappedSources);
} catch (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 li = document.createElement('li');
li.setAttribute('data-id', item.id);
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);
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 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));
typeButtons.forEach((it) =>
it.addEventListener("click", onChangeType, false)
);
};
const bindActionsClick = () => {
shareButton.addEventListener('click', onShareClick, false);
cancelButton.addEventListener('click', onCancelClick, false);
shareButton.addEventListener("click", onShareClick, false);
cancelButton.addEventListener("click", onCancelClick, false);
};
const onChangeType = event => {
const onChangeType = (event) => {
event.preventDefault();
if (!event.target.classList.contains('active')) {
if (!event.target.classList.contains("active")) {
activeTab = event.target.dataset.type;
typeButtons.forEach(it => it.classList.remove('active'));
event.target.classList.add('active');
typeButtons.forEach((it) => it.classList.remove("active"));
event.target.classList.add("active");
updateTab();
}
};
const onItemClick = event => {
const onItemClick = (event) => {
event.preventDefault();
if (!event.currentTarget.classList.contains('active')) {
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');
document
.querySelectorAll(".preview li")
.forEach((it) => it.classList.remove("active"));
event.currentTarget.classList.add("active");
changeShareState();
}
};
const onCancelClick = event => {
const onCancelClick = (event) => {
event.preventDefault();
ipcRenderer.send('screenShare:cancelSelection');
ipcRenderer.send("screenShare:cancelSelection");
};
const onShareClick = event => {
const onShareClick = (event) => {
event.preventDefault();
if (activeItem) {
ipcRenderer.send('screenShare:selectScreen', activeItem);
ipcRenderer.send("screenShare:selectScreen", activeItem);
}
};
const changeShareState = () => {
if (shareButton.getAttribute('disabled') !== null) {
shareButton.removeAttribute('disabled');
if (shareButton.getAttribute("disabled") !== null) {
shareButton.removeAttribute("disabled");
}
};
window.addEventListener('load', async () => {
sourceList = await ipcRenderer.invoke('screenShare:getSources');
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');
contentList = document.querySelector(".preview");
typeButtons = document.querySelectorAll(".type li");
shareButton = document.querySelector("#share");
cancelButton = document.querySelector("#cancel");
bindTypeClick();
bindActionsClick();
updateTab();
}, false);
bindTypeClick();
bindActionsClick();
updateTab();
},
false
);

36
screenselector.html

@ -1,22 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="resources/css/screenselector.css" />
</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>
<head>
<link rel="stylesheet" href="resources/css/screenselector.css" />
</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>
<div class="footer">
<button id="share" disabled>Share</button>
<button id="cancel">Cancel</button>
</div>
</div>
<script src="resources/js/screenselector.js"></script>
</body>
<script src="resources/js/screenselector.js"></script>
</body>
</html>

Loading…
Cancel
Save