# HG changeset patch # User veltr # Date 1357319403 -3600 # Node ID 458cc4576415f11532830e1b49344eb8ee11b8ec # Parent f4a03f8bc37ae05ca19e9037aebc69f8ae318819 Various fixes diff -r f4a03f8bc37a -r 458cc4576415 integration/content.html --- a/integration/content.html Fri Dec 21 15:45:10 2012 +0100 +++ b/integration/content.html Fri Jan 04 18:10:03 2013 +0100 @@ -2,6 +2,7 @@ + The End - Visionnage de la séquence "{{content.title}}" @@ -53,7 +54,7 @@ - +
@@ -93,35 +94,32 @@
-
- + -
- -
- -
+
+ +
+ +
-
+
-
+
-
    -
  • - 0:00 -
    • -
  • - 0:00 -
    • -
+
    +
  • + 0:00 +
    • +
  • + 0:00 +
    • +
-
+
- + - -
+
diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial-webfont.eot Binary file integration/css/arial-webfont.eot has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial-webfont.svg --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/css/arial-webfont.svg Fri Jan 04 18:10:03 2013 +0100 @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial-webfont.ttf Binary file integration/css/arial-webfont.ttf has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial-webfont.woff Binary file integration/css/arial-webfont.woff has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial_black-webfont.eot Binary file integration/css/arial_black-webfont.eot has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial_black-webfont.svg --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/css/arial_black-webfont.svg Fri Jan 04 18:10:03 2013 +0100 @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial_black-webfont.ttf Binary file integration/css/arial_black-webfont.ttf has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial_black-webfont.woff Binary file integration/css/arial_black-webfont.woff has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial_bold-webfont.eot Binary file integration/css/arial_bold-webfont.eot has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial_bold-webfont.svg --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/css/arial_bold-webfont.svg Fri Jan 04 18:10:03 2013 +0100 @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial_bold-webfont.ttf Binary file integration/css/arial_bold-webfont.ttf has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/css/arial_bold-webfont.woff Binary file integration/css/arial_bold-webfont.woff has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/css/theend.css --- a/integration/css/theend.css Fri Dec 21 15:45:10 2012 +0100 +++ b/integration/css/theend.css Fri Jan 04 18:10:03 2013 +0100 @@ -47,26 +47,6 @@ border-spacing: 0; } -.clearfix:after { - content: "."; - display: block; - clear: both; - visibility: hidden; - line-height: 0; - height: 0; -} - -.clearfix { - display: inline-block; -} - -html[xmlns] .clearfix { - display: block; -} - -* html .clearfix { - height: 1%; -} .clear{ clear: both; } @@ -78,17 +58,50 @@ /* END RESET.CSS */ +/* FONTS */ +@font-face { + font-family: "arial_black"; + src: url('arial_black-webfont.eot'); + src: url('arial_black-webfont.eot?#iefix') format('embedded-opentype'), + url('arial_black-webfont.woff') format('woff'), + url('arial_black-webfont.ttf') format('truetype'), + url('arial_black-webfont.svg#arial_blackregular') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "arial_base"; + src: url('arial_bold-webfont.eot'); + src: url('arial_bold-webfont.eot?#iefix') format('embedded-opentype'), + url('arial_bold-webfont.woff') format('woff'), + url('arial_bold-webfont.ttf') format('truetype'), + url('arial_bold-webfont.svg#arialbold') format('svg'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: "arial_base"; + src: url('arial-webfont.eot'); + src: url('arial-webfont.eot?#iefix') format('embedded-opentype'), + url('arial-webfont.woff') format('woff'), + url('arial-webfont.ttf') format('truetype') + url('arial-webfont.svg#arialregular') format('svg'); + font-weight: normal; + font-style: normal; +} +/* END FONTS */ + fieldset, img, button { border: none; } body { - font-family: "AvenirNext-Regular", "Arial", "Helvetica", sans-serif; + font-family: "arial_base", sans-serif; background-color: black; font-size: 12px; overflow: hidden; } h1 { - font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif; + font-family: "arial_black", sans-serif; font-size: 43px; color: #ffffff; text-transform: uppercase; @@ -162,7 +175,7 @@ footer ul { margin: 0; - font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; + font-weight: bold; font-size: 9px; color: #b9b9b9; text-transform: uppercase; @@ -215,7 +228,7 @@ } .float_sequence li { display: inline-block; - margin: 0 3px; + margin: 0 6px; } .float_sequence li a { display: inline-block; @@ -224,7 +237,7 @@ width: 100%; margin-bottom: 9px; - font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif; + font-family: "arial_black", sans-serif; font-size: 16px; color: #777777; } @@ -235,7 +248,7 @@ #title_sequence a:link, #title_sequence a:visited, #title_sequence a:active{ - font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif; + font-family: "arial_black", sans-serif; font-size: 16px; color: #777777; } @@ -250,15 +263,14 @@ } #tag_sequence { margin-right: 209px; - - font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; font-size: 13px; + font-weight: bold; } /*----------------------------------------------*/ /* Search/Tag */ /*----------------------------------------------*/ input { - font-family: "AvenirNext-Regular", "Arial", "Helvetica", sans-serif; + font-family: "arial_base", sans-serif; font-size: 13px; color: #000000; height: 24px; @@ -284,7 +296,6 @@ input[type=submit] { width: 33px; background-color: #636363; - font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; font-weight: bold; font-size: 15px; text-align: center; @@ -322,7 +333,7 @@ background: none; } #controlContainer{ -overflow: hidden; + overflow: hidden; } #controlbar { position: absolute; @@ -330,73 +341,55 @@ left: 0; right: 0; height: 50px; -} -.container_hcentering { - margin: 0 auto; - width: 620px; + text-align: center; + font-size: 0; + white-space: nowrap; } #progressContainer { width: 240px; padding-top: 8px; - margin: 0 16px; -} - /* - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + margin: 0 16px; + display: inline-block; + font-size: 10px; } -footer:hover #controlbar { - bottom: 0; -} -*/ -.progress_bar { - height: 5px; - border-radius: 2px; -} + #progressBar { position: relative; z-index: 1; width: 240px; - background: #cccccc; border: none; + background: #777777; border: none; + height: 5px; + border-radius: 2px; } #progressBar .ui-slider-handle { - background: transparent url(../img/controls.png) no-repeat top left; - width: 21px; - height: 22px; + width: 12px; + height: 12px; + background: #000000; + border-radius: 2px; + border: 2px solid #777777; + -moz-box-shadow: 0 0 5px 3px #000000; + -webkit-box-shadow: 0 0 5px 3px #000000; + box-shadow: 0 0 5px 3px #000000; background-position: -72px 0; - margin-left: -10px; + margin-left: -8px; margin-top: -2px; - border: none; - border-radius: 0; - padding: 0; cursor: hand; - /* - * width: 12px; height: 12px; margin-left: -6px; border-radius: 6px; top: -4px; - */ } #progressBar .ui-slider-range { - background: #777777; border: none; -} - -#progressBar .ui-slider-handle.pause { - background-position: -72px -22px; -} - -#progressBar a.ui-state-focus { - border: none; + background: #ffffff; border: none; + border-radius: 2px; } #btnPlayPause { - width: 21px; - height: 22px; - background-position: -72px 0; + width: 16px; + height: 18px; + background-position: -77px 0; margin-top: 2px; } #btnPlayPause.pause { - background-position: -72px -22px; + background-position: -77px -17px; } footer ul#progressTime{ @@ -410,7 +403,7 @@ .btn, .sdhdbtn { background: transparent url(../img/controls.png) no-repeat top left; - float: left; + display: inline-block; vertical-align: top; } .btn, .sdhdgroup { @@ -419,7 +412,7 @@ .sdhdgroup { margin-top: 5px; - float: left; + display: inline-block; vertical-align: top; } .sdhdbtn { @@ -507,3 +500,38 @@ height: 46px; min-height: 46px; max-height: 46px; text-align: center; overflow: hidden; vertical-align: middle; } + +/* ARROWS */ + +.arrow { + position: absolute; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; background: url(../img/arrows.png); + cursor: pointer; +} + +.arrow_left { + left: 0; top: 50%; margin-left: 0; background-position: top left; +} + +.arrow_right { + right: 0; top: 50%; margin-left: 0; background-position: top right; +} + +.arrow_top { + top: 0; left: 50%; margin-top: 0; background-position: bottom left; +} + +.arrow_bottom { + bottom: 0; left: 50%; margin-top: 0; background-position: bottom right; +} + +/* AUTOCOMPLETE */ + +.ui-autocomplete { + max-height: 100px; + max-width: 170px; + overflow: auto; +} +.home .ui-autocomplete { + max-width: 210px; + max-height: 500px; +} diff -r f4a03f8bc37a -r 458cc4576415 integration/home.html --- a/integration/home.html Fri Dec 21 15:45:10 2012 +0100 +++ b/integration/home.html Fri Jan 04 18:10:03 2013 +0100 @@ -2,6 +2,7 @@ + The End - Visionnage par tag "{{tag}}" @@ -27,7 +28,7 @@ - +
@@ -38,6 +39,10 @@
+
+
+
+
diff -r f4a03f8bc37a -r 458cc4576415 integration/img/arrows.png Binary file integration/img/arrows.png has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/img/controls.png Binary file integration/img/controls.png has changed diff -r f4a03f8bc37a -r 458cc4576415 integration/js/contentplayer.js --- a/integration/js/contentplayer.js Fri Dec 21 15:45:10 2012 +0100 +++ b/integration/js/contentplayer.js Fri Jan 04 18:10:03 2013 +0100 @@ -30,31 +30,14 @@ var timeSlider = $("#progressBar"), slidersRange = 1000, wasPaused = true, - lastVal = 0, - isClicking = false; + lastVal = 0; timeSlider.slider({ range: "min", value: 0, min: 0, max: slidersRange, slide: function(event, ui) { - if (isClicking && Math.abs(lastVal - ui.value) > 10) { - isClicking = false; - } - if (!isClicking && currentMedia) { - currentMedia.setCurrentTime(currentMedia.duration * ui.value / slidersRange); - } - }, - start: function(event, ui) { - isClicking = true; - lastVal = ui.value; - }, - stop: function(event, ui) { - if (isClicking && currentMedia) { - timeSlider.slider("value", slidersRange * currentMedia.getCurrentTime() / currentMedia.duration); - playOrPause(); - } - isClicking = false; + currentMedia.setCurrentTime(currentMedia.duration * ui.value / slidersRange); } }); @@ -129,28 +112,41 @@ $(window).on("resize", resizeTagsDrag); resizeTagsDrag(); - var taginput = $("#form_tag input[type=text]"); + var taginput = $("#form_tag input[type=text]"), + replacerx; taginput.autocomplete({ source: function(params, response) { - var rx = new RegExp(params.term,"gi"); + var charsub = [ '[aáàâä]', '[cç]', '[eéèêë]', '[iíìîï]', '[oóòôö]' ], + term = params.term.replace(/([\\\*\+\?\|\{\[\}\]\(\)\^\$\.\#\/])/gm, '\\$1'); + _(charsub).each(function(chars) { + var tmprx = new RegExp(chars,"gim"); + term = term.replace(tmprx, chars); + }); + var searchrx = new RegExp("(^|\\s)" + term, "i"); + replacerx = new RegExp("(^|\\s)(" + term + ")", "gi"); response( _(globalTags) .chain() .keys() .filter(function(tag) { - return rx.test(tag) + return searchrx.test(tag) }) - .shuffle() - .first(5) + .sortBy(_.identity) .value() ); } - }); + }).data("autocomplete")._renderItem = function(ul, item) { + return $( "
  • " ) + .data( "item.autocomplete", item ) + .append( "" + item.label.replace(replacerx, '$1$2') + "" ) + .appendTo( ul ); + }; taginput.on("keyup input paste", function() { taginput.val(taginput.val().toUpperCase()); }); $("#form_tag").on("submit", function() { var _tagvalue = taginput.val().toUpperCase(); + taginput.val(""); if (_tagvalue && currentSegment) { /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */ var _exportedAnnotations = new IriSP.Model.List(directory), @@ -177,15 +173,14 @@ _annotation.setAnnotationType(_annotationType.id); - _annotation.title = _tagvalue; + _annotation.title = currentSegment.title; _annotation.created = new Date(); /* Date de création de l'annotation */ _annotation.description = _tagvalue; _annotation.setTags([_tag.id]); /*Liste des ids de tags */ - /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */ - _export.creator = "theend"; - _export.created = new Date(); + _annotation.creator = "theend"; + _annotation.created = new Date(); /* Ajout de l'annotation à la liste à exporter */ _exportedAnnotations.push(_annotation); /* Ajout de la liste à exporter à l'objet Source */ @@ -299,21 +294,12 @@ } var videoid = "video_" + media.id, videoEl = $('
  • " ) .data( "item.autocomplete", item ) - .append( "" + labels[item.type] + " : " + item.label + "" ) + .append( "" + labels[item.type] + " : " + item.label.replace(replacerx, '$1$2') + "" ) .appendTo( ul ); }; + acInput.on("keyup input paste", function() { + acInput.val(acInput.val().toUpperCase()); + }); $("#form_tag").submit(function() { return false; @@ -28,6 +59,33 @@ tagsInner.draggable(); + var dragtimeout; + + $(".arrow_left").data({xdelta: 6, ydelta: 0}); + $(".arrow_right").data({xdelta: -6, ydelta: 0}); + $(".arrow_top").data({xdelta: 0, ydelta: 6}); + $(".arrow_bottom").data({xdelta: 0, ydelta: -6}); + + $(".arrow") + .mousedown(function() { + var deltas = $(this).data(), + move = function() { + tagsInner.css({ + "left": deltas.xdelta + parseInt(tagsInner.css("left")), + "top": deltas.ydelta + parseInt(tagsInner.css("top")) + }); + } + window.clearInterval(dragtimeout); + dragtimeout = window.setInterval(move, 20); + move(); + }) + .on( + "mouseout mouseup", + function() { + window.clearInterval(dragtimeout); + } + ); + function resizeTags() { tagsInner.css({ "margin-left": - Math.floor(tagsInner.width()/2) + "px", @@ -47,7 +105,7 @@ }, success: function(data) { _(data.objects).each(function(content) { - var fpmatch = content.front_project.match(/projects\/([0-9a-f\-]+)/), + var fpmatch = (content.front_project || "").match(/projects\/([0-9a-f\-]+)/), fproj = fpmatch ? fpmatch[1] : ""; acdata.push({ label: content.title, @@ -96,7 +154,7 @@ var l = ordered.length, max = ordered[0].weight, min = Math.min(max - 1, ordered[l - 1].weight), - colorscale = 128 / (max - min), + colorscale = 160 / (max - min), ncols = Math.floor(.65*Math.sqrt(l)), nlines = Math.ceil(l/ncols); var cells = _(nlines * ncols) @@ -130,7 +188,7 @@ } _html += ""; if (c.tag) { - var color = Math.floor( 127 + (c.tag.weight - min) * colorscale ); + var color = Math.floor( 95 + (c.tag.weight - min) * colorscale ); _html += ' 10) { - isClicking = false; - } - if (!isClicking && currentSegment && currentMedia) { - var t = currentSegment.begin + ( currentSegment.getDuration() * ui.value / slidersRange ); - currentMedia.setCurrentTime(t); - } - }, - start: function(event, ui) { - isClicking = true; - lastVal = ui.value; - }, - stop: function(event, ui) { - if (isClicking && currentMedia && currentSegment) { - var t = currentMedia.getCurrentTime() - currentSegment.begin; - timeSlider.slider("value", slidersRange * t / currentSegment.getDuration()); - playOrPause(); - } - isClicking = false; + var t = currentSegment.begin + ( currentSegment.getDuration() * ui.value / slidersRange ); + currentMedia.setCurrentTime(t); } }); @@ -143,28 +125,41 @@ $(window).on("resize", resizeTagsDrag); resizeTagsDrag(); - var taginput = $("#form_tag input[type=text]"); + var taginput = $("#form_tag input[type=text]"), + replacerx; taginput.autocomplete({ source: function(params, response) { - var rx = new RegExp(params.term,"gi"); + var charsub = [ '[aáàâä]', '[cç]', '[eéèêë]', '[iíìîï]', '[oóòôö]' ], + term = params.term.replace(/([\\\*\+\?\|\{\[\}\]\(\)\^\$\.\#\/])/gm, '\\$1'); + _(charsub).each(function(chars) { + var tmprx = new RegExp(chars,"gim"); + term = term.replace(tmprx, chars); + }); + var searchrx = new RegExp("(^|\\s)" + term, "i"); + replacerx = new RegExp("(^|\\s)(" + term + ")", "gi"); response( _(globalTags) .chain() .keys() .filter(function(tag) { - return rx.test(tag) + return searchrx.test(tag) }) - .shuffle() - .first(5) + .sortBy(_.identity) .value() ); } - }); + }).data("autocomplete")._renderItem = function(ul, item) { + return $( "
  • " ) + .data( "item.autocomplete", item ) + .append( "" + item.label.replace(replacerx, '$1$2') + "" ) + .appendTo( ul ); + }; taginput.on("keyup input paste", function() { taginput.val(taginput.val().toUpperCase()); }); $("#form_tag").on("submit", function() { var _tagvalue = taginput.val().toUpperCase(); + taginput.val(""); if (_tagvalue && currentSegment) { /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */ var _exportedAnnotations = new IriSP.Model.List(directory), @@ -191,15 +186,14 @@ _annotation.setAnnotationType(_annotationType.id); - _annotation.title = _tagvalue; + _annotation.title = currentSegment.title; _annotation.created = new Date(); /* Date de création de l'annotation */ _annotation.description = _tagvalue; _annotation.setTags([_tag.id]); /*Liste des ids de tags */ - /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */ - _export.creator = "theend"; - _export.created = new Date(); + _annotation.creator = "theend"; + _annotation.created = new Date(); /* Ajout de l'annotation à la liste à exporter */ _exportedAnnotations.push(_annotation); /* Ajout de la liste à exporter à l'objet Source */ @@ -292,7 +286,7 @@ currentMedia.setCurrentTime(currentSegment.begin); if (!currentMedia.loaded) { $(".video-wait").show(); - $("#btnPlayPause, .video-wait, #progressBar .ui-slider-handle").removeClass("pause"); + $("#btnPlayPause, .video-wait").removeClass("pause"); } currentMedia.play(); } @@ -301,11 +295,11 @@ var vals = _(currentSegment.__tags).values(), max = Math.max.apply(Math, vals), min = Math.min(max - 1, Math.min.apply(Math, vals)), - b = 128 / (max - min); + b = 160 / (max - min); var html = _(currentSegment.__tags) .chain() .map(function(v, k) { - var c = Math.floor( 127 + (v - min) * b ); + var c = Math.floor( 95 + (v - min) * b ); return '
  • '), - seekCache = undefined, mp4_file = videourl.replace(/\.webm$/i,'.mp4'), webm_file = videourl.replace(/\.mp4$/i,'.webm'), - mp4_src = $(''), - webm_src = $(''); - - mp4_src.attr({ - src: mp4_file, - type: "video/mp4" - }) - webm_src.attr({ - src: webm_file, - type: "video/webm" - }); - + mediaEl = videoEl[0], + can_play_mp4 = !!mediaEl.canPlayType('video/mp4'), + can_play_webm = !!mediaEl.canPlayType('video/webm'); + videoEl.attr({ id : videoid }).css({ @@ -358,9 +343,25 @@ width : "100%", height : "100%" }); - videoEl.append(mp4_src).append(webm_src); + + if (can_play_mp4 && can_play_webm) { + var mp4_src = $(''), + webm_src = $(''); + mp4_src.attr({ + src: mp4_file, + type: "video/mp4" + }); + webm_src.attr({ + src: webm_file, + type: "video/webm" + }); + + videoEl.append(mp4_src).append(webm_src); + } else { + videoEl.attr("src", can_play_mp4 ? mp4_file : webm_file); + } + $("#video_sequence").append(videoEl); - var mediaEl = videoEl[0]; media.show = function() { videoEl.show(); @@ -451,13 +452,13 @@ media.on("play", function() { if (media === currentMedia) { - $("#btnPlayPause, .video-wait, #progressBar .ui-slider-handle").addClass("pause"); + $("#btnPlayPause, .video-wait").addClass("pause"); } }); media.on("pause", function() { if (media === currentMedia) { - $("#btnPlayPause, .video-wait, #progressBar .ui-slider-handle").removeClass("pause"); + $("#btnPlayPause, .video-wait").removeClass("pause"); } }); @@ -471,9 +472,7 @@ media.setCurrentTime(currentSegment.begin); } $("#current").text(new IriSP.Model.Time(t).toString()); - if (!isClicking) { - timeSlider.slider("value", slidersRange * t / currentSegment.getDuration()); - } + timeSlider.slider("value", slidersRange * t / currentSegment.getDuration()); } else { media.pause(); goToPart((currentIndex + 1) % seqCount) diff -r f4a03f8bc37a -r 458cc4576415 integration/tag.html --- a/integration/tag.html Fri Dec 21 15:45:10 2012 +0100 +++ b/integration/tag.html Fri Jan 04 18:10:03 2013 +0100 @@ -2,6 +2,7 @@ + The End - Visionnage par tag "{{tag}}" @@ -25,7 +26,7 @@ mashup_by_tag : "http://theend-integ.ftinfo.fr/theend/ldt/mashupbytag/", annotations_by_timecode : "http://theend-integ.ftinfo.fr/theend/api/ldt/1.0/segments/bytimecode/__CONTENT_ID__/__BEGIN__/__END__", post_annotation : "testdata/post-test.php", - tag_page : "niv2_rv.html?tag=__TAG__" + tag_page : "tag.html?tag=__TAG__" }; if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") { var res = window.localStorage.getItem("resolution") || "SD"; @@ -57,7 +58,7 @@ - +
    @@ -97,38 +98,36 @@
    -
    - + -
    - -
    - -
    +
    + +
    + +
    -
    +
    -
    +
    -
      -
    • - 00:00 -
      • -
    • - 00:00 -
      • -
    +
      +
    • + 00:00 +
      • +
    • + 00:00 +
      • +
    -
    +
    - + - - + - -
    + + +
    diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial-webfont.eot Binary file src/theend/static/theend/css/arial-webfont.eot has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial-webfont.svg --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/theend/static/theend/css/arial-webfont.svg Fri Jan 04 18:10:03 2013 +0100 @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial-webfont.ttf Binary file src/theend/static/theend/css/arial-webfont.ttf has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial-webfont.woff Binary file src/theend/static/theend/css/arial-webfont.woff has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial_black-webfont.eot Binary file src/theend/static/theend/css/arial_black-webfont.eot has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial_black-webfont.svg --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/theend/static/theend/css/arial_black-webfont.svg Fri Jan 04 18:10:03 2013 +0100 @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial_black-webfont.ttf Binary file src/theend/static/theend/css/arial_black-webfont.ttf has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial_black-webfont.woff Binary file src/theend/static/theend/css/arial_black-webfont.woff has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial_bold-webfont.eot Binary file src/theend/static/theend/css/arial_bold-webfont.eot has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial_bold-webfont.svg --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/theend/static/theend/css/arial_bold-webfont.svg Fri Jan 04 18:10:03 2013 +0100 @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial_bold-webfont.ttf Binary file src/theend/static/theend/css/arial_bold-webfont.ttf has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/arial_bold-webfont.woff Binary file src/theend/static/theend/css/arial_bold-webfont.woff has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/css/theend.css --- a/src/theend/static/theend/css/theend.css Fri Dec 21 15:45:10 2012 +0100 +++ b/src/theend/static/theend/css/theend.css Fri Jan 04 18:10:03 2013 +0100 @@ -47,26 +47,6 @@ border-spacing: 0; } -.clearfix:after { - content: "."; - display: block; - clear: both; - visibility: hidden; - line-height: 0; - height: 0; -} - -.clearfix { - display: inline-block; -} - -html[xmlns] .clearfix { - display: block; -} - -* html .clearfix { - height: 1%; -} .clear{ clear: both; } @@ -78,17 +58,50 @@ /* END RESET.CSS */ +/* FONTS */ +@font-face { + font-family: "arial_black"; + src: url('arial_black-webfont.eot'); + src: url('arial_black-webfont.eot?#iefix') format('embedded-opentype'), + url('arial_black-webfont.woff') format('woff'), + url('arial_black-webfont.ttf') format('truetype'), + url('arial_black-webfont.svg#arial_blackregular') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: "arial_base"; + src: url('arial_bold-webfont.eot'); + src: url('arial_bold-webfont.eot?#iefix') format('embedded-opentype'), + url('arial_bold-webfont.woff') format('woff'), + url('arial_bold-webfont.ttf') format('truetype'), + url('arial_bold-webfont.svg#arialbold') format('svg'); + font-weight: bold; + font-style: normal; +} +@font-face { + font-family: "arial_base"; + src: url('arial-webfont.eot'); + src: url('arial-webfont.eot?#iefix') format('embedded-opentype'), + url('arial-webfont.woff') format('woff'), + url('arial-webfont.ttf') format('truetype') + url('arial-webfont.svg#arialregular') format('svg'); + font-weight: normal; + font-style: normal; +} +/* END FONTS */ + fieldset, img, button { border: none; } body { - font-family: "AvenirNext-Regular", "Arial", "Helvetica", sans-serif; + font-family: "arial_base", sans-serif; background-color: black; font-size: 12px; overflow: hidden; } h1 { - font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif; + font-family: "arial_black", sans-serif; font-size: 43px; color: #ffffff; text-transform: uppercase; @@ -162,7 +175,7 @@ footer ul { margin: 0; - font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; + font-weight: bold; font-size: 9px; color: #b9b9b9; text-transform: uppercase; @@ -215,7 +228,7 @@ } .float_sequence li { display: inline-block; - margin: 0 3px; + margin: 0 6px; } .float_sequence li a { display: inline-block; @@ -224,7 +237,7 @@ width: 100%; margin-bottom: 9px; - font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif; + font-family: "arial_black", sans-serif; font-size: 16px; color: #777777; } @@ -235,7 +248,7 @@ #title_sequence a:link, #title_sequence a:visited, #title_sequence a:active{ - font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif; + font-family: "arial_black", sans-serif; font-size: 16px; color: #777777; } @@ -250,15 +263,14 @@ } #tag_sequence { margin-right: 209px; - - font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; font-size: 13px; + font-weight: bold; } /*----------------------------------------------*/ /* Search/Tag */ /*----------------------------------------------*/ input { - font-family: "AvenirNext-Regular", "Arial", "Helvetica", sans-serif; + font-family: "arial_base", sans-serif; font-size: 13px; color: #000000; height: 24px; @@ -284,7 +296,6 @@ input[type=submit] { width: 33px; background-color: #636363; - font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; font-weight: bold; font-size: 15px; text-align: center; @@ -322,7 +333,7 @@ background: none; } #controlContainer{ -overflow: hidden; + overflow: hidden; } #controlbar { position: absolute; @@ -330,73 +341,55 @@ left: 0; right: 0; height: 50px; -} -.container_hcentering { - margin: 0 auto; - width: 620px; + text-align: center; + font-size: 0; + white-space: nowrap; } #progressContainer { width: 240px; padding-top: 8px; - margin: 0 16px; -} - /* - -webkit-transition: all 0.3s ease-in-out; - -moz-transition: all 0.3s ease-in-out; - -o-transition: all 0.3s ease-in-out; - transition: all 0.3s ease-in-out; + margin: 0 16px; + display: inline-block; + font-size: 10px; } -footer:hover #controlbar { - bottom: 0; -} -*/ -.progress_bar { - height: 5px; - border-radius: 2px; -} + #progressBar { position: relative; z-index: 1; width: 240px; - background: #cccccc; border: none; + background: #777777; border: none; + height: 5px; + border-radius: 2px; } #progressBar .ui-slider-handle { - background: transparent url(../img/controls.png) no-repeat top left; - width: 21px; - height: 22px; + width: 12px; + height: 12px; + background: #000000; + border-radius: 2px; + border: 2px solid #777777; + -moz-box-shadow: 0 0 5px 3px #000000; + -webkit-box-shadow: 0 0 5px 3px #000000; + box-shadow: 0 0 5px 3px #000000; background-position: -72px 0; - margin-left: -10px; + margin-left: -8px; margin-top: -2px; - border: none; - border-radius: 0; - padding: 0; cursor: hand; - /* - * width: 12px; height: 12px; margin-left: -6px; border-radius: 6px; top: -4px; - */ } #progressBar .ui-slider-range { - background: #777777; border: none; -} - -#progressBar .ui-slider-handle.pause { - background-position: -72px -22px; -} - -#progressBar a.ui-state-focus { - border: none; + background: #ffffff; border: none; + border-radius: 2px; } #btnPlayPause { - width: 21px; - height: 22px; - background-position: -72px 0; + width: 16px; + height: 18px; + background-position: -77px 0; margin-top: 2px; } #btnPlayPause.pause { - background-position: -72px -22px; + background-position: -77px -17px; } footer ul#progressTime{ @@ -410,7 +403,7 @@ .btn, .sdhdbtn { background: transparent url(../img/controls.png) no-repeat top left; - float: left; + display: inline-block; vertical-align: top; } .btn, .sdhdgroup { @@ -419,7 +412,7 @@ .sdhdgroup { margin-top: 5px; - float: left; + display: inline-block; vertical-align: top; } .sdhdbtn { @@ -507,3 +500,38 @@ height: 46px; min-height: 46px; max-height: 46px; text-align: center; overflow: hidden; vertical-align: middle; } + +/* ARROWS */ + +.arrow { + position: absolute; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; background: url(../img/arrows.png); + cursor: pointer; +} + +.arrow_left { + left: 0; top: 50%; margin-left: 0; background-position: top left; +} + +.arrow_right { + right: 0; top: 50%; margin-left: 0; background-position: top right; +} + +.arrow_top { + top: 0; left: 50%; margin-top: 0; background-position: bottom left; +} + +.arrow_bottom { + bottom: 0; left: 50%; margin-top: 0; background-position: bottom right; +} + +/* AUTOCOMPLETE */ + +.ui-autocomplete { + max-height: 100px; + max-width: 170px; + overflow: auto; +} +.home .ui-autocomplete { + max-width: 210px; + max-height: 500px; +} diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/img/arrows.png Binary file src/theend/static/theend/img/arrows.png has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/img/controls.png Binary file src/theend/static/theend/img/controls.png has changed diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/js/contentplayer.js --- a/src/theend/static/theend/js/contentplayer.js Fri Dec 21 15:45:10 2012 +0100 +++ b/src/theend/static/theend/js/contentplayer.js Fri Jan 04 18:10:03 2013 +0100 @@ -30,31 +30,14 @@ var timeSlider = $("#progressBar"), slidersRange = 1000, wasPaused = true, - lastVal = 0, - isClicking = false; + lastVal = 0; timeSlider.slider({ range: "min", value: 0, min: 0, max: slidersRange, slide: function(event, ui) { - if (isClicking && Math.abs(lastVal - ui.value) > 10) { - isClicking = false; - } - if (!isClicking && currentMedia) { - currentMedia.setCurrentTime(currentMedia.duration * ui.value / slidersRange); - } - }, - start: function(event, ui) { - isClicking = true; - lastVal = ui.value; - }, - stop: function(event, ui) { - if (isClicking && currentMedia) { - timeSlider.slider("value", slidersRange * currentMedia.getCurrentTime() / currentMedia.duration); - playOrPause(); - } - isClicking = false; + currentMedia.setCurrentTime(currentMedia.duration * ui.value / slidersRange); } }); @@ -129,28 +112,41 @@ $(window).on("resize", resizeTagsDrag); resizeTagsDrag(); - var taginput = $("#form_tag input[type=text]"); + var taginput = $("#form_tag input[type=text]"), + replacerx; taginput.autocomplete({ source: function(params, response) { - var rx = new RegExp(params.term,"gi"); + var charsub = [ '[aáàâä]', '[cç]', '[eéèêë]', '[iíìîï]', '[oóòôö]' ], + term = params.term.replace(/([\\\*\+\?\|\{\[\}\]\(\)\^\$\.\#\/])/gm, '\\$1'); + _(charsub).each(function(chars) { + var tmprx = new RegExp(chars,"gim"); + term = term.replace(tmprx, chars); + }); + var searchrx = new RegExp("(^|\\s)" + term, "i"); + replacerx = new RegExp("(^|\\s)(" + term + ")", "gi"); response( _(globalTags) .chain() .keys() .filter(function(tag) { - return rx.test(tag) + return searchrx.test(tag) }) - .shuffle() - .first(5) + .sortBy(_.identity) .value() ); } - }); + }).data("autocomplete")._renderItem = function(ul, item) { + return $( "
  • " ) + .data( "item.autocomplete", item ) + .append( "" + item.label.replace(replacerx, '$1$2') + "" ) + .appendTo( ul ); + }; taginput.on("keyup input paste", function() { taginput.val(taginput.val().toUpperCase()); }); $("#form_tag").on("submit", function() { var _tagvalue = taginput.val().toUpperCase(); + taginput.val(""); if (_tagvalue && currentSegment) { /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */ var _exportedAnnotations = new IriSP.Model.List(directory), @@ -177,13 +173,12 @@ _annotation.setAnnotationType(_annotationType.id); - _annotation.title = _tagvalue; + _annotation.title = currentSegment.title; _annotation.created = new Date(); /* Date de création de l'annotation */ _annotation.description = _tagvalue; _annotation.setTags([_tag.id]); /*Liste des ids de tags */ - /* Les données créateur/date de création sont envoyées non pas dans l'annotation, mais dans le projet */ _annotation.creator = "theend"; _annotation.created = new Date(); /* Ajout de l'annotation à la liste à exporter */ @@ -202,7 +197,6 @@ var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0) segmentAtPost.__tags[_tagvalue] = n; showCurrentTags(); - taginput.val(""); }, error: function(_xhr, _error, _thrown) { console.log("Error when sending annotation", _thrown); @@ -300,21 +294,12 @@ } var videoid = "video_" + media.id, videoEl = $('
  • " ) .data( "item.autocomplete", item ) - .append( "" + labels[item.type] + " : " + item.label + "" ) + .append( "" + labels[item.type] + " : " + item.label.replace(replacerx, '$1$2') + "" ) .appendTo( ul ); }; + acInput.on("keyup input paste", function() { + acInput.val(acInput.val().toUpperCase()); + }); $("#form_tag").submit(function() { return false; @@ -28,6 +59,33 @@ tagsInner.draggable(); + var dragtimeout; + + $(".arrow_left").data({xdelta: 6, ydelta: 0}); + $(".arrow_right").data({xdelta: -6, ydelta: 0}); + $(".arrow_top").data({xdelta: 0, ydelta: 6}); + $(".arrow_bottom").data({xdelta: 0, ydelta: -6}); + + $(".arrow") + .mousedown(function() { + var deltas = $(this).data(), + move = function() { + tagsInner.css({ + "left": deltas.xdelta + parseInt(tagsInner.css("left")), + "top": deltas.ydelta + parseInt(tagsInner.css("top")) + }); + } + window.clearInterval(dragtimeout); + dragtimeout = window.setInterval(move, 20); + move(); + }) + .on( + "mouseout mouseup", + function() { + window.clearInterval(dragtimeout); + } + ); + function resizeTags() { tagsInner.css({ "margin-left": - Math.floor(tagsInner.width()/2) + "px", diff -r f4a03f8bc37a -r 458cc4576415 src/theend/static/theend/js/tagplayer.js --- a/src/theend/static/theend/js/tagplayer.js Fri Dec 21 15:45:10 2012 +0100 +++ b/src/theend/static/theend/js/tagplayer.js Fri Jan 04 18:10:03 2013 +0100 @@ -3,8 +3,7 @@ project = directory.remoteSource({ url: IriSP.endpoints.mashup_by_tag, url_params: { - tag: opts.tag, - sort: "weight" + tag: opts.tag }, serializer: IriSP.serializers.ldt }), @@ -35,33 +34,15 @@ var timeSlider = $("#progressBar"), slidersRange = 1000, wasPaused = true, - lastVal = 0, - isClicking = false; + lastVal = 0; timeSlider.slider({ range: "min", value: 0, min: 0, max: slidersRange, slide: function(event, ui) { - if (isClicking && Math.abs(lastVal - ui.value) > 10) { - isClicking = false; - } - if (!isClicking && currentSegment && currentMedia) { - var t = currentSegment.begin + ( currentSegment.getDuration() * ui.value / slidersRange ); - currentMedia.setCurrentTime(t); - } - }, - start: function(event, ui) { - isClicking = true; - lastVal = ui.value; - }, - stop: function(event, ui) { - if (isClicking && currentMedia && currentSegment) { - var t = currentMedia.getCurrentTime() - currentSegment.begin; - timeSlider.slider("value", slidersRange * t / currentSegment.getDuration()); - playOrPause(); - } - isClicking = false; + var t = currentSegment.begin + ( currentSegment.getDuration() * ui.value / slidersRange ); + currentMedia.setCurrentTime(t); } }); @@ -144,28 +125,41 @@ $(window).on("resize", resizeTagsDrag); resizeTagsDrag(); - var taginput = $("#form_tag input[type=text]"); + var taginput = $("#form_tag input[type=text]"), + replacerx; taginput.autocomplete({ source: function(params, response) { - var rx = new RegExp(params.term,"gi"); + var charsub = [ '[aáàâä]', '[cç]', '[eéèêë]', '[iíìîï]', '[oóòôö]' ], + term = params.term.replace(/([\\\*\+\?\|\{\[\}\]\(\)\^\$\.\#\/])/gm, '\\$1'); + _(charsub).each(function(chars) { + var tmprx = new RegExp(chars,"gim"); + term = term.replace(tmprx, chars); + }); + var searchrx = new RegExp("(^|\\s)" + term, "i"); + replacerx = new RegExp("(^|\\s)(" + term + ")", "gi"); response( _(globalTags) .chain() .keys() .filter(function(tag) { - return rx.test(tag) + return searchrx.test(tag) }) - .shuffle() - .first(5) + .sortBy(_.identity) .value() ); } - }); + }).data("autocomplete")._renderItem = function(ul, item) { + return $( "
  • " ) + .data( "item.autocomplete", item ) + .append( "" + item.label.replace(replacerx, '$1$2') + "" ) + .appendTo( ul ); + }; taginput.on("keyup input paste", function() { taginput.val(taginput.val().toUpperCase()); }); $("#form_tag").on("submit", function() { var _tagvalue = taginput.val().toUpperCase(); + taginput.val(""); if (_tagvalue && currentSegment) { /* Création d'une liste d'annotations contenant une annotation afin de l'envoyer au serveur */ var _exportedAnnotations = new IriSP.Model.List(directory), @@ -192,7 +186,7 @@ _annotation.setAnnotationType(_annotationType.id); - _annotation.title = _tagvalue; + _annotation.title = currentSegment.title; _annotation.created = new Date(); /* Date de création de l'annotation */ _annotation.description = _tagvalue; @@ -216,7 +210,6 @@ var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0) segmentAtPost.__tags[_tagvalue] = n; showCurrentTags(); - taginput.val(""); }, error: function(_xhr, _error, _thrown) { console.log("Error when sending annotation", _thrown); @@ -293,7 +286,7 @@ currentMedia.setCurrentTime(currentSegment.begin); if (!currentMedia.loaded) { $(".video-wait").show(); - $("#btnPlayPause, .video-wait, #progressBar .ui-slider-handle").removeClass("pause"); + $("#btnPlayPause, .video-wait").removeClass("pause"); } currentMedia.play(); } @@ -335,21 +328,12 @@ } var videoid = "video_" + media.id, videoEl = $('