chargement corrigé sur la page vidéo

angular.json

@@ -87,5 +87,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app.css

@@ -2,4 +2,5 @@ main {
     width: 100%;
     margin: 2rem;
     display: flex;  
+    justify-content: center;  
 }

src/app/pages/potd/potd.html

@@ -1,4 +1,4 @@
-<div class="card bg-base-100 w-96 shadow-sm">
+<!-- <div class="card bg-base-100 w-96 shadow-sm">
     <div class="card-body">
       <h2 class="card-title">{{nasaPOTD()?.title}}</h2>
       <p>{{nasaPOTD()?.explanation}}</p>
@@ -8,4 +8,22 @@
         src={{nasaPOTD()?.url}}
         alt="Nasa picture of the day" />
     </figure>
+  </div> -->
+
+<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"
+    />
+    <div>
+      <h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1>
+      <p class="text-2x2 font-semibold">Copyright: {{nasaPOTD()?.copyright}}</p>
+      <p class="py-6">
+        {{nasaPOTD()?.explanation}}
+      </p>
+      <!-- TODO: button to erase or find a usage -->
+      <!-- <button class="btn btn-primary">Get Started</button> -->
+    </div>
   </div>
+</div>

src/app/pages/search/search.css

@@ -1,5 +1,5 @@
 .searchcontainer {
-    width:100vw;  
+    width:80vw;  
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -9,4 +9,6 @@
 
 .inputSearch {
     margin-bottom: 1rem; 
+    display: flex;
+    flex-direction: row; 
 }

src/app/pages/search/search.html

@@ -24,26 +24,30 @@
   <button class="btn">Submit</button>
 </form>
 
+@if(searchResults()!==null && searchResults()!.collection.items.length==0){
+  <div class="resultsContainer">
+    <p>No results for this search</p>
+  </div>
+}
 
-
-
+@if(searchResults()!==null && searchResults()!.collection.items.length!==0){
   <div class="resultsContainer">
     <ul class="list bg-base-100 rounded-box shadow-md">
   
       <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">Results</li>
             <!-- TODO why the fuck is nasaData an array?-->
-            @if(searchResults()!==null){
+            
               @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
                 <li class="list-row">
                   <!-- 2 for small image -->
-                  <div><img class="size-10 rounded-box" src="{{el.links[1].href}}"/></div>
+                  <div><a><img class="size-25 rounded-box" src="{{el.links[1].href}}"/></a></div>
                   <div>
                     <div>{{el.data[0].title}}</div>
                     <div class="text-xs uppercase font-semibold opacity-60">Photographer: {{el.data[0].photographer}}</div>
-                  </div>
-                  <p class="list-col-wrap text-xs">
+                    <p class="list-col-wrap text-xs">
                     {{el.data[0].description}}
                   </p>
+                  </div>                  
                   <button class="btn btn-square btn-ghost" (click)="onClick(el.data[0].nasa_id)">
                     <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"><path d="M6 3L20 12 6 21 6 3z"></path></g></svg>
                   </button>
@@ -52,8 +56,8 @@
                   </button> -->
                 </li>                   
               }                
-            }       
 
     </ul>    
   </div>
+  }  
 </div>

src/app/pages/video/video.html

@@ -1,5 +1,18 @@
-<p></p>
-<video width="320" height="240" controls>
+@if(isLoading()){
+<div class="spinner">
+  <span class="loading loading-spinner loading-xl"></span>
+  <p>Chargement de la vidéo...</p>
+</div>
+}
+@if(!isLoading() && asset()){
+<div class="videocontainer">
+  <video width="320" height="240" controls>
     <source src="{{asset()!.items[3].href}}" type="video/mp4">
-  Your browser does not support the video tag.
-</video> 
+    Your browser does not support the video tag.
+  </video>
+</div>
+}
+
+@if(!isLoading() && !asset()){
+  <p>Impossible de charger la vidéo.</p>
+}

src/app/pages/video/video.ts

@@ -14,6 +14,7 @@ export class Video {
   asset=signal<Collection|null>(null);
   //TODO: nom de merde pour le service a changer
   private nasaApi: NAPOD = inject(NAPOD)
+  isLoading = signal<boolean>(true);
 
   ngOnInit(){
     const nasaId=this.route.snapshot.params['id'];
@@ -21,15 +22,14 @@ export class Video {
     this.nasaApi.getAssetDetail(nasaId).subscribe({
       next: (data)=>{
         this.asset.set(data.collection);
+        this.isLoading.set(false); 
         console.log(this.asset());
         
       },
       error: error =>{
         console.log(error);
+        this.isLoading.set(false);         
       }
     })
   }
-
-
-
 }