feat: add videos under events

Author: Helias

public/data/events.json

@@ -263,6 +263,7 @@
     "fullDescriptionEn": "The last meetup of 2024 was held at CreationDose with a Christmas theme: latest Python news, expert talks, gift exchange, toast and a final PyDinner. A perfect way to bid farewell to the year together with the community.",
     "attendees": 44,
     "url": "https://www.meetup.com/python-catania/events/304691223/",
+    "videos": ["c8URuoByeRY", "AavetGgMq40", "Kkd2cmjGub0?start=829"],
     "gallery": ["/images/events/event-304691223.jpg"],
     "speakers": [
       {
@@ -284,13 +285,26 @@
     "fullDescriptionEn": "Summer Edition 2024 was held at Paradigma SpA with the goal of sharing the latest Python news, listening to community expert talks and networking. The evening ended with a PyPizza together.",
     "attendees": 32,
     "url": "https://www.meetup.com/python-catania/events/302671524/",
+    "videos": ["1HksMsb9Xho", "m0lCULOKqTc", "ymCyuHgP6h4", "yD2zhMWeJBM?start=1547"],
     "gallery": ["/images/events/event-302671524.jpg"],
     "speakers": [
       {
         "name": "Salvatore Rapisarda",
-        "topic": "Condivisione delle ultime novità riguardo il linguaggio Python.",
-        "topicEn": "Sharing the latest news about the Python language.",
+        "topic": "Introduzione a ODOO",
+        "topicEn": "Introduction to ODOO",
         "image": "/images/about/SalvoRapisarda.jpeg"
+      },
+      {
+        "name": "Salvatore Sanfilippo",
+        "topic": "Micropython",
+        "topicEn": "Micropython",
+        "image": "/images/events-speakers/SalvatoreSanfilippo.jpeg"
+      },
+      {
+        "name": "Pietro Peterlongo",
+        "topic": "PyScript",
+        "topicEn": "PyScript",
+        "image": "/images/events-speakers/PietroPeterlongo.jpeg"
       }
     ]
   },

public/i18n/en.json

@@ -30,6 +30,7 @@
     "attendees": "attendees",
     "backToEvents": "Back to events",
     "speakers": "Speakers",
+    "videos": "Videos",
     "gallery": "Gallery",
     "viewOnMeetup": "View on Meetup"
   },

public/i18n/it.json

@@ -30,6 +30,7 @@
     "attendees": "partecipanti",
     "backToEvents": "Torna agli eventi",
     "speakers": "Speaker",
+    "videos": "Video",
     "gallery": "Galleria",
     "viewOnMeetup": "Vedi su Meetup"
   },

public/images/events-speakers/SalvatoreSanfilippo.jpeg

@@ -35,9 +35,7 @@ <h1 class="mb-2 text-3xl font-bold">{{ event()!.title }}</h1>
           <h2 class="mb-4 text-xl font-semibold">{{ 'events.speakers' | transloco }}</h2>
           <ul class="grid list-none grid-cols-1 gap-3 p-0 sm:grid-cols-2">
             @for (speaker of event()!.speakers; track speaker.name) {
-              <li
-                class="flex items-start gap-3 rounded-(--radius) border border-(--border) bg-(--surface) p-4"
-              >
+              <li class="flex items-start gap-3 rounded-(--radius) border border-(--border) bg-(--surface) p-4">
                 @if (speaker.image) {
                   <img
                     [ngSrc]="speaker.image"
@@ -65,6 +63,26 @@ <h2 class="mb-4 text-xl font-semibold">{{ 'events.speakers' | transloco }}</h2>
         </div>
       }
 
+      <!-- Videos -->
+      @if (event()!.videos && event()!.videos!.length > 0) {
+        <div class="mb-10">
+          <h2 class="mb-4 text-xl font-semibold">{{ 'events.videos' | transloco }}</h2>
+          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            @for (videoId of event()!.videos!; track videoId) {
+              <div class="aspect-video w-full overflow-hidden rounded-(--radius) shadow">
+                <iframe
+                  [src]="embedUrl(videoId)"
+                  class="h-full w-full"
+                  allowfullscreen
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  title="Video"
+                ></iframe>
+              </div>
+            }
+          </div>
+        </div>
+      }
+
       <!-- Gallery -->
       @if (event()!.gallery.length > 0) {
         <div class="mb-10">

src/app/pages/events/event-detail/event-detail.component.html

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
 import { NgOptimizedImage } from '@angular/common';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
 import { toSignal } from '@angular/core/rxjs-interop';
@@ -25,6 +26,7 @@ interface MeetupEvent {
   readonly fullDescriptionEn: string;
   readonly attendees: number;
   readonly url: string;
+  readonly videos?: string[];
   readonly gallery: string[];
   readonly speakers: Speaker[];
 }
@@ -38,6 +40,7 @@ interface MeetupEvent {
 export class EventDetailComponent {
   private readonly http = inject(HttpClient);
   private readonly route = inject(ActivatedRoute);
+  private readonly sanitizer = inject(DomSanitizer);
   private readonly translocoService = inject(TranslocoService);
   protected readonly baseUrl = inject(BASE_URL);
 
@@ -55,6 +58,12 @@ export class EventDetailComponent {
     });
   }
 
+  protected embedUrl(videoId: string): SafeResourceUrl {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(
+      `https://www.youtube.com/embed/${videoId}`
+    );
+  }
+
   protected openLightbox(index: number): void {
     this.lightboxIndex.set(index);
   }