# HG changeset patch # User veltr # Date 1355486878 -3600 # Node ID 9cc1b66d0880ca2dfc2fcac827c9435470308cce # Parent cb8403125d4dd17867d4ec3ac14fd424df04148e Added directory for Level 2 Integration diff -r cb8403125d4d -r 9cc1b66d0880 integration/content.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/content.html Fri Dec 14 13:07:58 2012 +0100 @@ -0,0 +1,109 @@ + + + + + The End - Visionnage de la séquence "{{content.title}}" + + + + + + + + + + + + + + + + + + + + +
+
+ +

{{content.title}}

+
+
+ +
+ +
+ +
+ + +
+
+
+
+
+ + +
+ +
+ + +
+ +
+
    +
    + +
    +
    + + + + + + + + \ No newline at end of file diff -r cb8403125d4d -r 9cc1b66d0880 integration/css/theend.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/css/theend.css Fri Dec 14 13:07:58 2012 +0100 @@ -0,0 +1,481 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + 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; +} + +input::-moz-focus-inner { + border: 0 none; + padding: 0; +} + +/* END RESET.CSS */ + +fieldset, img, button { + border: none; +} + +body { + font-family: "AvenirNext-Regular", "Arial", "Helvetica", sans-serif; + background-color: black; font-size: 12px; + overflow: hidden; +} +h1 { + font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif; + font-size: 43px; + color: #ffffff; + text-transform: uppercase; +} +b, +strong, +.bold { + font-weight: bold; +} +.uppercase{ + text-transform:uppercase; + } +a, +a:link, +a:visited, +a:active { + text-decoration: none; +} +a.link_img, +a.link_img:link, +a.link_img:visited, +a.link_img:active { + opacity: 0.586; +} +a.link_img:hover { + opacity: 1; +} +footer { + + position: fixed; + bottom: 0; + left: 0; + width: 100%; + + height: 50px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.floatL { + float: left; +} +.floatR { + float: right; +} +/*----------------------------------------------*/ +/* 4- Main HP */ +/*----------------------------------------------*/ +section a, +section a:link, +section a:visited, +section a:active { + color: #ffffff; + } +section a:hover { + color: #bfbfbf; + } +/*----------------------------------------------*/ +/* 9- Footer HP */ +/*----------------------------------------------*/ + +footer a, +footer a:link, +footer a:visited, +footer a:active { + color: #bfbfbf; + } +footer a:hover { + color: #ffffff; + } +footer ul { + margin: 0; + + font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; + font-size: 9px; + color: #b9b9b9; + text-transform: uppercase; +} +footer ul li{ + display: inline; +} +footer ul li a{ + display: inline-block; +} +/*----------------------------------------------*/ +/* 5- Video Page */ +/*----------------------------------------------*/ +.link_prev{ + display: inline-block; + width: 17px; + height: 20px; + margin-left: 6px; + vertical-align: baseline; +} +.link_prev img { + width: 100%; +} +#title_vp { + padding: 19px 0 5px 0; +} +#title_vp h1{ + display: inline-block; + margin-left: 12px; + font-size: 27px; +} + +/*----------------------------------------------*/ +/* Video */ +/*----------------------------------------------*/ +.video_wrap { + width: 100%; position: relative; background: #333333; +} +#video_sequence { + position: relative; width: 237px; height: 100px; margin: 0 auto; +} +.float_sequence { + white-space: nowrap; + overflow: hidden; +} +.float_sequence ul{ + display: inline-block; + margin: 0; + padding: 7px 0; +} +.float_sequence li { + display: inline-block; + margin: 0 3px; +} +.float_sequence li a { + display: inline-block; +} +#title_sequence { + width: 100%; + margin-bottom: 9px; + + font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif; + font-size: 16px; + color: #777777; +} +#title_sequence ul { + left: 36px; +} +#title_sequence a, +#title_sequence a:link, +#title_sequence a:visited, +#title_sequence a:active{ + font-family: "AvenirNext-Heavy", "Arial Black", "Helvetica-Bold", sans-serif; + font-size: 16px; + color: #777777; +} +#title_sequence a:hover { + color: #ffffff; +} +#title_sequence .here a{ + color: #ffffff; +} +#tag_container { + margin: 9px 0; +} +#tag_sequence { + margin-right: 209px; + + font-family: "AvenirNext-Bold", "Arial Bold", "Helvetica-Bold", sans-serif; + font-size: 13px; +} +/*----------------------------------------------*/ +/* Search/Tag */ +/*----------------------------------------------*/ +input { + font-family: "AvenirNext-Regular", "Arial", "Helvetica", sans-serif; + font-size: 13px; + color: #000000; + height: 24px; + border: none; + padding: 0; + margin: 0; + float: left; + -webkit-appearance: none; +} +input[type=text] { + width: 158px; + background-color: #999999; + border-radius: 4px 0 0 4px; + padding:0 8px; +} +input[type=search] { + width: 200px; + background-color: #999999; + border-radius: 4px; + padding:0 8px; + margin-right: 20px; +} +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; + line-height: 24px; + border-radius: 0 4px 4px 0; + margin: 0 5px; +} +input[type=submit]:hover{ + background-color: #ffffff; +} +::-webkit-input-placeholder { + color: #333; text-style: italic; +} +:-moz-placeholder { + color: #333; text-style: italic; +} +:-ms-input-placeholder { + color: #333; text-style: italic; +} +#form_tag, +#form_search { + float: right; + margin-left: 13px; +} +/*----------------------------------------------*/ +/* Video Controls */ +/*----------------------------------------------*/ +.video-wait { + background: url(../img/playvideo.png) rgba(128,128,128,.5) center no-repeat; + font-size: 48px; + z-index: 8; + position: absolute; left: 0; top: 0; width: 100%; height: 100%; +} +.video-wait.pause { + background: none; +} +#controlContainer{ +overflow: hidden; +} +#controlbar { + position: absolute; + bottom: 0px; + left: 0; + right: 0; + height: 50px; +} +.container_hcentering { + margin: 0 auto; + width: 620px; +} +#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; +} +footer:hover #controlbar { + bottom: 0; +} +*/ +.progress_bar { + height: 5px; + border-radius: 2px; +} +#progressBar { + position: relative; + z-index: 1; + width: 240px; + background: #cccccc; border: none; +} + +#progressBar .ui-slider-handle { + background: transparent url(../img/controls.png) no-repeat top left; + width: 21px; + height: 22px; + background-position: -72px 0; + margin-left: -10px; + 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; +} + +#btnPlayPause { + width: 21px; + height: 22px; + background-position: -72px 0; + margin-top: 2px; +} +#btnPlayPause.pause { + background-position: -72px -22px; +} + +footer ul#progressTime{ + margin: 10px 0; + width: 240px; + font-size: 11px; +} +.txt_white { + color: #ffffff; +} + +.btn { + background: transparent url(../img/controls.png) no-repeat top left; + float: left; + margin: 0 16px; +} +#btnSDHD { + background-position: 0 0; + width: 55px; + height: 12px; + margin-top: 5px; +} +#btnSDHD:hover { + background-position: 0 -12px; + width: 55px; + height: 12px; +} +#btnBck { + background-position: -55px 0; + width: 16px; + height: 16px; + margin-top: 3px; +} +#btnBck:hover { + background-position: -55px -16px; +} +#btnFwd { + background-position: -93px 0; + width: 16px; + height: 16px; + margin-top: 3px; +} +#btnFwd:hover { + background-position: -93px -16px; +} +#btnInfo { + background-position: -109px 0; + width: 21px; + height: 21px; +} +#btnInfo:hover { + background-position: -109px -21px; +} +#btnChoice { + background-position: -130px 0; + width: 21px; + height: 21px; +} +#btnChoice:hover { + background-position: -130px -21px; +} + +/* HOME PAGE */ + +.home_header { + margin-top: 20px; +} + +.taglist_container { + position: absolute; top:80px; + bottom: 0; left: 0; right: 0; overflow: hidden; +} + +.taglist_container table { + position: absolute; +} + +.taglist_container td { + width: 180px; min-width: 180px; max-width: 180px; font-size: 16px; + height: 46px; min-height: 46px; max-height: 46px; text-align: center; + overflow: hidden; vertical-align: middle; +} diff -r cb8403125d4d -r 9cc1b66d0880 integration/home.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/home.html Fri Dec 14 13:07:58 2012 +0100 @@ -0,0 +1,47 @@ + + + + + The End - Visionnage par tag "{{tag}}" + + + + + + + + + + + + + + + +
    + + +
    + +
    +
    + +
    +
    +
    + + + + + + \ No newline at end of file diff -r cb8403125d4d -r 9cc1b66d0880 integration/img/controls.png Binary file integration/img/controls.png has changed diff -r cb8403125d4d -r 9cc1b66d0880 integration/img/playvideo.png Binary file integration/img/playvideo.png has changed diff -r cb8403125d4d -r 9cc1b66d0880 integration/img/retour.png Binary file integration/img/retour.png has changed diff -r cb8403125d4d -r 9cc1b66d0880 integration/js/contentplayer.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/js/contentplayer.js Fri Dec 14 13:07:58 2012 +0100 @@ -0,0 +1,434 @@ +IriSP.contentplayer = function(opts) { + var directory = new IriSP.Model.Directory(), + project = directory.remoteSource({ + url: opts.project_url, + serializer: IriSP.serializers.ldt + }), + apidirectory = new IriSP.Model.Directory(), + currentIndex = 0, + currentSegment, + currentMedia, + globalTags = {}, + seqCount; + + var ratio = 2.37; + + function resizeVideo() { + var currentwidth = $(window).width(), + maxheight = $(window).height() - 220, + height = Math.min(maxheight, currentwidth / ratio), + width = ratio * height; + $("#video_sequence").css({ + width: Math.floor(width), + height: Math.floor(height) + }); + } + + $(window).on("resize", resizeVideo); + resizeVideo(); + + var timeSlider = $("#progressBar"), + slidersRange = 1000, + wasPaused = true, + lastVal = 0, + isClicking = false; + 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; + } + }); + + function playOrPause() { + if (currentMedia) { + if (currentMedia.paused) { + currentMedia.play(); + } else { + currentMedia.pause(); + } + } + } + + $(".video-wait, #btnPlayPause").click(function() { + playOrPause(); + return false; + }); + + var segmentdragout = $("#title_sequence"), + segmentdragin = segmentdragout.find("ul") + segmentdragging = false; + + function resizeSegmentDrag() { + var segmentdelta = segmentdragout.width() - segmentdragin.width(); + segmentdragin.draggable("option","containment",segmentdelta < 0 ? [ segmentdelta - 20, 0, 20, 0 ] : "parent") + } + + segmentdragin.draggable({ + axis: "x", + start: function() { + segmentdragging = true; + }, + stop: function() { + segmentdragging = false; + } + }); + + $(window).on("resize", resizeSegmentDrag); + resizeSegmentDrag(); + + segmentdragin.on("mouseup", "li", function() { + if (!segmentdragging) { + var s = project.getElement($(this).attr("data-segment-id")); + if (s) { + currentMedia.setCurrentTime(s.begin); + } + } + }).click(function() { + return false; + }); + + var tagsdragout = $("#tag_sequence"), + tagsdragin = tagsdragout.find("ul") + tagsdragging = false; + + function resizeTagsDrag() { + var tagsdelta = tagsdragout.width() - tagsdragin.width(); + tagsdragin.draggable("option","containment",tagsdelta < 0 ? [ tagsdelta - 20, 0, 20, 0 ] : "parent"); + tagsdragin.css("left",Math.floor(tagsdelta/2)); + } + + tagsdragin.draggable({ + axis: "x", + start: function() { + tagsdragging = true; + }, + stop: function() { + tagsdragging = false; + } + }); + + $(window).on("resize", resizeTagsDrag); + resizeTagsDrag(); + + var taginput = $("#form_tag input[type=text]"); + taginput.autocomplete({ + source: function(params, response) { + var rx = new RegExp(params.term,"gi"); + response( + _(globalTags) + .chain() + .keys() + .filter(function(tag) { + return rx.test(tag) + }) + .shuffle() + .first(5) + .value() + ); + } + }); + taginput.on("keyup input paste", function() { + taginput.val(taginput.val().toUpperCase()); + }); + $("#form_tag").on("submit", function() { + var _tagvalue = taginput.val().toUpperCase(); + 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), + /* Création d'un objet source utilisant un sérialiseur spécifique pour l'export */ + _export = directory.newLocalSource({ + serializer: IriSP.serializers.ldt_annotate + }), + /* Création d'une annotation dans cette source avec un ID généré à la volée (param. false) */ + _annotation = new IriSP.Model.Annotation(false, _export), + /* Si le Type d'Annotation n'existe pas, il est créé à la volée */ + _annotationType = new IriSP.Model.AnnotationType(false, _export), + /* L'objet Tag qui sera envoyé */ + _tag = new IriSP.Model.Tag(false, _export); + /* L'objet Tag doit avoir pour titre le texte du tag envoyé */ + _tag.title = _tagvalue; + /* Si nous avons dû générer un ID d'annotationType à la volée... */ + _annotationType.dont_send_id = true; + /* Il faut inclure le titre dans le type d'annotation */ + _annotationType.title = "Contribution"; + + _annotation.setMedia(currentSegment.getMedia().id); + _annotation.setBegin(currentSegment.begin); + _annotation.setEnd(currentSegment.end); + + _annotation.setAnnotationType(_annotationType.id); + + _annotation.title = _tagvalue; + _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(); + /* Ajout de l'annotation à la liste à exporter */ + _exportedAnnotations.push(_annotation); + /* Ajout de la liste à exporter à l'objet Source */ + _export.addList("annotation",_exportedAnnotations); + + var segmentAtPost = currentSegment; + + IriSP.jQuery.ajax({ + url: IriSP.endpoints.post_annotation, + type: "POST", + contentType: 'application/json', + data: _export.serialize(), /* L'objet Source est sérialisé */ + success: function(_data) { + var n = 1 + (segmentAtPost.__tags[_tagvalue] || 0) + segmentAtPost.__tags[_tagvalue] = n; + showCurrentTags(); + }, + error: function(_xhr, _error, _thrown) { + console.log("Error when sending annotation", _thrown); + } + }); + } + return false; + }); + + project.onLoad(function() { + + currentMedia = project.currentMedia; + + addMedia(currentMedia); + + $("#duration").text(currentMedia.duration.toString()); + $("h1").text(currentMedia.title); //TODO: Remove when on platform + var segmentsHtml = ""; + + project.getAnnotations().forEach(function(s) { + segmentsHtml += '
  • ' + s.title + '
  • '; + var url = IriSP.endpoints.annotations_by_timecode + .replace('__CONTENT_ID__', s.getMedia().id) + .replace('__BEGIN__', s.begin.valueOf()) + .replace('__END__', s.end.valueOf()); + var proj = apidirectory.remoteSource({ + url: url, + serializer: IriSP.serializers.ldt + }); + proj.__segment = s; + proj.onLoad(function() { + proj.__segment.__tags = {}; + proj.getAnnotations().forEach(function(a) { + var tags = a.getTagTexts(); + _(tags).each(function(t) { + var upt = t.toUpperCase(), + nl = 1 + (proj.__segment.__tags[upt] || 0), + ng = 1 + (globalTags[upt] || 0); + proj.__segment.__tags[upt] = nl; + globalTags[upt] = ng; + }); + if (proj.__segment === currentSegment) { + showCurrentTags(); + } + }); + }); + s.on("enter", function() { + currentSegment = s; + showCurrentTags(); + $("#title_sequence li").removeClass("here"); + $("#title_sequence li[data-segment-id='" + s.id + "']").addClass("here"); + }); + }); + + segmentdragin.html(segmentsHtml); + resizeSegmentDrag(); + + currentMedia.play(); + }); + + function showCurrentTags() { + var vals = _(currentSegment.__tags).values(), + max = Math.max.apply(Math, vals), + min = Math.min(max - 1, Math.min.apply(Math, vals)), + b = 160 / (max - min); + var html = _(currentSegment.__tags) + .chain() + .map(function(v, k) { + var c = Math.floor( 95 + (v - min) * b ); + return '
  • ' + + k + + '
  • ' + }) + .shuffle() + .value() + .join(""); + tagsdragin.html(html); + resizeTagsDrag(); + } + + function addMedia(media) { + if (media.has_player) { + return; + } + media.has_player = true; + media.loaded = false; + media.paused = true; + var videourl = media.video; + if (typeof IriSP.video_url_transform === "function") { + videourl = IriSP.video_url_transform(media.video); + } + var videoid = "video_" + media.id, + videoEl = $('