From fb30b57d3b82337f37f40362ac53a42509c27b19 Mon Sep 17 00:00:00 2001 From: Mylloon Date: Tue, 1 Aug 2023 11:07:29 +0200 Subject: [PATCH] theming --- css/style.css | 140 +++++++++++++++++++++++++++++++++++++--- pages/index.html | 14 ++++ src/main.ts | 5 +- src/scripts/renderer.ts | 15 ++++- 4 files changed, 161 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 0b83a89..3d5827d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,13 +1,137 @@ -@media (prefers-color-scheme: dark) { - body { - background: rgb(18, 18, 18); - color: rgb(240, 240, 240); +@media (prefers-color-scheme: light) { + :root { + --bg: #f0f0f0; + --font-color: #121212; } } -@media (prefers-color-scheme: light) { - body { - background: rgb(240, 240, 240); - color: rgb(18, 18, 18); +@media (prefers-color-scheme: dark) { + :root { + --bg: #121212; + --font-color: #f0f0f0; + } +} + +body { + background: var(--bg); + color: var(--font-color); +} + +/* Center */ +h1, +p { + text-align: center; + font-family: Arial, Helvetica, sans-serif; +} + +#center { + display: flex; + justify-content: center; + height: 50vh; +} + +/* Loading spinner */ +#load { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} + +#load div { + animation: roll 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + transform-origin: 40px 40px; +} + +#load div:after { + content: " "; + display: block; + position: absolute; + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--font-color); + margin: -4px 0 0 -4px; +} + +#load div:nth-child(1) { + animation-delay: -0.036s; +} + +#load div:nth-child(1):after { + top: 63px; + left: 63px; +} + +#load div:nth-child(2) { + animation-delay: -0.072s; +} + +#load div:nth-child(2):after { + top: 68px; + left: 56px; +} + +#load div:nth-child(3) { + animation-delay: -0.108s; +} + +#load div:nth-child(3):after { + top: 71px; + left: 48px; +} + +#load div:nth-child(4) { + animation-delay: -0.144s; +} + +#load div:nth-child(4):after { + top: 72px; + left: 40px; +} + +#load div:nth-child(5) { + animation-delay: -0.18s; +} + +#load div:nth-child(5):after { + top: 71px; + left: 32px; +} + +#load div:nth-child(6) { + animation-delay: -0.216s; +} + +#load div:nth-child(6):after { + top: 68px; + left: 24px; +} + +#load div:nth-child(7) { + animation-delay: -0.252s; +} + +#load div:nth-child(7):after { + top: 63px; + left: 17px; +} + +#load div:nth-child(8) { + animation-delay: -0.288s; +} + +#load div:nth-child(8):after { + top: 56px; + left: 12px; +} + +@keyframes roll { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); } } diff --git a/pages/index.html b/pages/index.html index 86064a8..90793c0 100644 --- a/pages/index.html +++ b/pages/index.html @@ -18,6 +18,20 @@

Discord Video Sharing

+ +
+ +
+ diff --git a/src/main.ts b/src/main.ts index bcfd37d..c87f9dd 100644 --- a/src/main.ts +++ b/src/main.ts @@ -17,9 +17,10 @@ const moviesFilter = { /** Create a new window */ const createWindow = () => { const win = new BrowserWindow({ - width: 1280, - height: 720, + width: 600, + height: 340, icon: "./image/icon.ico", + autoHideMenuBar: true, webPreferences: { preload: path.join(__dirname, "preload.js"), }, diff --git a/src/scripts/renderer.ts b/src/scripts/renderer.ts index aeb2d87..48524bd 100644 --- a/src/scripts/renderer.ts +++ b/src/scripts/renderer.ts @@ -31,13 +31,18 @@ const getFile = async () => { return file.join(""); }; +/** Either replace the message, or add some info */ enum Mode { Write, Append, } /** Update the message to the user */ -const updateMessage = (message: string, mode: Mode = Mode.Write) => { +const updateMessage = ( + message: string, + load: boolean = false, + mode: Mode = Mode.Write +) => { switch (mode) { case Mode.Write: document.getElementById("message").innerText = message; @@ -50,6 +55,9 @@ const updateMessage = (message: string, mode: Mode = Mode.Write) => { default: break; } + document.getElementById("load").style.visibility = load + ? "visible" + : "hidden"; }; /** Main function */ @@ -57,18 +65,19 @@ const main = async () => { const maxSizeDiscord = 25; updateMessage("Récupération du fichier..."); const file = await getFile(); - updateMessage("Mélange des pistes audios vers la piste 1..."); + updateMessage("Mélange des pistes audios vers la piste 1...", true); const newFile = await internals.mergeAudio(file); let finalTitle = newFile.title; updateMessage(`Taille calculée : ~${Math.round(newFile.size)}Mio`); if (newFile.size > maxSizeDiscord) { - const targetSize = maxSizeDiscord - 2; + const targetSize = maxSizeDiscord - 2; // keep some room // https://trac.ffmpeg.org/wiki/Encode/H.264#twopass const bitrate = Math.floor((targetSize * 8388.608) / newFile.duration); updateMessage( `\nFichier trop lourd, compression en cours... (bitrate total = ${bitrate}kbps)`, + true, Mode.Append ); finalTitle = await internals.reduceSize(