icon toggles

gulp/publish-frontend.mjs

@@ -87,6 +87,7 @@ const mjsSources = [
 	'server/scripts/modules/regionalforecast.mjs',
 	'server/scripts/modules/travelforecast.mjs',
 	'server/scripts/modules/progress.mjs',
+	'server/scripts/modules/media.mjs',
 	'server/scripts/index.mjs',
 ];
 
@@ -173,6 +174,6 @@ const buildDist = series(clean, parallel(buildJs, compressJsData, compressJsVend
 
 // 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);
+const publishFrontend = series(buildDist, uploadImages, upload, invalidate);
 
 export default publishFrontend;

server/scripts/modules/media.mjs

@@ -0,0 +1,84 @@
+import { json } from './utils/fetch.mjs';
+import Setting from './utils/setting.mjs';
+
+let playlist;
+
+const mediaPlaying = new Setting('mediaPlaying', 'Media Playing', 'boolean', false, null, true);
+
+document.addEventListener('DOMContentLoaded', () => {
+	// add the event handler to the page
+	document.getElementById('ToggleMedia').addEventListener('click', toggleMedia);
+	// get the playlist
+	getMedia();
+});
+
+const getMedia = async () => {
+	try {
+		// fetch the playlist
+		const rawPlaylist = await json('playlist.json');
+		// store the playlist
+		playlist = rawPlaylist;
+		// enable the media player
+		enableMediaPlayer();
+	} catch (e) {
+		console.error("Couldn't get playlist");
+		console.error(e);
+	}
+};
+
+const enableMediaPlayer = () => {
+	// see if files are available
+	if (playlist?.availableFiles?.length > 0) {
+		// enable the icon
+		const icon = document.getElementById('ToggleMedia');
+		icon.classList.add('available');
+		// set the button type
+		setIcon();
+	}
+};
+
+const setIcon = () => {
+	// get the icon
+	const icon = document.getElementById('ToggleMedia');
+	if (mediaPlaying.value === true) {
+		icon.classList.add('playing');
+	} else {
+		icon.classList.remove('playing');
+	}
+};
+
+const toggleMedia = (forcedState) => {
+	// handle forcing
+	if (typeof forcedState === 'boolean') {
+		mediaPlaying.value = forcedState;
+	} else {
+		// toggle the state
+		mediaPlaying.value = !mediaPlaying.value;
+	}
+	// handle the state change
+	stateChanged();
+};
+
+const startMedia = () => {
+
+};
+
+const stopMedia = () => {
+
+};
+
+const stateChanged = () => {
+	// update the icon
+	setIcon();
+	// react to the new state
+	if (mediaPlaying.value) {
+		startMedia();
+	} else {
+		stopMedia();
+	}
+};
+
+export {
+	// eslint-disable-next-line import/prefer-default-export
+	toggleMedia,
+};

server/scripts/modules/settings.mjs

@@ -10,7 +10,7 @@ const settings = { speed: { value: 1.0 } };
 const init = () => {
 	// create settings
 	settings.wide = new Setting('wide', 'Widescreen', 'checkbox', false, wideScreenChange, true);
-	settings.kiosk = new Setting('kiosk', 'Kiosk', 'boolean', false, kioskChange, false);
+	settings.kiosk = new Setting('kiosk', 'Kiosk', 'checkbox', false, kioskChange, false);
 	settings.speed = new Setting('speed', 'Speed', 'select', 1.0, null, true, [
 		[0.5, 'Very Fast'],
 		[0.75, 'Fast'],

server/scripts/modules/utils/setting.mjs

@@ -167,6 +167,8 @@ class Setting {
 			case 'select':
 				this.selectHighlight(newValue);
 				break;
+			case 'boolean':
+				break;
 			case 'checkbox':
 			default:
 				this.element.checked = newValue;

server/styles/scss/_media.scss

@@ -1,3 +1,34 @@
 .media {
 	display: none;
 }
+
+#ToggleMedia {
+	display: none;
+
+	&.available {
+		display: inline-block;
+
+		img.on {
+			display: none;
+		}
+
+		img.off {
+			display: block;
+		}
+
+		// icon switch is handled by adding/removing the .playing class
+		&.playing {
+			img.on {
+				display: block;
+			}
+
+			img.off {
+				display: none;
+			}
+
+		}
+
+
+	}
+
+}

src/playlist.mjs

@@ -8,8 +8,10 @@ const playlistGenerator = async (req, res) => {
 		});
 	} catch (e) {
 		console.error(e);
+		res.json({
+			availableFiles: [],
+		});
 	}
-	res.send();
 };
 
 export default playlistGenerator;

views/index.ejs

@@ -14,6 +14,7 @@
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
   <link rel="manifest" href="manifest.json" />
   <link rel="icon" href="images/Logo192.png" />
+	<link rel="preload" href="playlist.json" />
 
   <% if (production) { %>
   <link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=<%=production%>" />
@@ -44,6 +45,7 @@
   <script type="module" src="scripts/modules/progress.mjs"></script>
   <script type="module" src="scripts/modules/radar.mjs"></script>
   <script type="module" src="scripts/modules/settings.mjs"></script>
+	<script type="module" src="scripts/modules/media.mjs"></script>
 	<script type="module" src="scripts/index.mjs"></script>
 	<script type="text/javascript" src="scripts/custom.js"></script>
   <!-- data -->
@@ -131,7 +133,10 @@
         <img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_2x.png" title="Refresh" />
       </div>
       <div id="divTwcBottomRight">
-				<img id="ToggleMedia" class="navButton" src="images/nav/ic_volume_off_white_24dp_2x.png" title="Unmute" />
+				<div id="ToggleMedia">
+					<img class="navButton off" src="images/nav/ic_volume_off_white_24dp_2x.png" title="Unmute" />
+					<img class="navButton on" src="images/nav/ic_volume_on_white_24dp_2x.png" title="Unmute" />
+				</div>
         <img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_white_24dp_2x.png" title="Enter Fullscreen" />
       </div>
     </div>