Added Mac support to allow use in cross-platform environments#95
Added Mac support to allow use in cross-platform environments#95coolwr wants to merge 2 commits intoseo-rii:masterfrom
Conversation
… errors. See updated README.md on how to use with Windows and Mac conigurations.
| ## 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); | ||
| }); | ||
|
|
||
|
|
||
| ``` | ||
|
|
There was a problem hiding this comment.
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.".
| ## Known Issues | ||
|
|
||
| * Known issue on Windows 11 - opening web developer tools will disable the acrylic effect. | ||
|
|
There was a problem hiding this comment.
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.
| maximumRefreshRate: number | ||
| ) { | ||
| // Used require to only import dependency for windows only environments (supports compiling on mac without errors) | ||
| const { VerticalRefreshRateContext } = require('@seorii/win32-displayconfig') |
There was a problem hiding this comment.
| const { VerticalRefreshRateContext } = require('@seorii/win32-displayconfig') | |
| const { VerticalRefreshRateContext } = require('@seorii/win32-displayconfig') as typeof import('@seorii/win32-displayconfig') |
|
Thank you for you pull request! I have some suggested changes. Also, please squash your commits for better history. |
Added mac support for cross-platform apps. Previous build was erroring on macs due to @seorii/win32-displayconfig dependency. The change makes the dependency only used if calling win10refresh(). Also, see updated README.md on how to use with Windows and Mac configurations.