Updates for default folder

Author: netbymatt

.dockerignore

@@ -1,3 +1,4 @@
 .git/
 Dockerfile
-.vscode/
+.vscode/
+dist/

.gitignore

@@ -7,7 +7,8 @@ server/music/*
 #except for the readme
 !server/music/readme.txt
 #and the sample songs
-!server/music/Catch the Sun.mp3
-!server/music/Crisp day.mp3
-!server/music/Rolling Clouds.mp3
-!server/music/Strong Breeze.mp3
+!server/music/default
+
+#dist folder
+dist/*
+!dist/readme.txt

README.md

@@ -98,6 +98,13 @@ As time allows I will be working on the following enhancements.
 
 * Better error reporting when api.weather.gov is down (happens more often than you would think)
 
+## Serving static files
+The app can be served as a static set of files on any web server. Run the provided gulp task to create a set of static distribution files:
+```
+npm run buildDist
+```
+The resulting files will be in the /dist folder in the root of the project. These can then be uploaded to a web server for hosting, no server-side scripting is required.
+
 ## Community Notes
 
 Thanks to the WeatherStar community for providing these discussions to further extend your retro forecasts!

dist/readme.txt

@@ -0,0 +1 @@
+This folder is a placeholder for static files generated by the gulp task buildDist

gulp/publish-frontend.mjs

@@ -12,11 +12,13 @@ import s3Upload from 'gulp-s3-upload';
 import webpack from 'webpack-stream';
 import TerserPlugin from 'terser-webpack-plugin';
 import { readFile } from 'fs/promises';
+import reader from '../src/playlist-reader.mjs';
+import file from "gulp-file";
 
 // get cloudfront
 import { CloudFrontClient, CreateInvalidationCommand } from '@aws-sdk/client-cloudfront';
 
-const clean = () => deleteAsync(['./dist**']);
+const clean = () => deleteAsync(['./dist/**/*', '!./dist/readme.txt']);
 
 const cloudfront = new CloudFrontClient({ region: 'us-east-1' });
 
@@ -122,8 +124,9 @@ const compressHtml = async () => {
 const otherFiles = [
 	'server/robots.txt',
 	'server/manifest.json',
+	'server/music/**/*.mp3'
 ];
-const copyOtherFiles = () => src(otherFiles, { base: 'server/' })
+const copyOtherFiles = () => src(otherFiles, { base: 'server/', encoding: false })
 	.pipe(dest('./dist'));
 
 const s3 = s3Upload({
@@ -170,10 +173,20 @@ const invalidate = () => cloudfront.send(new CreateInvalidationCommand({
 	},
 }));
 
-const buildDist = series(clean, parallel(buildJs, compressJsData, compressJsVendor, copyCss, compressHtml, copyOtherFiles));
+const buildPlaylist = async () => {
+	const availableFiles = await reader();
+	const playlist = { availableFiles };
+	return file('playlist.json', JSON.stringify(playlist)).pipe(dest('./dist'))
+}
+
+const buildDist = series(clean, parallel(buildJs, compressJsData, compressJsVendor, copyCss, compressHtml, copyOtherFiles, buildPlaylist));
 
 // upload_images could be in parallel with upload, but _images logs a lot and has little changes
 // by running upload last the majority of the changes will be at the bottom of the log for easy viewing
 const publishFrontend = series(buildDist, uploadImages, upload, invalidate);
 
 export default publishFrontend;
+
+export {
+	buildDist,
+}

gulpfile.mjs

@@ -1,7 +1,8 @@
 import updateVendor from './gulp/update-vendor.mjs';
-import publishFrontend from './gulp/publish-frontend.mjs';
+import publishFrontend, { buildDist } from './gulp/publish-frontend.mjs'
 
 export {
 	updateVendor,
 	publishFrontend,
+	buildDist,
 };

package-lock.json

@@ -7,6 +7,7 @@
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"build:css": "sass --style=compressed ./server/styles/scss/main.scss ./server/styles/main.css",
+		"build": "gulp buildDist",
 		"lint": "eslint ./server/scripts/**/*.mjs",
 		"lint:fix": "eslint --fix ./server/scripts/**/*.mjs"
 	},
@@ -21,32 +22,33 @@
 	},
 	"homepage": "https://github.com/netbymatt/ws4kp#readme",
 	"devDependencies": {
-		"del": "^8.0.0",
-		"jquery": "^3.6.0",
-		"jquery-touchswipe": "^1.6.19",
-		"luxon": "^3.0.0",
-		"nosleep.js": "^0.12.0",
-		"suncalc": "^1.8.0",
-		"swiped-events": "^1.1.4",
 		"@aws-sdk/client-cloudfront": "^3.609.0",
-		"gulp-awspublish": "^8.0.0",
-		"gulp-s3-upload": "^1.7.3",
+		"del": "^8.0.0",
 		"eslint": "^8.2.0",
 		"eslint-config-airbnb-base": "^15.0.0",
 		"eslint-plugin-import": "^2.10.0",
 		"gulp": "^5.0.0",
+		"gulp-awspublish": "^8.0.0",
 		"gulp-concat": "^2.6.1",
 		"gulp-ejs": "^5.1.0",
+		"gulp-file": "^0.4.0",
 		"gulp-htmlmin": "^5.0.1",
 		"gulp-rename": "^2.0.0",
+		"gulp-s3-upload": "^1.7.3",
 		"gulp-sass": "^6.0.0",
 		"gulp-terser": "^2.0.0",
+		"jquery": "^3.6.0",
+		"jquery-touchswipe": "^1.6.19",
+		"luxon": "^3.0.0",
+		"nosleep.js": "^0.12.0",
+		"sass": "^1.54.0",
+		"suncalc": "^1.8.0",
+		"swiped-events": "^1.1.4",
 		"terser-webpack-plugin": "^5.3.6",
-		"webpack-stream": "^7.0.0",
-		"sass": "^1.54.0"
+		"webpack-stream": "^7.0.0"
 	},
 	"dependencies": {
-		"express": "^4.17.1",
-		"ejs": "^3.1.5"
+		"ejs": "^3.1.5",
+		"express": "^4.17.1"
 	}
 }

