add songs

5 files changed, 171 insertions, 208 deletions

diff --git a/app/index.html b/app/index.html
index 53170e6..0404bb0 100644
--- a/app/index.html
+++ b/app/index.html
@@ -27,14 +27,7 @@
 		<div id="header"><h1>The &nbsp;<img src="img/forward.png"/><span style="color:#000">Play</span><span style="color:#09F">Graph</span> &nbsp;Project</h1></div>
 		<div id="column-left">
         
-        	<fieldset>
-                <legend>Music search</legend>
-                
-            	<input type="text" name="searchValue" id="searchValue" value="Feed Me - Trichitillomania" />
-            	<input name="searchButton" type="submit" value="Search" onclick="searchClicked()"/>
-                
-            	<div id="videoResultsDiv"></div> 
-              </fieldset>
+                <div data-pg-search-area></div>
               
         
         </div>
diff --git a/app/js/controllers.js b/app/js/controllers.js
index 97b52ad..f49f1b1 100644
--- a/app/js/controllers.js
+++ b/app/js/controllers.js
@@ -1,66 +1,44 @@
 'use strict';
 
 /* Controllers */
-var p = new Point(1,2);
+var p = new Point(1, 2);
 
 
 
-app.controller('pointCtrl', function($scope, $http, pathService){
+app.controller('pointCtrl', function($scope, $http, pathService, musicPlayer) {
 
-	$scope.points=dummyPoints;
-	$scope.line = [];
+    $scope.points = dummyPoints;
+    $scope.line = [];
 
-	var update = function(newPoints, newLine) {
-		if(newLine.length > 0) {
-			$scope.playseq=pathService.computePlaylist(newPoints, newLine, 60);
-			startSongWithDuration($scope.playseq[0].id, $scope.playseq[0].duration);
-		}
-	}
+    var update = function(newPoints, newLine) {
+        if (newLine.length > 0) {
+            $scope.playseq = pathService.computePlaylist(newPoints, newLine, 60);
+            musicPlayer.startSongWithDuration($scope.playseq[0].id, $scope.playseq[0].duration);
+        }
+    };
 
-	$scope.$watch('points', function(newVal, oldVal) {
-		console.log("r")
-		update(newVal, $scope.line);
+    $scope.$watch('points', function(newVal) {
+        update(newVal, $scope.line);
     }, true);
 
     $scope.$watch('line', function(newVal) {
-		update($scope.points, newVal);
+        update($scope.points, newVal);
     }, true);
-	
 
-//	$scope.line=constList;
-	
-	$scope.addNewSongToGraph = function(id, titre, link, duration)
-	{
-		var newSong = {
-                    x:100,
-                    y:100,
-                    label:titre,
-                    id:id,
-                    link:link,
-                    duration:duration
-                };
-        $scope.points.push(newSong);
-        console.log(newSong);
-        $scope.$apply();
-	};
-	
 
-	$scope.getColor = function(point) {
-		if (playlist.indexOf(point) == -1) {
-			return "white"
-		} else {
-			return "red"
-		}
-	}
+//	$scope.line=constList;
 
-	$scope.foo = function (event) {
-		console.log("foobar");
+    $scope.addNewSongToGraph = function(newSong)
+    {
+        newSong.x = 100;
+        newSong.y = 100;
+        $scope.points.push(newSong);
+    };
+});
 
-		$scope.points.push({
-			x: 250,
-			y: 250
-		});
-	};
+app.controller('searchCtrl', function($scope) {
 
+    $scope.points = dummyPoints;
+    $scope.line = [];
 
 });
\ No newline at end of file
diff --git a/app/js/directives.js b/app/js/directives.js
index 428fad1..3ce58a0 100644
--- a/app/js/directives.js
+++ b/app/js/directives.js
@@ -1,93 +1,133 @@
 'use strict';
 
-app.directive('pgLine', function () {
+app.directive('pgLine', function() {
     return {
-      restrict: 'A',
-      replace: 'false',
-      scope: {
-      	line: '=',
-      	list: '='
-      },
-      template: '<canvas width=100%; height: 100%></canvas>',
-      link: function (scope, elems, attrs) {
-      	var canvas = elems[0];
-      	var mainTool = new paper.Tool();
-      	
-      	mainTool.activate();
-
-      	//scope.line = scope.$eval(attrs.pgLine);
-
-      	paper.setup(canvas);
-
-      	var path;
-      	var drag = false;
-
-
-      	mainTool.onMouseDown = function(event) {
-      		paper.project.clear();
-			// If we produced a path before, deselect it:
-			if (path) {
-				path.selected = false;
-			}
-			// Create a new path and set its stroke color to black:
-			path = new paper.Path({
-				segments: [event.point],
-				strokeColor: 'rgba(7,140,255,.3)',
-				strokeWidth: 100,
-                strokeCap: 'round'
-			});
-      		
-      		drag = true;
-      	};
-
-      	mainTool.onMouseMove = function(event) {
-      		if (drag) {
-      			path.add(event.point);
-      		}
-      	}
-
-      	mainTool.onMouseUp = function(event) {
-      		drag = false;
-      		var segmentCount = path.segments.length;
-
-			var points = Array();
-
-			// When the mouse is released, simplify it:
-			path.simplify(1);
-			path.smooth(1);
-
-	
-			for(var i=0; i<path._segments.length; i++)
-			{
-				points.push({x : path._segments[i]._point.x, y : path._segments[i]._point.y});	
-			}
-	
-			scope.line = points;
-      		scope.$apply();
-      	}
-
-      	var lines = [];
-        scope.$watch('list', function(newPoints) {
-        	console.log("update");
-			angular.forEach(lines, function(line) {
-         		line.remove();
-         	});
-         	if (newPoints) {
-         		
-         		for (var i = 0; i < newPoints.length - 1; ++i) {
-         			if (newPoints[i].selected) {
-						var line = paper.Path.Line(newPoints[i], newPoints[i+1]);
-         				line.strokeColor = 'rgba(7,140,255,.6)';
-						line.strokeWidth = 2;
-						lines.push(line)
-         			}
-         		}
-          	}
-        }, true);
-	  }
+        restrict: 'A',
+        replace: 'false',
+        scope: {
+            line: '=',
+            list: '='
+        },
+        template: '<canvas width=100%; height: 100%></canvas>',
+        link: function(scope, elems, attrs) {
+            var canvas = elems[0];
+            var mainTool = new paper.Tool();
+
+            mainTool.activate();
+
+            //scope.line = scope.$eval(attrs.pgLine);
+
+            paper.setup(canvas);
+
+            var path;
+            var drag = false;
+
+
+            mainTool.onMouseDown = function(event) {
+                paper.project.clear();
+                // If we produced a path before, deselect it:
+                if (path) {
+                    path.selected = false;
+                }
+                // Create a new path and set its stroke color to black:
+                path = new paper.Path({
+                    segments: [event.point],
+                    strokeColor: 'rgba(7,140,255,.3)',
+                    strokeWidth: 100,
+                    strokeCap: 'round'
+                });
+
+                drag = true;
+            };
+
+            mainTool.onMouseMove = function(event) {
+                if (drag) {
+                    path.add(event.point);
+                }
+                scope.$apply();
+            }
+
+            mainTool.onMouseUp = function(event) {
+                drag = false;
+                var segmentCount = path.segments.length;
+
+                var points = Array();
+
+                // When the mouse is released, simplify it:
+                path.simplify(1);
+                path.smooth(1);
+
+
+                for (var i = 0; i < path._segments.length; i++)
+                {
+                    points.push({x: path._segments[i]._point.x, y: path._segments[i]._point.y});
+                }
+
+                scope.line = points;
+                scope.$apply();
+            };
+
+            var lines = [];
+            scope.$watch('list', function(newPoints) {
+                console.log("update");
+                angular.forEach(lines, function(line) {
+                    line.remove();
+                });
+                if (newPoints) {
+
+                    for (var i = 0; i < newPoints.length - 1; ++i) {
+                        if (newPoints[i].selected) {
+                            var line = paper.Path.Line(newPoints[i], newPoints[i + 1]);
+                            line.strokeColor = 'rgba(7,140,255,.6)';
+                            line.strokeWidth = 2;
+                            lines.push(line)
+                        }
+                    }
+                }
+            }, true);
+        }
     }
 });
 
+app.directive('pgSearchArea', function() {
+    return {
+        restrict: 'A',
+        template: '<fieldset id="searchArea"><legend>Music search</legend><input type="text" name="searchValue" id="searchValue" value="{{search.value}}" /><input name="searchButton" type="submit" value="Search" ng-click="searchTriggered()"/><div id="videoResultsDiv"><ul></ul><li data-ng-repeat="result in search.results"><a href="#" data-ng-click="addNewSongToGraph(result)">{{result.label}}</a></li></div> </fieldset>',
+        link: function($scope, $elm, $attrs) {
+            $scope.search = {
+                value: 'init val',
+                results: []
+            },
+            $scope.searchTriggered = function() {
+                //document.getElementById("videoResultsDiv").innerHTML =
+                //        'Loading YouTube videos ...';
+
+                var script = document.createElement('script');
+                script.setAttribute('id', 'jsonScript');
+                script.setAttribute('type', 'text/javascript');
+                script.setAttribute('src', 'http://gdata.youtube.com/feeds/' +
+                        'videos?vq=' + encodeURIComponent($scope.search.value) + '&max-results=8&' +
+                        'alt=json-in-script&callback=youtubeCallback&' +
+                        'orderby=relevance&sortorder=descending&format=5&fmt=18');
+                document.documentElement.firstChild.appendChild(script);
+            };
+            $scope.resultsCallback = function(data) {
+                var feed = data.feed;
+                var entries = feed.entry || [];
+                $scope.search.results.splice(0, $scope.search.results.length);
+                for (var i = 0; i < entries.length; i++)
+                {
+                    var id = entries[i].id.$t.substring(entries[i].id.$t.lastIndexOf("/") + 1);
+                    $scope.search.results.push({id: id, label: entries[i].title.$t, link: entries[i].link[0].href, duration: entries[i].media$group.yt$duration.seconds});
+                }
+                $scope.$apply();
+            };
+            window.youtubeCallback = function(data) {
+                angular.element(document.getElementById('searchArea')).scope().resultsCallback(data);
+            };
+        }
+    };
+});
 app.directive('pgDraggable', ['$document' , function($document) {
     return {
       restrict: 'A',
diff --git a/app/js/services.js b/app/js/services.js
index 9913856..d18e923 100644
--- a/app/js/services.js
+++ b/app/js/services.js
@@ -11,18 +11,18 @@ app.service('pathService', function() {
         },
         computePlaylist: function(songList, line, duration) {
             //compute distances from the constrain path
-            console.log('length',line.length);
-            
+            console.log('length', line.length);
+
             var threshold = 60;
-            angular.forEach(songList, function(song){
+            angular.forEach(songList, function(song) {
                 song.selected = false;
             });
-            
+
             var selection = [];
-            angular.forEach(line, function(point){
-                 angular.forEach(songList, function(song){
+            angular.forEach(line, function(point) {
+                angular.forEach(songList, function(song) {
                     var d = self.dist(song, point);
-                    if(d < threshold && song.selected !== true){
+                    if (d < threshold && song.selected !== true) {
                         selection.push(song);
                         song.selected = true;
                     }
@@ -33,3 +33,18 @@ app.service('pathService', function() {
     };
     return self;
 });
+app.service('musicPlayer', function() {
+    var self = {
+        musicTimer: null,
+        startSongWithDuration: function(id, duration)
+        {
+            $('#ytplayer').attr('src', 'https://www.youtube.com/embed/' + id + '?autoplay=1&modestbranding=1');
+            self.musicTimer = setInterval(changeSong, duration * 1000);
+        },
+        changeSong: function()
+        {
+            clearInterval(self.musicTimer);
+        }
+    };
+    return self;
+});
diff --git a/app/js/yt_musicsearch.js b/app/js/yt_musicsearch.js
deleted file mode 100644
index 028ae6e..0000000
--- a/app/js/yt_musicsearch.js
+++ /dev/null
@@ -1,63 +0,0 @@
-		function searchClicked()
-        {
-            document.getElementById("videoResultsDiv").innerHTML = 
-                                    'Loading YouTube videos ...';
-
-            //create a JavaScript element that returns our JSON data.
-            var script = document.createElement('script');
-            script.setAttribute('id', 'jsonScript');
-            script.setAttribute('type', 'text/javascript');
-            script.setAttribute('src', 'http://gdata.youtube.com/feeds/' + 
-                   'videos?vq='+encodeURIComponent($('#searchValue').val())+'&max-results=8&' + 
-                   'alt=json-in-script&callback=getAllMatchingIds&' + 
-                   'orderby=relevance&sortorder=descending&format=5&fmt=18');
-
-            //attach script to current page -  this will submit asynchronous
-            //search request, and when the results come back callback 
-            //function showMyVideos(data) is called and the results passed to it
-            document.documentElement.firstChild.appendChild(script);
-        }
-
-		
-		var musicTimer;
-		
-		function startSongWithDuration(id, duration)
-		{
-			$('#ytplayer').attr('src', 'https://www.youtube.com/embed/'+id+'?autoplay=1&modestbranding=1');
-			console.log("Starting music "+id+", timer="+duration);
-			musicTimer = setInterval(changeSong, duration * 1000);
-		}
-		
-		function changeSong()
-		{
-			clearInterval(musicTimer);
-		}
-		
-		function callAngular(id, titre, link, duration)
-		{
-			angular.element(document.getElementById('body_spe')).scope().addNewSongToGraph(id, titre, link, duration);
-		}
-		
-        function getAllMatchingIds(data)
-        {
-            var feed = data.feed;
-            var entries = feed.entry || [];
-			var results = new Array();
-			
-			
-            for (var i = 0; i < entries.length; i++)
-            {
-				var id = entries[i].id.$t.substring(entries[i].id.$t.lastIndexOf("/")+1);
-                results.push({'id' : id, 'title' : entries[i].title.$t, 'link' : entries[i].link[0].href, 'duration' : entries[i].media$group.yt$duration.seconds});
-            }
-            var html = ['<ul>'];
-			
-			
-            for (var i = 0; i < results.length; i++)
-            {
-                //html.push('<li>', '<img src="http://img.youtube.com/vi/', results[i].id, '/2.jpg" /><a href="#" onclick="newMusic(\'', results[i].id ,'\')">', results[i].title, '</a>(', results[i].duration, ')', '</li>');
-                html.push('<li>', '<a href="#" onclick="callAngular(\'', results[i].id,'\',\'',results[i].title,'\',\'',results[i].link,'\',\'',results[i].duration, '\')">', results[i].title, '</a>', '</li>');
-            }
-            html.push('</ul>');
-            document.getElementById('videoResultsDiv').innerHTML = html.join('');
-        }
\ No newline at end of file