--- a/css/playscreen.css Thu Apr 04 17:44:59 2013 +0200
+++ b/css/playscreen.css Wed Apr 10 15:39:28 2013 +0200
@@ -23,9 +23,25 @@
width: 402px; height: 30px;
}
-.play-button, .next-button {
- float: left; width: 30px; margin: 5px; font-size: 18px;
- line-height: 20px; height: 20px; cursor: pointer;
+.button {
+ float: left; width: 18px; margin: 5px 4px;
+ height: 18px; background: url(../img/sprites.png);
+}
+
+.button:hover {
+ opacity: .5;
+}
+
+.play-button.playing {
+ background-position: -18px 0;
+}
+
+.next-button {
+ background-position: -36px 0;
+}
+
+.prev-button {
+ background-position: -54px 0;
}
.duration, .time-separator, .current-time {
@@ -34,7 +50,7 @@
}
.time-separator {
- width: 10px; text-align: center;
+ width: 6px; text-align: center;
}
.duration, .current-time {
width: 140px; margin: 0 8px;
@@ -49,7 +65,7 @@
.keyword-search {
line-height: 20px; padding: 0 5px; margin-top: 4px; border: 1px solid #000000; width: 300px; font-size: 18px;
- background: #666666;
+ background: #666666; float: left;
}
.keyword-search a {
@@ -68,6 +84,10 @@
position: absolute; left: 8px; top: 86px; bottom: 8px; right: 8px; overflow: hidden;
}
+.home-button {
+ background-position: -36px -18px;
+}
+
.play-svg {
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
--- a/css/startscreen.css Thu Apr 04 17:44:59 2013 +0200
+++ b/css/startscreen.css Wed Apr 10 15:39:28 2013 +0200
@@ -20,8 +20,12 @@
}
.play-button {
- float: left; margin: 8px; font-size: 44px;
- line-height: 50px; color: #FFFFFF; text-decoration: none;
+ float: left; margin: 15px 8px; width: 36px; height: 36px;
+ background: url(../img/sprites.png) 0 -18px;
+}
+
+.play-button:hover {
+ opacity: .5;
}
.duration {
Binary file img/sprites.png has changed
--- a/js/playscreen.js Thu Apr 04 17:44:59 2013 +0200
+++ b/js/playscreen.js Wed Apr 10 15:39:28 2013 +0200
@@ -4,6 +4,20 @@
var deltaT = new Date("Wed, 02 May 2012 19:00:00 +0000") / 1000 + adjust;
+function secsToString(seconds) {
+ var hours = Math.floor(seconds/3600),
+ minutes = Math.floor(seconds/60) % 60,
+ secs = Math.floor(seconds % 60);
+ function pad(n) {
+ var r = n.toString();
+ while (r.length < 2) {
+ r = "0" + r;
+ }
+ return r;
+ }
+ return (hours ? (hours + ":") : "") + pad(minutes) + ":" + pad(secs);
+}
+
function solrUrl(table, params) {
var u = "http://159.217.144.101:8050/sia-solr/" + table + "/select?" + $.param(params) + "&wt=json&json.wrf=?";
console.log(u);
@@ -12,6 +26,42 @@
function showData() {
+ data.chapters = [];
+
+ data.segments.forEach(function(segment, index) {
+ var topics = segment.topics.filter(function(t) {
+ return t.topic !== topicPoubelle;
+ }).map(function(t) {
+ return t.topic
+ });
+ var openchapters = data.chapters.filter(function(c) {
+ return c.open;
+ });
+ openchapters.forEach(function(c) {
+ var i = topics.indexOf(c.topic);
+ if (i == -1) {
+ c.open = false;
+ } else {
+ c.endMMSO = index;
+ c.endTime = segment.end;
+ topics.splice(i, 1);
+ }
+ });
+
+ if (topics.length) {
+ topics.forEach(function(t) {
+ data.chapters.push({
+ startMMSO: index,
+ endMMSO: index,
+ startTime: segment.start,
+ endTime: segment.end,
+ topic: t,
+ open: true
+ })
+ })
+ }
+ });
+
data.topiclabels.forEach(function(v) {
var words = _(v.words).map(function(v, k) {
return {
@@ -49,20 +99,6 @@
})
var ordertag = 0;
-
- function secsToString(seconds) {
- var hours = Math.floor(seconds/3600),
- minutes = Math.floor(seconds/60) % 60,
- secs = Math.floor(seconds % 60);
- function pad(n) {
- var r = n.toString();
- while (r.length < 2) {
- r = "0" + r;
- }
- return r;
- }
- return (hours ? (hours + ":") : "") + pad(minutes) + ":" + pad(secs);
- }
$(".duration").text(secsToString(data.duration));
@@ -120,10 +156,44 @@
return parseInt($(this).attr("data-topic-id"));
})
);
- for (var i = 0; i < data.segments.length; i++) {
- var mmso = data.segments[i];
- if (mmso.start >= player.currentTime && hasTopics(mmso, topics)) {
- player.setCurrentTime(mmso.start);
+ for (var i = 0; i < data.chapters.length; i++) {
+ var chap = data.chapters[i];
+ if (chap.startTime > player.currentTime && topics.indexOf(chap.topic) !== -1) {
+ player.setCurrentTime(chap.startTime);
+ throttledShowLocal();
+ return;
+ }
+ }
+ /* If next not found, loop around ! */
+ for (var i = 0; i < data.chapters.length; i++) {
+ var chap = data.chapters[i];
+ if (topics.indexOf(chap.topic) !== -1) {
+ player.setCurrentTime(chap.startTime);
+ throttledShowLocal();
+ return;
+ }
+ }
+ }
+
+ function goToPrev() {
+ var topics = Array.prototype.slice.call(
+ $(".topic.selected").map(function() {
+ return parseInt($(this).attr("data-topic-id"));
+ })
+ );
+ for (var i = data.chapters.length; i--;) {
+ var chap = data.chapters[i];
+ if (chap.startTime < (player.currentTime - 2) && topics.indexOf(chap.topic) !== -1) {
+ player.setCurrentTime(chap.startTime);
+ throttledShowLocal();
+ return;
+ }
+ }
+ /* If previous not found, loop around ! */
+ for (var i = data.chapters.length; i--;) {
+ var chap = data.chapters[i];
+ if (topics.indexOf(chap.topic) !== -1) {
+ player.setCurrentTime(chap.startTime);
throttledShowLocal();
return;
}
@@ -502,7 +572,9 @@
+ '<% if (show_link) { %><a href="#" data-user-id="<%- data.from_user_id %>"><% } %>'
+ '<img src="<%- data.profile_image_url %>" /><% if (show_link) { %></a><% } %>'
+ '<p><% if (show_link) { %><a href="#" data-user-id="<%- data.from_user_id %>"><% } %>'
- + '@<%- data.from_user_name %>:<% if (show_link) { %></a><% } %> <%= htext %></p></li>'),
+ + '@<%- data.from_user_name %>:<% if (show_link) { %></a><% } %> <%= htext %></p>'
+ + '<% if (show_time) { %><p><%- secsToString(timestamp) %></p><% } %>'
+ + '</li>'),
callnum = 0,
tweetstructure = {},
requestedtweets = {},
@@ -563,6 +635,12 @@
var randtweets = data.randomtweets.filter(function(tw) {
return (tw.timestamp > (localpos - localduration / 2)) && (tw.timestamp < (localpos + localduration / 2))
});
+ if (selectedWord) {
+ var rx = new RegExp(selectedWord.replace(/(\W)/gm,'\\$1'),'im');
+ randtweets = randtweets.filter(function(tw) {
+ return rx.test(tw.data.text);
+ });
+ }
var mod = Math.ceil(randtweets.length / 8);
randtweets = randtweets.filter(function(v,k) {
return !(k % mod);
@@ -585,6 +663,7 @@
tweetstoshow.forEach(function(tw) {
tw.show_link = true;
+ tw.show_time = false;
});
tweetstoshow.sort(function(a, b) {
@@ -755,10 +834,10 @@
player.duration = data.duration;
player.on("play", function() {
- $(".play-button").html("▐ ▌");
+ $(".play-button").attr("title","Pause").addClass("playing");
});
player.on("pause", function() {
- $(".play-button").text("▶");
+ $(".play-button").attr("title","Lecture").removeClass("playing");
});
player.on("timeupdate", function(t) {
playTime.text(secsToString(t));
@@ -779,10 +858,19 @@
} else {
player.pause();
}
+ return false;
});
- $(".next-button").click(goToNext);
+ $(".next-button").click(function() {
+ goToNext();
+ return false;
+ });
+ $(".prev-button").click(function() {
+ goToPrev();
+ return false;
+ });
+
$(".topics-block").on("mouseenter", ".topic", function() {
var el = $(this);
el.addClass("hover");
@@ -922,7 +1010,8 @@
weight: 0,
data: tweet,
htext: _(tweet.text).escape(),
- show_link: false
+ show_link: false,
+ show_time: true
});
},"");
$(".user-tweets").show();
--- a/playscreen-frame.html Thu Apr 04 17:44:59 2013 +0200
+++ b/playscreen-frame.html Wed Apr 10 15:39:28 2013 +0200
@@ -32,14 +32,16 @@
<h1>Le débat</h1>
</div>
<div class="play-block shadow-block">
- <div class="play-button">▶</div>
+ <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>
- <div class="next-button">▶▎</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">
- <div class="keyword-search"><a href="startscreen.html" class="placeholder">Rechercher</a></div>
+ <a class="button home-button" href="startscreen-frame.html" title="Retour"></a>
+ <div class="keyword-search"><a href="startscreen-frame.html" class="placeholder">Rechercher</a></div>
</div>
</div>
--- a/playscreen.html Thu Apr 04 17:44:59 2013 +0200
+++ b/playscreen.html Wed Apr 10 15:39:28 2013 +0200
@@ -32,13 +32,15 @@
<h1>Le débat</h1>
</div>
<div class="play-block shadow-block">
- <div class="play-button">▶</div>
+ <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>
- <div class="next-button">▶▎</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>
--- a/startscreen-frame.html Thu Apr 04 17:44:59 2013 +0200
+++ b/startscreen-frame.html Wed Apr 10 15:39:28 2013 +0200
@@ -29,8 +29,8 @@
<h1>Le débat</h1>
</div>
<div class="play-block shadow-block">
- <a class="play-button" href="playscreen-frame.html">▶</a>
- <div class="duration">0:00:00</div>
+ <a class="play-button" href="playscreen-frame.html" title="Lire les topics sélectionnés"></a>
+ <div class="duration">2:50:00</div>
</div>
<div class="explain-block shadow-block">
<h3>Recherchez les sujets de l'émission par mots-clés</h3>
--- a/startscreen.html Thu Apr 04 17:44:59 2013 +0200
+++ b/startscreen.html Wed Apr 10 15:39:28 2013 +0200
@@ -29,8 +29,8 @@
<h1>Le débat</h1>
</div>
<div class="play-block shadow-block">
- <a class="play-button" href="playscreen.html">▶</a>
- <div class="duration">0:00:00</div>
+ <a class="play-button" href="playscreen.html" title="Lire les topics sélectionnés"></a>
+ <div class="duration">2:50:00</div>
</div>
<div class="explain-block shadow-block">
<h3>Recherchez les sujets de l'émission par mots-clés</h3>
