theming
This commit is contained in:
parent
25a8c79b71
commit
fb30b57d3b
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) {
|
@media (prefers-color-scheme: light) {
|
||||||
body {
|
:root {
|
||||||
background: rgb(18, 18, 18);
|
--bg: #f0f0f0;
|
||||||
color: rgb(240, 240, 240);
|
--font-color: #121212;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: dark) {
|
||||||
body {
|
:root {
|
||||||
background: rgb(240, 240, 240);
|
--bg: #121212;
|
||||||
color: rgb(18, 18, 18);
|
--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>
|
<body>
|
||||||
<h1>Discord Video Sharing</h1>
|
<h1>Discord Video Sharing</h1>
|
||||||
<p id="message"></p>
|
<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>
|
<script src="../dist/scripts/renderer.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -17,9 +17,10 @@ const moviesFilter = {
|
||||||
/** Create a new window */
|
/** Create a new window */
|
||||||
const createWindow = () => {
|
const createWindow = () => {
|
||||||
const win = new BrowserWindow({
|
const win = new BrowserWindow({
|
||||||
width: 1280,
|
width: 600,
|
||||||
height: 720,
|
height: 340,
|
||||||
icon: "./image/icon.ico",
|
icon: "./image/icon.ico",
|
||||||
|
autoHideMenuBar: true,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
preload: path.join(__dirname, "preload.js"),
|
preload: path.join(__dirname, "preload.js"),
|
||||||
},
|
},
|
||||||
|
|
|
@ -31,13 +31,18 @@ const getFile = async () => {
|
||||||
return file.join("");
|
return file.join("");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/** Either replace the message, or add some info */
|
||||||
enum Mode {
|
enum Mode {
|
||||||
Write,
|
Write,
|
||||||
Append,
|
Append,
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Update the message to the user */
|
/** 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) {
|
switch (mode) {
|
||||||
case Mode.Write:
|
case Mode.Write:
|
||||||
document.getElementById("message").innerText = message;
|
document.getElementById("message").innerText = message;
|
||||||
|
@ -50,6 +55,9 @@ const updateMessage = (message: string, mode: Mode = Mode.Write) => {
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
document.getElementById("load").style.visibility = load
|
||||||
|
? "visible"
|
||||||
|
: "hidden";
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Main function */
|
/** Main function */
|
||||||
|
@ -57,18 +65,19 @@ const main = async () => {
|
||||||
const maxSizeDiscord = 25;
|
const maxSizeDiscord = 25;
|
||||||
updateMessage("Récupération du fichier...");
|
updateMessage("Récupération du fichier...");
|
||||||
const file = await getFile();
|
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);
|
const newFile = await internals.mergeAudio(file);
|
||||||
let finalTitle = newFile.title;
|
let finalTitle = newFile.title;
|
||||||
updateMessage(`Taille calculée : ~${Math.round(newFile.size)}Mio`);
|
updateMessage(`Taille calculée : ~${Math.round(newFile.size)}Mio`);
|
||||||
if (newFile.size > maxSizeDiscord) {
|
if (newFile.size > maxSizeDiscord) {
|
||||||
const targetSize = maxSizeDiscord - 2;
|
const targetSize = maxSizeDiscord - 2; // keep some room
|
||||||
|
|
||||||
// https://trac.ffmpeg.org/wiki/Encode/H.264#twopass
|
// https://trac.ffmpeg.org/wiki/Encode/H.264#twopass
|
||||||
const bitrate = Math.floor((targetSize * 8388.608) / newFile.duration);
|
const bitrate = Math.floor((targetSize * 8388.608) / newFile.duration);
|
||||||
|
|
||||||
updateMessage(
|
updateMessage(
|
||||||
`\nFichier trop lourd, compression en cours... (bitrate total = ${bitrate}kbps)`,
|
`\nFichier trop lourd, compression en cours... (bitrate total = ${bitrate}kbps)`,
|
||||||
|
true,
|
||||||
Mode.Append
|
Mode.Append
|
||||||
);
|
);
|
||||||
finalTitle = await internals.reduceSize(
|
finalTitle = await internals.reduceSize(
|
||||||
|
|
Loading…
Reference in a new issue