metadatacomposer: comparison integration/js/edition.js

Mercurial Mercurial > metadatacomposer / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

integration/js/edition.js

changeset 58	9e14b6f964fe
parent 55	cedadc7d039a
child 62	42919bf5d4e1

equal deleted inserted replaced

-:ba0de15418d1
+:9e14b6f964fe
 '#16a085', '#27ae60', '#2980b9', '#8e44ad',
 '#f39c12', '#d35400', '#c0392b', '#bdc3c7']
 };
+//position de la video setCurrentTime
+$(".indicateur-annotation").draggable({
+axis: "x",
+containment: "parent",
+drag: function(e, ui) {
+var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".timeline-annotations").width() - 2 * ui.helper.width() );
+myMedia.setCurrentTime(t);
+}
+});
+$('.timeline-annotations').bind('click', function(e){
+var x = e.pageX - $(this).offset().left;
+myMedia.setCurrentTime(myMedia.duration * x / $(this).width());
+});
 myProject.onLoad(function() {
-//load Annotations
-myProject.getAnnotationsByTypeTitle("annotations");
 $(".project-title").text(myProject.title);
 myMedia = myProject.getCurrentMedia();
 //load Chapitre
 var _chapters = myProject.getAnnotationsByTypeTitle("chapitrage");
 if(_chapters.length){
 $.each(_chapters, function(k, v){
-var render = false;
+v.color = getRandomColor();
+chapters.push(v);
 if((k+1) == _chapters.length){
-render = true;
+renderChapter();
 }
-newChapter(v, render);
 });
 }
+//load Annotations
+var _annotations = myProject.getAnnotationsByTypeTitle("annotations");
+if(_annotations.length){
+$.each(_annotations, function(k, v){
+v.color = getRandomColor();
+var type = v.content.mimetype.split('-');
+type = type[type.length-1]
+v.type = type;
+annotations.push(v);
+if((k+1) == _annotations.length){
+renderAnnotation();
+}
+});
+}
 //chargement des chapitres et annotations existants
 //  loadInitChapters();
-loadInitAnnotation();
+//loadInitAnnotation();
 IriSP.htmlPlayer(
 myMedia,
 $(".main-video"),
 {
 $('.input-image-'+typeImage).show();
 });
 //select on bibliotheque
-//video
-$('.popup').on('click', '.bibliotheque-video a', function(e){
-e.preventDefault();
-var url = $(this).attr('href');
-currentAnnotation.content.url = url;
-$('.popup').modal('hide');
-$.get('template.html', function(templates){
-var videoWrap = $('#tab-'+global.idAnnotation).find('.annotation-video-content'),
-tplVideo = $(templates).filter('#tpl-video-row').html();
-videoWrap.empty().append(tplVideo);
-});
-});
 //confirmation suppression
 $("#modal-confirm").on('click', '#btn-delete-modal', function(e){
 });
 function loadFormChapter(idChapter){
 currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
 var chapterWrap = $('.chapter-widget-info'),
 indexChapter = _.indexOf(chapters, currentChapter),
 beginTangle = (indexChapter>0) ? true : false,
 endTangle = (indexChapter<(chapters.length-1)) ? true : false;
 var tpl = $(templates).filter('#tpl-chapter-edit').html();
 tpl = Mustache.render(tpl, currentChapter);
 chapterWrap.empty().append(tpl);
 chapterWrap.find('.tag-it').tagit(tagitParam);
 });
+myMedia.setCurrentTime(currentChapter.begin);
 }
 //supprimer
 $('.list-chapter-wrap').on('click', '.btn-delete-chapter', function(e){
 if($('#form-chapter-edit-'+idChapter).length){
 $('#form-chapter-edit-'+idChapter).remove();
 }
 });
+function getRandomColor(){
+return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
+}
 //nouveau chapitre
 function newChapter(dataChapter, render){
 var chapter = new IriSP.Model.Annotation(false, myProject);
 chapter.setMedia(myMedia.id);
 chapter.setBegin(dataChapter.begin);
 chapter.setEnd(dataChapter.end);
 chapter.title = dataChapter.title;
 chapter.description = dataChapter.description;
 chapter.keywords = dataChapter.keywords;
-chapter.color = global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
+chapter.color = getRandomColor();
 chapters.push(chapter);
-if(render){renderChapter();}
+renderChapter();
 loadFormChapter(chapter.id);
 }
 $('.chapter-widget').on('click', '.btn-cut-chapter', function(e){
 e.preventDefault();
 return c.begin;
 });
 chapterSegmentWrap.empty();
 chapterList.empty();
