-
+
{{ time }} / {{ duration }}
@@ -54,35 +52,41 @@ export default {
};
},
methods: {
- seekTo(event) {
- const progressContainer = this.$el.querySelector('.progress');
- const clickX = event.pageX - progressContainer.offsetLeft;
- const width = progressContainer.offsetWidth;
- const clickProgress = (clickX / width) * 100;
- console.log(clickProgress)
- this.player.seek(clickProgress * this.player.getDuration() / 100);
+ seekTo() {
+ const seekTime = (this.progress / 100) * this.player.getDuration();
+ this.player.seekToTime(seekTime);
},
play() {
this.player.play();
+ this.playing = true;
},
pause() {
this.player.pause();
+ this.playing = false;
},
setVolume() {
this.player.setVolume(this.volume / 100);
},
- toggleMute() {
- this.player.toggleMute();
+ async rewind() {
+ await this.player.rewind();
},
- async getTitle(id) {
- this.title = await this.player.getTitle(id)
+ async skip() {
+ await this.player.skip();
},
- async getArtist(id) {
- this.artist = await this.player.getArtist(id)
+ async getTitle() {
+ this.title = await this.player.getTitle();
},
- async getCover(id) {
- this.cover = await this.player.getCover(id)
+ async getArtist() {
+ this.artist = await this.player.getArtist();
},
+ async getCover() {
+ this.cover = await this.player.getCover(this.player.currentSongId);
+ },
+ },
+ watch: {
+ 'player.currentTime': function(newTime) {
+ this.progress = (newTime / this.player.getDuration()) * 100;
+ }
},
mounted() {
this.player.audio.addEventListener('timeupdate', () => {
@@ -90,12 +94,12 @@ export default {
this.time = time > 0 ? new Date(time * 1000).toISOString().substr(14, 5) : '0:00';
this.progress = (this.player.getCurrentTime() / this.player.getDuration()) * 100;
});
- this.player.audio.addEventListener('loadedmetadata', () => {
+ this.player.audio.addEventListener('loadedmetadata', async () => {
const duration = this.player.getDuration();
this.duration = duration > 0 ? new Date(duration * 1000).toISOString().substr(14, 5) : '0:00';
- this.getTitle(this.player.currentSongId);
- this.getArtist(this.player.currentSongId);
- this.getCover(this.player.currentSongId);
+ await this.getTitle();
+ await this.getArtist();
+ await this.getCover();
});
this.player.audio.addEventListener('play', () => {
this.playing = true;
diff --git a/lib/Player.ts b/lib/Player.ts
index 702fdda..acf9131 100644
--- a/lib/Player.ts
+++ b/lib/Player.ts
@@ -71,6 +71,11 @@ class Player {
this.audio.volume = value;
}
+ public seek(percentage: number) {
+ const seekTime = this.audio.duration * (percentage / 100);
+ this.audio.currentTime = seekTime;
+ }
+
public async getTitle(): string {
const songsData = (await readSongs()).songs;
return songsData[this.currentSongId]?.title || 'Unknown Title';
diff --git a/package.json b/package.json
index cddb978..9f16724 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
"devDependencies": {
"@tauri-apps/api": "2.0.0-beta.7",
"nuxt": "^3.11.2",
- "sass": "^1.74.1",
+ "sass": "1.75.0",
"vue": "^3.4.20"
},
"dependencies": {
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 85ada0d..da460b4 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -39,7 +39,6 @@ fn get_path() -> PathBuf {
#[tauri::command]
fn get_cover_base64(id: String) -> Result
{
let path = get_path().join(format!("Covers/{}.png", id));
- println!("{}", path.display());
let mut file = fs::File::open(path).map_err(tauri::Error::from)?;
let mut buffer = Vec::new();
file.read_to_end(&mut buffer).map_err(tauri::Error::from)?;