Skip to content
This repository was archived by the owner on Feb 9, 2024. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
50 changes: 50 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,56 @@ On Windows 10, `[options]` should be a String or an Object.

If true, log will be printed to console.

## Known Issues

* Known issue on Windows 11 - opening web developer tools will disable the acrylic effect.

Comment on lines +130 to +133

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

I don't think that this specific issue needs to documented in the readme. All the issues are already documented in https://github.com/Seo-Rii/electron-acrylic-window/issues.

## Mac Support

For cross-platform projects for Windows and Mac you need to use the default `electron` BrowserWindow for Mac environments. Here's an example of how to do this in TypeScript:

```typescript
import os from 'os';
import {
BrowserWindow as MacBrowserWindow,
BrowserWindowConstructorOptions,
} from 'electron';
import {
AcrylicBrowserWindowConstructorOptions,
BrowserWindow as WindowsBrowserWindow
} from 'electron-acrylic-window';

const isWindows = os.platform() === 'win32';

let mainWindow: MacBrowserWindow | WindowsBrowserWindow | null = null;

app.on('ready', function () {
const params: BrowserWindowConstructorOptions = {
width: 800,
height: 600,
autoHideMenuBar: true,
...
};
const macParams: BrowserWindowConstructorOptions = {
...params,
backgroundColor: '#00000000',
vibrancy: 'under-window',
visualEffectState: 'active'
};
const winParams: AcrylicBrowserWindowConstructorOptions = {
...params,
vibrancy: {
effect: 'acrylic'
}
};
mainWindow = isWindows
? new WindowsBrowserWindow(winParams)
: new MacBrowserWindow(macParams);
});


```

Comment on lines +134 to +179

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

It should not be necessary to make separate windows and configs depending on the os. The original and build-in vibrancy functionally of electron is used when the os is not windows.

This is explicitly written in the beginning of the readme:

"Only affects Windows 10. If the OS is not Windows 10, it will fall back on the original vibrancy function.".

## Demo

To run the demo Electron application, clone this repository, install the dependencies and run the test script:
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "electron-acrylic-window",
"version": "0.5.11",
"version": "0.5.12",
"description": "Add vibrancy effect for electron",
"keywords": [
"node",
Expand Down
5 changes: 3 additions & 2 deletions src/win10refresh.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { VerticalRefreshRateContext } from '@seorii/win32-displayconfig'
import { BrowserWindow } from './browserWindow'
import * as electron from 'electron'
import process from 'process'
Expand Down Expand Up @@ -69,6 +68,8 @@ export default function win10refresh(
win: BrowserWindow,
maximumRefreshRate: number
) {
// Used require to only import dependency for windows only environments (supports compiling on mac without errors)
const { VerticalRefreshRateContext } = require('@seorii/win32-displayconfig')

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
const { VerticalRefreshRateContext } = require('@seorii/win32-displayconfig')
const { VerticalRefreshRateContext } = require('@seorii/win32-displayconfig') as typeof import('@seorii/win32-displayconfig')

const refreshCtx = new VerticalRefreshRateContext()

function getRefreshRateAtCursor(
Expand Down Expand Up @@ -98,7 +99,7 @@ export default function win10refresh(
desiredMoveBounds: electron.Rectangle | undefined
let boundsPromise: any = Promise.race([
getRefreshRateAtCursor(electron.screen.getCursorScreenPoint()).then(
(rate) => {
(rate: number) => {
pollingRate = rate || 30
doFollowUpQuery = true
}
Expand Down