quasiment fini

components/app.riot

@@ -40,10 +40,10 @@
                 <div class="results-grid">
                     <div class="card" each="{item in searchs.items}">
                         <!-- Afficher l'étoile avec la musique immédiatement -->
-                        <a if={authUser} onclick={() => item.isFavorite ? this.removeFavoris(item.id) : this.addFavoris(item.id)}>
+                        <a if={authUser && this.searchs.type !== "artist"} onclick={() => item.isFavorite ? this.removeFavoris(item.id) : this.addFavoris(item.id)}>
                             <button><i class={item.isFavorite ? "fa-solid fa-star" : "fa-regular fa-star"}></i></button>
                         </a>
-                        <a href={ "#/release-details/" + item.id}>
+                        <a href={ "#/release-details/" + item.type + "/" + item.id}>
                             {item.title}
                             <img src="{item.cover_image}" alt="cover" />
                             <div if="{item.type !=='artist' } ">
@@ -51,13 +51,14 @@
                                 <footer>{item.community.want}<i class="fa-solid fa-check"></i> {item.community.have}<i class="fa-regular fa-heart"></i></footer>
                             </div>
                         </a>
+                        <a if={this.searchs.type === "release"} href={"#/release-details/master/" + item.master_id}><button>master</button></a>
                     </div>
                 </div>
             </div>
         </route>
 
-        <route path="#/release-details/:id">
+        <route path="#/release-details/:type/:id">
-            <release-details releaseid={route.params.id}></release-details>
+            <release-details Type={route.params.type} Id={route.params.id}></release-details>
         </route>
         <route path="#/favoris">
             <favorites></favorites>
@@ -80,7 +81,8 @@
             searchs: {
                 items: [],
                 pagination: [],
-                type: null,
+                type: "release",
+                query: ""
             },
 
             async search(e, page = 1) {
@@ -88,7 +90,6 @@
 
                 const type = e?.target?.type?.value || this.searchs.type;
                 const query = e?.target?.query?.value || this.searchs.query;
-                if (!query) return;
 
                 const result = await window.discogsearch(query, type, page);
                 console.log(result);
@@ -119,6 +120,8 @@
                     this.authUser = user;
                     this.update();
                 });
