Makusu
/
Nasa_video_search_engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

prise en compte des video dans potd

This commit is contained in:
maxime 2026-04-09 18:35:30 +02:00
parent a312b4a2a2
commit ab98f80740
3 changed files with 40 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/pages/potd/potd.html
View File

@ -1,16 +1,33 @@
<div class="hero bg-base-200 min-h-screen"> @if(isLoading()){
<div class="hero-content flex-col lg:flex-col"> <div class="spinner">
<img <span class="loading loading-spinner loading-xl"></span>
src={{nasaPOTD()?.url}} <p>Chargement ...</p>
class="max-w-mid rounded-lg shadow-2xl" </div>
alt="{{nasaPOTD()?.explanation}}" }
/> @if(!isLoading() && nasaPOTD()){
<div> @if(nasaPOTD()?.media_type=="image"){
<h1 class="text-5xl font-bold">{{nasaPOTD()?.title}}</h1> <div class="hero bg-base-200 min-h-screen">
<p class="text-2x2 font-semibold">{{nasaPOTD()?.copyright}}</p> <div class="hero-content flex-col lg:flex-col">
<p class="py-6"> <img src={{nasaPOTD()?.url}} class="max-w-mid rounded-lg shadow-2xl" alt="{{nasaPOTD()?.explanation}}" />
{{nasaPOTD()?.explanation}} <div>
</p> <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> </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>
}

9
src/app/pages/potd/potd.ts
View File

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

4
src/app/pages/search/searchresults/searchresults.html
View File

@ -5,8 +5,8 @@
} }
@if(searchResults()!==null && searchResults()!.collection.items.length!==0){ @if(searchResults()!==null && searchResults()!.collection.items.length!==0){
<div class="resultsContainer w-2md lg:max-w-6xl"> <div class="flex justify-center resultsContainer w-full">
<ul class="list bg-base-100 rounded-box shadow-md"> <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> <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){ @for(el of searchResults()!.collection.items; track el.data[0].nasa_id){
<li class="list-row"> <li class="list-row">