--- a/integration/css/style.css Fri May 24 11:02:32 2013 +0200
+++ b/integration/css/style.css Fri May 24 17:23:35 2013 +0200
@@ -95,6 +95,13 @@
-moz-border-radius: 0px;
border-radius: 0px;}
+.video-wrap{position: relative;}
+.annotations-display{}
+.annotation-display-view{display:none;text-align:center; line-height:200px;background-color: #fff;position: absolute; width: 200px; margin-left: -100px; height: 200px; margin-top: -100px; top: 50%; left: 50%;}
+.list-current-annotations{position: absolute;bottom: 40px; left: 20px; margin: 0;}
+.list-current-annotations li{list-style: none; margin-top: 4px;}
+.list-current-annotations a{text-align:center; line-height:20px; color:#FFF;display: inline-block; background-color: #589; width: 20px; height: 20px; }
+.list-current-annotations a:hover{text-decoration: none;}
/* Tangle */
.time-tangle {
color: #2c3e50; cursor: w-resize; position: relative;
--- a/integration/edition.html Fri May 24 11:02:32 2013 +0200
+++ b/integration/edition.html Fri May 24 17:23:35 2013 +0200
@@ -56,7 +56,15 @@
</div>
<div class="row">
<div class="span6">
- <div class="main-video"></div>
+ <div class="video-wrap">
+ <div class="main-video"></div>
+ <div class="annotations-display">
+ <div class="annotation-display-view"></div>
+ <ul class="list-current-annotations">
+
+ </ul>
+ </div>
+ </div>
<div class="timeline-annotations-wrap">
<div class="indicateur-annotation"></div>
<div class="timeline-annotations"></div>
--- a/integration/js/edition.js Fri May 24 11:02:32 2013 +0200
+++ b/integration/js/edition.js Fri May 24 17:23:35 2013 +0200
@@ -53,12 +53,67 @@
}else{
btnCutChapter.css("left",pos);
}
+
+ //annotations view
+ var currentAnnotationsDisplay = new Array();
+ $.each(annotations, function(k, v){
+
+ if(v.begin <= t && v.end >= t){
+ currentAnnotationsDisplay.push(v.id);
+ if(!$('#item-current-annotation-'+v.id).length){
+ var itemAnnotation =
+ $('<li>')
+ .attr('id', 'item-current-annotation-'+v.id)
+ .attr('data-id', v.id)
+ .append(
+ $('<a>')
+ .css('backgroundColor', v.color)
+ .attr('data-id', v.id)
+ .attr('href', '#')
+ .append(
+ $('<i>').addClass('icon-'+getIcon(v.type))
+ )
+ );
+ $('.list-current-annotations').append(itemAnnotation)
+ }
+ }
+ });
+ $.each($('.list-current-annotations li'), function(k, v){
+ var idAnnotation = $(this).attr('data-id'),
+ annotationDisplayView = $('.annotation-display-view');
+ if($.inArray(idAnnotation, currentAnnotationsDisplay)<0){//il ne doit plus être affiché
+ $('#item-current-annotation-'+idAnnotation).remove();
+ if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
+ annotationDisplayView.hide();
+ }
+ }
+ });
+
+
});//timeupdate
});//myProject.onLoad
+//display annotation view
+$('.list-current-annotations').on('click', 'a', function(e){
+ e.preventDefault();
+ var annotationDisplayView = $('.annotation-display-view'),
+ idAnnotation = $(this).attr('data-id');
+ var annotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
-//--modal
+ if(annotationDisplayView.attr('data-id') == idAnnotation && annotationDisplayView.is(":visible")){
+ annotationDisplayView.hide();
+ }else{
+ annotationDisplayView
+ .attr('data-id', idAnnotation)
+ .css('backgroundColor', annotation.color)
+ .text(annotation.type)
+ .show();
+ }
+});
+
+//########### modal
+
$(document).on('click', 'a.open-modal', function(e){
var diaporama = $(this).attr('data-diaporama'),
idAnnotation = $(this).attr('data-id');
@@ -425,10 +480,12 @@
var dataView;
if(_.isUndefined(data)){//nouveau
+ var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
+ endAnnotation = (currentTimePlusUnMin<myMedia.duration) ? currentTimePlusUnMin : myMedia.duration;
var dataAnnotation = {
title : 'Nouveau',
- begin : 60 * 1000,
- end : 60 * 1000 * 2,
+ begin : myMedia.currentTime,
+ end : endAnnotation,
description : 'description',
type : type,
keywords : []
@@ -461,17 +518,16 @@
//particularité selon type
switch(type){
- case 'son': iconTab = 'volume-up';
+ case 'son':
break;
- case 'video': iconTab = 'film';
+ case 'video':
break;
case 'text':
- iconTab = 'align-left';
$(tabContent).find('.wysiwyg').cleditor(wysiwygConfig);
break;
- case 'html': iconTab = 'link';
+ case 'html':
break;
- case 'diaporama': iconTab = 'picture';
+ case 'diaporama':
$(tabContent).find('.number-spin').spin(spinParam);
$(tabContent).find('.ui-sortable').sortable({
stop : function(event, ui){
@@ -481,7 +537,7 @@
break;
}
- dataView.iconTab = iconTab;
+ dataView.iconTab = getIcon(type);
var tplOnglet = $(templates).filter('#tpl-onglet').html();
var onglet = Mustache.render(tplOnglet, dataView);
@@ -490,6 +546,24 @@
});
}//openTab()
+ function getIcon(type){
+ var icon;
+ switch(type){
+ case 'son': icon = 'volume-up';
+ break;
+ case 'video': icon = 'film';
+ break;
+ case 'text':
+ icon = 'align-left';
+ break;
+ case 'html': icon = 'link';
+ break;
+ case 'diaporama': icon = 'picture';
+ break;
+ }
+ return icon;
+ }
+
//définit currentAnnotation quand la tab s'ouvre
$('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) {
var idAnnotation = $(e.target).attr('data-id');
@@ -640,54 +714,6 @@
};
}
-//milliseconds To 12h12m12s
-function millisecondsToString(milliseconds) {
- var oneHour = 3600000;
- var oneMinute = 60000;
- var oneSecond = 1000;
- var seconds = 0;
- var minutes = 0;
- var hours = 0;
- var result;
-
- if (milliseconds >= oneHour) {
- hours = Math.floor(milliseconds / oneHour);
- }
-
- milliseconds = hours > 0 ? (milliseconds - hours * oneHour) : milliseconds;
-
- if (milliseconds >= oneMinute) {
- minutes = Math.floor(milliseconds / oneMinute);
- }
-
- milliseconds = minutes > 0 ? (milliseconds - minutes * oneMinute) : milliseconds;
-
- if (milliseconds >= oneSecond) {
- seconds = Math.floor(milliseconds / oneSecond);
- }
-
- milliseconds = seconds > 0 ? (milliseconds - seconds * oneSecond) : milliseconds;
-
- if (hours > 0) {
- result = (hours > 9 ? hours : "0" + hours) + "h";
- } else {
- result = "";
- }
-
- if (minutes > 0) {
- result += (minutes > 9 ? minutes : "0" + minutes) + "m";
- } else {
- result += "00m";
- }
-
- if (seconds > 0) {
- result += (seconds > 9 ? seconds : "0" + seconds) + "s";
- } else {
- result += "00s";
- }
-
- return result;
-}
//test
$(".wysiwyg").cleditor(wysiwygConfig);
@@ -703,10 +729,6 @@
$('.slider-duration').slider(configSlider);
-
-
-
-
$(".tag-it").tagit();
});//ready
\ No newline at end of file