+                this.search(null, 1);
+                this.update();
             },
 
             addFavoris(id) {
@@ -158,67 +161,101 @@
             display: flex;
             gap: 10px;
             margin-bottom: 20px;
+            flex-wrap: wrap;
+        }
+
+        form select,
+        form input {
+            padding: 0.6rem;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            font-size: 1rem;
+        }
+
+        form button {
+            background-color: #1976d2;
+            color: white;
+            padding: 0.6rem 1.2rem;
+            border: none;
+            border-radius: 6px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        form button:hover {
+            background-color: #125aa3;
         }
 
         .results-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-            gap: 15px;
+            gap: 1rem;
-        }
-        
-        .card {
-            border: 1px solid #ccc;
-            padding: 10px;
-            text-align: center;
-            background: #fff;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-        
-        footer {
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        img {
-            width: 100%;
-            height: auto;
-            border-radius: 4px;
-            margin-bottom: 10px;
-        }
-        
-        h4 {
-            font-size: 1rem;
-            margin: 5px 0;
-        }
-        
-        a {
-            text-decoration: none;
-            color: #007bff;
-        }
-        
-        nav {
-            display: flex;
-            justify-content: space-around;
-            background: #1976d2;
             padding: 1rem;
         }
 
-        button {
+        .card {
-            color: white;
+            background: white;
-            background-color: #2196f3;
+            border-radius: 10px;
-            border: none;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
-            font-weight: bold;
+            padding: 1rem;
-            cursor: pointer;
+            text-align: center;
-            padding: 0.5em 1em;
+            transition: transform 0.2s ease;
-            border-radius: 5px;
-            margin: 0.5em;
-            transition: background-color 0.3s ease;
         }
 
-        button:hover {
+        .card:hover {
-            background-color: #1769aa;
+            transform: translateY(-4px);
-            text-decoration: none;
+        }
+
+        .card img {
+            width: 100%;
+            border-radius: 6px;
+            margin-bottom: 0.5rem;
+        }
+
+        .card h4 {
+            font-size: 1.1rem;
+            margin: 0.5rem 0;
+        }
+
+        footer {
+            display: flex;
+            justify-content: space-around;
+            font-size: 0.9rem;
+            color: #666;
+            margin-top: 0.5rem;
+        }
+
+        .card a i.fa-star {
+            color: #fbc02d;
+            font-size: 1.3rem;
+            transition: transform 0.2s ease;
+        }
+
+        .card a i.fa-star:hover {
+            transform: scale(1.2);
+        }
+
+        .pagination {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 2rem;
+        }
+
+        .pagination button {
+            background-color: #1976d2;
+            color: white;
+            padding: 0.5rem 1rem;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .pagination button:hover {
+            background-color: #125aa3;
         }
 
         nav {
@@ -230,18 +267,11 @@
             align-items: center;
         }
 
-        .pagination {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 2rem;
-        }
-        
         nav a {
             margin: 0 10px;
             color: white;
             text-decoration: none;
         }
+
     </style>
 </app>

components/favorites.riot

@@ -1,16 +1,28 @@
 <favorites>
   <h2>Mes favoris</h2>
 
-    <div if={state.favorites.items.length> 0}>
+  <div if={state.loading}>
+    <p>Chargement des favoris...</p>
+  </div>
+
+  <div if={!state.loading && state.favorites.items.length === 0}>
+    <p>Aucun favori trouvé.</p>
+  </div>
+
+  <div if={!state.loading && state.favorites.items.length > 0}>
     <div class="results-grid">
       <div class="card" each={item in state.favorites.items}>
-                <a href={ "#/release-details/" + item.id}>
+        <a onclick={() => removeFavoris(item.id)}>
-                    <img src={item.thumb} alt="cover" />
+          <button><i class="fa-solid fa-star"></i></button>
+        </a>
+        <a href={"#/release-details/" + item.id}>
           <h4>{item.title}</h4>
-                    <div if={item.type !=='artist' }>
+          <img src={item.thumb} alt="cover" />
+          <div if={item.type !== 'artist'}>
             <p>{item.year}</p>
             <footer>
-                            {item.community?.want} <i class="fa-solid fa-check"></i> {item.community?.have} <i class="fa-regular fa-heart"></i>
+              {item.community?.want} <i class="fa-solid fa-check"></i>
+              {item.community?.have} <i class="fa-regular fa-heart"></i>
             </footer>
           </div>
         </a>
@@ -18,15 +30,15 @@
     </div>
   </div>
 
-    <p if={state.favorites.items.length===0 }>Aucun favori trouvé.</p>
-
   <script>
     export default {
       state: {
         favorites: {
           items: []
-                }
         },
+        loading: true
+      },
+
       async onMounted() {
         const ids = await window.getFavorites();
 
@@ -37,6 +49,13 @@
         }
 
         this.state.favorites.items = items;
+        this.state.loading = false;
+        this.update();
+      },
+
+      async removeFavoris(id) {
+        await window.removeFavorite(id);
+        this.state.favorites.items = this.state.favorites.items.filter(item => item.id !== id);
         this.update();
       }
     }
@@ -45,35 +64,51 @@
   <style>
     .results-grid {
         display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-            gap: 15px;
+        gap: 1rem;
+        padding: 1rem;
     }
 
     .card {
-            border: 1px solid #ccc;
+        background: white;
-            padding: 10px;
+        border-radius: 10px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+        padding: 1rem;
         text-align: center;
-            background: #fff;
+        transition: transform 0.2s ease;
-            border-radius: 8px;
+    }
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+    .card:hover {
+        transform: translateY(-4px);
     }
 
     .card img {
         width: 100%;
-            height: auto;
+        border-radius: 6px;
-            border-radius: 4px;
+        margin-bottom: 0.5rem;
-            margin-bottom: 10px;
     }
 
     .card h4 {
-            font-size: 1rem;
+        font-size: 1.1rem;
-            margin: 5px 0;
+        margin: 0.5rem 0;
     }
 
     footer {
         display: flex;
         justify-content: space-around;
-            margin-top: 0.5rem;
+        font-size: 0.9rem;
+        color: #666;
     }
+
+    .card a i.fa-star {
+        color: #fbc02d;
+        font-size: 1.3rem;
+        transition: transform 0.2s ease;
+    }
+
+    .card a i.fa-star:hover {
+        transform: scale(1.2);
+    }
+
   </style>
 </favorites>

components/login.riot

@@ -22,28 +22,40 @@
         form {
             display: flex;
             flex-direction: column;
-            max-width: 300px;
+            gap: 1rem;
+            max-width: 400px;
             margin: auto;
-            gap: 10px;
+            background: white;
-            margin-top: 2rem;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
         }
 
-        input,
+        input {
-        button {
+            padding: 0.75rem;
-            padding: 0.5rem;
-            border-radius: 4px;
             border: 1px solid #ccc;
+            border-radius: 6px;
+            font-size: 1rem;
         }
 
         button {
             background-color: #1976d2;
             color: white;
+            padding: 0.75rem;
             border: none;
+            border-radius: 6px;
+            font-weight: bold;
             cursor: pointer;
+            transition: background-color 0.3s ease;
         }
 
         button:hover {
-            background-color: #135ba1;
+            background-color: #125aa3;
+        }
+
+        p {
+            text-align: center;
+            margin-top: 1rem;
         }
     </style>
 </login>

components/register.riot

@@ -14,15 +14,6 @@
                 const password = e.target.password.value;
                 await window.sign(email, password);
                 window.location.href = '#';
-            },
-            onMounted() {
-                observeAuthState(user => {
-                    if (user) {
-                        console.log("Connecté :", user.email);
-                    } else {
-                        console.log("Déconnecté");
-                    }
-                });
             }
         }
     </script>
@@ -30,28 +21,40 @@
         form {
             display: flex;
             flex-direction: column;
-            max-width: 300px;
+            gap: 1rem;
+            max-width: 400px;
             margin: auto;
-            gap: 10px;
+            background: white;
-            margin-top: 2rem;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
         }
 
-        input,
+        input {
-        button {
+            padding: 0.75rem;
-            padding: 0.5rem;
-            border-radius: 4px;
             border: 1px solid #ccc;
+            border-radius: 6px;
+            font-size: 1rem;
         }
 
         button {
             background-color: #1976d2;
             color: white;
+            padding: 0.75rem;
             border: none;
+            border-radius: 6px;
+            font-weight: bold;
             cursor: pointer;
+            transition: background-color 0.3s ease;
         }
 
         button:hover {
-            background-color: #135ba1;
+            background-color: #125aa3;
+        }
+
+        p {
+            text-align: center;
+            margin-top: 1rem;
         }
     </style>
 </register>

components/release-details.riot

@@ -1,12 +1,17 @@
 <release-details>
     <div class="details">
         <h2>{state.release.title}</h2>
-        <p if="{state.release.type !== 'artist'}">{state.release.formats?.[0]?.name}-{state.release.year}</p>
+        <p if="{this.props.Type === 'release'}">{state.release.formats?.[0]?.name}-{state.release.year}</p>
-        <p if="{state.release.type !== 'artist'}">{state.release.community?.rating?.average}({state.release.community?.rating?.count}vote)</p>
+        <p if="{this.props.Type === 'release'}">{state.release.community?.rating?.average}({state.release.community?.rating?.count}vote)</p>
 
-        <div class="release-content">
+        <p if="{this.props.Type === 'master'}">{state.release.year}</p> 
-            <img src="{state.release.thumb}" alt="{state.release.title}" />
+
-            <div if="{state.release.type !== 'artist'}">
+        <p if="{this.props.Type === 'master'}">{state.release.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>
                 <ul>
                     <li each="{track in state.release.tracklist}">
@@ -15,10 +20,10 @@
                 </ul>
 
                 <div class="genres">
-                    <span each="{genre in state.release.genres}">{genre}</span>
+                    <span class="genre-badge" each="{genre in state.release.genres}">{genre}</span>
                 </div>
             </div>
-            <div if="{state.release.type === 'artist'}">
+            <div if="{this.props.Type === 'artist'}">
                 {state.release.profile}
             </div>
         </div>
@@ -26,15 +31,25 @@
 
     <script>
         export default {
-            props: ["releaseid"],
+            props: ["Type","Id"],
 
             state: {
                 release: [],
             },
 
             async onMounted() {
-                const id = this.props.releaseid
+                const id = this.props.Id
+                console.log(this.props.Id)
+                console.log(this.props.Type)
+                if(this.props.Type === "release"){
                     this.state.release = await window.getReleaseDetails(id)
+                }
+                else if (this.props.Type === "master"){
+                    this.state.release = await window.getMasterDetails(id)
+                }
+                else{
+                    this.state.release = await window.getArtistDetails(id)
+                }
                 console.log("resultat", this.state.release)
 
                 this.update()
@@ -43,27 +58,91 @@
     </script>
 
     <style>
-        .release-content {
+        .container {
             display: flex;
-            gap: 20px;
+            flex-wrap: wrap;
+            gap: 2rem;
+            max-width: 1000px;
+            margin: 2rem auto;
+            padding: 1.5rem;
+            background: #fff;
+            border-radius: 10px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
         }
 
-        ul {
+        .cover {
-            padding-left: 20px;
+            width: 300px;
+            height: auto;
+            aspect-ratio: 1 / 1; /* carré ou ajuste selon besoin */
+            object-fit: cover;
+            border-radius: 8px;
         }
 
-        li {
+        .details-right {
-            margin-bottom: 5px;
+            flex: 1;
+            min-width: 300px;
         }
 
-        .genres span {
+        h2 {
+            font-size: 2rem;
+            margin-bottom: 1rem;
+            color: #1976d2;
+        }
+
+        p {
+            margin: 0.75rem 0;
+            line-height: 1.6;
+            font-size: 1rem;
+        }
+
+        .format {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+            margin: 1rem 0;
+        }
+
+        .format span {
+            background: #e3f2fd;
+            padding: 0.3rem 0.7rem;
+            border-radius: 5px;
+            font-size: 0.9rem;
+            color: #1976d2;
+        }
+
+        .tracklist {
+            margin-top: 1.5rem;
+        }
+
+        .tracklist h3 {
+            font-size: 1.3rem;
+            margin-bottom: 0.5rem;
+        }
+
+        .tracklist ul {
+            list-style: none;
+            padding-left: 1rem;
+            margin: 0;
+        }
+
+        .tracklist li {
+            margin-bottom: 0.4rem;
+            font-size: 0.95rem;
+        }
+
+        .genres {
+            margin-top: 1.5rem;
+        }
+
+        .genre-badge {
             display: inline-block;
-            background: #333;
+            background-color: #e0e0e0;
-            color: #fff;
+            color: #333;
-            padding: 3px 7px;
+            padding: 0.4rem 0.8rem;
-            border-radius: 3px;
+            border-radius: 20px;
-            margin-right: 5px;
+            font-size: 0.85rem;
-            font-size: 0.9em;
+            margin-right: 0.5rem;
+            margin-bottom: 0.3rem;
         }
     </style>
 </release-details>

index.html

@@ -5,12 +5,11 @@
     <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.5/riot+compiler.min.js"></script>
+    <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>
     <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>
-    <script src=""></script>
 
     <script src="./components/app.riot" type="riot"></script>
     <script src="./components/release-details.riot" type="riot"> </script>

services/discogsService.js

@@ -1,5 +1,7 @@
 const baseUrlsearch = 'https://api.discogs.com/database/search';
 const baseUrlrelease = 'https://api.discogs.com/releases/';
+const baseUrlmaster = 'https://api.discogs.com/masters/';
+const baseUrlartist = 'https://api.discogs.com/artists/';
 const key = 'NWmMhlPAbPlVnaDqVGyX';
 const secret = 'hZPaoBiGiSwlCjARrbOICOpDuITwyJAm';
 const perPage = 100;
@@ -16,5 +18,17 @@ export async function getReleaseDetails(releaseId) {
     return await response.json();
 }
 
+export async function getMasterDetails(masterId) {
+    const response = await fetch(`${baseUrlmaster}${masterId}`);
+    return await response.json();
+}
+
+export async function getArtistDetails(artistId) {
+    const response = await fetch(`${baseUrlartist}${artistId}`);
+    return await response.json();
+}
+
 window.getReleaseDetails = getReleaseDetails;
+window.getMasterDetails = getMasterDetails;
+window.getArtistDetails = getArtistDetails;
 window.discogsearch = discogsearch;