added a progress bar

This commit is contained in:
2024-03-03 15:32:53 +01:00
parent 9f29e6d64c
commit 6ff254ddf4
6 changed files with 60 additions and 7 deletions

View File

@ -1,7 +1,5 @@
const { listen } = window.__TAURI__.event
document.getElementById("fileLocation").innerHTML = "hey";
// listen for file location from rust backend
const unlistenfile = await listen('file_path_changed', (event) => {
document.getElementById("fileLocation").innerHTML = event.payload.message;

View File

@ -25,7 +25,10 @@
</div>
<div>
<textarea id="chapterList" rows="30">nothing for now</textarea>
<textarea id="chapterList" rows="30">
0:00 - my first song
3:30 - another one
13:37 - one more time - Daft punk</textarea>
</div>
<div class="select-file">

16
src/progress.html Normal file
View File

@ -0,0 +1,16 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<script type="module" src="/progress.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Slicing progress</title>
</head>
<body>
<p class="credit" id="progress_label"> Slicing : 0% </p>
<div class="progress_center">
<progress value="0" max="100" id="progress_bar"></progress>
</div>
</body>

8
src/progress.js Normal file
View File

@ -0,0 +1,8 @@
const { listen } = window.__TAURI__.event
// listen for progress update from rust backend
const unlistenprogress = await listen('progress_state_changed', (event) => {
document.getElementById("progress_label").innerHTML = "Slicing : "+event.payload.message+"%";
document.getElementById("progress_bar").value = event.payload.message;
console.log("changing progress bar state to : ", event.payload.message);
})

View File

@ -139,4 +139,15 @@ button {
@-webkit-keyframes scroll {
from { background-position: 0 0, 50px 50px, 50px 0; }
to { background-position: -100px -100px, -50px -50px, -50px -100px; }
}
progress::-moz-progress-bar { background: #d88939; }
progress::-webkit-progress-value { background: #d88939; }
progress {
color: #d88939;
width: 100%;
}
.progress_center {
text-align: center;
}