quasiment fini

2025-03-31 13:15:47 +02:00
parent b5bed05929
commit eabc11d2cc
7 changed files with 374 additions and 202 deletions
--- a/components/app.riot
+++ b/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">
-            <release-details releaseid={route.params.id}></release-details>
+        <route path="#/release-details/:type/:id">
+            <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) {
@@ -153,81 +156,84 @@
            max-width: 1200px;
            margin: auto;
        }
-        
+
        form {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
-        }
-        
-        .results-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 15px;
-        }
-        
-        .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 {
-            color: white;
-            background-color: #2196f3;
-            border: none;
-            font-weight: bold;
-            cursor: pointer;
-            padding: 0.5em 1em;
-            border-radius: 5px;
-            margin: 0.5em;
-            transition: background-color 0.3s ease;
+            flex-wrap: wrap;
        }

-        button:hover {
-            background-color: #1769aa;
-            text-decoration: none;
+        form select,
+        form input {
+            padding: 0.6rem;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            font-size: 1rem;
        }
-        
-        nav {
+
+        form button {
            background-color: #1976d2;
-            padding: 1rem;
            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(220px, 1fr));
+            gap: 1rem;
+            padding: 1rem;
+        }
+
+        .card {
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+            padding: 1rem;
+            text-align: center;
+            transition: transform 0.2s ease;
+        }
+
+        .card:hover {
+            transform: translateY(-4px);
+        }
+
+        .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-between;
-            align-items: center;
+            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 {
@@ -237,11 +243,35 @@
            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 {
+            background-color: #1976d2;
+            padding: 1rem;
+            color: white;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
        nav a {
            margin: 0 10px;
            color: white;
            text-decoration: none;
        }
+
    </style>
 </app>
--- a/components/favorites.riot
+++ b/components/favorites.riot
@@ -1,79 +1,114 @@
 <favorites>
-    <h2>Mes favoris</h2>
+  <h2>Mes favoris</h2>

-    <div if={state.favorites.items.length> 0}>
-        <div class="results-grid">
-            <div class="card" each={item in state.favorites.items}>
-                <a href={ "#/release-details/" + item.id}>
-                    <img src={item.thumb} alt="cover" />
-                    <h4>{item.title}</h4>
-                    <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>
-                        </footer>
-                    </div>
-                </a>
-            </div>
-        </div>
+  <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 onclick={() => removeFavoris(item.id)}>
+          <button><i class="fa-solid fa-star"></i></button>
+        </a>
+        <a href={"#/release-details/" + item.id}>
+          <h4>{item.title}</h4>
+          <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>
+            </footer>
+          </div>
+        </a>
+      </div>
    </div>
+  </div>

-    <p if={state.favorites.items.length===0 }>Aucun favori trouvé.</p>
+  <script>
+    export default {
+      state: {
+        favorites: {
+          items: []
+        },
+        loading: true
+      },

-    <script>
-        export default {
-            state: {
-                favorites: {
-                    items: []
-                }
-            },
-            async onMounted() {
-                const ids = await window.getFavorites();
+      async onMounted() {
+        const ids = await window.getFavorites();

-                const items = [];
-                for (const id of ids) {
-                    const release = await window.getReleaseDetails(id);
-                    items.push(release);
-                }
+        const items = [];
+        for (const id of ids) {
+          const release = await window.getReleaseDetails(id);
+          items.push(release);
+        }

-                this.state.favorites.items = items;
-                this.update();
-            }
-        }
-    </script>
+        this.state.favorites.items = items;
+        this.state.loading = false;
+        this.update();
+      },

-    <style>
-        .results-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 15px;
-        }
-        
-        .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);
-        }
-        
-        .card img {
-            width: 100%;
-            height: auto;
-            border-radius: 4px;
-            margin-bottom: 10px;
-        }
-        
-        .card h4 {
-            font-size: 1rem;
-            margin: 5px 0;
-        }
-        
-        footer {
-            display: flex;
-            justify-content: space-around;
-            margin-top: 0.5rem;
-        }
-    </style>
-</favorites>
+      async removeFavoris(id) {
+        await window.removeFavorite(id);
+        this.state.favorites.items = this.state.favorites.items.filter(item => item.id !== id);
+        this.update();
+      }
+    }
+  </script>
+
+  <style>
+    .results-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 1rem;
+        padding: 1rem;
+    }
+
+    .card {
+        background: white;
+        border-radius: 10px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+        padding: 1rem;
+        text-align: center;
+        transition: transform 0.2s ease;
+    }
+
+    .card:hover {
+        transform: translateY(-4px);
+    }
+
+    .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;
+    }
+
+    .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>
--- a/components/login.riot
+++ b/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;
-            margin-top: 2rem;
+            background: white;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
-        
-        input,
-        button {
-            padding: 0.5rem;
-            border-radius: 4px;
+
+        input {
+            padding: 0.75rem;
            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>
--- a/components/register.riot
+++ b/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;
-            margin-top: 2rem;
+            background: white;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
-        
-        input,
-        button {
-            padding: 0.5rem;
-            border-radius: 4px;
+
+        input {
+            padding: 0.75rem;
            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>
--- a/components/release-details.riot
+++ b/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="{state.release.type !== 'artist'}">{state.release.community?.rating?.average}({state.release.community?.rating?.count}vote)</p>
+        <p if="{this.props.Type === 'release'}">{state.release.formats?.[0]?.name}-{state.release.year}</p>
+        <p if="{this.props.Type === 'release'}">{state.release.community?.rating?.average}({state.release.community?.rating?.count}vote)</p>

-        <div class="release-content">
-            <img src="{state.release.thumb}" alt="{state.release.title}" />
-            <div if="{state.release.type !== 'artist'}">
+        <p if="{this.props.Type === 'master'}">{state.release.year}</p> 
+
+        <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
-                this.state.release = await window.getReleaseDetails(id)
+                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 {
-            padding-left: 20px;
+
+        .cover {
+            width: 300px;
+            height: auto;
+            aspect-ratio: 1 / 1; /* carré ou ajuste selon besoin */
+            object-fit: cover;
+            border-radius: 8px;
        }
-        
-        li {
-            margin-bottom: 5px;
+
+        .details-right {
+            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;
-            color: #fff;
-            padding: 3px 7px;
-            border-radius: 3px;
-            margin-right: 5px;
-            font-size: 0.9em;
+            background-color: #e0e0e0;
+            color: #333;
+            padding: 0.4rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            margin-right: 0.5rem;
+            margin-bottom: 0.3rem;
        }
    </style>
 </release-details>
--- a/index.html
+++ b/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>
--- a/services/discogsService.js
+++ b/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;