package.json

@@ -1,2 +1,3 @@
 .mp3 files placed in this folder will be available via the un-mute button in the application.
-No subdirectories will be scanned, and music will be played in a random order.
+No subdirectories will be scanned, and music will be played in a random order.
+The default folder will be used only if no .mp3 files are found in this /server/music folder

server/music/default/Catch the Sun.mp3

@@ -63,12 +63,17 @@ const toggleMedia = (forcedState) => {
 	stateChanged();
 };
 
-const startMedia = () => {
+const startMedia = async () => {
 	// if there's not media player yet, enable it
 	if (!player) {
 		initializePlayer();
 	} else {
-		player.play();
+		try {
+			await player.play();
+		} catch (e) {
+			console.error('Couldn\'t play music');
+			console.error(e);
+		}
 	}
 };
 
@@ -128,11 +133,12 @@ const initializePlayer = () => {
 	console.log('player initialized');
 };
 
-const playerCanPlay = () => {
+const playerCanPlay = async () => {
 	// check to make sure they user still wants music (protect against slow loading music)
 	if (!mediaPlaying.value) return;
 	// start playing
-	player.play();
+	startMedia();
+
 };
 
 const playerEnded = () => {

server/music/default/Crisp day.mp3

@@ -1,12 +1,21 @@
 import fs from 'fs/promises';
 
+const mp3Filter = (file) => file.match(/\.mp3$/);
+
 const reader = async () => {
 	// get the listing of files in the folder
 	const rawFiles = await fs.readdir('./server/music');
 	// filter for mp3 files
-	const files = rawFiles.filter((file) => file.match(/\.mp3$/));
-	console.log(files);
-	return files;
+	const files = rawFiles.filter(mp3Filter);
+	// if files were found return them
+	if (files.length > 0) {
+		return files;
+	}
+
+	// fall back to the default folder
+	const defaultFiles = await fs.readdir('./server/music/default');
+	return defaultFiles.map(file => `default/${file}`).filter(mp3Filter);
+
 };
 
 export default reader;