Merge branch 'master' into release

.github/workflows/push_web_version.yml

@@ -0,0 +1,34 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Install Dependencies
+      run: npm install
+
+    - name: Build
+      run: npm run build-web
+
+    - name: Deploy
+      uses: JamesIves/github-pages-deploy-action@v4
+      with:
+        folder: dist      # The folder the action should deploy.
+        branch: gh-pages  # The branch the action should deploy to.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "mp3chapters-player",
   "private": true,
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "tauri": "webpack --config webpack.tauri.config.js && tauri",

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;

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 = "";
                 }
             }
         }

src-web/index.html

@@ -5,10 +5,10 @@
   <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" />
+  <link rel="stylesheet" href="vidstack/theme.min.css" />
+  <link rel="stylesheet" href="vidstack/audio.min.css" />
   <style>
     html,
     body {
@@ -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;
@@ -182,7 +184,7 @@
   <div class="container">
     <div class="top">
       <img
-        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
+        src="instruction.svg"
         id="cover-image">
       <div class="chapter-toc">
         <div class="chapter-toc-list">

src-web/main-web.js

@@ -16,6 +16,23 @@ function isAudioFile(ev) {
     return false;
 }
 
+function selectAndLoadFile() {
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.accept = 'audio/*';
+    fileInput.addEventListener('change', function () {
+        const file = fileInput.files[0];
+        const url = URL.createObjectURL(file);
+        player.src = { src: url, type: 'audio/mpeg' };
+        loadFile(player, url);
+        fileInput.remove();
+        document.getElementById('cover-image').style.cursor = 'default';
+        document.getElementById('cover-image').removeEventListener('click', selectAndLoadFile);
+    });
+    fileInput.click();
+}
+
+
 // if gallery is not visible, display a full screen drop overlay
 // if gallery is visible, display a drop overlay only over the hero image
 
@@ -93,6 +110,11 @@ window.addEventListener("DOMContentLoaded", async () => {
         loadFile(player, url);
     });
 
+
+    const coverImageElement = document.getElementById('cover-image');
+    coverImageElement.style.cursor = 'pointer';
+    coverImageElement.addEventListener('click', selectAndLoadFile);
+
     // document.querySelector(".container").addEventListener("click", 
     //   async function openFile() {
     //     /* show open file dialog */

webpack.web.config.js

@@ -31,6 +31,7 @@ export default {
                 { from: 'src-web/index.html', to: 'index.html' },
                 // { from: 'src-web/example.mp3', to: 'example.mp3' },
                 // { from: 'src-web/silence.mp3', to: 'silence.mp3' },
+                { from: 'src-web/instruction.svg', to: 'instruction.svg' },
                 { from: 'src-web/vidstack', to: 'vidstack' },
             ],
         }),