Mirrors/CrunchyDL
2
0
Fork 0
mirror of https://github.com/OpenSTDL/CrunchyDL.git synced 2024-10-18 14:05:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

updated design and switched versions

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build.js
View File

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

37
components/MainHeader.vue
View File

@ -1,22 +1,29 @@
<template> <template>
<div class="fixed w-full flex flex-row bg-[#111111] h-16 z-10" style="-webkit-app-region: drag"> <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-"> <div class="w-full flex gap-10 flex-row items-center justify-center px-5">
<button @click="openAddAnime" class="px-6 py-0.5 border-2 border-[#ce6104] rounded-xl" style="-webkit-app-region: no-drag"> <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-7 w-7 text-[#ce6104]" /> <Icon name="ph:plus-bold" class="h-3.5 w-3.5 text-white" />
</button> <div class="text-[11px] text-white font-dm">
<button class="px-6 py-0.5 border-2 border-[#ce6104] rounded-xl" style="-webkit-app-region: no-drag"> ADD DOWNLOAD
<Icon name="material-symbols:globe" class="h-7 w-7 text-[#ce6104]" /> </div>
</button> </button>
</div> </div>
<div class="w-full flex flex-row items-center justify-center"> <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>
<div class="w-full flex gap-4 flex-row items-center justify-start px-5"> <div class="w-full flex gap-2 flex-row items-center justify-center">
<button class="px-6 py-0.5 border-2 border-[#ce6104] rounded-xl" style="-webkit-app-region: no-drag"> <!-- <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-7 w-7 text-[#ce6104]" /> <Icon name="iconamoon:playlist" class="h-3.5 w-3.5 text-white" />
</button> <div class="text-[11px] text-white font-dm">
<button @click="openSettings" class="px-6 py-0.5 border-2 border-[#ce6104] rounded-xl" style="-webkit-app-region: no-drag"> PLAYLIST
<Icon name="ic:round-settings" class="h-7 w-7 text-[#ce6104]" /> </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> </button>
</div> </div>
</div> </div>
@ -61,5 +68,3 @@ async function openAddAnime() {
}) })
} }
</script> </script>
<style></style>

9
nuxt.config.ts
View File

@ -5,6 +5,11 @@ export default defineNuxtConfig({
shim: false shim: false
}, },
ssr: 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
}
}
}) })

9
package.json
View File

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

49
pages/addanime.vue
View File

@ -1,10 +1,10 @@
<template> <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="relative flex flex-row items-center justify-center">
<button <button
v-if="tab === 2" v-if="tab === 2"
@click=";(tab = 1), (added = false), (CRselectedShow = null), (ADNselectedShow = null)" @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" style="-webkit-app-region: no-drag"
> >
<Icon name="formkit:arrowleft" class="h-5 w-5" /> <Icon name="formkit:arrowleft" class="h-5 w-5" />
@ -14,7 +14,7 @@
</div> </div>
<div v-if="tab === 1" class="flex flex-col mt-5 gap-3.5 h-full" style="-webkit-app-region: no-drag"> <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"> <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="crunchyroll">Crunchyroll</option>
<option value="adn">ADN</option> <option value="adn">ADN</option>
</select> </select>
@ -23,18 +23,16 @@
<input <input
v-model="search" v-model="search"
@input="handleInputChange" @input="handleInputChange"
type="search" placeholder="SEARCH"
name="search" class="bg-[#5c5b5b] focus:outline-none px-3 py-3 rounded-xl text-sm text-center"
placeholder="Search"
class="bg-[#5c5b5b] focus:outline-none px-3 py-2 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" /> <Icon name="mdi:loading" class="h-8 w-8 animate-spin" />
</div> </div>
<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 transition-all duration-300"
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"
style="-webkit-app-region: no-drag" 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"> <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"> <div class="min-w-10 w-10 bg-gray-700">
@ -62,7 +60,7 @@
</div> </div>
</div> </div>
<div v-if="(isLoggedInCR && service === 'crunchyroll') || (isLoggedInADN && service === 'adn')" class="relative flex flex-col"> <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>
<div v-if="(isLoggedInCR && service === 'crunchyroll') || (isLoggedInADN && service === 'adn')" class="relative flex flex-col"> <div v-if="(isLoggedInCR && service === 'crunchyroll') || (isLoggedInADN && service === 'adn')" class="relative flex flex-col">
<input <input
@ -76,10 +74,10 @@
/> />
</div> </div>
<div v-if="!isLoggedInCR && service === 'crunchyroll'" class="relative flex flex-col"> <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>
<div v-if="!isLoggedInADN && service === 'adn'" class="relative flex flex-col"> <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>
<div class="relative flex flex-col mt-auto"> <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"> <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 { ::-webkit-scrollbar {
width: 8px; 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> </style>

