From c423747e3460509c055bd7bb820117ab15c77a45 Mon Sep 17 00:00:00 2001 From: Dominik Peters Date: Fri, 12 Jan 2024 18:33:11 -0500 Subject: [PATCH 1/9] Create push_web_version --- .github/workflows/push_web_version | 33 ++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 .github/workflows/push_web_version diff --git a/.github/workflows/push_web_version b/.github/workflows/push_web_version new file mode 100644 index 0000000..08aec67 --- /dev/null +++ b/.github/workflows/push_web_version @@ -0,0 +1,33 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: + - master + +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: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + BRANCH: gh-pages # The branch the action should deploy to. + FOLDER: dist # The folder the action should deploy. + CLEAN: true # Automatically remove deleted files from the deployment. From cf94300d582007d481bbd9b74c271758c7d0eeff Mon Sep 17 00:00:00 2001 From: Dominik Peters Date: Sat, 13 Jan 2024 00:34:22 +0100 Subject: [PATCH 2/9] Update webpack.web.config.js --- webpack.web.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webpack.web.config.js b/webpack.web.config.js index 041b7f5..ae04496 100644 --- a/webpack.web.config.js +++ b/webpack.web.config.js @@ -29,8 +29,8 @@ export default { new CopyWebpackPlugin({ patterns: [ { 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/example.mp3', to: 'example.mp3' }, + // { from: 'src-web/silence.mp3', to: 'silence.mp3' }, { from: 'src-web/vidstack', to: 'vidstack' }, ], }), From e60b750b9b94f5da2832ac99d228ab3a72e96670 Mon Sep 17 00:00:00 2001 From: Dominik Peters Date: Sat, 13 Jan 2024 00:35:17 +0100 Subject: [PATCH 3/9] rename workflow --- .github/workflows/{push_web_version => push_web_version.yml} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/workflows/{push_web_version => push_web_version.yml} (100%) diff --git a/.github/workflows/push_web_version b/.github/workflows/push_web_version.yml similarity index 100% rename from .github/workflows/push_web_version rename to .github/workflows/push_web_version.yml From ea2a771bed63da898ffdb868a37dc68994e3020a Mon Sep 17 00:00:00 2001 From: Dominik Peters Date: Sat, 13 Jan 2024 00:38:02 +0100 Subject: [PATCH 4/9] Update push_web_version.yml --- .github/workflows/push_web_version.yml | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/.github/workflows/push_web_version.yml b/.github/workflows/push_web_version.yml index 08aec67..532100e 100644 --- a/.github/workflows/push_web_version.yml +++ b/.github/workflows/push_web_version.yml @@ -27,7 +27,5 @@ jobs: - name: Deploy uses: JamesIves/github-pages-deploy-action@v4 with: - GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - BRANCH: gh-pages # The branch the action should deploy to. - FOLDER: dist # The folder the action should deploy. - CLEAN: true # Automatically remove deleted files from the deployment. + folder: dist # The folder the action should deploy. + branch: gh-pages # The branch the action should deploy to. \ No newline at end of file From 56ea2602f29ba9ac1b7bc270e1a2511a0cb388e8 Mon Sep 17 00:00:00 2001 From: Dominik Peters Date: Sat, 13 Jan 2024 00:42:24 +0100 Subject: [PATCH 5/9] Update push_web_version.yml --- .github/workflows/push_web_version.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/push_web_version.yml b/.github/workflows/push_web_version.yml index 532100e..9326ee2 100644 --- a/.github/workflows/push_web_version.yml +++ b/.github/workflows/push_web_version.yml @@ -5,6 +5,9 @@ on: branches: - master +permissions: + contents: write + jobs: build-and-deploy: runs-on: ubuntu-latest From f21ad4b78aafc832466b5f5d292115fd17f18b06 Mon Sep 17 00:00:00 2001 From: Dominik Peters Date: Sat, 13 Jan 2024 00:51:55 +0100 Subject: [PATCH 6/9] web relative paths --- src-web/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-web/index.html b/src-web/index.html index 95769eb..97849d4 100644 --- a/src-web/index.html +++ b/src-web/index.html @@ -7,8 +7,8 @@ Tauri App - - + + + + + + + + + + + + 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' }, ], }), From 5c64d81c32c0bfaba2dfb0a5381713446f28b1cb Mon Sep 17 00:00:00 2001 From: Dominik Peters Date: Sat, 2 Mar 2024 14:04:52 +0100 Subject: [PATCH 8/9] show chapter progress bar --- src-app/index.html | 18 ++++++++++-------- src-common/Player.js | 3 +++ src-web/index.html | 18 ++++++++++-------- 3 files changed, 23 insertions(+), 16 deletions(-) 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 6c6e3a4..cebd2e8 100644 --- a/src-web/index.html +++ b/src-web/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; From c2b073e8a4366f0234e84b1292d984bcc29dd2bf Mon Sep 17 00:00:00 2001 From: Dominik Peters Date: Sat, 2 Mar 2024 14:07:08 +0100 Subject: [PATCH 9/9] 0.2.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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",