Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace background menu option with The Button #3

Merged
merged 3 commits into from
May 17, 2022
Merged

Replace background menu option with The Button #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a58983e
Replace background menu option with The Button
lazeratops May 16, 2022
c5b4baf
Fix style reference
lazeratops May 16, 2022
665a27f
remove dev tools
lazeratops May 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 14 additions & 32 deletions main/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { app, BrowserWindow, Menu, ipcMain, protocol } = require("electron");
const { app, BrowserWindow, ipcMain, protocol } = require("electron");
const path = require("path");
const fs = require("fs");

Expand All @@ -14,7 +14,8 @@ let backgroundsLoaded = false;
// setting API requests.
let callObjectReady = false;

let backgroundMenuButton = null;
// Whether the backgrounds window is open
let backgroundsWindowOpen = false;

// We'll define a custom "bg" scheme to fetch our background images.
// This allows us to load local images without disabling Electron's
Expand All @@ -34,6 +35,7 @@ function createCallWindow() {
webPreferences: {
preload: path.join(__dirname, "preloadCall.js"),
},
autoHideMenuBar: true,
});

// If the user closes the main call window, exit
Expand All @@ -43,8 +45,9 @@ function createCallWindow() {
callWindow = null;
app.quit();
});

callWindow.loadFile(path.join(__dirname, "../html", "index.html"));
callWindow.loadFile(
path.join(__dirname, "../renderer", "call", "index.html")
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is modified because the html files have moved as mentioned in PR description.

);
}

// loadBackgroundFiles loads all jpg, jpeg, or png files in
Expand Down Expand Up @@ -81,15 +84,16 @@ app.whenReady().then(() => {
const path = request.url.substring(5, url.length);
callback({ path: path });
});
createMenu();
createCallWindow();
loadBackgroundFiles();
});

// createBackgroundSelectionWindow creates a window in which the user
// can select a Daily video call background to set.
function createBackgroundSelectionWindow() {
backgroundMenuButton.enabled = false;
if (backgroundsWindowOpen) return;

backgroundsWindowOpen = true;

const win = new BrowserWindow({
width: 500,
Expand All @@ -100,41 +104,19 @@ function createBackgroundSelectionWindow() {
autoHideMenuBar: true,
});

win.loadFile(path.join(__dirname, "../html", "background.html"));
win.loadFile(
path.join(__dirname, "../renderer", "background", "background.html")
);

win.webContents.once("dom-ready", () => {
win.webContents.send("load-backgrounds", { backgrounds: backgroundFiles });
});

// Re-enable the menu button when the background selection window
// is closed.
win.on("close", () => {
backgroundMenuButton.enabled = true;
backgroundsWindowOpen = false;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no menu anymore, so this turns into a simple bool to prevent duplicate background selection windows.

});
}

// createMenu creates our application menu with the background setting option.
function createMenu() {
const template = [
{
label: "Options",
submenu: [
{
id: "background",
label: "Background 🏔️",
enabled: false,
click: async () => {
createBackgroundSelectionWindow();
},
},
],
},
];
const menu = Menu.buildFromTemplate(template);
backgroundMenuButton = menu.getMenuItemById("background");
Menu.setApplicationMenu(menu);
}

// "set-background" event handler instructs the daily renderer
// process to set the given background for the local participant.
ipcMain.handle("set-background", (e, imgPath) => {
Expand Down
0 renderer/Roboto-Regular.ttf → renderer/background/Roboto-Regular.ttf
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions html/background.html → renderer/background/background.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
http-equiv="Content-Security-Policy"
content="default-src 'self'; frame-src 'self'; script-src 'self'; worker-src 'self';"
/>
<link rel="stylesheet" href="../renderer/style.css" />
<link rel="stylesheet" href="./style.css" />
<title>Set Background</title>
</head>
<body>
Expand All @@ -17,6 +17,6 @@ <h1>Click on a background image to select</h1>
<button id="reset">Reset Background</button>
</div>
</div>
<script src="../renderer/background.js"></script>
<script src="./background.js"></script>
</body>
</html>
0 renderer/background.js → renderer/background/background.js
View file
Open in desktop
File renamed without changes.
0 renderer/style.css → renderer/background/style.css
View file
Open in desktop
File renamed without changes.
Binary file added renderer/call/backgroundButton.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 19 additions & 3 deletions renderer/daily.js → renderer/call/daily.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,38 @@ window.addEventListener("DOMContentLoaded", () => {
function initCall() {
const container = document.getElementById("container");

const url = new URL("./backgroundButton.png", document.baseURI);
url.protocol = "bg";

callFrame = DailyIframe.createFrame(container, {
showLeaveButton: true,
iframeStyle: {
position: "fixed",
width: "calc(100% - 1rem)",
height: "calc(100% - 1rem)",
},
// Specify a custom button for background controls
customTrayButtons: {
backgrounds: {
iconPath: url.href,
label: "Background",
tooltip: "Set Custom Background",
},
},
})
.on("nonfatal-error", (e) => {
console.warn("nonfatal error:", e);
})
.on("started-camera", () => {
api.tryEnableBackgrounds();
})
.on("left-meeting", () => {
initCall();
})
.on("custom-button-click", (ev) => {
// If the event is triggered by clicking
// our background button, show the
// background selection window
if (ev.button_id === "backgrounds") {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this works (and is such a good use of The Button!!)
The one funky things is the image size 🤔 We might want to just style them to be a specific size so there isn't a vertical and horizontal scrollbar. Can you update the header/button styles too to match [something] from another demo? Just looks a little too browser default-y to me.
CleanShot 2022-05-16 at 11 29 48@2x

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wow I think I missed committing some CSS here, all the styling is gone. 1min!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(that's what I get for trying to finish a PR mid-all-hands)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be fixed now!

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

much better! :D

api.tryEnableBackgrounds();
}
});

// TODO: Replace the following URL with your own room URL.
Expand Down
2 changes: 1 addition & 1 deletion html/index.html → renderer/call/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@
<body>
<div id="container"></div>
<script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
<script src="../renderer/daily.js"></script>
<script src="./daily.js"></script>
</body>
</html>