24
pages/adnlogin.vue
View File

@ -1,14 +1,14 @@
<template> <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="relative flex flex-row items-center justify-center">
<div class="text-2xl">ADN Login</div> <div class="text-2xl">ADN Login</div>
</div> </div>
<div class="flex flex-col mt-5 gap-3.5 h-full" style="-webkit-app-region: no-drag"> <div class="flex flex-col mt-5 gap-3.5 h-full" style="-webkit-app-region: no-drag">
<div class="relative flex flex-col"> <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>
<div class="relative flex flex-col"> <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> </div>
<div class="relative flex flex-col mt-auto"> <div class="relative flex flex-col mt-auto">
@ -56,4 +56,20 @@ const login = async () => {
} }
</script> </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>

24
pages/crunchylogin.vue
View File

@ -1,14 +1,14 @@
<template> <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="relative flex flex-row items-center justify-center">
<div class="text-2xl">Crunchyroll Login</div> <div class="text-2xl">Crunchyroll Login</div>
</div> </div>
<div class="flex flex-col mt-5 gap-3.5 h-full" style="-webkit-app-region: no-drag"> <div class="flex flex-col mt-5 gap-3.5 h-full" style="-webkit-app-region: no-drag">
<div class="relative flex flex-col"> <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>
<div class="relative flex flex-col"> <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> </div>
<div class="relative flex flex-col mt-auto"> <div class="relative flex flex-col mt-auto">
@ -56,4 +56,20 @@ const login = async () => {
} }
</script> </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>

116
pages/index.vue
View File

@ -1,49 +1,62 @@
<template> <template>
<div class="h-screen overflow-hidden"> <div class="h-screen overflow-hidden">
<MainHeader /> <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"> <!-- <button @click="deletePlaylist">
Delete Playlist Delete Playlist
</button> --> </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-for="p in playlist" class="relative flex flex-row gap-4 h-36 bg-[#63636383] rounded-xl font-dm overflow-hidden">
<div v-if="p.service === 'CR'" class="flex min-w-52 w-52"> <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>
<img :src="(p.media as CrunchyEpisode).images.thumbnail[0].find((p) => p.height === 1080)?.source" alt="Image" class="object-cover rounded-xl" /> <div class="absolute h-full w-full flex flex-row gap-3 p-3.5">
</div> <div v-if="p.service === 'CR'" class="flex w-48 min-w-48">
<div v-if="p.service === 'ADN'" 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-lg" />
<img :src="(p.media as ADNEpisode).image2x" alt="Image" class="object-cover rounded-xl" /> </div>
</div> <div v-if="p.service === 'ADN'" class="flex min-w-52 w-52">
<div class="flex flex-col w-full"> <img :src="(p.media as ADNEpisode).image2x" alt="Image" class="object-cover rounded-lg" />
<div class="flex flex-row"> </div>
<div class="text-sm capitalize"> <div class="flex flex-col w-full">
{{ p.status }} <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>
<div class="text-sm capitalize ml-auto"> <div v-if="p.service === 'CR'" class="text-base capitalize h-full flex items-center">
{{ p.service === 'CR' ? 'Crunchyroll' : 'ADN' }} {{ (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>
<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> </div>
</div> </div>
@ -124,13 +137,36 @@ onMounted(() => {
}) })
</script> </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 { .loading-a {
animation: animation infinite 3s; animation: animation infinite 3s;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: #303030; background: #383838;
} }
/* Handle */ /* Handle */

512
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

BIN
public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

35
src/electron/background.ts
View File

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