merge nicolas' 10x ui performance improvementsstatic-server

author: Jakob Odersky <jodersky@gmail.com> 2014-05-14 13:15:24 +0200
committer: Jakob Odersky <jodersky@gmail.com> 2014-05-14 13:15:24 +0200
commit: 527929c3219bc19479abdd68a8c695b9f7fe8ca2 (patch)
tree: 8c8eed286c3c6297f80958693248aec8ccbbd220
parent: 1ec641223b920d8ebf36db3f1fcdc3c7b09baf99 (diff)
download: playGraph-static-server.tar.gz
playGraph-static-server.tar.bz2
playGraph-static-server.zip
9 files changed, 206 insertions, 459 deletions
diff --git a/public/old/app/index.html b/public/old/app/index.html
index 53170e6..77bcb2d 100644
--- a/public/old/app/index.html
+++ b/public/old/app/index.html
@@ -16,7 +16,6 @@
         <script src="js/services.js" ></script>
         <script src="js/directives.js" ></script>
         <script src="js/controllers.js" ></script>
-        <script src="js/yt_musicsearch.js" ></script>
         
     </head>
     <body id="body_spe" ng-app="playGraph" ng-controller="pointCtrl">
@@ -27,14 +26,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/public/old/app/js/app.js b/public/old/app/js/app.js
index 0ff05e9..d9fbeb0 100644
--- a/public/old/app/js/app.js
+++ b/public/old/app/js/app.js
@@ -233,6 +233,7 @@ label: "Feed Me - Trichitillomania",
 link: "http://www.youtube.com/watch?v=TAgJFGmgGJ0&feature=youtube_gdata"
 		},
 		{
+                    
 			x: 900,
 			y: 320,
                                                 duration: "406",
diff --git a/public/old/app/js/controllers.js b/public/old/app/js/controllers.js
index 97b52ad..f49f1b1 100644
--- a/public/old/app/js/controllers.js
+++ b/public/old/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/public/old/app/js/directives.js b/public/old/app/js/directives.js
index 428fad1..3ce58a0 100644
--- a/public/old/app/js/directives.js
+++ b/public/old/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/public/old/app/js/services.js b/public/old/app/js/services.js
index 9913856..8dbd1b2 100644
--- a/public/old/app/js/services.js
+++ b/public/old/app/js/services.js
@@ -9,27 +9,75 @@ app.service('pathService', function() {
             var dy = point1.y - point2.y;
             return Math.sqrt(dx * dx + dy * dy);
         },
-        computePlaylist: function(songList, line, duration) {
+        computePlaylistOld: 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;
                     }
                 });
             });
             return selection;
+        },
+        computePlaylist:function(songList, line, duration) {
+                //compute distances from the constrain path
+
+                var threshold = 60;
+                for(var i=songList.length-1; i>0; i--){
+                    songList[i].selected = false;
+                };
+                var songCopy = songList.slice(0);
+                songCopy.sort(function(a,b){return a.x-b.x;});
+
+                var selection = [];
+                for(var i=line.length-1; i>0; i--) {
+                    var point = line[i];
+                    var min = line[i].x-threshold;
+                    var max = line[i].x+threshold;
+                    var j=songCopy.length-1;
+                    while(songCopy[j].x > max && j > 0){
+                        j--;
+                    }
+                    while(songCopy[j].x > min && j > 0){
+                        var song = songCopy[j];
+                        var d = self.dist(song, point);
+                        if (d < threshold) {
+                                songCopy.splice(j,1);
+                                selection.push(song);
+                                song.selected = true;
+                        }
+                        j--;
+                    };
+                };
+                return selection;
+            }
+    };
+    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(self.changeSong, duration * 1000);
+        },
+        changeSong: function()
+        {
+            clearInterval(self.musicTimer);
         }
     };
+
     return self;
 });
