show chapter progress bar

mp3chapters · Mar 2, 2024 · 5c64d81 · 5c64d81
1 parent 332d2d9
commit 5c64d81
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/src-app/index.html b/src-app/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <!-- <link rel="stylesheet" href="styles.css" /> -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Tauri App</title>
+  <title>MP3 Chapter Player</title>
   <script type="module" src="dist/main.js"></script>
   <link rel="stylesheet" href="/vidstack/theme.min.css" />
   <link rel="stylesheet" href="/vidstack/audio.min.css" />
@@ -82,6 +82,8 @@
     }
 
     .chapter-toc-item {
+      --toc-item-background-color: #1c1c1c;
+      --toc-progress-color: #3d3d3d;
       margin: 4px 0;
       position: relative;
       display: flex;
@@ -90,33 +92,33 @@
       width: 300px;
       color: white;
       border: 1px solid #666;
-      background-color: #1c1c1c;
+      background-color: var(--toc-item-background-color);
       cursor: pointer;
     }
 
     .chapter-toc-item:hover {
-      background-color: #333;
+      --toc-item-background-color: #333;
       border: 1px solid #999;
     }
 
     .chapter-toc-item:active {
-      background-color: #666;
+      --toc-item-background-color: #666;
       border: 1px solid #fff;
       transform: scale(0.98);
     }
 
     .chapter-toc-item.current-toc-item {
-      background-color: #333;
+      --toc-item-background-color: #2c2c2c;
       border: 1px solid #999;
       transform: scale(1.02);
     }
 
     .chapter-toc-item.current-toc-item:hover {
-      background-color: #444;
+      --toc-item-background-color: #444;
     }
 
     .chapter-toc-item.current-toc-item:active {
-      background-color: #666;
+      --toc-item-background-color: #666;
       border: 1px solid #fff;
       transform: scale(0.99);
     }
@@ -130,7 +132,7 @@
     }
 
     div.chapter-toc-image {
-      background-color: #000;
+      background-color: #00000090;
       display: flex;
       justify-content: center;
       align-items: center;

diff --git a/src-common/Player.js b/src-common/Player.js
@@ -68,8 +68,11 @@ export function startUp() {
                         chapterItem.classList.add('current-toc-item');
                         chapterItem.scrollIntoView({block: "center", behavior: "smooth"});
                     }
+                    const percentPlayed = 100 * (window.currentTime - currentVisibleChapter.start) / (currentVisibleChapter.end - currentVisibleChapter.start);
+                    chapterItem.style.background = `linear-gradient(to right, var(--toc-progress-color) ${percentPlayed}%, var(--toc-item-background-color) ${percentPlayed}%)`;
                 } else {
                     chapterItem.classList.remove('current-toc-item');
+                    chapterItem.style.background = "";
                 }
             }
         }

diff --git a/src-web/index.html b/src-web/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <!-- <link rel="stylesheet" href="styles.css" /> -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Tauri App</title>
+  <title>MP3 Chapter Player</title>
   <script type="module" src="main.js"></script>
   <link rel="stylesheet" href="vidstack/theme.min.css" />
   <link rel="stylesheet" href="vidstack/audio.min.css" />
@@ -82,6 +82,8 @@
     }
 
     .chapter-toc-item {
+      --toc-item-background-color: #1c1c1c;
+      --toc-progress-color: #3d3d3d;
       margin: 4px 0;
       position: relative;
       display: flex;
@@ -90,33 +92,33 @@
       width: 300px;
       color: white;
       border: 1px solid #666;
-      background-color: #1c1c1c;
+      background-color: var(--toc-item-background-color);
       cursor: pointer;
     }
 
     .chapter-toc-item:hover {
-      background-color: #333;
+      --toc-item-background-color: #333;
       border: 1px solid #999;
     }
 
     .chapter-toc-item:active {
-      background-color: #666;
+      --toc-item-background-color: #666;
       border: 1px solid #fff;
       transform: scale(0.98);
     }
 
     .chapter-toc-item.current-toc-item {
-      background-color: #333;
+      --toc-item-background-color: #2c2c2c;
       border: 1px solid #999;
       transform: scale(1.02);
     }
 
     .chapter-toc-item.current-toc-item:hover {
-      background-color: #444;
+      --toc-item-background-color: #444;
     }
 
     .chapter-toc-item.current-toc-item:active {
-      background-color: #666;
+      --toc-item-background-color: #666;
       border: 1px solid #fff;
       transform: scale(0.99);
     }
@@ -130,7 +132,7 @@
     }
 
     div.chapter-toc-image {
-      background-color: #000;
+      background-color: #00000090;
       display: flex;
       justify-content: center;
       align-items: center;