5.23.7

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "ws4kp",
-	"version": "5.23.5",
+	"version": "5.23.7",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "ws4kp",
-			"version": "5.23.5",
+			"version": "5.23.7",
 			"license": "MIT",
 			"dependencies": {
 				"dotenv": "^16.5.0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ws4kp",
-	"version": "5.23.5",
+	"version": "5.23.7",
 	"description": "Welcome to the WeatherStar 4000+ project page!",
 	"main": "index.mjs",
 	"type": "module",

server/scripts/modules/media.mjs

@@ -47,6 +47,9 @@ const enableMediaPlayer = () => {
 		if (mediaPlaying.value === true) {
 			startMedia();
 		}
+		// add the volume control to the page
+		const settingsSection = document.querySelector('#settings');
+		settingsSection.append(mediaVolume.generate());
 	}
 };
 
@@ -123,6 +126,25 @@ const randomizePlaylist = () => {
 	playlist.availableFiles = randomPlaylist;
 };
 
+const setVolume = (newVolume) => {
+	if (player) {
+		player.volume = newVolume;
+	}
+};
+
+const mediaVolume = new Setting('mediaVolume', {
+	name: 'Volume',
+	type: 'select',
+	defaultValue: 0.75,
+	values: [
+		[1, '100%'],
+		[0.75, '75%'],
+		[0.50, '50%'],
+		[0.25, '25%'],
+	],
+	changeAction: setVolume,
+});
+
 const initializePlayer = () => {
 	// basic sanity checks
 	if (!playlist.availableFiles || playlist?.availableFiles.length === 0) {
@@ -145,6 +167,7 @@ const initializePlayer = () => {
 	player.src = `music/${playlist.availableFiles[currentTrack]}`;
 	setTrackName(playlist.availableFiles[currentTrack]);
 	player.type = 'audio/mpeg';
+	setVolume(mediaVolume.value);
 };
 
 const playerCanPlay = async () => {

server/scripts/modules/spc-outlook.mjs

@@ -18,6 +18,8 @@ const testAllPoints = (point, data) => {
 	data.forEach((day, index) => {
 		// initialize the result
 		result[index] = false;
+		// if there's no data (file didn't load), exit early
+		if (day === undefined) return;
 		// loop through each category
 		day.features.forEach((feature) => {
 			if (!feature.geometry.coordinates) return;

server/styles/scss/_extended-forecast.scss

@@ -30,7 +30,7 @@
 		.condition {
 			text-align: center;
 			height: 74px;
-			margin-top: 10px;
+			margin-top: 5px;
 		}
 
 		.icon {
@@ -44,7 +44,6 @@
 
 		.temperatures {
 			width: 100%;
-			margin-top: 5px;
 
 			.temperature-block {
 				display: inline-block;