The first thing we do is write some basic code in our playlist server module and client-side store, allowing playlist data to be received by the client.
Next up we work on our playlist component, allowing playlist items to appear in our panel.
Our playlist items are a bit… Ugly. In this video we clean them up to make them appear in a bit of a more user-friendly manner.
The next component we implement is our playlist toolbar - allowing us to queue videos.
Now we need the ability to add items to our playlist. This video covers an overview of the process, as well as validation.
We continue with our implementation of being able to add items on the server side.
Next, we write the client-side code for displaying added items.
This video addresses a small bug in our playlist store, and discusses how we can cleanly resolve it.
Finally, we finish our adding items functionality by tieing in the YouTube API to retrieve information about a queued video.
Next up we add the ability for our server-side playlist module to keep track of what item is currently playing.
On the client side, we implement the styles that display what item is currently playing in the playlist.
We start off our playlist context menu by giving us the ability to right click on an item in the playlist, and have a menu appear.
This video shows how to use the context menu to switch the currently playing item.
Next up we implement the ability to remove items from our playlist.
This video shows the implementation of our playlist “chrome” - or a component that manages the outside visuals of our list.
We start off our implementation of sorting by implementing the ability to drag and drop playlist items.
Next up we implement the server and client side logic for actually performing a playlist sort operation.
This short video demonstrates a simple method of performing an animation when playlist items are reordered.