+$.get('template.html', function(templates){
 $.each(chapters, function(k, v){
-//form
-if($('#form-chapter-edit-'+v.id).length){
+//segments
-loadFormChapter(v.id);
+var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration),
-}
+segment = $('<li>'+v.title+'</li>').css({
-//segments
+width : width,
-var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration),
+backgroundColor : v.color
-segment = $('<li>'+v.title+'</li>').css({
+}).attr('id', v.id);
-width : width,
-backgroundColor : v.color
+chapterSegmentWrap.append(segment);
-}).attr('id', v.id);
+//liste
-chapterSegmentWrap.append(segment);
-//liste
-$.get('template.html', function(templates){
 var tplChapterRow = $(templates).filter('#tpl-chapter-row').html();
 tplChapterRow = Mustache.render(tplChapterRow, v);
 chapterList.append(tplChapterRow);
 });
 });
-}
+}//renderChapter()
 //init
 function loadInitChapters(){//nouveau projet, 1 chapitre
 var dataChapter = {
 title : 'New',
 case 'audio':
 break;
 case 'video':
 if(viewType.content.url != ""){
+/*
 var videoWrap = $(tabContent).find('.annotation-video-content'),
 tplVideo = $(templates).filter('#tpl-video-row').html();
+tplVideo = Mustache.render(tplVideo, viewType.content);
 videoWrap.empty().append(tplVideo);
+var videoWrap = $(tabContent).find(".video-container"),
+src = viewType.content.url;
+getVideoPlayer(src, videoWrap);
+*/
+var videoWrap = $(tabContent).find('.annotation-video-content');
+renderVideoInfo(videoWrap, viewType.content);
 }
 break;
 case 'text':
 var cledit = $(tabContent).find('.wysiwyg').cleditor(wysiwygConfig)[0];
 break;
 case 'slideshow':
 $(tabContent).find('.number-spin').spin(spinParam);
 $(tabContent).find('.ui-sortable').sortable({
+start: function (event, ui) {
+$(ui.item).data("startindex", ui.item.index());
+},
 stop : function(event, ui){
 disabledBtnSortable($(this));
-}
+},
+update : function(event, ui){
+var oldIndex = ui.item.data("startindex"),
+newIndex = ui.item.index();
+currentAnnotation.content.images.move(oldIndex, newIndex);
+},
 });
 var diaporama = $(tabContent).find('#diaporama-'+idAnnotation),
 images = viewType.content.images;
 if(images.length){
 $.each(images, function(k,v){
 $('#onglet-'+idAnnotation).remove();
 $('.tab-content #tab-annotation-'+idAnnotation).remove();
 $('#tab-list-annotation').tab('show');
 }
+//video
+function renderVideoInfo(videoWrap, dataVideo){
+$.get('template.html', function(templates){
+var tplVideo = $(templates).filter('#tpl-video-row').html();
+tplVideo = Mustache.render(tplVideo, dataVideo);
+videoWrap.empty().append(tplVideo);
+videoWrap = videoWrap.find(".video-container");
+getVideoPlayer(dataVideo.url, videoWrap);
+});
+}
+$('.popup').on('click', '.bibliotheque-video a', function(e){
+e.preventDefault();
+var url = $(this).attr('data-url'),
+title = $(this).attr('data-title'),
+description = $(this).attr('data-description');
+currentAnnotation.content.url = url;
+currentAnnotation.content.title = title;
+currentAnnotation.content.description = description;
+$('.popup').modal('hide');
+var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content');
+renderVideoInfo(videoWrap, currentAnnotation.content);
+/*
+$.get('template.html', function(templates){
+var videoWrap = $('#tab-annotation-'+currentAnnotation.id).find('.annotation-video-content'),
+tplVideo = $(templates).filter('#tpl-video-row').html();
+tplVideo = Mustache.render(tplVideo, currentAnnotation.content);
+videoWrap.empty().append(tplVideo);
+var videoWrap = videoWrap.find(".video-container"),
+src = url;
+getVideoPlayer(src, videoWrap);
+});
+*/
+});
 //diaporama
 //bibliotheque
 $('.popup').on('click', '.bibliotheque-image a', function(e){
 e.preventDefault();
-var url = $(this).attr('href'),
+var url = $(this).attr('data-url'),
+title = $(this).attr('data-title'),
+description = $(this).attr('data-description'),
 image = {
 id : currentAnnotation.id,
 url : url,
-title : 'titre image',
+title : title,
-description : 'description azerty'
+description : description
 };
 currentAnnotation.content.images.push(image);
 var listDiaporama = $('#diaporama-'+currentAnnotation.id);
 addImageToDiaporama(listDiaporama, image);
 //bouton up / down
 $(document).on('click', '.ui-sortable .btn-sort', function(e){
 e.preventDefault();
 var row = $(this).parents('tr.row-image-diaporama'),
+oldIndex = row.index(),
 listDiaporama = $(this).parents('.list-image-diaporama');
 if($(this).hasClass('down'))
 row.insertAfter(row.next());
 else if($(this).hasClass('up'))
 row.insertBefore(row.prev());
+var newIndex = row.index();
+currentAnnotation.content.images.move(oldIndex, newIndex);
 disabledBtnSortable(listDiaporama);
+});
+$('.tab-content').on('click','.btn-delete-image', function(e){
+e.preventDefault();
+var rowImage = $(this).parents('tr.row-image-diaporama'),
+index = rowImage.index();
+rowImage.remove();
+currentAnnotation.content.images.splice(index, 1);
 });
 function disabledBtnSortable(listDiaporama){
 listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
 listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
 links = new Array();
 $.each(tbody.find('tr'), function(k, v){
 var urlLink = $(v).find('.url-link').val(),
 titleLink = $(v).find('.title-link').val(),
 link = {
-uri : urlLink,
+url : urlLink,
 title : titleLink
 };
 links.push(link);
 });
 currentAnnotation.content.links = links;
 }
 return content;
 }//getContentAnnotationByType
 //test
 //a = $(".wysiwyg").cleditor(wysiwygConfig);
 $('.number-spin').spin(spinParam);
 $('.log-chapters').bind('click', function(e){
 e.preventDefault();
 console.log(chapters.length + ' chapitres',chapters);
 });
 });//ready
+Array.prototype.move = function (old_index, new_index) {
+if (new_index >= this.length) {
+var k = new_index - this.length;
+while ((k--) + 1) {
+this.push(undefined);
+}
+}
+this.splice(new_index, 0, this.splice(old_index, 1)[0]);
+return this; // for testing purposes
+};
+function getVideoPlayer(src, videoWrap){
+var youtubeTemplate = _.template(
+'<iframe width="<%- width %>" height="<%- height %>" src="http://www.youtube.com/embed/<%- ytid %>?rel=0&autoplay=<%- autoplay %>" frameborder="0"></iframe>'
+);
+var htmlTemplate = _.template(
+'<<%- type %> width="<%- width %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>'
+);
+var mediaW = 460,
+mediaH = 345,
+autoplay = false;
+if (/^(https?:\/\/)?(www\.)?youtu\.?be/.test(src)) {
+var urlparts = src.split(/[?&]/g),
+ytid = "",
+vtest = /^v=/;
+urlparts.slice(1).forEach(function(p) {
+if (/^v=/.test(p)) {
+ytid = p.replace(vtest,"");
+}
+});
+if (!ytid) {
+ytid = (urlparts[0].match(/[^\/]+$/) || [""])[0];
+}
+videoWrap.html(youtubeTemplate({
+ytid: ytid,
+width: mediaW,
+height: mediaH,
+autoplay: autoplay
+}));
+return;
+}
+if (/^(https?:\/\/)?(www\.)?vimeo/.test(src)) {
+$.ajax({
+url: "http://vimeo.com/api/oembed.json",
+dataType: "jsonp",
+data: {
+width: mediaW,
+height: mediaH,
+url: src,
+autoplay: autoplay,
+color: "be4477",
+portrait: false,
+title: false,
+byline: false
+},
+success: function(data) {
+videoWrap.html(data.html);
+}
+});
+return;
+}
+if (/^(https?:\/\/)?(www\.)?dailymotion/.test(src)) {
+$.ajax({
+url: "http://www.dailymotion.com/services/oembed",
+dataType: "jsonp",
+data: {
+format: "json",
+maxwidth: mediaW,
+maxheight: mediaH,
+url: src
+},
+success: function(data) {
+videoWrap.html(data.html);
+}
+});
+return;
+}
+if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(src)) {
+$.ajax({
+url: "http://soundcloud.com/oembed",
+dataType: "jsonp",
+data: {
+format: "js",
+show_comments: false,
+auto_play: autoplay,
+show_artwork: false,
+url: src,
+color: "63be6c"
+},
+success: function(data) {
+videoWrap.html(data.html);
+}
+});
+return;
+}
+var extension = (src.match(/\.([\d\w]+)$/) || ["",""])[1],
+mimetype = 'video' + "/" + extension,
+fallbacks = { "video/webm": "mp4", "video/mp4": "webm" },
+canPlay = document.createElement("video").canPlayType(mimetype);
+if (!canPlay) {
+src = src.replace(/\.[\d\w]+$/,"." + fallbacks[mimetype]);
+}
+console.log(mimetype, canPlay, src);
+videoWrap.html(htmlTemplate({
+type: 'video',
+src: src,
+width: mediaW,
+height: mediaH,
+autoplay: "" + autoplay
+}));
+}

metadatacomposer