Merge pull request #11 from akbast/add-youtube-videos

Add functionality to display YouTube videos sequentially

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}`);
 });

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>

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);