diff --git a/public/old/app/js/yt_musicsearch.js b/public/old/app/js/yt_musicsearch.js
deleted file mode 100644
index 028ae6e..0000000
--- a/public/old/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
diff --git a/public/old/line_simplify.html b/public/old/line_simplify.html
deleted file mode 100644
index 7c049d6..0000000
--- a/public/old/line_simplify.html
+++ /dev/null
@@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<!-- Load the Paper.js library -->
-<script type="text/javascript" src="app/lib/paper-full.js"></script>
-<!-- Define inlined PaperScript associate it with myCanvas -->
-<script type="text/paperscript" canvas="myCanvas">
-	var path;
-
-var textItem = new PointText({
-	content: 'Click and drag to draw a line.',
-	point: new Point(20, 30),
-	fillColor: 'black',
-});
-
-function onMouseDown(event) {
-	// 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 Path({
-		segments: [event.point],
-		strokeColor: 'black',
-		// Select the path, so we can see its segment points:
-		fullySelected: true
-	});
-}
-
-// While the user drags the mouse, points are added to the path
-// at the position of the mouse:
-function onMouseDrag(event) {
-	path.add(event.point);
-
-	// Update the content of the text item to show how many
-	// segments it has:
-	textItem.content = 'Segment count: ' + path.segments.length;
-}
-
-// When the mouse is released, we simplify the path:
-function onMouseUp(event) {
-	var segmentCount = path.segments.length;
-
-	var points = Array();
-
-	// When the mouse is released, simplify it:
-	path.simplify(10);
-	
-	for(i=0; i<path._segments.length; i++)
-	{
-		points.push({'x' : path._segments[i]._point.x, 'y' : path._segments[i]._point.y});	
-	}
-	
-	console.log(points);	
-	
-	var pointsAsString = points.map(function(o){return o.x+","+o.y});
-
-	// Select the path, so we can see its segments:
-	path.fullySelected = true;
-	
-	textItem.content = pointsAsString.join(' ; ');
-}
-</script>
-</head>
-<body>
-	<canvas id="myCanvas" resize style="background-color:#CCC;"></canvas>
-</body>
-</html>
-\ No newline at end of file
diff --git a/public/old/styledemo.html b/public/old/styledemo.html
deleted file mode 100644
index e9f8417..0000000
--- a/public/old/styledemo.html
+++ /dev/null
@@ -1,87 +0,0 @@
-
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8">
-        <title>My HTML File</title>
-        <link rel="stylesheet" href="css/app.css">
-        <script type="text/javascript" src="lib/paper-full.js"></script>
-        <script src="lib/angular.js"></script>
-        <script src="js/app.js" ></script>
-        <script src="js/services.js" ></script>
-        <script src="js/directives.js" ></script>
-        <script src="js/controllers.js" ></script>
-        
-    </head>
-    <body ng-app="playGraph" ng-controller="pointCtrl">
-
-		<div id="header"><h1>PlayGraph Project</h1></div>
-		<div id="column-left"></div>
-        <div id="column-right">
-        <div class="world" style="width: 100%; height: 500px;">
-            <div data-pg-line="line" class="line" resize></div>
-
-            <div data-ng-repeat="point in points" data-pg-draggable="point" class="point" style="top: {{point.x}}px; left: {{point.y}}px;" data-ng-class="{selected: point.selected==true}"><div></div></div>
-        </div>
-
-        <ul>
-            <li data-ng-repeat="point in points | filter:{selected:true}">{{point.x}}, {{point.y}}</li> 
-            
-        </ul>
-
-        <button ng-click="foo()">Add button</button>
-
-<!--
-        <svg id="world" width="500" height="500">
-            <circle data-ng-repeat="point in points" cx="{{point.x}}" cy="{{point.y}}" r="10" stroke="gray" stroke-width="2" fill="{{getColor(point)}}"></circle>
-            <line data-ng-repeat="tuple in line | sliding2" x1="{{tuple[0].x}}" y1="{{tuple[0].y}}" x2="{{tuple[1].x}}" y2="{{tuple[1].y}}" style="stroke:rgb(255,0,0);stroke-width:2" />
-        </svg>-->
-<!--
-        <a href="#" onclick="tool1.activate();">Lines</a>
-        <a href="#" onclick="tool2.activate();">Clouds</a>
-        <canvas id="myCanvas" resize></canvas>
-        <ul>
-            <li data-ng-repeat="song in playlist">
-                {{song}}
-            </li>
-        </ul>
-
-        <script>
-        
-        // Keep global references to both tools, so the HTML
-        // links below can access them.
-        var tool1, tool2;
-        paper.setup('myCanvas');
-
-        // Create two drawing tools.
-        // tool1 will draw straight lines,
-        // tool2 will draw clouds.
-
-        // Both share the mouseDown event:
-        var path;
-        function onMouseDown(event) {
-            path = new paper.Path();
-            path.strokeColor = 'black';
-            path.add(event.point);
-        }
-
-        tool1 = new paper.Tool();
-        tool1.onMouseDown = onMouseDown;
-
-        tool1.onMouseDrag = function(event) {
-            path.add(event.point);
-        }
-
-        tool2 = new paper.Tool();
-        tool2.minDistance = 20;
-        tool2.onMouseDown = onMouseDown;
-
-        tool2.onMouseDrag = function(event) {
-            // Use the arcTo command to draw cloudy lines
-            path.arcTo(event.point);
-        }
-        </script>
-    -->
-    </div>
-    </body>
-</html>
diff --git a/public/old/videosearch_n_play.html b/public/old/videosearch_n_play.html
deleted file mode 100644
index fb58843..0000000
--- a/public/old/videosearch_n_play.html
+++ /dev/null
@@ -1,93 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" 
-           xml:lang="en" lang="en">
-    <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <title>Search Snippet</title>
-    <script src="http://www.google.com/jsapi"></script>
-    <script src="app/lib/jquery-1.11.1.min.js"></script>
-
-    <script type="text/javascript">
-
-        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 songFinished;
-		function newMusic(id, duration)
-		{
-			$('#ytplayer').attr('src', 'https://www.youtube.com/embed/'+id+'?autoplay=1&modestbranding=1');
-		 	songFinished = setTimer(nextSong, duration * 1000);
-			console.log("Setting timer for "+duration+" seconds");
-		}
-		
-		function nextSong()
-		{
-			clearTimer(songFinished);
-			console.log("Bingo !");
-		}
-
-        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});
-            }
-			console.log(entries);
-			console.log(results);
-            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('</ul>');
-            document.getElementById('videoResultsDiv').innerHTML = html.join('');
-        }
-		
-		
-
-    </script>
-
-    </head>
-
-    <body id="page">
-        <div>
-            <p>
-            	<input type="text" name="searchValue" id="searchValue" value="eminem we made you" />
-            	<input name="searchButton" type="submit" value="Search" onclick="searchClicked()"/>
-            </p>
-            Results:<br/>
-            <div id="videoResultsDiv"></div> 
-            <!-- ShowMyVideos() will populate this div with results-->
-            <iframe id="ytplayer" type="text/html" width="640" height="360"
-src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&modestbranding=1"
-frameborder="0" allowfullscreen>
-        </div>
-    </body>
-</html>
-\ No newline at end of file
author	Jakob Odersky <jodersky@gmail.com>	2014-05-14 13:15:24 +0200
committer	Jakob Odersky <jodersky@gmail.com>	2014-05-14 13:15:24 +0200
commit	527929c3219bc19479abdd68a8c695b9f7fe8ca2 (patch)
tree	8c8eed286c3c6297f80958693248aec8ccbbd220
parent	1ec641223b920d8ebf36db3f1fcdc3c7b09baf99 (diff)
download	playGraph-static-server.tar.gz playGraph-static-server.tar.bz2 playGraph-static-server.zip