theming
This commit is contained in:
parent
25a8c79b71
commit
fb30b57d3b
GPG key ID:
A82D63DFF8D1317F
4 changed files with 161 additions and 13 deletions
140
css/style.css
140
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,20 @@
|
|||
<body>
|
||||
<h1>Discord Video Sharing</h1>
|
||||
<p id="message"></p>
|
||||
|
||||
<div id="center">
|
||||
<div id="load" style="visibility: hidden">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../dist/scripts/renderer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
Loading…
Reference in a new issue