refactor: Store and display YouTube video upload date

backend/logic/db/schemas/youtubeVideo.js

@@ -3,6 +3,7 @@ export default {
 	title: { type: String, trim: true, required: true },
 	author: { type: String, trim: true, required: true },
 	duration: { type: Number, required: true },
+	uploadedAt: { type: Number },
 	createdAt: { type: Date, default: Date.now, required: true },
 	documentVersion: { type: Number, default: 1, required: true }
 };

backend/logic/youtube.js

@@ -1434,7 +1434,8 @@ class _YouTubeModule extends CoreClass {
 									title: data.items[0].snippet.title,
 									author: data.items[0].snippet.channelTitle,
 									thumbnail: data.items[0].snippet.thumbnails.default.url,
-									duration
+									duration,
+									uploadedAt: new Date(data.items[0].snippet.publishedAt)
 								};
 
 								return next(null, false, youtubeVideo);

frontend/src/components/modals/ViewYoutubeVideo.vue

@@ -8,6 +8,7 @@ import { useModalsStore } from "@/stores/modals";
 import { useViewYoutubeVideoStore } from "@/stores/viewYoutubeVideo";
 import { useStationStore } from "@/stores/station";
 import { useUserAuthStore } from "@/stores/userAuth";
+import utils from "@/utils";
 
 import Modal from "@/components/Modal.vue";
 
@@ -516,6 +517,21 @@ onBeforeUnmount(() => {
 							video.duration
 						}}</span>
 					</p>
+					<p>
+						<strong>Upload Date:</strong>
+						<span
+							:title="
+								video.uploadedAt
+									? new Date(video.uploadedAt).toString()
+									: 'Unknown'
+							"
+							>{{
+								video.uploadedAt
+									? utils.getDateFormatted(video.uploadedAt)
+									: "Unknown"
+							}}</span
+						>
+					</p>
 				</div>
 				<div class="right-section">
 					<song-thumbnail :song="video" class="thumbnail-preview" />

frontend/src/stores/viewYoutubeVideo.ts

@@ -13,6 +13,7 @@ export const useViewYoutubeVideoStore = ({
 				title: string;
 				author: string;
 				duration: number;
+				uploadedAt?: number;
 			};
 			player: {
 				error: boolean;