feat: implement rangeDelta to display time range duration

mapper/src/App.js

@@ -167,13 +167,42 @@ function Menu({duration, setDuration, end, setEnd, slider, setSlider}) {
 		}
 	};
 
-	const rangeDelta = (x) => {
+	const rangeDelta = (range) => {
+		const start = moment(range[0]);
+		const end = moment(range[1]);
+		const diff = moment.duration(end.diff(start));
+
+		const parts = [];
+
+		const years = diff.years();
+		if (years > 0) parts.push(`${years} year${years > 1 ? 's' : ''}`);
+
+		const months = diff.months();
+		if (months > 0) parts.push(`${months} month${months > 1 ? 's' : ''}`);
+
+		const days = diff.days();
+		if (days > 0) parts.push(`${days} day${days > 1 ? 's' : ''}`);
+
+		const hours = diff.hours();
+		if (hours > 0) parts.push(`${hours} hour${hours > 1 ? 's' : ''}`);
+
+		const minutes = diff.minutes();
+		if (minutes > 0) parts.push(`${minutes} minute${minutes > 1 ? 's' : ''}`);
+
+		const seconds = diff.seconds();
+		if (seconds > 0) parts.push(`${seconds} second${seconds > 1 ? 's' : ''}`);
+
+		if (parts.length === 0) {
+			return '0 seconds';
+		}
+
+		return parts.join(', ');
 	};
 
 	return (
 		<div className='menu'>
 			{(showRange || !!submenu) && <div className='range'>
-				{rangeTime(range[0])} - {rangeTime(range[1])}
+				{rangeTime(range[0])} - {rangeTime(range[1])} ({rangeDelta(range)})
 			</div>}
 
 			<div className='time-slider'>