36 lines
1.6 KiB
Markdown
36 lines
1.6 KiB
Markdown
# Drag and Drop Playlist Reordering Implementation
|
|
|
|
## Task
|
|
Add drag-and-drop functionality to reorder videos in a playlist when editing
|
|
|
|
## Steps Completed
|
|
|
|
1. [x] Add SortableJS library to the project (via CDN in the view)
|
|
2. [x] Update playlist show.blade.php to add drag-and-drop functionality
|
|
3. [x] Add CSS styles for drag-and-drop visual feedback
|
|
4. [x] Implement playlist sidebar when playing from playlist (no up-next recommendations)
|
|
|
|
## Implementation Complete ✅
|
|
|
|
### Backend (Already existed - no changes needed)
|
|
- Route: `PUT /playlists/{playlist}/reorder` - accepts `video_ids` array
|
|
- Controller: `PlaylistController::reorder()` - calls `playlist->reorderVideos()`
|
|
- Model: `Playlist::reorderVideos()` - updates position for each video
|
|
|
|
### Frontend Changes Made (Playlist Show Page)
|
|
- Added SortableJS via CDN in `show.blade.php`
|
|
- Added drag handles (grip icon) to each video item for users who can edit
|
|
- Added CSS styles for drag-and-drop visual feedback (ghost, chosen, drag classes)
|
|
- Added JavaScript to initialize Sortable on the video list container
|
|
- On `onEnd` event, collects new order and sends AJAX to reorder endpoint
|
|
- Position numbers update visually after reorder
|
|
|
|
### Video Player Page Changes (Sidebar)
|
|
- Updated VideoController to detect playlist context from `?playlist=` parameter
|
|
- Updated all video type views (generic, music, match, show) to show playlist videos in sidebar when viewing from playlist
|
|
- Shows playlist name and video count in sidebar header
|
|
- Shows position numbers on each video thumbnail
|
|
- Links preserve the playlist parameter for continuous playback
|
|
- Shows "Edit Playlist" button for playlist owners
|
|
|