js/playscreen.js
changeset 22 4e1e66b2fdf1
parent 21 007254e97333
child 23 933b388521f6
equal deleted inserted replaced
21:007254e97333 22:4e1e66b2fdf1
   240         globR = (globW + globL),
   240         globR = (globW + globL),
   241         mx = Math.max.apply(Math, data.minutes.map(function(s) { return s.count})),
   241         mx = Math.max.apply(Math, data.minutes.map(function(s) { return s.count})),
   242         xscale = globW/mx,
   242         xscale = globW/mx,
   243         yscale,
   243         yscale,
   244         localyscale,
   244         localyscale,
   245         filteredSegments = [];
   245         filteredSegments = [],
       
   246         currentTweetTc = -1;
   246     
   247     
   247     function showLocal() {
   248     function showLocal() {
   248     	var $c = $(".play-canvas"),
   249     	var $c = $(".play-canvas"),
   249     		c = $c[0],
   250     		c = $c[0],
   250     		ph = $c.height(),
   251     		ph = $c.height(),
   419         	ctx.stroke();
   420         	ctx.stroke();
   420         });
   421         });
   421         
   422         
   422         var deltaY = $(".play-bottom").offset().top;
   423         var deltaY = $(".play-bottom").offset().top;
   423         
   424         
   424         $(".play-localtweets .tweet:visible").each(function() {
   425 		ctx.strokeStyle = "#ccc";
       
   426 		
       
   427         $(".play-localtweets .tweet").each(function() {
   425         	var el = $(this),
   428         	var el = $(this),
   426         		liY = + el.offset().top + el.outerHeight() / 2 - deltaY,
   429         		liY = + el.offset().top + el.outerHeight() / 2 - deltaY,
   427         		tY = localyscale * (+el.attr("data-timestamp") - localpos + localduration / 2);
   430         		t = +el.attr("data-timestamp"),
       
   431         		tY = localyscale * (t - localpos + localduration / 2),
       
   432                 tX = localL + lxscale * (data.fiveseconds[Math.floor(t / 5)].count - lmi);
   428     		ctx.beginPath();
   433     		ctx.beginPath();
   429     		ctx.strokeStyle = "#ccc";
   434     		ctx.moveTo(tX, tY);
   430     		ctx.moveTo(localL, tY);
       
   431     		ctx.lineTo(localR, tY);
   435     		ctx.lineTo(localR, tY);
   432     		ctx.lineTo(400, liY);
   436     		ctx.lineTo(400, liY);
   433     		ctx.stroke();
   437     		ctx.stroke();
   434     		$(this).css("background",colors[el.attr("data-topic-id")] || "");
   438     		$(this).css("background",colors[el.attr("data-topic-id")] || "");
       
   439         });
       
   440         
       
   441 		ctx.strokeStyle = "#000";
       
   442         ctx.fillStyle = "#ff0";
       
   443 		
       
   444         $(".user-tweets .tweet:visible").each(function() {
       
   445             var el = $(this),
       
   446                 t = +el.attr("data-timestamp"),
       
   447                 hover = (t === currentTweetTc);
       
   448             if (hover) {
       
   449                 ctx.strokeStyle = "#900";
       
   450                 ctx.lineWidth = 3;
       
   451             }
       
   452             if (t > localstart && t < localend) {
       
   453                 var tY = localyscale * (t - localpos + localduration / 2),
       
   454                     tX = localL + lxscale * (data.fiveseconds[Math.floor(t / 5)].count - lmi);
       
   455         		ctx.beginPath();
       
   456         		ctx.arc(tX,tY,hover ? 6 : 3,0,2*Math.PI,true);
       
   457         		ctx.fill();
       
   458         		ctx.stroke();
       
   459             }
       
   460             var n = Math.floor(t / 60),
       
   461                 x = globL + xscale * data.minutes[n].count,
       
   462                 y = yscale * t;
       
   463             ctx.beginPath();
       
   464             ctx.arc(x,y,hover ? 6 : 3,0,2*Math.PI,true);
       
   465             ctx.fill();
       
   466             ctx.stroke();
       
   467             if (hover) {
       
   468                 ctx.strokeStyle = "#000";
       
   469                 ctx.lineWidth = 1;
       
   470             }
   435         });
   471         });
   436         
   472         
   437         ctx.fillStyle = '#ffffff';
   473         ctx.fillStyle = '#ffffff';
   438         ctx.strokeStyle = '#999999';
   474         ctx.strokeStyle = '#999999';
   439         ctx.font = '10px Arial,Helvetica';
   475         ctx.font = '10px Arial,Helvetica';
   547 	    		return { word: k, score: v }
   583 	    		return { word: k, score: v }
   548 	    	})
   584 	    	})
   549 	    	.sortBy(function(w) {
   585 	    	.sortBy(function(w) {
   550 	    		return -w.score;
   586 	    		return -w.score;
   551 	    	})
   587 	    	})
   552 	    	.first(39)
   588 	    	.first(tcLength)
   553 	    	.value();
   589 	    	.value();
   554     	
   590     	
   555     	var values = _(localkeywords).pluck('score'),
   591     	var values = _(localkeywords).pluck('score'),
   556     		max = Math.max.apply(Math, values),
   592     		max = Math.max.apply(Math, values),
   557     		min = Math.min.apply(Math, values),
   593     		min = Math.min.apply(Math, values),
   558     		scale = 10 / (max - Math.min(max - .1, min)),
   594     		scale = 10 / (max - Math.min(max - .1, min)),
   559     		selectedVisible = false,
   595     		selectedVisible = false,
   560     		tc = $(".play-tagcloud li");
   596     		tc = $(".play-tagcloud li");
   561     		
   597     		
   562 		localkeywords.forEach(function(w, i) {
   598 		localkeywords.forEach(function(w, i) {
   563 			var size = 10 + (w.score - min) * scale,
   599 			var size = 12 + (w.score - min) * scale,
   564 				selected = (w.word === selectedWord),
   600 				selected = (w.word === selectedWord),
   565 				e = $(tc[i]),
   601 				e = $(tc[i]),
   566 				t = e.text();
   602 				t = e.text();
   567 			if (t !== w.word) {
   603 			if (t !== w.word) {
   568 				e.text(w.word);
   604 				e.text(w.word);
   573 			} else {
   609 			} else {
   574 				e.removeClass("selected");
   610 				e.removeClass("selected");
   575 			}
   611 			}
   576 			selectedVisible = selectedVisible || selected;
   612 			selectedVisible = selectedVisible || selected;
   577 		});
   613 		});
   578 		if (localkeywords.length < 39) {
   614 		if (localkeywords.length < tcLength) {
   579 			for (var i = localkeywords.length; i < 39; i++) {
   615 			for (var i = localkeywords.length; i < tcLength; i++) {
   580 				$(tc[i]).text("").removeClass("selected");
   616 				$(tc[i]).text("").removeClass("selected");
   581 			}
   617 			}
   582 		}
   618 		}
   583     	
   619     	
   584     	if (!selectedVisible) {
   620     	if (!selectedVisible) {
   586     	}
   622     	}
   587     	    
   623     	    
   588 		throttledGetTweets();
   624 		throttledGetTweets();
   589     }
   625     }
   590     
   626     
   591     for (var i = 0; i < 39; i++) {
   627     var tcLength = 20;
       
   628     
       
   629     for (var i = 0; i < tcLength; i++) {
   592     	$(".play-tagcloud").append("<li>");
   630     	$(".play-tagcloud").append("<li>");
   593     }
   631     }
   594     
   632     
   595     $(".play-tagcloud li").click(function() {
   633     $(".play-tagcloud li").click(function() {
   596     	
   634     	
   616     		+ '</li>'),
   654     		+ '</li>'),
   617     	callnum = 0,
   655     	callnum = 0,
   618     	tweetstructure = {},
   656     	tweetstructure = {},
   619     	requestedtweets = {},
   657     	requestedtweets = {},
   620     	_NTWEETS = 50,
   658     	_NTWEETS = 50,
   621     	selectedWord = false;
   659     	selectedWord = false,
       
   660     	lastHtml = "";
       
   661     
   622     
   662     
   623     function showTweets() {
   663     function showTweets() {
   624     	var toshow = [];
   664     	var toshow = [];
   625     	var topics = Array.prototype.join.call($(".topic.selected").map(function(){return $(this).attr("data-topic-id")})).split(",");
   665     	var topics = Array.prototype.join.call($(".topic.selected").map(function(){return $(this).attr("data-topic-id")})).split(",");
   626     	
   666     	
   667 				
   707 				
   668 		tweetstoshow.sort(function(a, b) {
   708 		tweetstoshow.sort(function(a, b) {
   669 			return b.topic.weight - a.topic.weight; 
   709 			return b.topic.weight - a.topic.weight; 
   670 		});
   710 		});
   671 		
   711 		
   672 		if (tweetstoshow.length < 8) {
   712 		if (tweetstoshow.length < 4) {
   673 			var randtweets = data.randomtweets.filter(function(tw) {
   713 			var randtweets = data.randomtweets.filter(function(tw) {
   674 				return (tw.timestamp > (localpos - localduration / 2)) && (tw.timestamp < (localpos + localduration / 2))
   714 				return (tw.timestamp > (localpos - localduration / 2)) && (tw.timestamp < (localpos + localduration / 2))
   675 			});
   715 			});
   676 			if (selectedWord) {
   716 			if (selectedWord) {
   677 				var rx = new RegExp(selectedWord.replace(/(\W)/gm,'\\$1'),'im');
   717 				var rx = new RegExp(selectedWord.replace(/(\W)/gm,'\\$1'),'im');
   678 				randtweets = randtweets.filter(function(tw) {
   718 				randtweets = randtweets.filter(function(tw) {
   679 					return rx.test(tw.data.text);
   719 					return rx.test(tw.data.text);
   680 				});
   720 				});
   681 			}
   721 			}
   682 			var mod = Math.ceil(randtweets.length / 8);
   722 			var mod = Math.ceil(randtweets.length / 5);
   683 			randtweets = randtweets.filter(function(v,k) {
   723 			randtweets = randtweets.filter(function(v,k) {
   684 				return !(k % mod);
   724 				return !(k % mod);
   685 			});
   725 			});
   686 			tweetstoshow = tweetstoshow.concat(randtweets);
   726 			tweetstoshow = tweetstoshow.concat(randtweets);
   687 		}
   727 		}
   688 		
   728 		
   689 		tweetstoshow = tweetstoshow.slice(0,10);
   729 		tweetstoshow = tweetstoshow.slice(0,6);
   690 		
   730 		
   691 		if (selectedWord) {
   731 		if (selectedWord) {
   692 			var rx = new RegExp( '(' + selectedWord.replace(/(\W)/gm,'\\$1') + ')', 'gim' );
   732 			var rx = new RegExp( '(' + selectedWord.replace(/(\W)/gm,'\\$1') + ')', 'gim' );
   693 			tweetstoshow.forEach(function(tw) {
   733 			tweetstoshow.forEach(function(tw) {
   694 				tw.htext = _(tw.data.text).escape().replace(rx,'<span class="highlight">$1</span>');
   734 				tw.htext = _(tw.data.text).escape().replace(rx,'<span class="highlight">$1</span>');
   708 			return a.timestamp - b.timestamp;
   748 			return a.timestamp - b.timestamp;
   709 		});
   749 		});
   710 		
   750 		
   711 		var html = tweetstoshow.map(tweetTemplate).join("");
   751 		var html = tweetstoshow.map(tweetTemplate).join("");
   712 		
   752 		
   713 		$(".play-localtweets").html(html);
   753 		if (lastHtml !== html) {
       
   754 		    $(".play-localtweets").html(html);
       
   755 		}
       
   756 		lastHtml = html;
   714 		var h = 0;
   757 		var h = 0;
   715 		$(".play-localtweets .tweet").each(function() {
   758 		$(".play-localtweets .tweet").each(function() {
   716 			h += $(this).outerHeight();
   759 			h += $(this).outerHeight();
   717 		});
   760 		});
   718 		$(".play-localtweets .tweet").css("margin-top",Math.max(0,($(".play-bottom").height() - h)/(tweetstoshow.length+1)));
   761 		$(".play-localtweets .tweet").css("margin-top",Math.max(0,($(".play-bottom").height() - h)/(tweetstoshow.length+1)));
   871    		$(".play-button").attr("title","Lecture").removeClass("playing");
   914    		$(".play-button").attr("title","Lecture").removeClass("playing");
   872    	});
   915    	});
   873    	player.on("timeupdate", function(t) {
   916    	player.on("timeupdate", function(t) {
   874    		playTime.text(secsToString(t));
   917    		playTime.text(secsToString(t));
   875     	if (timelock) {
   918     	if (timelock) {
   876     		localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, t));
   919     		localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, t + localduration / 6));
   877     	}
   920     	}
   878     	throttledShowLocal();
   921     	throttledShowLocal();
   879    	});
   922    	});
   880    	
   923    	
   881    	$(".play-button").click(function() {
   924    	$(".play-button").click(function() {
   922 			posY = e.gesture.center.pageY - _o.top;
   965 			posY = e.gesture.center.pageY - _o.top;
   923 		if (posX < 140) {
   966 		if (posX < 140) {
   924 			if (timelock) {
   967 			if (timelock) {
   925     			player.setCurrentTime(Math.max(0, Math.min(data.duration, Math.floor(posY / yscale))));
   968     			player.setCurrentTime(Math.max(0, Math.min(data.duration, Math.floor(posY / yscale))));
   926 			} else {
   969 			} else {
   927 				localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale)));
   970 				localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale) + localduration / 6));
   928 				throttledShowLocal();
   971 				throttledShowLocal();
   929 			}
   972 			}
   930 		}
   973 		}
   931 	})
   974 	})
   932 	.on("dragstart", function(e) {
   975 	.on("dragstart", function(e) {
   983 	    if (Math.abs(totalScroll) >= 1) {
  1026 	    if (Math.abs(totalScroll) >= 1) {
   984 	    	var d = (totalScroll > 0 ? 1 : -1),
  1027 	    	var d = (totalScroll > 0 ? 1 : -1),
   985 	    		newlevel = Math.max(0, Math.min(zoomlevels.length - 1, currentlevel + d));
  1028 	    		newlevel = Math.max(0, Math.min(zoomlevels.length - 1, currentlevel + d));
   986     		if (newlevel !== currentlevel) {
  1029     		if (newlevel !== currentlevel) {
   987     			currentlevel = newlevel;
  1030     			currentlevel = newlevel;
       
  1031     			var oldduration = localduration;
   988     			localduration = zoomlevels[currentlevel];
  1032     			localduration = zoomlevels[currentlevel];
   989     			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, localpos));
  1033     			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, localpos - (oldduration - localduration) / 6 ));
   990     			throttledShowLocal();
  1034     			throttledShowLocal();
   991     		}
  1035     		}
   992 	        totalScroll = 0;
  1036 	        totalScroll = 0;
   993 	    }
  1037 	    }
   994 	    _event.preventDefault();
  1038 	    _event.preventDefault();
  1018     		}, 20);
  1062     		}, 20);
  1019     	})
  1063     	})
  1020     	.on("mouseleave touchend", function() {
  1064     	.on("mouseleave touchend", function() {
  1021     		clearInterval(moveInterval);
  1065     		clearInterval(moveInterval);
  1022     	});
  1066     	});
  1023     
  1067     var usersCache = {};
  1024     $(".play-localtweets").on("click", "li", function() {
  1068     
  1025     	player.setCurrentTime(parseInt($(this).attr("data-timestamp")));
  1069     function showUserTweets(userid) {
  1026     	return false;
  1070         var tweets = usersCache[userid];
  1027     });
  1071 		tweets.forEach(function(tweet) {
       
  1072 			tweet.timestamp = new Date(tweet.created_at).valueOf() / 1000 - deltaT;
       
  1073 		});
       
  1074 		tweets = tweets.filter(function(tweet) {
       
  1075 		    return tweet.timestamp > 0 && tweet.timestamp < data.duration;
       
  1076 		});
       
  1077 		tweets.sort(function(a,b) {
       
  1078 			return a.timestamp - b.timestamp;
       
  1079 		})
       
  1080 		var html = tweets.reduce(function(mem, tweet) {
       
  1081 			return mem + tweetTemplate({
       
  1082 				timestamp: tweet.timestamp,
       
  1083 				topic: {topic: -1},
       
  1084 				weight: 0,
       
  1085 				data: tweet,
       
  1086 				htext: _(tweet.text).escape(),
       
  1087 				show_link: false,
       
  1088 				show_time: true
       
  1089 			});
       
  1090 		},"");
       
  1091 		$(".user-tweets").show();
       
  1092 		$(".user-tweets-list").html(html);
       
  1093 		$(".user-name").text(tweets[0].from_user_name);
       
  1094     }
       
  1095     
  1028     $(".play-localtweets").on("click", "li a", function() {
  1096     $(".play-localtweets").on("click", "li a", function() {
  1029     	var userid = $(this).attr("data-user-id");
  1097     	var userid = $(this).attr("data-user-id");
  1030     	$.getJSON(
  1098         $(".user-tweets").show();
  1031 			solrUrl(
  1099         $(".user-tweets-list").html("<li class='loading'>Chargement en cours</li>");
  1032 				"twitter",
  1100         $(".user-name").text($(this).parents("li.tweet").find("p a").text().replace(/(^@|:$)/g,""));
  1033 				{
  1101     	if (!usersCache[userid]) {
  1034 					q: "from_user_id:" + userid,
  1102     	    usersCache[userid] = [];
  1035 					fl: "id_str,created_at,from_user_name,text,profile_image_url,from_user_id",
  1103         	$.getJSON(
  1036 					rows: 500
  1104     			solrUrl(
  1037 				}
  1105     				"twitter",
  1038 			),
  1106     				{
  1039 			function(t) {
  1107     					q: "from_user_id:" + userid,
  1040 				var tweets = t.response.docs;
  1108     					fl: "id_str,created_at,from_user_name,text,profile_image_url,from_user_id",
  1041 				tweets.forEach(function(tweet) {
  1109     					rows: 500
  1042 					tweet.timestamp = new Date(tweet.created_at).valueOf() / 1000 - deltaT;
  1110     				}
  1043 				});
  1111     			),
  1044 				tweets.sort(function(a,b) {
  1112     			function(t) {
  1045 					return a.timestamp - b.timestamp;
  1113     				usersCache[userid] = t.response.docs;
  1046 				})
  1114                     showUserTweets(userid);
  1047 				var html = tweets.reduce(function(mem, tweet) {
  1115     			}
  1048 					return mem + tweetTemplate({
  1116     		);
  1049 						timestamp: tweet.timestamp,
  1117 		} else {
  1050 						topic: {topic: -1},
  1118 		    showUserTweets(userid);
  1051 						weight: 0,
  1119 		}
  1052 						data: tweet,
       
  1053 						htext: _(tweet.text).escape(),
       
  1054 						show_link: false,
       
  1055 						show_time: true
       
  1056 					});
       
  1057 				},"");
       
  1058 				$(".user-tweets").show();
       
  1059 				$(".user-tweets-list").html(html);
       
  1060 				$(".user-name").text(tweets[0].from_user_name);
       
  1061 			}
       
  1062 		);
       
  1063 		return false;
  1120 		return false;
       
  1121     });
       
  1122     
       
  1123     $(".user-tweets").on("click", "li", function() {
       
  1124         player.setCurrentTime(parseInt($(this).attr("data-timestamp")));
       
  1125         return false;
       
  1126     }).on("mouseenter", "li", function() {
       
  1127         currentTweetTc = parseInt($(this).attr("data-timestamp"));
       
  1128         throttledShowLocal();
       
  1129     }).on("mouseleave", "li", function() {
       
  1130         currentTweetTc = -1;
       
  1131         throttledShowLocal();
  1064     });
  1132     });
  1065     
  1133     
  1066     var timelock = true;
  1134     var timelock = true;
  1067     
  1135     
  1068     $(".lock-button").click(function() {
  1136     $(".lock-button").click(function() {
  1073     		$(this).removeClass("locked").attr("title", "Coupler la lecture et la visualisation");
  1141     		$(this).removeClass("locked").attr("title", "Coupler la lecture et la visualisation");
  1074     	}
  1142     	}
  1075     	return false;
  1143     	return false;
  1076     });
  1144     });
  1077     
  1145     
  1078     $(window).on("resize", throttledShowLocal)
  1146     $(window).on("resize", throttledShowLocal);
       
  1147     
       
  1148     $(".close-user-tweets").click(function() {
       
  1149         currentTweetTc = -1;
       
  1150         $(".user-tweets").hide();
       
  1151         return false;
       
  1152     })
  1079     
  1153     
  1080     checkOrGoNext();
  1154     checkOrGoNext();
  1081 }
  1155 }
  1082 
  1156 
  1083 var data = { topics: [] },
  1157 var data = { topics: [] },