Functional draft progress bar next to play button for current playing track.

It can be interacted with but the slider behaves incorrectly when the user *slides it* instead of simply clicking somewhere on the bar : this is due to the fact that the value of the slider is updated by querying player API

Author: anavarr

Diff for: main.ts

@@ -43,6 +43,8 @@ export default class SoundscapesPlugin extends Plugin {
 	playButton: HTMLButtonElement;
 	pauseButton: HTMLButtonElement;
 	nextButton: HTMLButtonElement;
+	trackProgressSlider: HTMLInputElement;
+	progressDuration : HTMLDivElement;
 	previousButton: HTMLButtonElement;
 	changeSoundscapeSelect: HTMLSelectElement;
 	nowPlayingRoot: HTMLDivElement;
@@ -366,6 +368,29 @@ export default class SoundscapesPlugin extends Plugin {
 		setIcon(this.nextButton, "skip-forward");
 		this.nextButton.onclick = () => this.next();
 
+		// Progress : Duration
+		this.progressDuration = this.statusBarItem.createEl("div", {
+			cls: "soundscapesroot-progress-duration",
+		});
+		// Change Button
+		this.trackProgressSlider = this.statusBarItem.createEl("input", {
+			attr: {
+				type: "range",
+				min: 0,
+				max: 1,
+				step: 0.01,
+				value: this.settings.trackProgress,
+				class : "trackProgress"
+			},
+		});
+		// Create a virtual event object
+		this.onTrackProgressChange({ target: { value: this.settings.trackProgress } });
+
+		this.trackProgressSlider.addEventListener(
+			"input",
+			this.onTrackProgressChange.bind(this)
+		)
+
 		// Change Soundscape Button
 		const changeSoundscapeButton = this.statusBarItem.createEl("button", {
 			cls: "soundscapesroot-changesoundscapebutton",
@@ -613,6 +638,9 @@ export default class SoundscapesPlugin extends Plugin {
 	seek(time: number) {
 		if (this.soundscapeType === SOUNDSCAPE_TYPE.MY_MUSIC) {
 			this.localPlayer.currentTime = time;
+		} else {
+			var t= this.player?.getCurrentTime();
+			this.player?.seekTo(t+time);
 		}
 	}
 
@@ -691,8 +719,26 @@ export default class SoundscapesPlugin extends Plugin {
 	 * Once the player is ready, create the controls and play some music! (or not if autoplay is disabled)
 	 */
 	onPlayerReady() {
+		var self = this
 		this.createControls();
 		this.onSoundscapeChange(this.settings.autoplay);
+		setInterval(function() {
+			var progress = (self.player?.getCurrentTime()/self.player?.getDuration()).toFixed(5)
+			self.trackProgressSlider.value = (progress).toString()
+			self.progressDuration.setText(
+				(self.formatDate(self.player?.getCurrentTime())+" / "+self.formatDate(self.player?.getDuration()))
+			)
+		}, 10);
+	}
+
+	formatDate(duration: number){
+		if(duration < 3600){
+			return new Date(duration*1000).toISOString().substring(14, 19)
+		}else if(duration <3600*24){
+			return new Date(duration*1000).toISOString().substring(11, 19)
+		}else{
+			return Math.round(duration/(3600*24)) +":"+ new Date(duration*1000).toISOString().substring(11, 19)
+		}
 	}
 
 	/**
@@ -777,6 +823,14 @@ export default class SoundscapesPlugin extends Plugin {
 		this.debouncedSaveSettings();
 	}
 
+	onTrackProgressChange(e: any) {
+		const trackProgress = parseFloat(e.target.value);
+		this.trackProgressSlider.value = e.target.value;
+		this.player?.seekTo(this.player.getDuration()*(trackProgress));
+		this.settings.trackProgress = trackProgress;
+		this.settingsObservable.setValue(this.settings);
+		this.debouncedSaveSettings();
+	}
 	/**
 	 * Play the selected soundscape!
 	 *

Diff for: package-lock.json

@@ -14,6 +14,7 @@ export interface SoundscapesPluginSettings {
 	autoplay: boolean;
 	scrollSongTitle: boolean;
 	customSoundscapes: CustomSoundscape[];
+	trackProgress: number;
 	myMusicIndex: LocalMusicFile[];
 	myMusicFolderPath: string;
 	reindexFrequency: string;
@@ -26,6 +27,7 @@ export const DEFAULT_SETTINGS: SoundscapesPluginSettings = {
 	volume: 25,
 	autoplay: false,
 	scrollSongTitle: true,
+	trackProgress: 0,
 	customSoundscapes: [],
 	myMusicIndex: [],
 	myMusicFolderPath: "",

Diff for: src/Settings/Settings.ts

@@ -28,6 +28,7 @@ export interface Player {
 	getDuration(): number;
 	setVolume(volume: Number): void;
 	loadVideoById(options: { videoId: String | undefined }): void;
+	getCurrentTime():number;
 }
 
 export interface LocalMusicFile {

Diff for: src/Types/Interfaces.ts

@@ -61,6 +61,12 @@
 		right: 0;
 	}
 
+	.soundscapesroot-progress-duration{
+		margin: 10px;
+		width: auto;
+		white-space: nowrap;
+	}
+
 	.soundscapesroot-nowplaying {
 		margin: 0 12px;
 		width: 150px;
@@ -79,6 +85,10 @@
 			}
 		}
 	}
+
+	.trackProgress{
+		width: 100%;
+	}
 }
 
 input.soundscapes-validation-error {