socialmedia: comparison js/playscreen.js

Mercurial Mercurial > socialmedia / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

js/playscreen.js

changeset 11	9833f3e24105
parent 10	ab587bf164f9
child 12	81a8bb1d872a

equal deleted inserted replaced

-:ab587bf164f9
+:9833f3e24105
 function showData() {
 var topicHash = document.location.hash || "#selectedtopics=5,15&visibletopics=5,10,15";
 var pageParams = {};
+var syncVideo = true,
+	syncTimer;
+function deSync() {
+	syncVideo = false;
+	clearTimeout(syncTimer);
+	syncTimer = setTimeout(function() {
+		syncVideo = true;
+	},5000);
+}
 topicHash
 	.replace(/^#/,'')
 	.split('&')
 	.forEach(function(p) {
 var sortedTopics = data.topics.filter(function(t) {
 return pageParams.visibletopics.indexOf(t.index.toString()) !==-1 && t.index !== topicPoubelle;
 });
+function hasTopics(mmso, topics) {
+	for (var j = 0; j < mmso.topics.length; j++) {
+			if (topics.indexOf(mmso.topics[j].topic) !== -1) {
+				return true;
+			}
+		}
+		return false;
+}
+function checkOrGoNext() {
+	var topics = Array.prototype.slice.call(
+		$(".topic.selected").map(function() {
+			return parseInt($(this).attr("data-topic-id"))
+			})
+		);
+		var currentMmso = _(data.segments).find(function(s) {
+			return s.start <= player.currentTime && s.end > player.currentTime;
+		});
+		if (hasTopics(currentMmso, topics)) {
+			throttledShowLocal();
+		} else {
+			goToNext();
+		}
+}
 function goToNext() {
-	var topics = Array.prototype.slice.call($(".topic.selected").map(function(){return $(this).attr("data-topic-id")}));
+	var topics = Array.prototype.slice.call(
+		$(".topic.selected").map(function() {
+			return parseInt($(this).attr("data-topic-id"));
+			})
+		);
 	for (var i = 0; i < data.segments.length; i++) {
 		var mmso = data.segments[i];
-		if (mmso.start >= localpos) {
+		if (mmso.start >= player.currentTime && hasTopics(mmso, topics)) {
-			for (var j = 0; j < mmso.topics.length; j++) {
+			player.setCurrentTime(mmso.start);
-				if (topics.indexOf(mmso.topics[j].topic.toString()) !== -1) {
+				throttledShowLocal();
-					localpos = mmso.start;
+				return;
-					showLocal();
-					return;
-				}
-			}
 		}
 	}
-	console.log("We haven't found a segment");
 }
 function showTopics(topiclist) {
 var tbhtml = topiclist.reduce(function(mem, topic) {
 var wordsToShow = topic.words.slice(0,3),
 }
 tweetLines.forEach(function(tl) { tl.remove(); });
 tweetLines = [];
-var deltaY = $(".play-dataviz").offset().top;
+var deltaY = $(".play-bottom").offset().top;
 $(".play-localtweets .tweet:visible").each(function() {
 	var el = $(this),
 		liY = + el.offset().top + el.outerHeight() / 2 - deltaY,
 		tY = localyscale * (+el.attr("data-timestamp") - localpos + localduration / 2),
 localTimeR = (localL + localW) + globL,
 globR = (globW + globL),
 yscale = ph / data.duration,
 mx = Math.max.apply(Math, data.minutes.map(function(s) { return s.count})),
 xscale = globW/mx;
 var segmentrects = data.segments.map(function(mmso) {
 var rect = paper.rect(globL, yscale * mmso.start, globW, yscale * mmso.duration);
 rect.attr({stroke: "none"});
 return rect;
 });
 	localyscale;
 	entonnoir.toBack();
 var cloudTemplate = _.template('<li style="font-size: <%- size %>px;"<% if (selected) {%> class="selected"<% } %>><%- word %></li>');
+var globalIndic = $(".global-position"),
+	localIndic = $(".local-position"),
+	playTime = $(".current-time");
 function showLocal() {
 		localyscale = ph / localduration;
 	var localstart = localpos - localduration/2;
 		localend = localpos + localduration/2;
 			+ betweenx + "," + Math.max(ph - curve, betweenyb) +"L" + betweenx + "," + Math.min(globbottom + curve, betweenyb)
 			+ "Q" + betweenx + "," + globbottom + "," + globR + "," + globbottom + "L0," + globbottom,
 			localkeywords = {};
 		entonnoir.attr("path",entonnoird);
+	localIndic.css("top",(player.currentTime - localstart) * localyscale);
 		localTimes.forEach(function(t) {
 			t.text.remove();
 			t.line.remove();
 		});
 		localMmsos.forEach(function(t) {
 var tweetTemplate = _.template('<li class="tweet" data-timestamp="<%= timestamp %>" data-topic-id="<%= topic.topic %>"><img src="<%- data.profile_image_url %>" /><p>@<%- data.from_user_name %>: <%= data.htext %></p></li>'),
 	callnum = 0,
 	tweetstructure = {},
 	requestedtweets = {},
-	_NTWEETS = 20,
+	_NTWEETS = 50,
 	selectedWord = false;
 function showTweets() {
 	var toshow = [];
 	$(".topic[data-topic-id=" + id + "]").addClass("selected").attr("data-timestamp",++ordertag);
 });
 var localpos = 300,
 	localduration = 600;
-goToNext();
+	var player = new Player();
+	player.duration = data.duration;
+	player.on("play", function() {
+		$(".play-button").html("▐&nbsp;▌");
+	});
+	player.on("pause", function() {
+		$(".play-button").text("▶");
+	});
+	player.on("timeupdate", function(t) {
+		playTime.text(secsToString(t));
+		globalIndic.css("top", yscale * t);
+		if (localyscale) {
+			var localy = (+t - localpos + localduration / 2) * localyscale;
+			localIndic.css("top", localy);
+		}
+	if (syncVideo) {
+		localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, t));
+		throttledShowLocal();
+	}
+	});
+	$(".play-button").click(function() {
+		if (player.paused) {
+			player.play();
+		} else {
+			player.pause();
+		}
+	});
+$(".next-button").click(goToNext);
 $(".topics-block").on("mouseenter", ".topic", function() {
 var el = $(this);
 el.addClass("hover");
 showTopicViz();
 var el = $(this);
 $(this).toggleClass("selected");
 el.attr("data-timestamp", el.hasClass("selected") ? ++ordertag : 999999);
 showTopicViz();
 });
-var mouseIsDown, isDragging, startY, startT, startPos, scrollGlobal, speedscale, slowiterations;
+	var h = Hammer($(".play-bottom")[0]);
-$(document).mouseup(function() { mouseIsDown = false; isDragging = false; });
+	var scrollGlobal, isDragging, startPos, startLevel, scaleStep = 1/Math.log(Math.sqrt(2));
-$(".play-dataviz").mousedown(function(e) {
+	h.on("tap", function(e) {
-	var l = $(this).offset().left,
+		var _o = $(this).offset(),
-		scrollLimit = l + 380;
+			posX = e.gesture.center.pageX - _o.left,
-		if (e.pageX < scrollLimit) {
+			posY = e.gesture.center.pageY - _o.top;
-			mouseIsDown = true;
+		if (posX < 140) {
-	    	startY = e.pageY;
+			deSync();
-	    	startT = new Date();
+			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale)));
-	    	startPos = localpos;
+			throttledShowLocal();
-	    	scrollGlobal = e.pageX < (l + 140);
+		}
-	    	e.preventDefault();
+	})
-		}
+	.on("dragstart", function(e) {
-}).mousemove(function(e) {
+		startPos = localpos;
-	if (mouseIsDown) {
+		var x = e.gesture.center.pageX - $(this).offset().left;
-		if (isDragging) {
+		isDragging = (x < 380);
-			var deltaY = e.pageY - startY,
+		scrollGlobal = (x < 140);
-				delta = Math.floor(deltaY / (scrollGlobal ? yscale : - localyscale));
+	})
-				localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, startPos + delta));
+	.on("drag", function(e) {
-				throttledShowLocal();
+		if (isDragging && e.gesture) {
-		} else {
+			var delta = Math.floor(e.gesture.deltaY / (scrollGlobal ? yscale : - localyscale));
-			isDragging = true;
+			deSync();
-		}
+			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, startPos + delta));
-	}
+			throttledShowLocal();
-}).mouseup(function(e) {
+		}
-	if (scrollGlobal && !isDragging) {
+	})
-		var _o = $(this).offset(),
+	.on("touch", function(e) {
-			posX = e.pageX - _o.left,
+		startLevel = currentlevel;
-			posY = e.pageY - _o.top;
+	})
-			if (posX < 140) {
+	.on("pinchin", function(e) {
-				localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale)));
+		var newlevel = Math.max(0, Math.min(zoomlevels.length - 1, startLevel + Math.round(Math.log(e.gesture.scale)*scaleStep)));
-				throttledShowLocal();
+		if (newlevel !== currentlevel) {
-			}
+			currentlevel = newlevel;
-	}
+			localduration = zoomlevels[currentlevel];
-});
+			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, localpos));
+			throttledShowLocal();
+		}
+	});
 var totalScroll = 0, zoomlevels = [ 1800, 900, 600, 300, 120, 60 ], currentlevel = 2;
-$(".play-dataviz").mousewheel(function(_event, _scrolldelta) {
+$(".play-bottom")
+.mousedown(function(_e) {
+	_e.preventDefault();
+})
+.on("touchstart", function(_e) {
+	_e.preventDefault();
+})
+.mousewheel(function(_event, _scrolldelta) {
 	totalScroll += _scrolldelta;
 	    if (Math.abs(totalScroll) >= 1) {
 	    	var d = (totalScroll > 0 ? 1 : -1),
 	    		newlevel = Math.max(0, Math.min(zoomlevels.length - 1, currentlevel + d));
 		if (newlevel !== currentlevel) {
 			localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, localpos));
 			throttledShowLocal();
 		}
 	        totalScroll = 0;
 	    }
+	    _event.preventDefault();
 });
 if (pageParams.keywords && pageParams.keywords.length) {
 	$(".keyword-search a").removeClass("placeholder").text(pageParams.keywords.join(", "));
 }
+checkOrGoNext();
 }
 var data = { duration: 10200, topics: [] },
 colorset = ["#E41A1C", "#377EB8", "#4DAF4A", "#984EA3", "#FF7F00", "#A65628", "#F781BF"];

socialmedia