Merge pull request #3 from JPShag/main

Add Artist Radio Functionality + Contribution Guidelines

index.html

@@ -199,6 +199,12 @@
                         <h1 class="title" id="artist-detail-name"></h1>
                         <div class="meta" id="artist-detail-meta"></div>
                         <div class="detail-header-actions">
+                            <button id="play-artist-radio-btn" class="btn-primary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                                    <path d="M4.5 9v6h3l5 5V4l-5 5h-3zm16 3a6 6 0 0 0-3.26-5.3l-1.48 1.48C17.31 9.21 18 10.53 18 12c0 1.47-.69 2.79-1.74 3.82l1.48 1.48A6 6 0 0 0 20.5 12z"/>
+                                </svg>
+                                <span>Artist Radio</span>
+                            </button>
                             <button id="download-discography-btn" class="btn-primary">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>

js/app.js

@@ -386,6 +386,74 @@ document.addEventListener('DOMContentLoaded', async () => {
             }
         }
 
+        if (e.target.closest('#play-artist-radio-btn')) {
+            const btn = e.target.closest('#play-artist-radio-btn');
+            if (btn.disabled) return;
+
+            const artistId = window.location.hash.split('/')[1];
+            if (!artistId) return;
+
+            btn.disabled = true;
+            const originalHTML = btn.innerHTML;
+            btn.innerHTML = '<svg class="animate-spin" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle></svg><span>Loading...</span>';
+
+            try {
+                const artist = await api.getArtist(artistId);
+                
+                if (!artist.albums || artist.albums.length === 0) {
+                    throw new Error("No albums found for this artist");
+                }
+
+                const trackSet = new Set(); 
+                const allTracks = [];
+                
+                const chunks = [];
+                const chunkSize = 3;
+                const albums = artist.albums;
+                
+                for (let i = 0; i < albums.length; i += chunkSize) {
+                    chunks.push(albums.slice(i, i + chunkSize));
+                }
+                
+                for (const chunk of chunks) {
+                    await Promise.all(chunk.map(async (album) => {
+                        try {
+                            const { tracks } = await api.getAlbum(album.id);
+                            tracks.forEach(track => {
+                                if (!trackSet.has(track.id)) {
+                                    trackSet.add(track.id);
+                                    allTracks.push(track);
+                                }
+                            });
+                        } catch (err) {
+                            console.warn(`Failed to fetch tracks for album ${album.title}:`, err);
+                        }
+                    }));
+                }
+
+                if (allTracks.length > 0) {
+                    for (let i = allTracks.length - 1; i > 0; i--) {
+                        const j = Math.floor(Math.random() * (i + 1));
+                        [allTracks[i], allTracks[j]] = [allTracks[j], allTracks[i]];
+                    }
+
+                    player.setQueue(allTracks, 0);
+                    player.playTrackFromQueue();
+                } else {
+                     throw new Error("No tracks found across all albums");
+                }
+
+            } catch (error) {
+                console.error('Artist radio failed:', error);
+                alert('Failed to start artist radio: ' + error.message);
+            } finally {
+                if (document.body.contains(btn)) {
+                    btn.disabled = false;
+                    btn.innerHTML = originalHTML;
+                }
+            }
+        }
+
         if (e.target.closest('#download-discography-btn')) {
             const btn = e.target.closest('#download-discography-btn');
             if (btn.disabled) return;

readme.md

@@ -19,3 +19,44 @@ This is not the official repository or instance. It is an actively maintained fo
 
 
 ## **I am Not Affiliated with the original Owner!**
+
+## Development
+
+Monochrome is built with Vanilla JavaScript, HTML, and CSS. No build step is required (no Webpack, Vite, etc.), but because it uses ES Modules, you must run it over HTTP(S).
+
+### Prerequisites
+
+- A modern web browser
+- A way to serve static files (e.g., Python, VS Code Live Server, Node.js `http-server`)
+
+### Setup
+
+1.  **Clone the repository**
+    ```bash
+    git clone https://github.com/SamidyFR/monochrome.git
+    cd monochrome
+    ```
+
+2.  **Run locally**
+    You can use any static file server. For example:
+
+    **Using Python 3:**
+    ```bash
+    python3 -m http.server 8000
+    ```
+
+    **Using Node.js `http-server`:**
+    ```bash
+    npx http-server .
+    ```
+
+3.  **Open in Browser**
+    Navigate to `http://localhost:8000` (or whatever port your server uses).
+
+### Contributing
+
+1.  Fork the project
+2.  Create your feature branch (`git checkout -b feature/AmazingFeature`)
+3.  Commit your changes (`git commit -m 'Add some AmazingFeature'`)
+4.  Push to the branch (`git push origin feature/AmazingFeature`)
+5.  Open a Pull Request