Add soundscape selection from miniplayer, 2 new soundscapes

Author: andrewmcgivery

README.md

@@ -65,6 +65,8 @@ Additionally, the plugin makes a call to this github repository occasionally to
 -   [Sky: Children of the Light soundtrack](https://www.youtube.com/watch?v=87etrUp83Yc)
 -   [Vampire: The Masquerade – Bloodlines Ambient Playlist](https://www.youtube.com/watch?v=pCZxb43L_Ag)
 -   [ChillSynth FM - lofi synthwave radio for retro dreaming](https://www.youtube.com/watch?v=UedTcufyrHc)
+-   [peaceful piano radio 🎹 - music to focus/study to](https://www.youtube.com/watch?v=vMxYL4Cj85Y)
+-   [synthwave radio 🌌 - beats to chill/game to](https://www.youtube.com/watch?v=4xDzrJKXOOY)
 
 ## Reporting Issues
 

main.ts

@@ -44,6 +44,7 @@ export default class SoundscapesPlugin extends Plugin {
 	pauseButton: HTMLButtonElement;
 	nextButton: HTMLButtonElement;
 	previousButton: HTMLButtonElement;
+	changeSoundscapeSelect: HTMLSelectElement;
 	nowPlayingRoot: HTMLDivElement;
 	nowPlaying: HTMLDivElement;
 	volumeMutedIcon: HTMLDivElement;
@@ -341,26 +342,47 @@ export default class SoundscapesPlugin extends Plugin {
 	 * Create all the UI elements
 	 */
 	createControls() {
+		// Previous Button
 		this.previousButton = this.statusBarItem.createEl("button", {
 			cls: "soundscapesroot-previousbutton",
 		});
 		setIcon(this.previousButton, "skip-back");
 		this.previousButton.onclick = () => this.previous();
 
+		// Play Button
 		this.playButton = this.statusBarItem.createEl("button", {});
 		setIcon(this.playButton, "play");
 		this.playButton.onclick = () => this.play();
 
+		// Pause Button
 		this.pauseButton = this.statusBarItem.createEl("button", {});
 		setIcon(this.pauseButton, "pause");
 		this.pauseButton.onclick = () => this.pause();
 
+		// Next Button
 		this.nextButton = this.statusBarItem.createEl("button", {
 			cls: "soundscapesroot-nextbutton",
 		});
 		setIcon(this.nextButton, "skip-forward");
 		this.nextButton.onclick = () => this.next();
 
+		// Change Soundscape Button
+		const changeSoundscapeButton = this.statusBarItem.createEl("button", {
+			cls: "soundscapesroot-changesoundscapebutton",
+		});
+		setIcon(changeSoundscapeButton, "list-music");
+		this.changeSoundscapeSelect = changeSoundscapeButton.createEl(
+			"select",
+			{
+				cls: "soundscapesroot-changesoundscapeselect",
+				attr: {
+					id: "soundscapesroot-changesoundscapeselect",
+				},
+			}
+		);
+		this.populateChangeSoundscapeButton();
+
+		// Now Playing
 		this.nowPlayingRoot = this.statusBarItem.createEl("div", {
 			cls: "soundscapesroot-nowplaying",
 		});
@@ -369,6 +391,7 @@ export default class SoundscapesPlugin extends Plugin {
 		});
 		this.toggleNowPlayingScroll();
 
+		// Volume control
 		const volumeIcons = this.statusBarItem.createEl("div", {
 			cls: "soundscapesroot-volumeIcons",
 		});
@@ -405,6 +428,45 @@ export default class SoundscapesPlugin extends Plugin {
 		);
 	}
 
+	/**
+	 * Populates the dropdown on the miniplayer with all available soundscapes
+	 */
+	populateChangeSoundscapeButton() {
+		this.changeSoundscapeSelect.replaceChildren();
+
+		Object.values(SOUNDSCAPES).forEach((soundscape) => {
+			this.changeSoundscapeSelect.createEl("option", {
+				text: soundscape.name,
+				value: soundscape.id,
+			});
+		});
+
+		this.settings.customSoundscapes.forEach((customSoundscape) => {
+			if (customSoundscape.tracks.length > 0) {
+				this.changeSoundscapeSelect.createEl("option", {
+					text: customSoundscape.name,
+					value: `${SOUNDSCAPE_TYPE.CUSTOM}_${customSoundscape.id}`,
+				});
+			}
+		});
+
+		this.changeSoundscapeSelect.createEl("option", {
+			text: "My Music",
+			value: SOUNDSCAPE_TYPE.MY_MUSIC,
+		});
+
+		this.changeSoundscapeSelect.value = this.settings.soundscape;
+
+		this.changeSoundscapeSelect.addEventListener(
+			"change",
+			(event: Event) => {
+				this.changeSoundscape(
+					(event?.target as HTMLSelectElement).value
+				);
+			}
+		);
+	}
+
 	/******************************************************************************************************************/
 	//#endregion Create UI Elements
 	/******************************************************************************************************************/
@@ -593,6 +655,30 @@ export default class SoundscapesPlugin extends Plugin {
 		}
 	}
 
+	/**
+	 * Changes the currently playing soundscape and triggers other downstream side effects
+	 * @param soundscape
+	 */
+	changeSoundscape(soundscape: string) {
+		this.settings.soundscape = soundscape;
+
+		if (this.settings.soundscape.startsWith(`${SOUNDSCAPE_TYPE.CUSTOM}_`)) {
+			this.currentTrackIndex = 0;
+		}
+
+		// When we select MY_MUSIC, force a re-index
+		// Also show the ribbon button!
+		if (this.settings.soundscape === SOUNDSCAPE_TYPE.MY_MUSIC) {
+			this.indexMusicLibrary();
+			this.ribbonButton.show();
+		} else {
+			this.ribbonButton.hide();
+		}
+
+		this.onSoundscapeChange();
+		this.saveSettings();
+	}
+
 	/******************************************************************************************************************/
 	//#endregion Control Player
 	/******************************************************************************************************************/
@@ -769,6 +855,9 @@ export default class SoundscapesPlugin extends Plugin {
 			this.localPlayer.pause(); // Edge Case: When switching from MyMusic to Youtube, the youtube video keeps playing
 		}
 
+		// Keep miniplayer's soundscape selection button up to date
+		this.changeSoundscapeSelect.value = this.settings.soundscape;
+
 		this.saveSettings();
 	}
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "soundscapes",
 	"name": "Soundscapes",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"minAppVersion": "0.15.0",
 	"description": "Adds a music/ambiance (E.g. lofi, white noise) player to the status bar to help with concentration. Also allows you to play your own local music files.",
 	"author": "Andrew McGivery",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "obsidian-soundscapes",
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"description": "A plugin for Obsidian.MD that adds a music/ambiance player to the status bar.",
 	"main": "dist/main.js",
 	"scripts": {

src/Settings/Settings.ts

@@ -71,30 +71,7 @@ export class SoundscapesSettingsTab extends PluginSettingTab {
 				component.setValue(this.plugin.settings.soundscape);
 
 				component.onChange((value: string) => {
-					this.plugin.settings.soundscape = value;
-
-					if (
-						this.plugin.settings.soundscape.startsWith(
-							`${SOUNDSCAPE_TYPE.CUSTOM}_`
-						)
-					) {
-						this.plugin.currentTrackIndex = 0;
-					}
-
-					// When we select MY_MUSIC, force a re-index
-					// Also show the ribbon button!
-					if (
-						this.plugin.settings.soundscape ===
-						SOUNDSCAPE_TYPE.MY_MUSIC
-					) {
-						this.plugin.indexMusicLibrary();
-						this.plugin.ribbonButton.show();
-					} else {
-						this.plugin.ribbonButton.hide();
-					}
-
-					this.plugin.onSoundscapeChange();
-					this.plugin.saveSettings();
+					this.plugin.changeSoundscape(value);
 					this.display();
 				});
 			});
@@ -148,6 +125,7 @@ export class SoundscapesSettingsTab extends PluginSettingTab {
 									] = modifiedCustomSoundscape;
 									this.plugin.saveSettings();
 									this.display();
+									this.plugin.populateChangeSoundscapeButton();
 								}
 							).open();
 						});
