tried to make the progress bar seekable

vleerapp · Apr 12, 2024 · 0fa47a4 · 0fa47a4
1 parent 5e3c3dd
commit 0fa47a4
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 40 deletions.
diff --git a/assets/styles/components/player.scss b/assets/styles/components/player.scss
@@ -15,36 +15,48 @@
   width: 100%;
   height: 36px;
 
-  .info{
+  .info {
     display: flex;
     font-size: 14px;
     gap: 14px;
 
-    .artist{
+    .artist {
       color: v.$text;
     }
   }
 
-  .controls{
+  .controls {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
   }
 
-  .controls, .right-controls{
+  .controls,
+  .right-controls {
     color: #303030;
     display: flex;
     align-items: center;
     gap: 10px;
   }
 
-  .top:hover .controls, .top:hover .right-controls{
+  .top:hover .controls,
+  .top:hover .right-controls {
     color: v.$text;
   }
 
-  .icon:hover{
+  .icon:hover {
     color: white;
   }
+
+  .right-controls {
+    .volume {
+      background: repeating-linear-gradient(135deg,
+          #303030,
+          #303030 10px,
+          #505050 10px,
+          #505050 20px);
+    }
+  }
 }
 
 .bottom {
@@ -54,15 +66,66 @@
   position: relative;
 
   .progress {
-    background-color: v.$accent;
+    background-color: transparent;
     position: relative;
-
-    .indicator {
+    width: 100%;
+    appearance: none;
+    height: 16px;
+    border-radius: 2px;
+    cursor: pointer;
+    border-radius: 0;
+
+    &::-webkit-slider-runnable-track {
+      background: linear-gradient(to right, v.$accent var(--slider-progress), #000 var(--slider-progress));
+    }
+
+    &::-moz-range-track {
+      background: linear-gradient(to right, v.$accent var(--slider-progress), #000 var(--slider-progress));
+    }
+
+    &::-ms-track {
+      background: linear-gradient(to right, v.$accent var(--slider-progress), #000 var(--slider-progress));
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      background: transparent;
+    }
+
+    &::-moz-range-thumb {
+      appearance: none;
+      background: transparent;
+    }
+
+    &::-ms-thumb {
+      appearance: none;
+      background: transparent;
+    }
+  }
+
+  .progress:hover {
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 12px;
+      height: 16px;
+      background: v.$text-bright;
+      cursor: pointer;
+    }
+
+    &::-moz-range-thumb {
+      appearance: none;
+      width: 12px;
+      height: 16px;
+      background: v.$text-bright;
+      cursor: pointer;
+    }
+
+    &::-ms-thumb {
+      appearance: none;
       width: 12px;
       height: 16px;
-      background-color: transparent;
-      position: absolute;
-      right: -12px;
+      background: v.$text-bright;
+      cursor: pointer;
     }
   }
 
@@ -77,6 +140,6 @@
   }
 }
 
-.bottom:hover .indicator{
+.bottom:hover .indicator {
   background-color: white;
 }
diff --git a/bun.lockb b/bun.lockb
diff --git a/components/Player.vue b/components/Player.vue
@@ -11,24 +11,22 @@
       </div>
       <div class="controls">
         <IconsShuffle />
-        <IconsRewind />
+        <IconsRewind @click="rewind()" />
         <IconsPlay v-if="!playing" @click="play()" />
         <IconsPause v-if="playing" @click="pause()" />
-        <IconsSkip />
+        <IconsSkip @click="skip()" />
         <IconsRepeat />
       </div>
       <div class="right-controls">
         <IconsVolumeLoud v-if="volume > 50" />
         <IconsVolumeMid v-else-if="volume > 0" />
         <IconsVolumeMute v-else />
 
-        <input @input="setVolume" v-model="volume" step="1" min="0" max="100" type="range" name="" id="">
+        <input class="volume" @input="setVolume" v-model="volume" step="1" min="0" max="100" type="range" name="" id="">
       </div>
     </div>
     <div class="bottom">
-      <div class="progress" @click="seekTo($event)" :style="{ width: progress + '%' }" style="cursor: pointer;">
-        <div class="indicator"></div>
-      </div>
+      <input type="range" class="progress" v-model="progress" @input="seekTo" min="0" max="100" step=".1">
       <div class="numbers">
         {{ time }} / {{ duration }}
       </div>
@@ -54,48 +52,54 @@ 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', () => {
       const time = this.player.getCurrentTime();
       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
@@ -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
@@ -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
@@ -39,7 +39,6 @@ fn get_path() -> PathBuf {
 #[tauri::command]
 fn get_cover_base64(id: String) -> Result<String, tauri::Error> {
     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)?;