updated design and switched versions

This commit is contained in:
Daniel Haller 2024-04-26 15:40:08 +02:00
parent a03405ac38
commit 0e3e7d7305
11 changed files with 525 additions and 294 deletions

View File

@ -16,10 +16,10 @@ const options = {
buildDependenciesFromSource: true,
directories: {
output: 'crunchyroll-downloader-output'
output: 'crunchyroll-downloader-output-${version}'
},
win: {
artifactName: 'crunchyd-Setup-${version}.${ext}',
artifactName: 'crunchyroll-downloader-${version}-windows-installer.${ext}',
icon: "public/favicon.ico",
target: [
{

View File

@ -1,22 +1,29 @@
<template>
<div class="fixed w-full flex flex-row bg-[#111111] h-16 z-10" style="-webkit-app-region: drag">
<div class="w-full flex gap-10 flex-row items-center justify-center px-">
<button @click="openAddAnime" class="px-6 py-0.5 border-2 border-[#ce6104] rounded-xl" style="-webkit-app-region: no-drag">
<Icon name="ph:plus-bold" class="h-7 w-7 text-[#ce6104]" />
</button>
<button class="px-6 py-0.5 border-2 border-[#ce6104] rounded-xl" style="-webkit-app-region: no-drag">
<Icon name="material-symbols:globe" class="h-7 w-7 text-[#ce6104]" />
<div class="fixed w-full flex flex-row px-2 bg-[#11111189] h-14 z-10 border-[#383838] gap-1" style="-webkit-app-region: drag">
<div class="w-full flex gap-10 flex-row items-center justify-center px-5">
<button @click="openAddAnime" class="flex items-center justify-center px-2 py-2 gap-1 transition-all bg-[#ffffff16] hover:bg-[#ffffff25] rounded-lg select-none" style="-webkit-app-region: no-drag">
<Icon name="ph:plus-bold" class="h-3.5 w-3.5 text-white" />
<div class="text-[11px] text-white font-dm">
ADD DOWNLOAD
</div>
</button>
</div>
<div class="w-full flex flex-row items-center justify-center">
<div class="text-2xl text-white select-none">Crunchyroll Downloader</div>
<img src="/logo.png" class="h-8">
<div class="text-[10px] leading-[10px] text-opacity-90 text-white select-none">Crunchyroll <br> Downloader</div>
</div>
<div class="w-full flex gap-4 flex-row items-center justify-start px-5">
<button class="px-6 py-0.5 border-2 border-[#ce6104] rounded-xl" style="-webkit-app-region: no-drag">
<Icon name="iconamoon:playlist" class="h-7 w-7 text-[#ce6104]" />
</button>
<button @click="openSettings" class="px-6 py-0.5 border-2 border-[#ce6104] rounded-xl" style="-webkit-app-region: no-drag">
<Icon name="ic:round-settings" class="h-7 w-7 text-[#ce6104]" />
<div class="w-full flex gap-2 flex-row items-center justify-center">
<!-- <button class="flex items-center justify-center px-2 py-2 gap-1 transition-all bg-[#ffffff16] hover:bg-[#ffffff25] rounded-lg select-none" style="-webkit-app-region: no-drag">
<Icon name="iconamoon:playlist" class="h-3.5 w-3.5 text-white" />
<div class="text-[11px] text-white font-dm">
PLAYLIST
</div>
</button> -->
<button class="flex items-center justify-center px-2 py-2 gap-1 transition-all bg-[#ffffff16] hover:bg-[#ffffff25] rounded-lg select-none mr-[5.5rem]" style="-webkit-app-region: no-drag">
<Icon name="ic:round-settings" class="h-3.5 w-3.5 text-white" />
<div class="text-[11px] text-white font-dm">
SETTINGS
</div>
</button>
</div>
</div>
@ -61,5 +68,3 @@ async function openAddAnime() {
})
}
</script>
<style></style>

View File

@ -5,6 +5,11 @@ export default defineNuxtConfig({
shim: false
},
ssr: false,
modules: ['@nuxtjs/tailwindcss', 'nuxt-icon'],
modules: ['@nuxtjs/tailwindcss', 'nuxt-icon', '@nuxtjs/google-fonts'],
googleFonts: {
families: {
'DM+Sans': [600, '1000'],
'Protest+Riot': true
}
}
})

View File

@ -2,7 +2,7 @@
"name": "crunchyroll-downloader",
"author": "Stratum",
"description": "Crunchyroll Downloader",
"version": "1.0.2",
"version": "1.0.3",
"private": true,
"main": ".output/src/electron/background.js",
"scripts": {
@ -17,11 +17,12 @@
},
"devDependencies": {
"@nuxtjs/eslint-config-typescript": "^12.1.0",
"@nuxtjs/google-fonts": "^3.2.0",
"@nuxtjs/tailwindcss": "^6.12.0",
"@types/express": "^4.17.21",
"concurrently": "^8.2.2",
"electron": "^23.3.13",
"electron-builder": "^23.6.0",
"electron": "^30.0.1",
"electron-builder": "^24.13.3",
"eslint": "^8.57.0",
"eslint-config-prettier": "^8.10.0",
"eslint-plugin-prettier": "^4.2.1",
@ -35,6 +36,7 @@
"wait-on": "^7.2.0"
},
"dependencies": {
"7zip-bin": "^5.2.0",
"@fastify/cors": "^9.0.1",
"@pinia/nuxt": "^0.4.11",
"@types/crypto-js": "^4.2.2",
@ -60,6 +62,7 @@
"uuid": "^9.0.1"
},
"build": {
"extends": null,
"asarUnpack": [
"node_modules/ffmpeg-static/bin/${os}/${arch}/ffmpeg",
"node_modules/ffmpeg-static/index.js",

View File

@ -1,10 +1,10 @@
<template>
<div class="h-screen overflow-hidden bg-[#111111] flex flex-col p-5 text-white" style="-webkit-app-region: drag">
<div class="h-screen overflow-hidden bg-[#11111189] flex flex-col p-5 text-white font-dm" style="-webkit-app-region: drag">
<div class="relative flex flex-row items-center justify-center">
<button
v-if="tab === 2"
@click=";(tab = 1), (added = false), (CRselectedShow = null), (ADNselectedShow = null)"
class="absolute left-0 bg-[#5c5b5b] py-1 px-3 rounded-xl flex flex-row items-center justify-center gap-0.5 hover:bg-[#4b4a4a] transition-all"
class="absolute left-0 bg-[#5c5b5b9c] py-1.5 px-3 rounded-xl flex flex-row items-center justify-center gap-0.5 hover:bg-[#4b4a4a] transition-all text-sm"
style="-webkit-app-region: no-drag"
>
<Icon name="formkit:arrowleft" class="h-5 w-5" />
@ -14,7 +14,7 @@
</div>
<div v-if="tab === 1" class="flex flex-col mt-5 gap-3.5 h-full" style="-webkit-app-region: no-drag">
<div class="relative flex flex-col">
<select v-model="service" name="service" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer">
<select v-model="service" name="service" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center cursor-pointer">
<option value="crunchyroll">Crunchyroll</option>
<option value="adn">ADN</option>
</select>
@ -23,18 +23,16 @@
<input
v-model="search"
@input="handleInputChange"
type="search"
name="search"
placeholder="Search"
class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center"
placeholder="SEARCH"
class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center"
/>
<div v-if="isFetchingResults" class="absolute top-full left-0 h-28 w-full bg-[#868585] rounded-xl z-10 flex items-center justify-center">
<div class="absolute top-full left-0 h-28 w-full bg-[#868585] rounded-xl z-10 flex items-center justify-center transition-all duration-300" :class="isFetchingResults ? 'opacity-100' : 'opacity-0 pointer-events-none'">
<Icon name="mdi:loading" class="h-8 w-8 animate-spin" />
</div>
<div
v-if="searchActive"
class="absolute top-full left-0 h-40 w-full bg-[#868585] rounded-xl overflow-y-scroll grid grid-cols-2 gap-3 p-2 z-10"
class="absolute top-full left-0 h-40 w-full bg-[#868585] rounded-xl overflow-y-scroll grid grid-cols-2 gap-3 p-2 z-10 transition-all duration-300"
style="-webkit-app-region: no-drag"
:class="searchActive ? 'opacity-100' : 'opacity-0 pointer-events-none'"
>
<button v-for="result in crunchySearchResults" @click="selectShow(result)" class="flex flex-row gap-3 px-3 py-3 hover:bg-[#747474] rounded-xl">
<div class="min-w-10 w-10 bg-gray-700">
@ -62,7 +60,7 @@
</div>
</div>
<div v-if="(isLoggedInCR && service === 'crunchyroll') || (isLoggedInADN && service === 'adn')" class="relative flex flex-col">
<input v-model="url" type="text" name="text" placeholder="URL" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center" />
<input v-model="url" type="text" name="text" placeholder="URL" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center" />
</div>
<div v-if="(isLoggedInCR && service === 'crunchyroll') || (isLoggedInADN && service === 'adn')" class="relative flex flex-col">
<input
@ -76,10 +74,10 @@
/>
</div>
<div v-if="!isLoggedInCR && service === 'crunchyroll'" class="relative flex flex-col">
<button @click="openCRLogin" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer">Click to Login</button>
<button @click="openCRLogin" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center cursor-pointer">Click to Login</button>
</div>
<div v-if="!isLoggedInADN && service === 'adn'" class="relative flex flex-col">
<button @click="openADNLogin" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center cursor-pointer">Click to Login</button>
<button @click="openADNLogin" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center cursor-pointer">Click to Login</button>
</div>
<div class="relative flex flex-col mt-auto">
<button @click="switchToSeason" class="relative py-3 border-2 rounded-xl flex flex-row items-center justify-center">
@ -788,4 +786,29 @@ const addToPlaylistADN = async () => {
::-webkit-scrollbar {
width: 8px;
}
.font-dm {
font-family: "DM Sans", sans-serif;
}
.font-protest {
font-family: "Protest Riot", sans-serif;
font-weight: 400;
font-style: normal;
}
.font-dm-big {
font-family: "DM Sans", sans-serif;
font-weight: 1000;
font-style: normal;
}
select {
background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
background-position: calc(100% - 0.75rem) center !important;
background-color: #5c5b5b;
-moz-appearance:none !important;
-webkit-appearance: none !important;
appearance: none !important;
}
</style>

View File

@ -1,14 +1,14 @@
<template>
<div class="h-screen overflow-hidden bg-[#111111] flex flex-col p-5 text-white" style="-webkit-app-region: drag">
<div class="h-screen overflow-hidden bg-[#11111189] flex flex-col p-5 text-white font-dm" style="-webkit-app-region: drag">
<div class="relative flex flex-row items-center justify-center">
<div class="text-2xl">ADN Login</div>
</div>
<div class="flex flex-col mt-5 gap-3.5 h-full" style="-webkit-app-region: no-drag">
<div class="relative flex flex-col">
<input v-model="username" type="text" name="text" placeholder="Email" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center" />
<input v-model="username" type="text" name="text" placeholder="Email" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center" />
</div>
<div class="relative flex flex-col">
<input v-model="password" type="password" name="text" placeholder="Password" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center" />
<input v-model="password" type="password" name="text" placeholder="Password" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center" />
</div>
</div>
<div class="relative flex flex-col mt-auto">
@ -56,4 +56,20 @@ const login = async () => {
}
</script>
<style></style>
<style>
.font-dm {
font-family: "DM Sans", sans-serif;
}
.font-protest {
font-family: "Protest Riot", sans-serif;
font-weight: 400;
font-style: normal;
}
.font-dm-big {
font-family: "DM Sans", sans-serif;
font-weight: 1000;
font-style: normal;
}
</style>

View File

@ -1,14 +1,14 @@
<template>
<div class="h-screen overflow-hidden bg-[#111111] flex flex-col p-5 text-white" style="-webkit-app-region: drag">
<div class="h-screen overflow-hidden bg-[#11111189] flex flex-col p-5 text-white font-dm" style="-webkit-app-region: drag">
<div class="relative flex flex-row items-center justify-center">
<div class="text-2xl">Crunchyroll Login</div>
</div>
<div class="flex flex-col mt-5 gap-3.5 h-full" style="-webkit-app-region: no-drag">
<div class="relative flex flex-col">
<input v-model="username" type="text" name="text" placeholder="Email" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center" />
<input v-model="username" type="text" name="text" placeholder="Email" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center" />
</div>
<div class="relative flex flex-col">
<input v-model="password" type="password" name="text" placeholder="Password" class="bg-[#5c5b5b] focus:outline-none px-3 py-2 rounded-xl text-sm text-center" />
<input v-model="password" type="password" name="text" placeholder="Password" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center" />
</div>
</div>
<div class="relative flex flex-col mt-auto">
@ -56,4 +56,20 @@ const login = async () => {
}
</script>
<style></style>
<style>
.font-dm {
font-family: "DM Sans", sans-serif;
}
.font-protest {
font-family: "Protest Riot", sans-serif;
font-weight: 400;
font-style: normal;
}
.font-dm-big {
font-family: "DM Sans", sans-serif;
font-weight: 1000;
font-style: normal;
}
</style>

View File

@ -1,49 +1,62 @@
<template>
<div class="h-screen overflow-hidden">
<MainHeader />
<div class="flex flex-col text-white mt-16 overflow-y-scroll h-[calc(100vh-4rem)]">
<div class="flex flex-col text-white gap-5 mt-14 p-5 overflow-y-scroll h-[calc(100vh-3.5rem)]">
<!-- <button @click="deletePlaylist">
Delete Playlist
</button> -->
<div v-for="p in playlist" class="flex flex-row gap-4 h-40 p-5 bg-[#636363] border-b-[1px] border-gray-400">
<div v-if="p.service === 'CR'" class="flex min-w-52 w-52">
<img :src="(p.media as CrunchyEpisode).images.thumbnail[0].find((p) => p.height === 1080)?.source" alt="Image" class="object-cover rounded-xl" />
</div>
<div v-if="p.service === 'ADN'" class="flex min-w-52 w-52">
<img :src="(p.media as ADNEpisode).image2x" alt="Image" class="object-cover rounded-xl" />
</div>
<div class="flex flex-col w-full">
<div class="flex flex-row">
<div class="text-sm capitalize">
{{ p.status }}
<div v-for="p in playlist" class="relative flex flex-row gap-4 h-36 bg-[#63636383] rounded-xl font-dm overflow-hidden">
<div class="absolute top-0 left-0 w-full h-full bg-[#a1a1a141] transition-all duration-300" :style="`width: calc((${p.partsdownloaded} / ${p.partsleft}) * 100%);`"></div>
<div class="absolute h-full w-full flex flex-row gap-3 p-3.5">
<div v-if="p.service === 'CR'" class="flex w-48 min-w-48">
<img :src="(p.media as CrunchyEpisode).images.thumbnail[0].find((p) => p.height === 1080)?.source" alt="Image" class="object-cover rounded-lg" />
</div>
<div v-if="p.service === 'ADN'" class="flex min-w-52 w-52">
<img :src="(p.media as ADNEpisode).image2x" alt="Image" class="object-cover rounded-lg" />
</div>
<div class="flex flex-col w-full">
<div class="flex flex-row h-full">
<div class="flex flex-col">
<div v-if="p.status === 'waiting'" class="flex flex-row items-center justify-center gap-1 text-xs capitalize p-1.5 bg-[#866332] rounded-lg">
<Icon name="mdi:clock" class="h-3.5 w-3.5 text-white" />
{{ p.status }}
</div>
<div v-if="p.status === 'preparing'" class="flex flex-row items-center justify-center gap-1 text-xs capitalize p-1.5 bg-[#866332] rounded-lg">
<Icon name="mdi:clock" class="h-3.5 w-3.5 text-white" />
{{ p.status }}
</div>
<div v-if="p.status === 'downloading'" class="flex flex-row items-center justify-center gap-1 text-xs capitalize p-1.5 bg-[#60501b] rounded-lg">
<Icon name="mdi:loading" class="h-3.5 w-3.5 text-white animate-spin" />
{{ p.status }}
</div>
<div v-if="p.status === 'merging'" class="flex flex-row items-center justify-center gap-1 text-xs capitalize p-1.5 bg-[#866332] rounded-lg">
<Icon name="mdi:loading" class="h-3.5 w-3.5 text-white animate-spin" />
{{ p.status }}
</div>
<div v-if="p.status === 'completed'" class="flex flex-row items-center justify-center gap-1 text-xs capitalize p-1.5 bg-[#266326] rounded-lg">
<Icon name="material-symbols:check" class="h-3.5 w-3.5 text-white" />
{{ p.status }}
</div>
</div>
<div class="text-xs capitalize ml-auto">
{{ p.service === 'CR' ? 'Crunchyroll' : 'ADN' }}
</div>
</div>
<div class="text-sm capitalize ml-auto">
{{ p.service === 'CR' ? 'Crunchyroll' : 'ADN' }}
<div v-if="p.service === 'CR'" class="text-base capitalize h-full flex items-center">
{{ (p.media as CrunchyEpisode).series_title }} Season {{ (p.media as CrunchyEpisode).season_number }} Episode {{ (p.media as CrunchyEpisode).episode_number }}
</div>
<div v-if="p.service === 'ADN'" class="text-base capitalize h-full">
{{ (p.media as ADNEpisode).show.title }} Season {{ (p.media as ADNEpisode).season ? (p.media as ADNEpisode).season : 1 }} Episode
{{ (p.media as ADNEpisode).shortNumber }}
</div>
<div class="flex flex-row gap-2 h-full items-end">
<div class="text-xs">{{ p.quality }}p</div>
<div class="text-xs uppercase">{{ p.format }}</div>
<div class="text-xs">Dubs: {{ p.dub.map((t) => t.name).join(', ') }}</div>
<div class="text-xs">Subs: {{ p.sub.length !== 0 ? p.sub.map((t) => t.name).join(', ') : '-' }}</div>
<div v-if="p.partsleft && p.status === 'downloading'" class="text-xs ml-auto">{{ p.partsdownloaded }}/{{ p.partsleft }}</div>
<div v-if="p.downloadspeed && p.status === 'downloading'" class="text-xs">{{ p.downloadspeed }} MB/s</div>
</div>
</div>
<div v-if="p.service === 'CR'" class="text-base capitalize">
{{ (p.media as CrunchyEpisode).series_title }} Season {{ (p.media as CrunchyEpisode).season_number }} Episode {{ (p.media as CrunchyEpisode).episode_number }}
</div>
<div v-if="p.service === 'ADN'" class="text-base capitalize">
{{ (p.media as ADNEpisode).show.title }} Season {{ (p.media as ADNEpisode).season ? (p.media as ADNEpisode).season : 1 }} Episode {{ (p.media as ADNEpisode).shortNumber }}
</div>
<div class="relative w-full min-h-5 bg-[#bdbbbb] mt-1 rounded">
<div
v-if="p.partsleft && p.status === 'downloading'"
class="w-full h-full rounded bg-[#4e422d] transition-all duration-300"
:style="`width: calc((${p.partsdownloaded} / ${p.partsleft}) * 100%);`"
></div>
<div v-if="p.status === 'completed'" class="w-full h-full rounded bg-[#79ff77] transition-all duration-300"></div>
<div v-if="p.status === 'merging'" class="absolute top-0 w-20 h-full rounded bg-[#293129] transition-all duration-300 loading-a"></div>
</div>
<div class="flex h-full"> </div>
<div class="flex flex-row gap-2 mt-2">
<div class="text-sm">{{ p.quality }}p</div>
<div class="text-sm uppercase">{{ p.format }}</div>
<div class="text-sm">Dubs: {{ p.dub.map((t) => t.name).join(', ') }}</div>
<div class="text-sm">Subs: {{ p.sub.length !== 0 ? p.sub.map((t) => t.name).join(', ') : '-' }}</div>
<div v-if="p.partsleft && p.status === 'downloading'" class="text-sm ml-auto">{{ p.partsdownloaded }}/{{ p.partsleft }}</div>
<div v-if="p.downloadspeed && p.status === 'downloading'" class="text-sm">{{ p.downloadspeed }} MB/s</div>
</div>
</div>
</div>
@ -124,13 +137,36 @@ onMounted(() => {
})
</script>
<style scoped>
<style>
body {
background: none;
background-color: none;
background: transparent;
background-color: transparent;
}
.font-dm {
font-family: 'DM Sans', sans-serif;
}
.font-protest {
font-family: 'Protest Riot', sans-serif;
font-weight: 400;
font-style: normal;
}
.font-dm-big {
font-family: 'DM Sans', sans-serif;
font-weight: 1000;
font-style: normal;
}
.loading-a {
animation: animation infinite 3s;
}
::-webkit-scrollbar-track {
background: #303030;
background: #383838;
}
/* Handle */

File diff suppressed because it is too large Load Diff

BIN
public/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

View File

@ -24,7 +24,6 @@ function createWindow() {
icon: __dirname + '/icon/favicon.ico',
width: 950,
height: 700,
backgroundColor: '#111111',
webPreferences: {
devTools: true,
nodeIntegration: true,
@ -33,11 +32,15 @@ function createWindow() {
},
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#111111',
color: 'rgba(0,0,0,0)',
symbolColor: '#ffffff',
height: 40
height: 40,
},
resizable: false
resizable: false,
fullscreen: false,
maximizable: false,
vibrancy: 'fullscreen-ui',
backgroundMaterial: 'acrylic',
})
mainWindow.webContents.setWindowOpenHandler(() => {
@ -58,11 +61,23 @@ function createWindow() {
symbolColor: '#ffffff',
height: 40
},
resizable: false
resizable: false,
fullscreen: false,
maximizable: false,
vibrancy: 'fullscreen-ui',
backgroundMaterial: 'acrylic',
}
}
})
mainWindow.on('blur', () => {
mainWindow.setBackgroundColor('#00000000')
})
mainWindow.on('focus', () => {
mainWindow.setBackgroundColor('#00000000')
})
// Lock app to single instance
if (singleInstance(app, mainWindow)) return
@ -192,7 +207,6 @@ ipcMain.handle(
url: string
width: number
height: number
backgroundColor: string
}
) => {
const mainWindow = new BrowserWindow({
@ -200,7 +214,6 @@ ipcMain.handle(
icon: __dirname + '/icon/favicon.ico',
width: opt.width,
height: opt.height,
backgroundColor: opt.backgroundColor,
webPreferences: {
devTools: true,
nodeIntegration: true,
@ -209,11 +222,15 @@ ipcMain.handle(
},
titleBarStyle: 'hidden',
titleBarOverlay: {
color: '#111111',
color: 'rgba(0,0,0,0)',
symbolColor: '#ffffff',
height: 40
},
resizable: false
resizable: false,
fullscreen: false,
maximizable: false,
vibrancy: 'fullscreen-ui',
backgroundMaterial: 'acrylic',
})
mainWindow.webContents.once('did-finish-load', () => {