@@ -176,6 +154,7 @@ export class SoundscapesSettingsTab extends PluginSettingTab {
 
 									this.plugin.saveSettings();
 									this.display();
+									this.plugin.populateChangeSoundscapeButton();
 								},
 								"Remove custom soundscape",
 								`This will remove your custom soundscape "${customSoundscape.name}". Are you sure?`,
@@ -200,6 +179,7 @@ export class SoundscapesSettingsTab extends PluginSettingTab {
 							);
 							this.plugin.saveSettings();
 							this.display();
+							this.plugin.populateChangeSoundscapeButton();
 						}
 					).open();
 				});

src/Soundscapes.ts

@@ -122,6 +122,22 @@ const SOUNDSCAPES: Record<string, Soundscape> = {
 		youtubeId: "UedTcufyrHc",
 		type: SOUNDSCAPE_TYPE.STANDARD,
 	},
+	peacefulpiano: {
+		id: "peacefulpiano",
+		name: "Peaceful piano radio",
+		nowPlayingText: "Peaceful piano radio",
+		isLiveVideo: true,
+		youtubeId: "vMxYL4Cj85Y",
+		type: SOUNDSCAPE_TYPE.STANDARD,
+	},
+	synthwave: {
+		id: "synthwave",
+		name: "Synthwave radio",
+		nowPlayingText: "Synthwave radio",
+		isLiveVideo: true,
+		youtubeId: "4xDzrJKXOOY",
+		type: SOUNDSCAPE_TYPE.STANDARD,
+	},
 };
 
 export default SOUNDSCAPES;

styles.scss

@@ -47,6 +47,20 @@
 		margin-left: 4px;
 	}
 
+	.soundscapesroot-changesoundscapebutton {
+		margin-left: 4px;
+		position: relative;
+	}
+
+	.soundscapesroot-changesoundscapeselect {
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+	}
+
 	.soundscapesroot-nowplaying {
 		margin: 0 12px;
 		width: 150px;

versions.json

@@ -7,5 +7,6 @@
 	"1.2.0-beta.3": "0.15.0",
 	"1.2.0-beta.4": "0.15.0",
 	"1.2.0": "0.15.0",
-	"1.3.0": "0.15.0"
+	"1.3.0": "0.15.0",
+	"1.4.0": "0.15.0"
 }