diff options
Diffstat (limited to 'app/js')
-rw-r--r-- | app/js/controllers.js | 70 | ||||
-rw-r--r-- | app/js/directives.js | 208 | ||||
-rw-r--r-- | app/js/services.js | 29 | ||||
-rw-r--r-- | app/js/yt_musicsearch.js | 63 |
4 files changed, 170 insertions, 200 deletions
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 |