--- a/css/playscreen.css Wed Apr 10 15:39:28 2013 +0200
+++ b/css/playscreen.css Tue Apr 16 18:26:43 2013 +0200
@@ -24,7 +24,7 @@
}
.button {
- float: left; width: 18px; margin: 5px 4px;
+ float: left; width: 18px; margin: 6px 4px;
height: 18px; background: url(../img/sprites.png);
}
@@ -44,6 +44,14 @@
background-position: -54px 0;
}
+.lock-button {
+ width: 36px; background-position: -36px -54px;
+}
+
+.lock-button.locked {
+ background-position: -36px -36px;
+}
+
.duration, .time-separator, .current-time {
float: left; height: 30px;
font-size: 20px; line-height: 30px;
@@ -53,7 +61,7 @@
width: 6px; text-align: center;
}
.duration, .current-time {
- width: 140px; margin: 0 8px;
+ width: 120px; margin: 0 8px;
}
.current-time {
text-align: right; color: #CCCCCC;
@@ -81,7 +89,7 @@
}
.play-bottom {
- position: absolute; left: 8px; top: 86px; bottom: 8px; right: 8px; overflow: hidden;
+ position: absolute; left: 8px; top: 96px; bottom: 8px; right: 8px; overflow: hidden;
}
.home-button {
@@ -93,28 +101,48 @@
}
.topics-block {
- float: left; clear: both; width: 10000px; padding-left: 8px; height: 40px; left: 0;
+ float: left; clear: both; width: 10000px; height: 50px; left: 20px;
+}
+
+.topics-list {
+ float: left;
}
.topic {
- float: left; padding: 6px; cursor: pointer; background: #333333;
+ float: left; padding: 2px; cursor: pointer; background: #333333;
}
.topic-words li {
- display: inline-block; color: #fff; padding: 0 4px;
+ display: inline-block; color: #fff; padding: 2px 4px;
font-size: 14px; line-height: 16px;
}
.left-arrow, .right-arrow {
- position: absolute; top: 0; width: 9px; height: 20px; width: 9px; background: url(../img/arrows.png); margin: 5px; cursor: pointer;
+ position: absolute; top: 0; width: 9px; height: 20px; padding: 13px 8px; cursor: pointer;
}
.left-arrow {
- left: 0;
+ left: 0; background: -moz-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0));
}
.right-arrow {
- right: 0; background-position: -9px 0;
+ right: 0; background: -moz-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,0));
+}
+
+.inside-arrow {
+ width: 9px; height: 20px; background: url(../img/sprites.png);
+}
+
+div:hover>.inside-arrow {
+ opacity: .5;
+}
+
+.left-arrow .inside-arrow {
+ background-position: 0 -54px;
+}
+
+.right-arrow .inside-arrow {
+ background-position: -9px -54px;
}
.highlight {
Binary file img/arrows.png has changed
Binary file img/sprites.png has changed
--- a/js/playscreen.js Wed Apr 10 15:39:28 2013 +0200
+++ b/js/playscreen.js Tue Apr 16 18:26:43 2013 +0200
@@ -78,18 +78,7 @@
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('&')
@@ -160,7 +149,6 @@
var chap = data.chapters[i];
if (chap.startTime > player.currentTime && topics.indexOf(chap.topic) !== -1) {
player.setCurrentTime(chap.startTime);
- throttledShowLocal();
return;
}
}
@@ -169,7 +157,6 @@
var chap = data.chapters[i];
if (topics.indexOf(chap.topic) !== -1) {
player.setCurrentTime(chap.startTime);
- throttledShowLocal();
return;
}
}
@@ -201,26 +188,38 @@
}
function showTopics(topiclist) {
+
+
var tbhtml = topiclist.reduce(function(mem, topic) {
var wordsToShow = topic.words.slice(0,4),
max = wordsToShow[0].weight,
min = Math.min(wordsToShow[wordsToShow.length - 1].weight, max - .01),
scale = 8 / (max - min);
+
+ function line(words) {
+ return '<ul class="topic-words">' + words.reduce(function(memwords, word) {
+ return memwords
+ + '<li style="font-size: '
+ + ( 8 + scale * (word.weight - min) )
+ + 'px;">'
+ + word.word
+ + '</li>';
+ },"") + '</ul>';
+ }
+
var li = '<li class="shadow-block topic" data-topic-id="'
+ topic.index
- + '" data-timestamp="999999"><ul class="topic-words">'
- + wordsToShow.reduce(function(memwords, word) {
- return memwords
- + '<li style="font-size: '
- + ( 8 + scale * (word.weight - min) )
- + 'px;">'
- + word.word
- + '</li>';
- },"")
- + '</ul></li>';
+ + '" data-timestamp="999999">'
+ + line(wordsToShow.filter(function( v, k ) {
+ return !(k % 2);
+ }))
+ + line(wordsToShow.filter(function( v, k ) {
+ return !!(k % 2);
+ }))
+ + '</li>';
return mem + li;
},'');
- var tb = $(".topics-block");
+ var tb = $(".topics-list");
tb.html(tbhtml);
tb.css("top",0);
@@ -692,7 +691,7 @@
ntw = tweetids.length,
topicweight = data.topics[j].weights[mmstruct.mmsoindex];
for (var k = 0; k < tweetids.length; k++) {
- var relevance = topicweight * (ntw - k) / ntw,
+ var relevance = topicweight + .5 * (ntw - k) / ntw,
tweetid = tweetids[k];
if (!requestedtweets[tweetid]) {
requestedtweets[tweetid] = {
@@ -846,7 +845,7 @@
var localy = (+t - localpos + localduration / 2) * localyscale;
localIndic.css("top", localy);
}
- if (syncVideo) {
+ if (timelock) {
localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, t));
throttledShowLocal();
}
@@ -871,7 +870,7 @@
return false;
});
- $(".topics-block").on("mouseenter", ".topic", function() {
+ $(".topics-list").on("mouseenter", ".topic", function() {
var el = $(this);
el.addClass("hover");
showTopicViz();
@@ -895,9 +894,12 @@
posX = e.gesture.center.pageX - _o.left,
posY = e.gesture.center.pageY - _o.top;
if (posX < 140) {
- deSync();
- localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale)));
- throttledShowLocal();
+ if (timelock) {
+ player.setCurrentTime(Math.max(0, Math.min(data.duration, Math.floor(posY / yscale))));
+ } else {
+ localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, Math.floor(posY / yscale)));
+ throttledShowLocal();
+ }
}
})
.on("dragstart", function(e) {
@@ -909,9 +911,12 @@
.on("drag", function(e) {
if (isDragging && e.gesture) {
var delta = Math.floor(e.gesture.deltaY / (scrollGlobal ? yscale : - localyscale));
- deSync();
- localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, startPos + delta));
- throttledShowLocal();
+ if (timelock) {
+ player.setCurrentTime(Math.max(0, Math.min(data.duration, startPos + delta)));
+ } else {
+ localpos = Math.max(localduration / 2, Math.min(data.duration - localduration / 2, startPos + delta));
+ throttledShowLocal();
+ }
}
})
.on("touch", function(e) {
@@ -968,8 +973,8 @@
var moveInterval;
- $(".left-arrow").data("direction", -3);
- $(".right-arrow").data("direction", 3);
+ $(".left-arrow").data("direction", 3);
+ $(".right-arrow").data("direction", -3);
$(".left-arrow,.right-arrow")
.on("mouseenter touchstart", function() {
@@ -977,13 +982,22 @@
var moveDirection = $(this).data("direction");
moveInterval = setInterval(function() {
var t = $(".topics-block");
- t.css("left", + moveDirection + parseFloat(t.css("left")));
+ var newcss = + moveDirection + parseFloat(t.css("left"));
+ if ((moveDirection > 0 && newcss > 30) || (moveDirection < 0 && newcss < (t.parent().width() - t.children().width() - 30))) {
+ clearInterval(moveInterval);
+ return;
+ }
+ t.css("left", newcss);
}, 20);
})
.on("mouseleave touchend", function() {
clearInterval(moveInterval);
});
+ $(".play-localtweets").on("click", "li", function() {
+ player.setCurrentTime(parseInt($(this).attr("data-timestamp")));
+ return false;
+ });
$(".play-localtweets").on("click", "li a", function() {
var userid = $(this).attr("data-user-id");
$.getJSON(
@@ -1022,6 +1036,18 @@
return false;
});
+ var timelock = true;
+
+ $(".lock-button").click(function() {
+ timelock = !timelock;
+ if (timelock) {
+ $(this).addClass("locked").attr("title", "Découpler la lecture et la visualisation");
+ } else {
+ $(this).removeClass("locked").attr("title", "Coupler la lecture et la visualisation");
+ }
+ return false;
+ });
+
checkOrGoNext();
}
--- a/js/startscreen.js Wed Apr 10 15:39:28 2013 +0200
+++ b/js/startscreen.js Tue Apr 16 18:26:43 2013 +0200
@@ -168,10 +168,6 @@
var selectedBlocks = $(".topic.selected, .topic.hover"),
sbl = selectedBlocks.length,
topicBlocks = $(".topic");
- if (!sbl && topicBlocks.length < sortedTopics.length) {
- selectedBlocks = topicBlocks;
- sbl = selectedBlocks.length;
- }
var topicsAndColors = [];
selectedBlocks.each(function() {
var el = $(this),
--- a/playscreen-frame.html Wed Apr 10 15:39:28 2013 +0200
+++ b/playscreen-frame.html Tue Apr 16 18:26:43 2013 +0200
@@ -9,20 +9,6 @@
<link rel="stylesheet" type="text/css" href="css/ipadsim.css" />
<link rel="stylesheet" type="text/css" href="css/socialmedia.css" />
<link rel="stylesheet" type="text/css" href="css/playscreen.css" />
- <script>
- var pathToDwrServlet = "http://159.217.144.101:8050/sia-solr/dwr";
- </script>
- <script src="lib/underscore-min.js"></script>
- <script src="lib/jquery.min.js"></script>
- <script src="lib/jquery-ui.min.js"></script>
- <script src="lib/jquery.mousewheel.min.js"></script>
- <script src="lib/hammer.min.js"></script>
- <script src="lib/raphael-min.js"></script>
- <script src="js/playscreen.js"></script>
- <script src="js/remote-player.js"></script>
- <script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/engine.js"></script>
- <script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/util.js"></script>
- <script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/interface/TopicsBean.js"></script>
</head>
<body>
<div class="iPad-simulator">
@@ -33,6 +19,7 @@
</div>
<div class="play-block shadow-block">
<a class="button play-button" href="#" title="Lecture"></a>
+ <a class="button lock-button locked" href="#" title="Découpler la lecture et la visualisation"></a>
<div class="current-time">0:00:00</div>
<div class="time-separator">/</div>
<div class="duration">0:00:00</div>
@@ -46,9 +33,15 @@
</div>
<div class="play-second-line">
- <div class="topics-block"></div>
- <div class="left-arrow"></div>
- <div class="right-arrow"></div>
+ <div class="topics-block">
+ <ul class="topics-list"></ul>
+ </div>
+ <div class="left-arrow">
+ <div class="inside-arrow"></div>
+ </div>
+ <div class="right-arrow">
+ <div class="inside-arrow"></div>
+ </div>
</div>
<div class="play-bottom">
@@ -68,5 +61,19 @@
</div>
<a class="tv" href="#">Ouvrir la fenêtre TV</a>
</div>
+ <script>
+ var pathToDwrServlet = "http://159.217.144.101:8050/sia-solr/dwr";
+ </script>
+ <script src="lib/underscore-min.js"></script>
+ <script src="lib/jquery.min.js"></script>
+ <script src="lib/jquery-ui.min.js"></script>
+ <script src="lib/jquery.mousewheel.min.js"></script>
+ <script src="lib/hammer.min.js"></script>
+ <script src="lib/raphael-min.js"></script>
+ <script src="js/playscreen.js"></script>
+ <script src="js/remote-player.js"></script>
+ <script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/engine.js"></script>
+ <script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/util.js"></script>
+ <script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/interface/TopicsBean.js"></script>
</body>
</html>
\ No newline at end of file
--- a/playscreen.html Wed Apr 10 15:39:28 2013 +0200
+++ b/playscreen.html Tue Apr 16 18:26:43 2013 +0200
@@ -9,6 +9,53 @@
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/socialmedia.css" />
<link rel="stylesheet" type="text/css" href="css/playscreen.css" />
+ </head>
+ <body>
+ <div class="contents">
+ <div class="play-head">
+ <div class="title-block">
+ <h1>Le débat</h1>
+ </div>
+ <div class="play-block shadow-block">
+ <a class="button play-button" href="#" title="Lecture"></a>
+ <a class="button lock-button locked" href="#" title="Découpler la lecture et la visualisation"></a>
+ <div class="current-time">0:00:00</div>
+ <div class="time-separator">/</div>
+ <div class="duration">0:00:00</div>
+ <a class="button prev-button" href="#" title="Segment précédent"></a>
+ <a class="button next-button" href="#" title="Segment suivant"></a>
+ </div>
+ <div class="explain-block shadow-block">
+ <a class="button home-button" href="startscreen.html" title="Retour"></a>
+ <div class="keyword-search"><a href="startscreen.html" class="placeholder">Rechercher</a></div>
+ </div>
+ </div>
+
+ <div class="play-second-line">
+ <div class="topics-block">
+ <ul class="topics-list"></ul>
+ </div>
+ <div class="left-arrow">
+ <div class="inside-arrow"></div>
+ </div>
+ <div class="right-arrow">
+ <div class="inside-arrow"></div>
+ </div>
+ </div>
+
+ <div class="play-bottom">
+ <div class="play-svg"></div>
+ <div class="play-images"></div>
+ <div class="global-position"></div>
+ <div class="local-position"></div>
+ <ul class="play-localtweets"></ul>
+ <ul class="play-tagcloud"></ul>
+ <div class="user-tweets">
+ <h3 class="user-tweets-head">Tweets par <span class="user-name"></span></h3>
+ <ul class="user-tweets-list"></ul>
+ </div>
+ </div>
+ </div>
<script>
var pathToDwrServlet = "http://159.217.144.101:8050/sia-solr/dwr";
</script>
@@ -24,45 +71,5 @@
<script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/engine.js"></script>
<script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/util.js"></script>
<script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/interface/TopicsBean.js"></script>
- </head>
- <body>
- <div class="contents">
- <div class="play-head">
- <div class="title-block">
- <h1>Le débat</h1>
- </div>
- <div class="play-block shadow-block">
- <a class="button play-button" href="#" title="Lecture"></a>
- <div class="current-time">0:00:00</div>
- <div class="time-separator">/</div>
- <div class="duration">0:00:00</div>
- <a class="button prev-button" href="#" title="Segment précédent"></a>
- <a class="button next-button" href="#" title="Segment suivant"></a>
- </div>
- <div class="explain-block shadow-block">
- <a class="button home-button" href="startscreen.html" title="Retour"></a>
- <div class="keyword-search"><a href="startscreen.html" class="placeholder">Rechercher</a></div>
- </div>
- </div>
-
- <div class="play-second-line">
- <div class="topics-block"></div>
- <div class="left-arrow"></div>
- <div class="right-arrow"></div>
- </div>
-
- <div class="play-bottom">
- <div class="play-svg"></div>
- <div class="play-images"></div>
- <div class="global-position"></div>
- <div class="local-position"></div>
- <ul class="play-localtweets"></ul>
- <ul class="play-tagcloud"></ul>
- <div class="user-tweets">
- <h3 class="user-tweets-head">Tweets par <span class="user-name"></span></h3>
- <ul class="user-tweets-list"></ul>
- </div>
- </div>
- </div>
</body>
</html>
\ No newline at end of file
