Affichage des vidéos fonctionnel

src/app/app.routes.ts

@@ -9,6 +9,7 @@ export const routes: Routes = [
     {path: 'login', loadComponent: ()=> import("./pages/login/login").then(m =>m.Login)},
     {path: 'potd', loadComponent: ()=> import("./pages/potd/potd").then(m =>m.POTD)},
     {path: 'search', loadComponent: ()=> import("./pages/search/search").then(m =>m.Search)},
+    {path: 'video/:id', loadComponent: ()=> import("./pages/video/video").then(m =>m.Video)},
     {path: 'admin',canActivate: [adminGuard], loadChildren: () => import('./pages/admin/admin').then(m => m.Admin), data: { role: 'ADMIN' } },
     //version si besoin de multiplier les routes admin
     // {path: 'admin',canActivate: [adminGuard], loadChildren: () => import('./pages/admin/admin.routes').then(m => m.ADMIN_ROUTES), data: { role: 'ADMIN' } },

src/app/pages/search/search.css

@@ -3,5 +3,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;    
+    justify-content: center;
+      
+}
+
+.inputSearch {
+    margin-bottom: 1rem;  
 }

src/app/pages/search/search.html

@@ -1,5 +1,5 @@
 <div class="searchcontainer">
-  <div class="inputSearch">
+  <form class="inputSearch" (ngSubmit)="onSubmit()">
   <label class="input">
     <svg
       class="h-[1em] opacity-50"
@@ -17,32 +17,43 @@
         <path d="m21 21-4.3-4.3"></path>
       </g>
     </svg>
-    <input type="search" class="grow" placeholder="Search" />
+    <input type="search" [value]="searchString()" (input)="updateSearch($event)" class="grow" placeholder="Search"  />
     <kbd class="kbd kbd-sm">⌘</kbd>
-    <kbd class="kbd kbd-sm">K</kbd>
+    <kbd class="kbd kbd-sm">K</kbd>    
   </label>
-  </div>
+  <button class="btn">Submit</button>
+</form>
+
+
+
+
   <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: boucle for  -->
+            <!-- TODO why the fuck is nasaData an array?-->
-      <li class="list-row">
+            @if(searchResults()!==null){
-        <div><img class="size-10 rounded-box" src="https://img.daisyui.com/images/profile/demo/1@94.webp"/></div>
+              @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
-        <div>
+                <li class="list-row">
-          <div>Dio Lupa</div>
+                  <!-- 2 for small image -->
-          <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
+                  <div><img class="size-10 rounded-box" src="{{el.links[1].href}}"/></div>
-        </div>
+                  <div>
-        <p class="list-col-wrap text-xs">
+                    <div>{{el.data[0].title}}</div>
-          "Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.
+                    <div class="text-xs uppercase font-semibold opacity-60">Photographer: {{el.data[0].photographer}}</div>
-        </p>
+                  </div>
-        <button class="btn btn-square btn-ghost">
+                  <p class="list-col-wrap text-xs">
-          <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>
+                    {{el.data[0].description}}
-        </button>
+                  </p>
-        <button class="btn btn-square btn-ghost">
+                  <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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
+                    <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>
+                  </button>
-      </li>     
+                  <!-- <button class="btn btn-square btn-ghost">
+                    <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="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></g></svg>
+                  </button> -->
+                </li>                   
+              }
+            }       
+
     </ul>    
   </div>
 </div>

src/app/pages/search/search.ts

@@ -1,14 +1,40 @@
 import { Component, inject, signal } from '@angular/core';
 import { NAPOD } from '../../services/napod';
 import { NasaApi } from '../../interfaces/nasa-api';
+import { FormsModule, NgModel } from '@angular/forms';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-search',
-  imports: [],
+  imports: [FormsModule],
   templateUrl: './search.html',
   styleUrl: './search.css'
 })
 export class Search {
-  private nasaApi = inject(NAPOD)
+  private nasaApi = inject(NAPOD);
+  private router = inject(Router)
   searchResults = signal<NasaApi | null>(null)
+  searchString=signal('');
+
+  onSubmit() {
+    this.nasaApi.searchForVideos(this.searchString()).subscribe({
+      next: (data)=>{this.searchResults.set(data);
+        console.log(data.collection);
+      },
+      error: error =>{console.log(error);
+      }
+    })   
+  }
+
+  onClick(nasaId: string){
+    this.router.navigate(['/video/'+nasaId])
+  }
+
+  updateSearch(event: Event){
+    console.log(this.searchString());
+    const target = event.target as HTMLInputElement;
+    this.searchString.set(target.value)
+  }
+
+
 }

src/app/pages/video/video.html

@@ -0,0 +1,4 @@
+<p></p>
+<video width="320" height="240" controls>
+    <source src="{{asset()!.items[3].href}}" type="video/mp4">
+</video> 

src/app/pages/video/video.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Video } from './video';
+
+describe('Video', () => {
+  let component: Video;
+  let fixture: ComponentFixture<Video>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Video]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(Video);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/video/video.ts

@@ -0,0 +1,31 @@
+import { Component, inject, signal } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Collection } from '../../interfaces/nasa-api';
+import { NAPOD } from '../../services/napod';
+
+@Component({
+  selector: 'app-video',
+  imports: [],
+  templateUrl: './video.html',
+  styleUrl: './video.css'
+})
+export class Video {
+  private route = inject(ActivatedRoute)
+  asset=signal<Collection|null>(null);
+  //TODO: nom de merde pour le service a changer
+  private nasaApi: NAPOD = inject(NAPOD)
+  
+  ngOnInit(){
+    const nasaId=this.route.snapshot.params['id'];
+
+    this.nasaApi.getAssetDetail(nasaId).subscribe({
+      next: (data)=>{
+        this.asset.set(data.collection);
+        console.log(this.asset());        
+      },
+      error: error =>{
+        console.log(error);        
+      }
+    })
+  }
+}

src/app/services/napod.ts

@@ -17,12 +17,12 @@ export class NAPOD {
   }
 
   searchForVideos(query: string){
-    return this.http.get<NasaApi>(`${environment.NASA_API_IMAGE_BASE_URL}/search?q=${query}`)
+    // TODO: Si vide?
+    return this.http.get<NasaApi>(`${environment.NASA_API_IMAGE_BASE_URL}/search?q=${query}&media_type=video&page_size=5`)
   }
 
   getAssetDetail(nasaId: string){
-    return this.http.get<NasaApi>(`${environment.NASA_API_IMAGE_BASE_URL}/search?q=${query}`)
+    return this.http.get<NasaApi>(`${environment.NASA_API_IMAGE_BASE_URL}/asset/${nasaId}`)
-    //  https://images-api.nasa.gov/asset/GSFC_20120420_SDO_m10966_Year2
   }