feat(Station page): the request time of queue items are now properly displayed

Signed-off-by: Jonathan <theflametrooper@gmail.com>

backend/logic/actions/stations.js

@@ -1683,6 +1683,7 @@ export default {
 				(song, station, next) => {
 					const { queue } = station;
 					song.requestedBy = session.userId;
+					song.requestedAt = Date.now();
 					queue.push(song);
 
 					let totalDuration = 0;

backend/logic/db/schemas/station.js

@@ -15,7 +15,8 @@ export default {
 		thumbnail: { type: String },
 		likes: { type: Number, default: -1 },
 		dislikes: { type: Number, default: -1 },
-		skipVotes: [{ type: String }]
+		skipVotes: [{ type: String }],
+		requestedAt: { type: Number }
 	},
 	currentSongIndex: { type: Number, default: 0, required: true },
 	timePaused: { type: Number, default: 0, required: true },
@@ -36,7 +37,8 @@ export default {
 			thumbnail: { type: String },
 			likes: { type: Number, default: -1 },
 			dislikes: { type: Number, default: -1 },
-			requestedBy: { type: String, required: true }
+			requestedBy: { type: String, required: true },
+			requestedAt: { type: Number }
 		}
 	],
 	owner: { type: String },

backend/logic/stations.js

@@ -37,7 +37,8 @@ class _StationsModule extends CoreClass {
 			duration: 212,
 			skipDuration: 0,
 			likes: -1,
-			dislikes: -1
+			dislikes: -1,
+			requestedAt: Date.now()
 		};
 
 		this.userList = {};
@@ -613,7 +614,8 @@ class _StationsModule extends CoreClass {
 									title: song.title,
 									artists: song.artists,
 									duration: song.duration,
-									thumbnail: song.thumbnail
+									thumbnail: song.thumbnail,
+									requestedAt: song.requestedAt
 								};
 								lessInfoPlaylist.push(newSong);
 							}
@@ -733,7 +735,8 @@ class _StationsModule extends CoreClass {
 												title: playlist[currentSongIndex].title,
 												duration: playlist[currentSongIndex].duration,
 												likes: -1,
-												dislikes: -1
+												dislikes: -1,
+												requestedAt: playlist[currentSongIndex].requestedAt
 											};
 
 											return next(null, currentSong, currentSongIndex, station);
@@ -843,7 +846,8 @@ class _StationsModule extends CoreClass {
 								duration: song.duration,
 								skipDuration: 0,
 								likes: -1,
-								dislikes: -1
+								dislikes: -1,
+								requestedAt: song.requestedAt
 							};
 						} else {
 							$set.currentSong = {
@@ -854,7 +858,8 @@ class _StationsModule extends CoreClass {
 								likes: song.likes,
 								dislikes: song.dislikes,
 								skipDuration: song.skipDuration,
-								thumbnail: song.thumbnail
+								thumbnail: song.thumbnail,
+								requestedAt: song.requestedAt
 							};
 						}
 						if (currentSongIndex >= 0) $set.currentSongIndex = currentSongIndex;

frontend/src/pages/Station/components/CurrentlyPlaying.vue

@@ -31,7 +31,12 @@
 				{{ currentSong.artists }}
 			</h5>
 			<p id="song-request-time">
-				Requested <strong>15 minutes ago</strong>
+				Requested
+				<strong>{{
+					formatDistance(currentSong.requestedAt, Date.now(), {
+						addSuffix: true
+					})
+				}}</strong>
 			</p>
 			<div id="song-actions">
 				<button
@@ -64,6 +69,7 @@
 
 <script>
 import { mapState, mapActions } from "vuex";
+import { formatDistance } from "date-fns";
 
 export default {
 	computed: {
@@ -75,7 +81,8 @@ export default {
 		})
 	},
 	methods: {
-		...mapActions("modals", ["openModal"])
+		...mapActions("modals", ["openModal"]),
+		formatDistance
 	}
 };
 </script>

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -31,6 +31,11 @@
 							:user-id="song.requestedBy"
 							:link="true"
 						/>
+						{{
+							formatDistance(song.requestedAt, new Date(), {
+								addSuffix: true
+							})
+						}}
 					</strong>
 				</p>
 			</div>
@@ -51,6 +56,8 @@
 </template>
 
 <script>
+import { formatDistance } from "date-fns";
+
 import UserIdToUsername from "../../../../../components/common/UserIdToUsername.vue";
 import utils from "../../../../../../js/utils";
 
@@ -72,6 +79,9 @@ export default {
 		return {
 			utils
 		};
+	},
+	methods: {
+		formatDistance
 	}
 };
 </script>