diff --git a/.github/workflows/push_web_version.yml b/.github/workflows/push_web_version.yml
new file mode 100644
index 0000000..9326ee2
--- /dev/null
+++ b/.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.
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e98e6ca..52aad3e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "mp3chapters-player",
- "version": "0.1.0",
+ "version": "0.2.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mp3chapters-player",
- "version": "0.1.0",
+ "version": "0.2.0",
"dependencies": {
"@tauri-apps/api": "^1.5.3",
"vidstack": "^1.9.8"
diff --git a/package.json b/package.json
index e2f3cd7..2afee75 100644
--- a/package.json
+++ b/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",
diff --git a/src-app/index.html b/src-app/index.html
index 31032ea..22902ec 100644
--- a/src-app/index.html
+++ b/src-app/index.html
@@ -5,7 +5,7 @@
- Tauri App
+ MP3 Chapter Player
@@ -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
index 077ad62..8788fe0 100644
--- 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
index 95769eb..cebd2e8 100644
--- a/src-web/index.html
+++ b/src-web/index.html
@@ -5,10 +5,10 @@
- Tauri App
+ MP3 Chapter Player
-
-
+
+
+
+
+
+
+
+
+
+
+
+ Click to select MP3 file
+
+
+
+ or
+
+ drag
+
+ and
+
+ drop
+
+ file
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src-web/main-web.js b/src-web/main-web.js
index 6d07c66..cf99a0c 100644
--- a/src-web/main-web.js
+++ b/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 */
diff --git a/webpack.web.config.js b/webpack.web.config.js
index ae04496..862f451 100644
--- a/webpack.web.config.js
+++ b/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' },
],
}),