prise en compte des video dans potd

src/app/pages/potd/potd.html

@@ -1,16 +1,33 @@
-<div class="hero bg-base-200 min-h-screen">
-  <div class="hero-content flex-col lg:flex-col">
-    <img
-      src={{nasaPOTD()?.url}}
-      class="max-w-mid rounded-lg shadow-2xl"
-      alt="{{nasaPOTD()?.explanation}}"
-    />
-    <div>
-      <h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
-      <p class="text-2x2 font-semibold">{{nasaPOTD()?.copyright}}</p>
-      <p class="py-6">
-        {{nasaPOTD()?.explanation}}
-      </p>
+@if(isLoading()){
+<div class="spinner">
+  <span class="loading loading-spinner loading-xl"></span>
+  <p>Chargement ...</p>
+</div>
+}
+@if(!isLoading() && nasaPOTD()){
+  @if(nasaPOTD()?.media_type=="image"){
+  <div class="hero bg-base-200 min-h-screen">
+    <div class="hero-content flex-col lg:flex-col">
+      <img src={{nasaPOTD()?.url}} class="max-w-mid rounded-lg shadow-2xl" alt="{{nasaPOTD()?.explanation}}" />
+      <div>
+        <h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
+        <p class="text-2x2 font-semibold">{{nasaPOTD()?.copyright}}</p>
+        <p class="py-6">
+          {{nasaPOTD()?.explanation}}
+        </p>
+      </div>
     </div>
   </div>
-</div>
+  }
+  @if(nasaPOTD()?.media_type==="video"){
+    <div class="videocontainer flex justify-center w-full mt-20">
+      <video class="rounded-md" controls>
+      <source src="{{nasaPOTD()!.url}}" type="video/mp4">
+      </video>
+  </div>
+  }
+
+}
+@if(!isLoading() && !nasaPOTD()){
+<p>Impossible de charger la vidéo.</p>
+}

src/app/pages/potd/potd.ts

@@ -1,4 +1,4 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, OnInit, inject, signal } from '@angular/core';
 import { NAPOD } from '../../services/napod';
 import { Picture } from '../../interfaces/picture';
 
@@ -8,19 +8,22 @@ import { Picture } from '../../interfaces/picture';
   templateUrl: './potd.html',
   styleUrl: './potd.css'
 })
-export class POTD {
+export class POTD implements OnInit{
 
   private readonly nasaApi = inject(NAPOD)
   nasaPOTD = signal< Picture | null >(null)
+  isLoading = signal<boolean>(true);
   
-  constructor(){
+  ngOnInit(){
     this.nasaApi.getPicOfToday().subscribe({
       next: (data)=>{
         console.log(data)
         this.nasaPOTD.set(data)
+        this.isLoading.set(false);
       },
       error: error =>{
         console.log(error);
+        this.isLoading.set(false);        
       }
     }      
   )

src/app/pages/search/searchresults/searchresults.html

@@ -5,8 +5,8 @@
 }
 
 @if(searchResults()!==null && searchResults()!.collection.items.length!==0){
-  <div class="resultsContainer w-2md lg:max-w-6xl">
-    <ul class="list bg-base-100 rounded-box shadow-md">  
+  <div class="flex justify-center resultsContainer w-full">
+    <ul class="flex max-w-6xl list bg-base-100 rounded-box shadow-md">  
       <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Results</li>          
               @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
                 <li class="list-row">