 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/soundstudiopro.com/public_html/ |
# Playlist Functionality Vision
## Overview
Transform the playlist stat into an interactive feature that allows users to:
1. **View artist's playlists** - Browse all playlists created by the artist
2. **Add artist tracks to their own playlists** - Save favorite tracks to personal playlists
3. **Discover artists through user playlists** - Browse other users' public playlists to see which artists they like (social discovery)
---
## π― User Experience Flow
### Scenario 1: Viewing Artist's Playlists
**Trigger:** User clicks on the playlist stat (e.g., "5 Listes de lecture")
**Flow:**
1. Click on playlist stat β Opens modal "Artist's Playlists"
2. Modal displays:
- List of all artist's public playlists
- Each playlist shows:
- Playlist name
- Track count
- Total duration
- Cover image (first track's artwork or default)
- Created/Updated date
- "Play All" button for each playlist
- Click on playlist β Opens playlist detail view (tracks list)
3. Playlist detail view:
- Shows all tracks in the playlist
- Play button for each track
- Track info (title, duration, plays, likes)
- "Play Playlist" button at top
- Back button to return to playlists list
**Visual Design:**
- Modal matches existing artist profile modal style
- Dark theme with gradient accents
- Grid layout for playlists (2-3 columns on desktop)
- Smooth animations and transitions
---
### Scenario 2: Adding Artist Tracks to User's Playlists
**Trigger:** User clicks "Add to Playlist" button on any track card
**Flow:**
1. Click "Add to Playlist" on track β Opens modal "Add to Playlist"
2. Modal displays:
- **User's existing playlists** (if logged in)
- List of user's playlists
- Checkbox or highlight if track already in playlist
- "Create New Playlist" button at top
- **Create New Playlist** option:
- Click "Create New Playlist" β Inline form appears
- Fields: Name, Description (optional), Public/Private toggle
- "Create & Add" button
- Track preview at top showing which track is being added
3. User selects playlist(s) β Click "Add" β Success notification
4. Track is added to selected playlist(s)
**Visual Design:**
- Compact modal (smaller than playlist viewer)
- Scrollable list of playlists
- Visual indicator for playlists that already contain the track
- Quick create form (expandable)
---
### Scenario 3: Discovering Artists Through User Playlists (Social Discovery)
**Trigger:** User views another user's profile or clicks on a user's playlist link
**Flow:**
1. **Access Point Options:**
- From user profile page β "View Playlists" button/section
- From community page β Click on user's playlist count
- Direct link: `/user_playlists.php?user_id=X` or `/user/drumahon/playlists`
- From playlist detail β Click on playlist owner's name
2. **User Playlists View:**
- Shows all public playlists created by that user (e.g., "drumahon's Playlists")
- Each playlist card displays:
- Playlist name
- Track count
- Total duration
- Cover image
- Created date
3. **Artist Discovery Feature:**
- **"Artists in This Playlist"** section when viewing playlist details
- Shows unique artists whose tracks appear in the playlist
- Click artist name β Go to their artist profile
- **"Top Artists"** summary showing:
- Which artists appear most frequently across user's playlists
- Count of tracks per artist
- Quick links to artist profiles
4. **Example Flow:**
```
User clicks "drumahon's Playlists"
β See all of drumahon's public playlists
β Click "My Favorites" playlist
β View tracks in playlist
β See "Artists in This Playlist" section:
β’ Artist A (5 tracks) β [View Profile]
β’ Artist B (3 tracks) β [View Profile]
β’ Artist C (2 tracks) β [View Profile]
β Discover new artists that drumahon likes!
```
**Visual Design:**
- Similar to artist playlists modal but with user context
- "Artists in Playlist" section with artist cards
- Artist frequency visualization (optional)
- Easy navigation to artist profiles
**Social Discovery Benefits:**
- Find new artists through community curation
- See what music taste users have
- Build connections between users and artists
- Community-driven artist discovery
---
## π Technical Requirements
### API Endpoints Needed
#### 1. Get Artist's Playlists
**Endpoint:** `api/get_artist_playlists.php`
**Method:** GET
**Parameters:** `artist_id`
**Returns:**
```json
{
"success": true,
"playlists": [
{
"id": 1,
"name": "My Best Tracks",
"description": "Collection of my favorite creations",
"track_count": 12,
"total_duration": 3600,
"cover_image": "url",
"created_at": "2024-01-01",
"updated_at": "2024-01-15",
"is_public": true
}
]
}
```
#### 2. Get Playlist Details (with tracks)
**Endpoint:** `api/get_playlist_details.php`
**Method:** GET
**Parameters:** `playlist_id`
**Returns:**
```json
{
"success": true,
"playlist": {
"id": 1,
"name": "My Best Tracks",
"description": "...",
"tracks": [
{
"id": 123,
"title": "Track Title",
"artist_name": "Artist Name",
"audio_url": "url",
"duration": 180,
"play_count": 45,
"like_count": 12,
"position": 1
}
]
}
}
```
#### 3. Get User's Playlists (for adding tracks)
**Endpoint:** `api/get_user_playlists.php`
**Method:** GET
**Parameters:** None (uses session)
**Returns:**
```json
{
"success": true,
"playlists": [
{
"id": 5,
"name": "My Favorites",
"track_count": 8,
"has_track": false // whether the current track is already in this playlist
}
]
}
```
#### 4. Add Track to Playlist
**Endpoint:** `api/add_track_to_playlist.php`
**Method:** POST
**Parameters:** `playlist_id`, `track_id`
**Returns:**
```json
{
"success": true,
"message": "Track added to playlist"
}
```
#### 5. Create New Playlist
**Endpoint:** `api/create_playlist.php`
**Method:** POST
**Parameters:** `name`, `description`, `is_public`
**Returns:**
```json
{
"success": true,
"playlist_id": 10,
"message": "Playlist created"
}
```
#### 6. Get User's Public Playlists (for viewing other users)
**Endpoint:** `api/get_user_playlists.php`
**Method:** GET
**Parameters:** `user_id` (optional - if not provided, uses session user_id)
**Returns:**
```json
{
"success": true,
"user": {
"id": 5,
"name": "drumahon",
"profile_image": "url"
},
"playlists": [
{
"id": 10,
"name": "My Favorites",
"description": "Tracks I love",
"track_count": 15,
"total_duration": 4500,
"cover_image": "url",
"created_at": "2024-01-01",
"updated_at": "2024-01-20",
"is_public": true
}
]
}
```
#### 7. Get Artists in Playlist (Discovery Feature)
**Endpoint:** `api/get_playlist_artists.php`
**Method:** GET
**Parameters:** `playlist_id`
**Returns:**
```json
{
"success": true,
"artists": [
{
"artist_id": 1,
"artist_name": "Artist A",
"track_count": 5,
"profile_image": "url",
"custom_url": "artist-a"
},
{
"artist_id": 2,
"artist_name": "Artist B",
"track_count": 3,
"profile_image": "url",
"custom_url": "artist-b"
}
]
}
```
#### 8. Get User's Top Artists (across all playlists)
**Endpoint:** `api/get_user_top_artists.php`
**Method:** GET
**Parameters:** `user_id`
**Returns:**
```json
{
"success": true,
"top_artists": [
{
"artist_id": 1,
"artist_name": "Artist A",
"total_tracks": 12,
"playlists_count": 3,
"profile_image": "url"
}
]
}
```
---
## π¨ UI Components
### 1. Playlist Stat Button (Clickable)
**Location:** Artist stats section
**Current:** Static display showing count
**New:** Clickable with hover effect
- Hover: Slight scale + cursor pointer
- Click: Opens playlists modal
### 2. Playlists Modal
**Structure:**
```
βββββββββββββββββββββββββββββββββββββββ
β Artist's Playlists [Γ] β
βββββββββββββββββββββββββββββββββββββββ€
β β
β βββββββββββ βββββββββββ β
β β Playlistβ β Playlistβ β
β β Cover β β Cover β β
β β Name β β Name β β
β β 12 songsβ β 8 songs β β
β β [Play] β β [Play] β β
β βββββββββββ βββββββββββ β
β β
βββββββββββββββββββββββββββββββββββββββ
```
### 3. Playlist Detail Modal
**Structure:**
```
βββββββββββββββββββββββββββββββββββββββ
β My Best Tracks [β] [Γ] β
βββββββββββββββββββββββββββββββββββββββ€
β [βΆ Play Playlist] β
β β
β 1. Track Title - 3:45 β
β 2. Another Track - 2:30 β
β 3. ... β
βββββββββββββββββββββββββββββββββββββββ
```
### 4. Add to Playlist Modal
**Structure:**
```
βββββββββββββββββββββββββββββββββββββββ
β Add to Playlist [Γ] β
βββββββββββββββββββββββββββββββββββββββ€
β Adding: Track Title β
β β
β [+ Create New Playlist] β
β β
β β My Favorites (8 tracks) β
β β Workout Mix (12 tracks) β Alreadyβ
β β Chill Vibes (5 tracks) β
β β
β [Cancel] [Add to Selected] β
βββββββββββββββββββββββββββββββββββββββ
```
### 5. User Playlists View (Social Discovery)
**Structure:**
```
βββββββββββββββββββββββββββββββββββββββ
β drumahon's Playlists [Γ] β
βββββββββββββββββββββββββββββββββββββββ€
β β
β βββββββββββ βββββββββββ β
β β My Favs β β Workout β β
β β 15 songsβ β 8 songs β β
β β [View] β β [View] β β
β βββββββββββ βββββββββββ β
β β
βββββββββββββββββββββββββββββββββββββββ
```
### 6. Artists in Playlist (Discovery Section)
**Structure:**
```
βββββββββββββββββββββββββββββββββββββββ
β Artists in This Playlist β
βββββββββββββββββββββββββββββββββββββββ€
β ββββββββ ββββββββ ββββββββ β
β βArtistβ βArtistβ βArtistβ β
β β A β β B β β C β β
β β5 trksβ β3 trksβ β2 trksβ β
β β[View]β β[View]β β[View]β β
β ββββββββ ββββββββ ββββββββ β
βββββββββββββββββββββββββββββββββββββββ
```
---
## π State Management
### Playlist Stat Click Handler
```javascript
function openArtistPlaylistsModal(artistId) {
// Fetch artist's playlists
// Display in modal
// Handle playlist selection
}
```
### Track "Add to Playlist" Handler
```javascript
function openAddToPlaylistModal(trackId) {
// Fetch user's playlists
// Check which playlists already have this track
// Display modal with options
// Handle adding to selected playlists
}
```
---
## π Translations Needed
### English
- `artist_profile.view_playlists` => "View Playlists"
- `artist_profile.playlists_modal_title` => "Artist's Playlists"
- `artist_profile.playlist_detail_title` => "Playlist Details"
- `artist_profile.add_to_playlist` => "Add to Playlist"
- `artist_profile.create_playlist` => "Create New Playlist"
- `artist_profile.playlist_name` => "Playlist Name"
- `artist_profile.playlist_description` => "Description (optional)"
- `artist_profile.playlist_public` => "Public"
- `artist_profile.playlist_private` => "Private"
- `artist_profile.tracks_in_playlist` => "tracks"
- `artist_profile.play_playlist` => "Play Playlist"
- `artist_profile.track_already_in_playlist` => "Already in playlist"
- `artist_profile.user_playlists` => "User's Playlists"
- `artist_profile.view_user_playlists` => "View Playlists"
- `artist_profile.artists_in_playlist` => "Artists in This Playlist"
- `artist_profile.top_artists` => "Top Artists"
- `artist_profile.discover_artists` => "Discover Artists"
- `artist_profile.tracks_by_artist` => "tracks"
### French
- `artist_profile.view_playlists` => "Voir les listes de lecture"
- `artist_profile.playlists_modal_title` => "Listes de lecture de l'artiste"
- `artist_profile.playlist_detail_title` => "DΓ©tails de la liste"
- `artist_profile.add_to_playlist` => "Ajouter Γ la liste"
- `artist_profile.create_playlist` => "CrΓ©er une nouvelle liste"
- `artist_profile.playlist_name` => "Nom de la liste"
- `artist_profile.playlist_description` => "Description (optionnel)"
- `artist_profile.playlist_public` => "Publique"
- `artist_profile.playlist_private` => "PrivΓ©e"
- `artist_profile.tracks_in_playlist` => "morceaux"
- `artist_profile.play_playlist` => "Lire la liste"
- `artist_profile.track_already_in_playlist` => "DΓ©jΓ dans la liste"
- `artist_profile.user_playlists` => "Listes de lecture de l'utilisateur"
- `artist_profile.view_user_playlists` => "Voir les listes"
- `artist_profile.artists_in_playlist` => "Artistes dans cette liste"
- `artist_profile.top_artists` => "Artistes favoris"
- `artist_profile.discover_artists` => "DΓ©couvrir des artistes"
- `artist_profile.tracks_by_artist` => "morceaux"
---
## π― Implementation Phases
### Phase 1: View Artist Playlists
1. Make playlist stat clickable
2. Create playlists modal component
3. Implement API endpoint for artist playlists
4. Display playlists in grid
5. Add playlist detail view
### Phase 2: Add Track to Playlist
1. Add "Add to Playlist" button to track cards
2. Create add-to-playlist modal
3. Implement API endpoints (get user playlists, add track)
4. Handle track already in playlist state
5. Success notifications
### Phase 3: Create Playlist
1. Add "Create New Playlist" functionality
2. Implement create playlist API
3. Inline form in modal
4. Auto-add track after creation
### Phase 4: Polish & Enhancements
1. Play playlist functionality (integrate with global player)
2. Playlist cover images
3. Drag & drop reordering (future)
4. Playlist sharing (future)
---
## π‘ Key Considerations
1. **Authentication:** User must be logged in to add tracks to playlists
2. **Permissions:** Only show public playlists when viewing artist's playlists
3. **Performance:** Lazy load playlist tracks, paginate if needed
4. **UX:** Clear visual feedback for all actions
5. **Mobile:** Responsive modal design for mobile devices
6. **Error Handling:** Graceful error messages for API failures
---
## π¨ Design Alignment
- Follow existing modal patterns from artist profile
- Use same color scheme and gradients
- Match button styles and interactions
- Consistent with avocat.quebec design language
- Smooth animations and transitions
---
## π Notes
- Existing database structure supports this functionality
- `artist_playlists` table already exists
- `playlist_tracks` junction table ready
- Need to ensure user playlists are separate from artist playlists (or unified system)
- Consider if users can create playlists or only artists (clarify requirement)