diff -r ba0de15418d1 -r 9e14b6f964fe integration/js/edition.js --- a/integration/js/edition.js Wed May 29 11:39:49 2013 +0200 +++ b/integration/js/edition.js Wed May 29 18:14:23 2013 +0200 @@ -17,17 +17,23 @@ }; +//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(); @@ -36,20 +42,36 @@ 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, @@ -164,21 +186,7 @@ //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 @@ -245,6 +253,9 @@ function loadFormChapter(idChapter){ + + + currentChapter = _.find(chapters, function(c){ return c.id == idChapter; }); var chapterWrap = $('.chapter-widget-info'), indexChapter = _.indexOf(chapters, currentChapter), @@ -260,6 +271,8 @@ chapterWrap.empty().append(tpl); chapterWrap.find('.tag-it').tagit(tagitParam); }); + + myMedia.setCurrentTime(currentChapter.begin); } @@ -289,6 +302,9 @@ } }); +function getRandomColor(){ + return global.colors[(global.colorsIndex'+v.title+'').css({ - width : width, - backgroundColor : v.color - }).attr('id', v.id); - - chapterSegmentWrap.append(segment); + //segments + var width = Math.floor(v.getDuration() * wChapterSegmentWrap / myMedia.duration), + segment = $('
  • '+v.title+'
    • ').css({ + width : width, + backgroundColor : v.color + }).attr('id', v.id); + + chapterSegmentWrap.append(segment); - //liste - $.get('template.html', function(templates){ + //liste var tplChapterRow = $(templates).filter('#tpl-chapter-row').html(); tplChapterRow = Mustache.render(tplChapterRow, v); chapterList.append(tplChapterRow); - }); }); - } + }//renderChapter() //init function loadInitChapters(){//nouveau projet, 1 chapitre @@ -555,11 +566,24 @@ 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]; @@ -580,9 +604,17 @@ $(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; @@ -653,18 +685,62 @@ $('#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', - description : 'description azerty' + title : title, + description : description }; currentAnnotation.content.images.push(image); @@ -686,6 +762,7 @@ $(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')) @@ -693,9 +770,21 @@ 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'); @@ -734,7 +823,7 @@ var urlLink = $(v).find('.url-link').val(), titleLink = $(v).find('.title-link').val(), link = { - uri : urlLink, + url : urlLink, title : titleLink }; links.push(link); @@ -901,6 +990,8 @@ }//getContentAnnotationByType + + //test //a = $(".wysiwyg").cleditor(wysiwygConfig); @@ -927,4 +1018,130 @@ e.preventDefault(); console.log(chapters.length + ' chapitres',chapters); }); -});//ready \ No newline at end of file +});//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( + '' + ); + + 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 + })); + +} \ No newline at end of file