takeone-youtube-clone/TODO_drag_drop_reorder.md

Drag and Drop Playlist Reordering Implementation

Task

Add drag-and-drop functionality to reorder videos in a playlist when editing

Steps Completed

1. Add SortableJS library to the project (via CDN in the view)
2. Update playlist show.blade.php to add drag-and-drop functionality
3. Add CSS styles for drag-and-drop visual feedback
4. 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