diff --git a/package.json b/package.json index 1abd893..4133f46 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "skeleton", - "version": "1.10.0", + "version": "1.11.0", "description": "Simply add any website in customizable windows", "main": "src/main.js", "author": "Leon Machens", diff --git a/src/components/App.js b/src/components/App.js index 491e0c8..45a21ac 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -56,14 +56,15 @@ const App = () => { websiteNav, createElement("button", { className: "support", - innerText: "💙 Support me", + innerText: "💙 Open Source", onclick: () => - shell.openExternal("https://github.com/sponsors/lmachens"), + shell.openExternal("https://github.com/lmachens/skeleton"), }), ] ), createElement("div", { className: "toolbar" }, [CloseButton()]), main, + createElement("aside", { className: "ads" }, []), ] ); }; diff --git a/src/lib/ads.js b/src/lib/ads.js new file mode 100644 index 0000000..011ba44 --- /dev/null +++ b/src/lib/ads.js @@ -0,0 +1,65 @@ +const { app, BrowserWindow, BrowserView } = require("electron"); + +const createAdsWindow = (win) => { + const adURL = "https://skeleton.th.gl/app.html"; + const cmpURL = "https://skeleton.th.gl/app-cmp.html"; + const referrer = "https://skeleton.th.gl/"; + + const view = new BrowserView({ + webPreferences: { + partition: "persist:adpartition", + }, + }); + win.setBrowserView(view); + // view.webContents.openDevTools({ mode: "detach" }); + + let bounds = win.getBounds(); + view.setBounds({ + x: bounds.width - 310, + y: bounds.height - 600, + width: 1280, + height: 600, + }); + win.on("resize", function () { + bounds = win.getBounds(); + view.setBounds({ + x: bounds.width - 310, + y: bounds.height - 600, + width: 1280, + height: 600, + }); + }); + + const re = new RegExp(`(${app.getName()}|Electron)/[\\d\\.]+ `, "g"); + view.webContents.setUserAgent( + view.webContents.getUserAgent().replace(re, "") + ); + + view.webContents.session.cookies.get({ name: "ncmp" }).then((cookies) => { + if (cookies.length === 0) { + const modal = new BrowserWindow({ + width: 1000, + height: 500, + parent: win, + modal: true, + titleBarStyle: "hidden", + closable: false, + webPreferences: { + partition: "persist:adpartition", + }, + }); + modal.on("closed", () => { + view.webContents.loadURL(adURL, { + httpReferrer: referrer, + }); + }); + modal.loadURL(cmpURL); + } else { + view.webContents.loadURL(adURL, { + httpReferrer: referrer, + }); + } + }); +}; + +exports.createAdsWindow = createAdsWindow; diff --git a/src/main.js b/src/main.js index 4f674e1..d459576 100644 --- a/src/main.js +++ b/src/main.js @@ -10,6 +10,7 @@ const path = require("path"); const Store = require("electron-store"); const { updateWebsite, listenWebsites } = require("./lib/storage"); const { getCursorInfo } = require("./lib/winuser"); +const { createAdsWindow } = require("./lib/ads"); const store = new Store(); const icon = path.join(__dirname, "assets/skeleton.ico"); @@ -17,8 +18,8 @@ const createWindow = () => { const bounds = store.get("skeleton-bounds") || {}; const win = new BrowserWindow({ title: "Skeleton", - width: 800, - height: 700, + width: 1280, + height: 720, icon: icon, webPreferences: { preload: path.join(__dirname, "preload.js"), @@ -30,6 +31,7 @@ const createWindow = () => { x: bounds.x, y: bounds.y, }); + // win.webContents.openDevTools({ mode: "detach" }); win.on("resize", () => { const bounds = win.getBounds(); @@ -50,6 +52,8 @@ const createWindow = () => { win.loadFile(path.join(__dirname, "index.html")); + createAdsWindow(win); + const activeWindows = {}; const clickThroughWindows = []; let prevCursorInfo = getCursorInfo(); diff --git a/src/styles/_app.css b/src/styles/_app.css index 56ca922..03b0391 100644 --- a/src/styles/_app.css +++ b/src/styles/_app.css @@ -1,7 +1,7 @@ .layout { display: grid; align-items: start; - grid-template: auto 1fr / auto 1fr; + grid-template: auto 1fr / auto 1fr auto; height: 100vh; background-color: var(--color-bg-secondary); } @@ -21,3 +21,8 @@ overflow: auto; height: 100%; } + +.ads { + width: 320px; + height: 100%; +} diff --git a/src/styles/_toolbar.css b/src/styles/_toolbar.css index 817cf1a..27cca67 100644 --- a/src/styles/_toolbar.css +++ b/src/styles/_toolbar.css @@ -1,6 +1,8 @@ .toolbar { display: flex; justify-content: end; + grid-column: 2 / 4; + -webkit-app-region: drag; } .close { @@ -8,6 +10,7 @@ width: 1.6rem; padding: 0; background-color: transparent; + -webkit-app-region: no-drag; } .close:hover {