# HG changeset patch # User veltr # Date 1366129603 -7200 # Node ID 685c406c7d8cc917930ff4538919ae6b3d4a68b1 # Parent cd85b780f4a5510ca6a8ea9f07b57e25edc14afb Changed time lock mode diff -r cd85b780f4a5 -r 685c406c7d8c css/playscreen.css --- 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 { diff -r cd85b780f4a5 -r 685c406c7d8c img/arrows.png Binary file img/arrows.png has changed diff -r cd85b780f4a5 -r 685c406c7d8c img/sprites.png Binary file img/sprites.png has changed diff -r cd85b780f4a5 -r 685c406c7d8c js/playscreen.js --- 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 ''; + } + var li = '
    • '; + + '" data-timestamp="999999">' + + line(wordsToShow.filter(function( v, k ) { + return !(k % 2); + })) + + line(wordsToShow.filter(function( v, k ) { + return !!(k % 2); + })) + + ''; 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(); } diff -r cd85b780f4a5 -r 685c406c7d8c js/startscreen.js --- 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), diff -r cd85b780f4a5 -r 685c406c7d8c playscreen-frame.html --- 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 @@ - - - - - - - - - - - -
    @@ -33,6 +19,7 @@
    +
    0:00:00
    /
    0:00:00
    @@ -46,9 +33,15 @@
    -
    -
    -
    +
    + +
    +
    +
    +
    +
    +
    +
    @@ -68,5 +61,19 @@
    Ouvrir la fenêtre TV + + + + + + + + + + + + \ No newline at end of file diff -r cd85b780f4a5 -r 685c406c7d8c playscreen.html --- 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 @@ + + +
    +
    +
    +

    Le débat

    +
    +
    + + +
    0:00:00
    +
    /
    +
    0:00:00
    + + +
    +
    + +
    Rechercher
    +
    +
    + +
    +
    +
      +
      +
      +
      +
      +
      +
      +
      +
      + +
      +
      +
      +
      +
      + + +
      +

      Tweets par

      +
        +
        +
        +
        @@ -24,45 +71,5 @@ - - -
        -
        -
        -

        Le débat

        -
        -
        - -
        0:00:00
        -
        /
        -
        0:00:00
        - - -
        -
        - -
        Rechercher
        -
        -
        - -
        -
        -
        -
        -
        - -
        -
        -
        -
        -
        - - -
        -

        Tweets par

        -
          -
          -
          -
          \ No newline at end of file