drag and drop support for reordering playlist

kktuax · Apr 26, 2015 · b8af119 · b8af119
1 parent e54d0f9
commit b8af119
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 20 deletions.
diff --git a/static/index.html b/static/index.html
@@ -6,6 +6,8 @@
 		<link rel="stylesheet" href="jquery.mobile.simpledialog.min.css" />
 		<link rel="stylesheet" href="youtupi.css" />
 		<script src="jquery-1.8.2.min.js"></script>
+		<script src="jquery.ui-1.9.1.min.js"></script>
+		<script src="jquery.ui.touch-punch.min.js"></script>
 		<script src="jquery.json-2.4.min.js"></script>
 		<script src="jquery.mobile-1.3.1.min.js"></script>
 		<script src="jquery.mobile.simpledialog2.min.js"></script>

diff --git a/static/jquery.ui-1.9.1.min.js b/static/jquery.ui-1.9.1.min.js
diff --git a/static/jquery.ui.touch-punch.min.js b/static/jquery.ui.touch-punch.min.js
diff --git a/static/youtupi.js b/static/youtupi.js
@@ -30,7 +30,7 @@ function fillVideoList(entries, listSelect, clickEvent){
 		if(duration){
 			duration = " [" + duration + "]";
 		}
-		var itemval = $('<li><a href="#"><img src="'+ thumbnail + '" /><h3>' + video.title + duration + '</h3><p>' + video.description + '</p></a></li>');
+		var itemval = $('<li data-video-id="' + video.id + '"><a href="#"><img src="'+ thumbnail + '" /><h3>' + video.title + duration + '</h3><p>' + video.description + '</p></a></li>');
 		itemval.bind('click', {video: video}, clickEvent);
 		$(listSelect).append(itemval);
 	}
@@ -343,6 +343,23 @@ $(document).delegate("#playlist", "pageinit", function() {
 	$("#voldown-button").bind("click", function(event, ui) {
 		playerAction('voldown');
 	});
+	$("#playlist-list").sortable();
+	$("#playlist-list").disableSelection();
+	$("#playlist-list").bind("sortstop", function(event, ui) {
+		$('#playlist-list').listview('refresh');
+		if($("#playlist-list").children().length > 1){
+			var draggedVideoId = ui.item.data("video-id");
+			var draggedPosition = $("#playlist-list").children().index(ui.item);
+			if(draggedPosition > 0){
+				var data = $.toJSON({id : draggedVideoId, order: draggedPosition + 1});
+				var url = server + "/control/order";
+				$.post(url, data, loadPlayList, "json");
+			}else if(draggedPosition == 0){
+				var url = server + "/control/play";
+				$.post(url, $.toJSON({id : draggedVideoId}), loadPlayList, "json");
+			}
+		}
+	});
 	$("#position").bind("slidestop", function(event, ui){
 		var seconds = $("#position").data("duration") * $("#position").val() / 100;
 		var data = $.toJSON({seconds : seconds});

diff --git a/youtupi.py b/youtupi.py
@@ -59,10 +59,14 @@ def POST(self, action):
 				video = findVideoInPlaylist(data['id'])
 				if video:
 					playVideo(data['id'])
-                        if action == "playNext":
-                                video = findVideoInPlaylist(data['id'])
-                                if video:
-                                        playlistPosition(data['id'], 2)
+			if action == "playNext":
+				video = findVideoInPlaylist(data['id'])
+				if video:
+					playlistPosition(data['id'], 2)
+			if action == "order":
+				video = findVideoInPlaylist(data['id'])
+				if video:
+					playlistPosition(data['id'], data['order'])
 			if action == "position":
 				engine.setPosition(int(data['seconds']))
 			web.seeother('/playlist')

diff --git a/youtupi/playlist.py b/youtupi/playlist.py
@@ -30,26 +30,26 @@ def removeVideo(videoId):
     if video:
         if video == currentVideo():
             playNextVideo()
-	try:
-        	videos.remove(video)
-	except ValueError:
-		print "Video already deleted"
+    try:
+        videos.remove(video)
+    except ValueError:
+        print "Video already deleted"
 
 def playlistPosition(videoId, position):
     video = findVideoInPlaylist(videoId)
     if (len(videos) > 1) and video:
-	isPlaying = None
+        isPlaying = None
         if video == currentVideo():
-		isPlaying = True
-	pos = int(position) - 1 
-	curPos = videos.index(video)
-	if pos != curPos:
-	        print "Changing video " + videoId + " position to: " + str(pos) + " (was " + str(curPos) + ")"
-                videos.remove(video)
-		videos.insert(pos, video)
-		if isPlaying:
-			video.played=False
-			playNextVideo()
+            isPlaying = True
+    pos = int(position) - 1 
+    curPos = videos.index(video)
+    if pos != curPos:
+        print "Changing video " + videoId + " position to: " + str(pos) + " (was " + str(curPos) + ")"
+        videos.remove(video)
+        videos.insert(pos, video)
+        if isPlaying:
+            video.played=False
+            playNextVideo()
 
 def playList():
     return videos