felix-vi/SAE_riot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fin projet

Browse Source
This commit is contained in:
Patrick FELIX-VIMALARATNAM
2025-04-03 14:38:06 +02:00
parent 83fa675ddf
commit 25156c612f
4 changed files with 75 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/app.riot
View File

@@ -52,6 +52,7 @@
</div>
</a>
<a if={this.searchs.type === "release"} href={"#/release-details/master/" + item.master_id}><button>master</button></a>
<a if={this.searchs.type === "master"} href="#"><button onclick={() => this.MainReleaseDetails(item)}>release</button></a>
</div>
</div>
</div>
@@ -104,7 +105,7 @@
this.searchs.pagination = result.pagination;
this.searchs.query = query;
this.searchs.type = type;
console.log()
this.update();
},
@@ -141,6 +142,18 @@
Logout(){
window.logout()
this.update();
},
async MainReleaseDetails(item) {
const res = await fetch(item.resource_url);
const json = await res.json();
const mainUrl = json.main_release_url;
const res2 = await fetch(mainUrl);
const releaseData = await res2.json();
window.location.hash = `#/release-details/release/${releaseData.id}`;
}
}
</script>

16
components/favorites.riot
View File

@@ -26,6 +26,8 @@
</footer>
</div>
</a>
<a if={item.type === "release"} href={"#/release-details/master/" + item.master_id}><button>master</button></a>
<a if={item.type === "master"} href="#"><button onclick={() => this.MainReleaseDetails(item)}>release</button></a>
</div>
</div>
</div>
@@ -60,7 +62,6 @@
this.state.favorites.items = items;
this.state.loading = false;
console.log(this.state)
this.update();
},
@@ -68,6 +69,19 @@
await window.removeFavorite(id, type);
this.state.favorites.items = this.state.favorites.items.filter(item => item.id !== id);
this.update();
},
async MainReleaseDetails(item) {
const res = await fetch(item.resource_url);
const json = await res.json();
const mainUrl = json.main_release_url;
const res2 = await fetch(mainUrl);
const releaseData = await res2.json();
console.log(releaseData);
window.location.hash = `#/release-details/release/${releaseData.id}`;
}
}
</script>

65
components/release-details.riot
View File

@@ -6,13 +6,16 @@
<p if="{this.props.Type === 'master'}">{state.release.year}</p>
<p if="{this.props.Type === 'master'}">{state.release.name}</p>
<a if="{this.props.Type !== 'artist' && state.release.artists?.[0]}" href={"#/release-details/artist/" + state.release.artists[0].id}>{state.release.artists[0].name}</p>
<div class="container">
<img class="cover" if="{this.props.Type === 'master'}" src="{state.release.image?.[0]?.resource_url}" alt="{state.release.title}" />
<img class="cover" if="{this.props.Type !== 'master'}" src="{state.release.thumb}" alt="{state.release.title}" />
<div class="details-right" if="{this.props.Type !== 'artist'}">
<b>Track list</b>
<b if="{this.props.Type === 'master' && state.release.profile}">Track list</b>
<div if="{this.props.Type === 'master' && !state.release.profile}">
<h4>{state.release.message}</h4>
</div>
<ul>
<li each="{track in state.release.tracklist}">
{track.position} - {track.title} - {track.duration}
@@ -24,18 +27,22 @@
</div>
</div>
<div if="{this.props.Type === 'artist'}">
<h3>{state.release.name}</h3>
<h4>Biographie</h4>
{state.release.profile}
<strong if="{!state.release.profile || state.release.profile.trim() === ''}">Pas de profil</strong>
</div>
<!-- Liste des extra-artists avec liens -->
<div class="credits" if="{this.props.Type === 'release'}">
<b>Crédits :</b>
<ul>
<li each="{artist in state.resource.extraartists}">
<a href={"#/release-details/" + "artist" + "/" + artist.id }>{artist.name} - {artist.role}</a>
{console.log(state.resource)}
</li>
</ul>
<select onchange="{goToArtist}">
<option disabled selected>-- Sélectionnez un artiste --</option>
<option each="{artist in state.resource.extraartists}" value={"#/release-details/artist/" + artist.id}>
{artist.name} - {artist.role}
</option>
</select>
</div>
<a if={this.props.Type === "release"} href={"#/release-details/master/" + state.release.master_id}><button>master</button></a>
</div>
</div>
@@ -48,23 +55,38 @@
resource: []
},
async onMounted() {
const id = this.props.Id
if(this.props.Type === "release"){
this.state.release = await window.getReleaseDetails(id);
previousId: null,
previousType: "",
// Récupérer les extra-artists depuis leur URL
const response = await fetch(this.state.release.resource_url);
this.state.resource = await response.json();
async onMounted() {
await this.loadData()
},
async onBeforeUpdate() {
if (this.props.Id !== this.previousId || this.props.Type !== this.previousType) {
await this.loadData()
}
else if (this.props.Type === "master"){
this.state.release = await window.getMasterDetails(id)
},
async loadData() {
this.previousId = this.props.Id
this.previousType = this.props.Type
if (this.props.Type === "release") {
this.state.release = await window.getReleaseDetails(this.props.Id)
const response = await fetch(this.state.release.resource_url)
this.state.resource = await response.json()
} else if (this.props.Type === "master") {
this.state.release = await window.getMasterDetails(this.props.Id)
} else if (this.props.Type === "artist") {
this.state.release = await window.getArtistDetails(this.props.Id)
}
else{
this.state.release = await window.getArtistDetails(id)
}
console.log(this.state.release)
this.update()
},
goToArtist(e) {
const url = e.target.value;
if (url) window.location.hash = url;
}
}
</script>
@@ -188,5 +210,6 @@
.credits a:hover {
text-decoration: underline;
}
</style>
</release-details>

4
index.html
View File

@@ -5,8 +5,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Music App RiotJS</title>
<script src="https://unpkg.com/riot@9.4.6/riot+compiler.min.js"></script>
<script src="https://unpkg.com/@riotjs/route@9.2.1/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/riot@9.4.6/riot+compiler.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@riotjs/route@9.2.1/index.umd.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-auth-compat.js"></script>