From afbda78ef23559ce81d94baea9f648d970659729 Mon Sep 17 00:00:00 2001
From: Turgay Akbas <akbas.turgay@gmail.com>
Date: Mon, 3 Jun 2024 09:53:48 +0200
Subject: [PATCH] Add functionality to display YouTube videos sequentially

---
 backend/src/server.ts               | 12 ++++++++++++
 frontend/src/app/app.component.html | 12 +++++++-----
 frontend/src/app/app.component.ts   | 10 +++++-----
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/backend/src/server.ts b/backend/src/server.ts
index a76cec1..d21ef09 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -3,10 +3,22 @@ import express from 'express';
 const app = express();
 const PORT = process.env.PORT || 3000;
 
+// Sample array of YouTube video URLs for demonstration
+const videoUrls = [
+  'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+  'https://www.youtube.com/watch?v=V-_O7nl0Ii0',
+  'https://www.youtube.com/watch?v=3JZ_D3ELwOQ'
+];
+
 app.get('/health', (req, res) => {
   res.status(200).send('Server is healthy');
 });
 
+// New endpoint to return an array of YouTube video URLs
+app.get('/videos', (req, res) => {
+  res.status(200).json(videoUrls);
+});
+
 app.listen(PORT, () => {
   console.log(`Server is running on port ${PORT}`);
 });
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 4379fbb..a60d9a7 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -1,7 +1,9 @@
-<h1>Backend Data</h1>
-<div *ngIf="backendData; else loading">
-  <p>{{ backendData }}</p>
+<h1>YouTube Videos</h1>
+<div *ngIf="videoUrls.length > 0; else noVideos">
+  <div *ngFor="let videoUrl of videoUrls">
+    <iframe [src]="videoUrl | safeUrl" width="560" height="315" frameborder="0" allowfullscreen></iframe>
+  </div>
 </div>
-<ng-template #loading>
-  <p>Loading...</p>
+<ng-template #noVideos>
+  <p>No videos to display.</p>
 </ng-template>
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index d1f707f..513a384 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -8,18 +8,18 @@ import { HttpClient } from '@angular/common/http';
 })
 export class AppComponent implements OnInit {
   title = 'frontend';
-  backendData: any;
+  videoUrls: string[] = [];
 
   constructor(private http: HttpClient) {}
 
   ngOnInit() {
-    this.fetchBackendData();
+    this.fetchVideoUrls();
   }
 
-  fetchBackendData() {
-    this.http.get('/health').subscribe(
+  fetchVideoUrls() {
+    this.http.get<string[]>('/videos').subscribe(
       data => {
-        this.backendData = data;
+        this.videoUrls = data;
       },
       error => {
         console.error('There was an error!', error);