feat: add videos

Author: Helias

public/data/events.json

@@ -271,6 +271,18 @@
         "topic": "Condivisione delle ultime novità riguardo il linguaggio Python.",
         "topicEn": "Sharing the latest news about the Python language.",
         "image": "/images/about/SalvoRapisarda.jpeg"
+      },
+      {
+        "name": "Dario Camonita",
+        "topic": "GUI desktop application development (with PySide6)",
+        "topicEn": "GUI desktop application development (with PySide6)",
+        "image": "/images/events-speakers/DarioCamonita.jpeg"
+      },
+      {
+        "name": "Raffaele Barone",
+        "topic": "PyDivertimento (AoC & SpeechLess)",
+        "topicEn": "PyDivertimento (AoC & SpeechLess)",
+        "image": "/images/events-speakers/RaffaeleBarone.jpeg"
       }
     ]
   },

public/images/events-speakers/RaffaeleBarone.jpeg

@@ -69,15 +69,25 @@ <h2 class="mb-4 text-xl font-semibold">{{ 'events.speakers' | transloco }}</h2>
           <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>
+              <a
+                [href]="videoWatchUrl(videoId)"
+                target="_blank"
+                rel="noopener"
+                class="group relative block aspect-video w-full overflow-hidden rounded-(--radius) shadow"
+              >
+                <img
+                  [src]="videoThumbnail(videoId)"
+                  alt="Video thumbnail"
+                  class="h-full w-full object-cover transition-opacity group-hover:opacity-80"
+                />
+                <div class="absolute inset-0 flex items-center justify-center">
+                  <div class="flex h-14 w-14 items-center justify-center rounded-full bg-black/60 text-white transition-colors group-hover:bg-black/80">
+                    <svg viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 translate-x-0.5" aria-hidden="true">
+                      <path d="M8 5v14l11-7z"/>
+                    </svg>
+                  </div>
+                </div>
+              </a>
             }
           </div>
         </div>

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

@@ -1,6 +1,5 @@
 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';
@@ -40,7 +39,6 @@ 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);
 
@@ -58,10 +56,13 @@ export class EventDetailComponent {
     });
   }
 
-  protected embedUrl(videoId: string): SafeResourceUrl {
-    return this.sanitizer.bypassSecurityTrustResourceUrl(
-      `https://www.youtube.com/embed/${videoId}`
-    );
+  protected videoThumbnail(videoId: string): string {
+    return `https://img.youtube.com/vi/${videoId.split('?')[0]}/0.jpg`;
+  }
+
+  protected videoWatchUrl(videoId: string): string {
+    const [id, params] = videoId.split('?');
+    return params ? `https://www.youtube.com/watch?v=${id}&${params}` : `https://www.youtube.com/watch?v=${id}`;
   }
 
   protected openLightbox(index: number): void {