--- a/src/metadatacomposer/static/metadatacomposer/css/styles_player.css Tue Jun 11 15:47:02 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/styles_player.css Tue Jun 11 16:17:48 2013 +0200
@@ -43,6 +43,8 @@
border: none;
}
+/* End of the reset part */
+
html {
overflow: hidden;
}
@@ -50,39 +52,83 @@
/* Fonts */
@font-face {
- font-family: 'Futura-Medium';
- src: url('../fonts/Futura-Medium.woff') format('woff'),
- url('../fonts/Futura-Medium.ttf') format('truetype'),
- url('../fonts/Futura-Medium.svg#Futura-Medium') format('svg');
+ font-family: 'OpenSans';
+ font-weight: 400;
+ src: url('../fonts/OpenSans-Regular.woff') format('woff'),
+ url('../fonts/OpenSans-Regular.ttf') format('truetype'),
+ url('../fonts/OpenSans-Regular.svg#OpenSans') format('svg');
+}
+
+@font-face {
+ font-family: 'OpenSans';
+ font-weight: 700;
+ src: url('../fonts/OpenSans-Bold.woff') format('woff'),
+ url('../fonts/OpenSans-Bold.ttf') format('truetype'),
+ url('../fonts/OpenSans-Bold.svg#OpenSans-Bold') format('svg');
}
@font-face {
- font-family: 'Futura-CondensedExtraBold';
- src: url('../fonts/Futura-CondensedExtraBold.woff') format('woff'),
- url('../fonts/Futura-CondensedExtraBold.ttf') format('truetype'),
- url('../fonts/Futura-CondensedExtraBold.svg#Futura-CondensedExtraBold') format('svg');
+ font-family: 'OpenSans';
+ font-weight: 800;
+ src: url('../fonts/OpenSans-ExtraBold.woff') format('woff'),
+ url('../fonts/OpenSans-ExtraBold.ttf') format('truetype'),
+ url('../fonts/OpenSans-ExtraBold.svg#OpenSans-Extrabold') format('svg');
}
-/* End of the reset part */
+@font-face {
+ font-family: 'OpenSans-CondensedBold';
+ src: url('../fonts/OpenSans-CondBold.woff') format('woff'),
+ url('../fonts/OpenSans-CondBold.ttf') format('truetype'),
+ url('../fonts/OpenSans-CondBold.svg#OpenSans-CondensedBold') format('svg');
+}
body {
- background: #000000; font-family: Helvetica, Arial, sans-serif;
+ background: #000000; font-family: 'OpenSans'; font-weight: 400;
}
/* Top Bar */
.top-bar {
- height: 40px;
+ position: absolute; left: 0; right: 0; top: 0; height: 40px;
+}
+
+.topright-buttons {
+ float: right;
+}
+
+.topright-buttons a {
+ float: left; background-image: url(../img/sprites.png); margin: 8px 8px 0 0; opacity: .5;
+ transition: opacity 0.5s; -webkit-transition: opacity 0.5s; width: 24px; height: 24px;
+}
+
+.topright-buttons a:hover {
+ opacity: 1;
+}
+
+.about {
+ background-position: -24px -232px;
+}
+
+.full-screen {
+ background-position: 0 -232px;
}
/* Main Video Frame */
.main-video {
- height: 562px; position: relative;
+ position: absolute; z-index: 1; top: 40px; left: 0; right: 0; bottom: 96px;
+}
+
+.video-container {
+ position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+}
+
+.video-container video {
+ max-width: 100%; max-height: 100%; margin: 0 auto; display: block;
}
.project-title {
text-align: center; line-height: 40px; font-size: 17px; color: #b0b0b0;
- font-family: 'Futura-Medium';
+ font-weight: 700;
}
.tags {
@@ -91,7 +137,7 @@
.tags-title {
line-height: 40px; padding: 0 15px; font-size: 11px; color: #B8155F;
- font-family: 'Futura-Medium'; text-transform: uppercase;
+ font-weight: 700; text-transform: uppercase;
}
.tags:hover .tags-title {
@@ -146,14 +192,14 @@
.pictolist {
position: absolute;
- left: 14px; bottom: 24px;
+ left: 0; bottom: 0; margin: 0 0 24px 14px;
}
.pictolist li {
line-height: 38px; opacity: 0; display: none; height: 0;
padding: 6px; width: 38px; overflow: hidden;
- -webkit-transition: width 0.8s;
- transition: width 0.8s;
+ -webkit-transition: width 0.5s;
+ transition: width 0.5s;
}
.pictolist li.hover {
@@ -163,14 +209,14 @@
.picto {
float: left; padding: 7px; background:black;
border-radius: 19px; cursor: pointer;
- -webkit-transition: background 0.8s;
- transition: background 0.8s;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.picto-title {
margin-left: 8px; font-size: 12px; text-transform: uppercase;
padding: 4px 6px; background: rgba(0, 0, 0, .7);
- font-family: 'Futura-CondensedExtraBold';
+ font-family: 'OpenSans-CondensedBold';
}
.found .picto-title {
@@ -278,7 +324,7 @@
}
.annotation-title {
- font-family: 'Futura-Medium'; text-align: center;
+ font-weight: 800; text-align: center;
}
.close-annotation {
@@ -287,10 +333,10 @@
.annotation {
left: 45px; top: 800px; right: 35px;
- transition: top 0.8s; -webkit-transition: top 0.8s;
+ transition: top 0.5s; -webkit-transition: top 0.5s;
}
-.annotation-main:after {
+.annotation-main:after, .about-collaboration:after {
content: "."; visibility: hidden; display: block; height: 0; line-height: 0; clear: both;
}
@@ -354,25 +400,25 @@
}
.text-contents p, .text-contents ul, .text-contents ol {
-/* column-break-inside:avoid; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid; */
margin-bottom: 10px;
}
.text-contents h2, .text-contents h3, .text-contents h4 {
/* text-align: center; */
- font-family: 'Futura-Medium'; margin-bottom: 10px; line-height: 1.1em;
+ font-family: 'OpenSans-CondensedBold'; margin: 12px 0;
+ text-transform: uppercase;
}
.text-contents img {
float: left; margin: 0 5px 2px 0;
}
-/*
+
.column-group {
column-count: 2; column-gap: 60px;
-moz-column-count: 2; -moz-column-gap: 60px;
-webkit-column-count: 2; -webkit-column-gap: 60px;
}
-*/
+
.text-contents h2 {
font-size: 21px;
}
@@ -468,8 +514,8 @@
.slideshow-play-pause {
float: left; padding: 10px 15px 11px;
background: #404040; cursor: pointer;
- -webkit-transition: background 0.8s;
- transition: background 0.8s;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.slideshow-play-pause a {
@@ -494,13 +540,13 @@
}
.slideshow-title {
- line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 13px; color: #cccccc; float: left;
+ line-height: 35px; margin: 0 15px; font-weight: 700; font-size: 13px; color: #cccccc; float: left;
}
.slideshow-arrow {
position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer;
- -webkit-transition: background 0.8s;
- transition: background 0.8s;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.slideshow-arrow a {
@@ -527,19 +573,41 @@
background-position: -14px -208px;
}
+/* About box */
+
+.about-box {
+ overflow: visible;
+}
+
+.about-box h3 {
+ text-align: center; font-weight: 700; font-size: 16px;
+}
+
+.about-collaboration {
+ margin: 5px 0 40px;
+}
+
+.about-collaboration li {
+ width: 50%; float: left; text-align: center; font-size: 14px;
+}
+
+.about-collaboration img {
+ display: block; margin: 5px auto; height: 120px;
+}
+
/* Bottom bar */
.bottom-bar {
- padding-top: 20px;
+ position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
}
.play-button {
float: left; width: 14px; height: 14px;
padding: 8px; border-radius: 15px;
- background: #555555; cursor: pointer;
- margin: 8px 0 0 15px;
- -webkit-transition: background 0.8s;
- transition: background 0.8s;
+ background: #404040; cursor: pointer;
+ margin: 12px 0 0 15px;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.play-button:hover {
@@ -555,9 +623,20 @@
background-position: -24px -180px;
}
+.timelines {
+ margin: 0 20px 0 60px;
+}
+
+.timeline {
+ background: #303030; height: 10px; position: relative; cursor: pointer;
+}
+
+.annotation-onscreen .timeline {
+ background: #181818;
+}
+
.chapters-bar {
- margin: 0 20px 0 60px; height: 45px; position: relative; cursor: pointer;
- transition: opacity 0.8s;
+ margin-top: 3px; height: 42px; position: relative; cursor: pointer;
}
.chapter {
@@ -565,16 +644,16 @@
}
.chapter-block {
- width: 100%; height: 45px; background: #303030;
+ width: 100%; height: 42px; background: #303030;
margin: 0 -1px;
border-style: none solid; border-width: 1px;
border-color: #000000;
- -webkit-transition: background 0.8s, opacity 0.8s;
- transition: background 0.8s, opacity 0.8s;
+ -webkit-transition: background 0.5s, opacity 0.5s;
+ transition: background 0.5s, opacity 0.5s;
}
.chapter.active .chapter-block {
- background: #404040;
+ background: #505050;
}
.chapter.found .chapter-block {
@@ -586,12 +665,12 @@
}
.chapter-title {
- position: absolute; top: 53px; left: 50%; width: 300px; margin-left: -150px;
+ position: absolute; top: 46px; left: 50%; width: 300px; margin-left: -150px;
font-size: 9px; text-transform: uppercase;
text-align: center; color: #909090; opacity: 0;
- font-family: 'Futura-Medium';
- -webkit-transition: background 0.8s;
- transition: opacity 0.8s;
+ font-weight: 700;
+ -webkit-transition: background 0.5s;
+ transition: opacity 0.5s;
}
.chapter.active .chapter-title {
@@ -603,13 +682,13 @@
}
.chip-circle {
- width: 11px; height: 11px; top: 17px; left: -5px; border-radius: 6px; position: absolute;
- -webkit-transition: background 0.8s, opacity 0.8s;
- transition: background 0.8s, opacity 0.8s;
+ width: 11px; height: 11px; top: 15px; left: -5px; border-radius: 6px; position: absolute;
+ -webkit-transition: background 0.5s, opacity 0.5s;
+ transition: background 0.5s, opacity 0.5s;
}
.chip-pole {
- position: absolute; top: 0; left: 0; width: 0; height: 17px; border-left: 1px solid; display: none;
+ position: absolute; top: 0; left: 0; width: 0; height: 15px; border-left: 1px solid; display: none;
}
.chip.hover .chip-pole {
@@ -617,10 +696,11 @@
}
.chip-title {
- position: absolute; top: 1px; left: 3px; font-size: 9px; line-height: 13px; height: 13px;
+ position: absolute; top: 1px; left: 3px; font-size: 10px; line-height: 13px; height: 13px;
+ font-weight: 700;
display: block; width: 0; overflow: hidden;
- -webkit-transition: width 0.8s;
- transition: width 0.8s;
+ -webkit-transition: width 0.5s;
+ transition: width 0.5s;
}
.chip.hover .chip-title {
@@ -687,7 +767,7 @@
.prev-chapter, .next-chapter {
position: absolute; z-index: 4;
- width: 12px; height: 16px; margin: 8px 5px;
+ width: 12px; height: 16px; margin: 4px 5px;
background: url(../img/sprites.png); cursor: pointer;
}
@@ -715,12 +795,24 @@
background-position: 0 -160px;
}
-.progress-indicator {
- position: absolute; top: 0; width: 2px; height: 100%; background: #c0c0c0; /* margin-left: -1px; */
+.elapsed {
+ position: absolute; background: #505050; left: 0; top: 0; height: 100%;
+}
+
+.annotation-onscreen .elapsed {
+ background: #282828;
}
-.progress-indicator:hover {
- background: #ffffff;
+.progress-indicator, .mouse-progress-indicator {
+ position: absolute; top: 0; width: 2px; height: 100%; margin-left: -1px;
+}
+
+.progress-indicator {
+ background: #c0c0c0;
+}
+
+.mouse-progress-indicator {
+ background: #B8155F; display: none;
}
/* */
--- a/src/metadatacomposer/static/metadatacomposer/js/edition.js Tue Jun 11 15:47:02 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/edition.js Tue Jun 11 16:17:48 2013 +0200
@@ -1,30 +1,29 @@
-var myMedia = undefined,
- currentChapter = undefined,
- currentAnnotation = undefined,
- currentSlider = undefined,
- secMiniChapter = 10;
-
-
-
-
$(function(){
+ var myMedia = undefined,
+ currentChapter = undefined,
+ currentAnnotation = undefined,
+ currentSlider = undefined,
+ secMiniChapter = 10;
+
+/* Colors */
var annotationsColors = {
'video' : '#BE4477',
'text' : '#5E90CB',
'slideshow' : '#F69058',
'audio' : '#63BE6C',
'links' : '#8985BB'
- }
-
- var global = {
- colorsIndex : 0,
- colors :
- ['#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F', '#00A388',
+ },
+ colorsRangeIndex = 0,
+ colorsRange = [
+ '#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F', '#00A388',
'#1695A3', '#ACF0F2', '#F3FFE2', '#EB7F00', '#FF8000',
'#FFD933', '#CCCC52', '#8FB359', '#FFD393', '#F54F29'
- ]
- };
+ ];
+
+ function getRandomColor(){
+ return colorsRange[(colorsRangeIndex<colorsRange.length) ? colorsRangeIndex++ : (colorsRangeIndex=0)];
+ }
function getTemplate(idTpl){
return $('#templates').find(idTpl).html();
@@ -38,6 +37,7 @@
myMedia = myProject.getCurrentMedia();
+ //load Chapitre
var anntypes = myProject.getAnnotationTypes().searchByTitle("chapitrage");
if (!anntypes.length) {
chapterAnnType = new IriSP.Model.AnnotationType(false, myProject);
@@ -47,7 +47,6 @@
chapterAnnType = anntypes[0];
}
- //load Chapitre
chapters = chapterAnnType.getAnnotations();
if(!chapters.length){
var dataChapter = {
@@ -83,7 +82,7 @@
});
renderAnnotation();
-
+ //player
IriSP.htmlPlayer(
myMedia,
$(".main-video"),
@@ -105,7 +104,6 @@
);
myMedia.on("timeupdate", function(t) {
-
//curseur chapitre
var wContainer = $('.chapitre-cut-wrap').width() - 1,
pos = wContainer * t / myMedia.duration,
@@ -118,21 +116,21 @@
}else{
btnCutChapter.css("left",pos);
}
- $('.info-time').text(t)
- //annotations view
+ $('.info-time').text(t);
+
+ //display annotations
refreshAnnotationDisplay(t);
-
});//timeupdate
});//myProject.onLoad
/* Display annotation in timeline */
- //survol
+ //hover
$(document).on('mouseover', '.timeline-annotations .annotation, #list-annotations-rows tr, .item-display-annotation' , function(){
if(!$(this).hasClass('shadow')) {
var idAnnotation = $(this).attr('data-id');
- $('#annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow');
+ $('#tab-annotation-'+idAnnotation+', #annotation-timeline-'+idAnnotation+', #row-list-annotation-'+idAnnotation+', #item-current-annotation-'+idAnnotation).addClass('shadow');
}
});
@@ -214,8 +212,6 @@
}
});
-
-
/* Title project */
$(document).on('click', '.project-title-editor i, .project-title', function () {
@@ -247,11 +243,6 @@
loadFormChapter(idChapter);
});
- $('.chapter-segments').on('click', 'li', function(){
- var idChapter = $(this).attr('id');
- loadFormChapter(idChapter);
- });
-
$('.chapter-widget-info').on('keyup', 'input[name=title], textarea', function(e){
var name = $(this).attr('name'),
value = $(this).val();
@@ -265,6 +256,12 @@
disabledPreview();
});
+ //form chapter
+ $('.chapter-segments').on('click', 'li', function(){
+ var idChapter = $(this).attr('id');
+ loadFormChapter(idChapter);
+ });
+
function loadFormChapter(idChapter){
currentChapter = _.find(chapters, function(c){ return c.id == idChapter; });
var chapterWrap = $('.chapter-widget-info'),
@@ -283,6 +280,12 @@
myMedia.setCurrentTime(currentChapter.begin);
}
+ //close chapter form
+ $(document).on('click', '.btn-ok-chapter', function(e){
+ e.preventDefault();
+ $('.form-chapter-edit').remove();
+ });
+
//delete chapter
$(document).on('click', '.btn-delete-chapter', function(e){
e.preventDefault();
@@ -305,10 +308,6 @@
$("#modal-confirm").modal('show');
});
- $(document).on('click', '.btn-ok-chapter', function(e){
- e.preventDefault();
- $('.form-chapter-edit').remove();
- });
function deleteChapter(idChapter){
@@ -334,10 +333,7 @@
disabledPreview();
}
- function getRandomColor(){
- return global.colors[(global.colorsIndex<global.colors.length) ? global.colorsIndex++ : (global.colorsIndex=0)];
- }
- //nouveau chapitre
+ //new chapter
function newChapter(dataChapter, render){
var chapter = new IriSP.Model.Annotation(false, myProject);
chapter.setMedia(myMedia.id);
@@ -354,7 +350,7 @@
renderChapter();
loadFormChapter(chapter.id);
disabledPreview();
- $('#chapter-title').focus();
+ $('.chapter-title').focus();
}
$('.chapter-widget').on('click', '.btn-cut-chapter', function(e){
@@ -377,7 +373,6 @@
};
newChapter(dataChapter, true);
-
});
function organizeNewChapter(beginNew){
@@ -397,8 +392,6 @@
}
function renderChapter(){
-
-
var chapterSegmentWrap = $('.chapter-segments'),
wChapterSegmentWrap = chapterSegmentWrap.width(),
chapterList = $('.list-chapter-rows-wrap');
@@ -455,9 +448,51 @@
return annotation;
}
+ //annotation content data init
+ function getContentAnnotationByType(type){
+ var content;
+ switch(type){
+ case 'audio':
+ content = {
+ mimetype : "application/x-ldt-audio",
+ url : "",
+ embedcode : ""
+ };
+ break;
+ case 'video':
+ content = {
+ mimetype : "application/x-ldt-video",
+ url : "",
+ embedcode : ""
+ };
+ break;
+ case 'text':
+ content = {
+ mimetype : "application/x-ldt-text",
+ markup : "html",
+ text : ""
+ };
+ break;
+ case 'links':
+ content = {
+ mimetype : "application/x-ldt-links",
+ links : []
+ };
+ break;
+ case 'slideshow':
+ content = {
+ mimetype : "application/x-ldt-slideshow",
+ slideduration : 1000,
+ autostart : false,
+ images : []
+ };
+ break;
+ }
+ return content;
+ }
+
function renderAnnotation(){
-
var timeline = $('.timeline-annotations'),
wTimeline = timeline.width(),
annotationList = $('#list-annotations-rows');
@@ -484,7 +519,6 @@
segment = getTemplate('#tpl-annotation-in-timeline');
segment = Mustache.render(segment, dataAnntim);
-
var isInTimeline = false;
$.each(timeline.find('li'), function(a, b){
if(isInTimeline) return;
@@ -514,16 +548,12 @@
timeline.find('li:last-child').append(segment);
}
-
//liste
v.iconTab = getIcon(v.type);
var tplAnnotationRow = getTemplate('#tpl-list-annotation-row');
tplAnnotationRow = Mustache.render(tplAnnotationRow, v);
annotationList.append(tplAnnotationRow);
-
});
-
-
}//renderAnnotation
//edit annotation
@@ -541,7 +571,6 @@
});
$('.tab-content').on('keyup', '.form-info-general-annotation input[name=title], .form-info-general-annotation textarea', function(e){
-
var name = $(this).attr('name'),
value = $(this).val();
currentAnnotation[name] = value;
@@ -582,7 +611,7 @@
$(this).tab('show');
});
- //ouvrir tab
+ //open tab
$(document).on('click', '.open-tab', function(e){
e.preventDefault();
var type = $(this).attr('data-type');
@@ -592,8 +621,7 @@
function openTab(type, data){
var dataView, isNew = false;
- if(_.isUndefined(data)){//nouveau
-
+ if(_.isUndefined(data)){//new
var currentTimePlusUnMin = 60 * 1000 + myMedia.currentTime,
endAnnotation = (currentTimePlusUnMin<myMedia.duration) ? currentTimePlusUnMin : myMedia.duration;
var dataAnnotation = {
@@ -607,7 +635,7 @@
dataView = newAnnotation(dataAnnotation);
renderAnnotation();
isNew = true;
- }else{//édition
+ }else{//edition
dataView = data;
}
@@ -637,7 +665,7 @@
$(tabContent).append(tpl);
$('.tab-content').append(tabContent);
- //particularité selon type
+ //data by type
switch(type){
case 'audio':
break;
@@ -685,11 +713,11 @@
currentAnnotation.content.images.move(oldIndex, newIndex);
},
});
- var diaporama = $(tabContent).find('#diaporama-'+idAnnotation),
+ var slideshow = $(tabContent).find('#slideshow-'+idAnnotation),
images = viewType.content.images;
if(images.length){
$.each(images, function(k,v){
- addImageToDiaporama(diaporama, v);
+ addImageToSlideshow(slideshow, v);
});
}
break;
@@ -704,7 +732,7 @@
if(isNew){$(tabContent).find('.head-title').focus();}
- }//openTab()
+ }//openTab
function getIcon(type){
var icon;
@@ -725,7 +753,7 @@
return icon;
}
- //définit currentAnnotation quand la tab s'ouvre
+ //define currentAnnotation by open tab
$('#onglet-annotations').on('show', 'a[data-toggle="annotation"]', function (e) {
var idAnnotation = $(e.target).attr('data-id');
currentAnnotation = _.find(annotations, function(c){ return c.id == idAnnotation; });
@@ -733,13 +761,19 @@
showCurrentAnnotationInTimeline(idAnnotation);
});
- //rafraichit annotations au retour sur la liste
+ //refresh annotation data view when back on annotation list tab
$('#onglet-annotations').on('show', 'a[data-toggle="list-annotations"]', function (e) {
currentAnnotation = undefined;
renderAnnotation();
});
- //fermer tab
+ //close tab
+ function closeTab(idAnnotation){
+ $('#onglet-'+idAnnotation).remove();
+ $('.tab-content #tab-annotation-'+idAnnotation).remove();
+ $('#tab-list-annotation').tab('show');
+ }
+
$('#onglet-annotations').on('click', 'span.close-tab', function(e){
e.preventDefault();e.stopPropagation();
var idAnnotation = $(this).parents('a').attr('data-id');
@@ -752,15 +786,9 @@
closeTab(idAnnotation);
});
- function closeTab(idAnnotation){
- $('#onglet-'+idAnnotation).remove();
- $('.tab-content #tab-annotation-'+idAnnotation).remove();
- $('#tab-list-annotation').tab('show');
- }
+/* Video */
- //video
function renderVideoInfo(videoWrap, dataVideo){
-
var tplVideo = getTemplate('#tpl-video-row');
tplVideo = Mustache.render(tplVideo, dataVideo);
@@ -768,8 +796,9 @@
videoWrap = videoWrap.find(".video-container");
getVideoPlayer(dataVideo.url, videoWrap);
-
}
+
+ //select video on modal
$('.popup').on('click', '.bibliotheque-video a:not(.pagination a)', function(e){
e.preventDefault();
@@ -797,7 +826,7 @@
/* Slideshow */
- //bibliotheque
+ //select image on modal
$('.popup').on('click', '.bibliotheque-image a:not(.pagination a)', function(e){
e.preventDefault();
@@ -812,22 +841,20 @@
};
currentAnnotation.content.images.push(image);
- var listDiaporama = $('#diaporama-'+currentAnnotation.id);
- addImageToDiaporama(listDiaporama, image);
+ var listSlideshow = $('#slideshow-'+currentAnnotation.id);
+ addImageToSlideshow(listSlideshow, image);
$('.popup').modal('hide');
disabledPreview();
});
- function addImageToDiaporama(diaporama, dataView){
-
- var tplDiapo = getTemplate('#tpl-diaporama-row');
+ function addImageToSlideshow(slideshow, dataView){
+ var tplDiapo = getTemplate('#tpl-slideshow-row');
tplDiapo = Mustache.render(tplDiapo, dataView);
- diaporama.append(tplDiapo);
- disabledBtnSortable(diaporama);
-
+ slideshow.append(tplDiapo);
+ disabledBtnSortable(slideshow);
};
- //edit title / description
+ //edit
$('.tab-content').on('click', '.title-slideshow-row, .description-slideshow-row, .video-title-edit, .video-description-edit', function(){
if($(this).find('input').length) return;
var html = $(this).find('span').html(),
@@ -846,7 +873,7 @@
var newValue = $(this).val(),
name = $(this).attr('name'),
span = $('<span>').html(newValue),
- indexRow = $(this).parents('.row-image-diaporama').index();
+ indexRow = $(this).parents('.row-image-slideshow').index();
$(this).replaceWith(span);
currentAnnotation.content.images[indexRow][name] = newValue;
disabledPreview();
@@ -861,12 +888,12 @@
disabledPreview();
});
- //bouton up / down
+ //button up / down
$(document).on('click', '.ui-sortable .btn-sort', function(e){
e.preventDefault();
- var row = $(this).parents('tr.row-image-diaporama'),
+ var row = $(this).parents('tr.row-image-slideshow'),
oldIndex = row.index(),
- listDiaporama = $(this).parents('.list-image-diaporama');
+ listSlideshow = $(this).parents('.list-image-slideshow');
if($(this).hasClass('down'))
row.insertAfter(row.next());
@@ -876,13 +903,20 @@
var newIndex = row.index();
currentAnnotation.content.images.move(oldIndex, newIndex);
- disabledBtnSortable(listDiaporama);
+ disabledBtnSortable(listSlideshow);
disabledPreview();
});
+ function disabledBtnSortable(listSlideshow){
+ listSlideshow.find('.btn-sort.disabled').removeClass('disabled');
+ listSlideshow.find('tr.row-image-slideshow:first-child').find('.btn-sort.up').addClass('disabled');
+ listSlideshow.find('tr.row-image-slideshow:last-child').find('.btn-sort.down').addClass('disabled');
+ }
+
+ //delete image on slideshow
$('.tab-content').on('click','.btn-delete-image', function(e){
e.preventDefault();
- var rowImage = $(this).parents('tr.row-image-diaporama'),
+ var rowImage = $(this).parents('tr.row-image-slideshow'),
index = rowImage.index();
rowImage.remove();
@@ -890,18 +924,23 @@
disabledPreview();
});
- function disabledBtnSortable(listDiaporama){
- listDiaporama.find('.btn-sort.disabled').removeClass('disabled');
- listDiaporama.find('tr.row-image-diaporama:first-child').find('.btn-sort.up').addClass('disabled');
- listDiaporama.find('tr.row-image-diaporama:last-child').find('.btn-sort.down').addClass('disabled');
+/* Links */
+
+ //add
+ function addLinkRow(tbody, dataView){
+ var tplLinkRow = getTemplate('#tpl-links-row');
+ var output = Mustache.render(tplLinkRow, dataView);
+ tbody.append(output);
+
}
- //links
$('.tab-content').on('click', '.add-link', function(e){
e.preventDefault();
var tbody = $(this).parents('tfoot').siblings('tbody');
addLinkRow(tbody);
});
+
+ //delete
$('.tab-content').on('click', '.delete-link', function(e){
e.preventDefault();
var row = $(this).parents('tr'),
@@ -910,18 +949,13 @@
row.remove();
updateLinks(tbody);
});
- function addLinkRow(tbody, dataView){
-
- //head commun à tous
- var tplLinkRow = getTemplate('#tpl-links-row');
- var output = Mustache.render(tplLinkRow, dataView);
- tbody.append(output);
-
- }
+
+ //edit
$('.tab-content').on('keyup', '.links-rows input', function(e){
var tbody = $(this).parents('.links-rows');
updateLinks(tbody);
});
+
function updateLinks(tbody){
links = new Array();
@@ -938,9 +972,13 @@
currentAnnotation.content.links = links;
disabledPreview();
}
+
$('.tab-content').on('focus', '.url-link', function(){
var td = $(this).parents('td');
- if(td.hasClass('error')) td.removeClass('error')
+ if(td.hasClass('error')) {
+ td.removeClass('error');
+ td.find('.help-inline').hide();
+ }
});
$('.tab-content').on('blur', '.url-link', function(){
@@ -948,6 +986,7 @@
td = $(this).parents('td');
if(!isValidLink(url)){
td.addClass('error');
+ td.find('.help-inline').show();
}
});
@@ -955,7 +994,26 @@
return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url);
}
- //annotation audio
+ //autostart
+ $('.tab-content').on('click', '.btn-autostart', function(){
+ var autostart = $(this).attr('data-autostart');
+ if(autostart == "true"){ autostart = true;}
+ else {autostart = false;}
+ disabledPreview();
+ currentAnnotation.content.autostart = autostart;
+ });
+
+ //duration
+ $('.tab-content').on('change keyup', '.config-slideshow input[name=duration]', function(){
+ var value = $(this).val();
+ if(!isNaN(value)){
+ disabledPreview();
+ currentAnnotation.content.slideduration = value * 1000;
+ }
+ });
+
+/* Audio */
+
$('.tab-content').on('keyup', '.annotation-audio-content input, .annotation-audio-content textarea', function(){
var name = $(this).attr('name'),
value = $(this).val();
@@ -964,25 +1022,8 @@
disabledPreview();
});
- //annotation slideshow
- $('.tab-content').on('click', '.btn-autostart', function(){
- var autostart = $(this).attr('data-autostart');
- if(autostart == "true"){ autostart = true;}
- else {autostart = false;}
- disabledPreview();
- currentAnnotation.content.autostart = autostart;
- });
+/* Save project */
- $('.tab-content').on('change keyup', '.config-diaporama input[name=duration]', function(){
- var value = $(this).val();
- if(!isNaN(value)){
- disabledPreview();
- currentAnnotation.content.slideduration = value * 1000;
- }
- });
-
-
- //save project
$('.btn-save-project').bind('click', function(e){
e.preventDefault();
if($(this).hasClass('disabled')) return;
@@ -1027,7 +1068,7 @@
e.preventDefault();
});
- //alert
+ //alert save info
$('.alert').bind('close', function (e) {
e.preventDefault();
$(this).hide();
@@ -1037,7 +1078,9 @@
$('.alert').hide();
$('.'+className).show();
}
-//################ config
+
+/* Config */
+
//tagit
function onTagItChange(e, ui) {
var tagitType = $(this).attr('data-type'),
@@ -1060,7 +1103,7 @@
afterTagAdded : onTagItChange
}
- //CLEditor annotation > text (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
+ //CLEditor (wysiwyg) http://premiumsoftware.net/cleditor/docs/GettingStarted.html#optionalParameters
var wysiwygConfig = {
width: 450,
height: 250,
@@ -1128,49 +1171,6 @@
};
}
- //init annotation content data
- function getContentAnnotationByType(type){
- var content;
- switch(type){
- case 'audio':
- content = {
- mimetype : "application/x-ldt-audio",
- url : "",
- embedcode : ""
- };
- break;
- case 'video':
- content = {
- mimetype : "application/x-ldt-video",
- url : "",
- embedcode : ""
- };
- break;
- case 'text':
- content = {
- mimetype : "application/x-ldt-text",
- markup : "html",
- text : ""
- };
- break;
- case 'links':
- content = {
- mimetype : "application/x-ldt-links",
- links : []
- };
- break;
- case 'slideshow':
- content = {
- mimetype : "application/x-ldt-slideshow",
- slideduration : 1000,
- autostart : false,
- images : []
- };
- break;
- }
- return content;
- }//getContentAnnotationByType
-
//unload
$(window).on("beforeunload", onLeave);
function onLeave(){
@@ -1184,26 +1184,6 @@
tangleStartVal,
tangleHasMoved;
- $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
- activeTangle = $(this);
- activeTangle.addClass("active");
- tangleStartVal = +activeTangle.attr("data-milliseconds");
- tangleStartX = evt.pageX;
- tangleHasMoved = false;
- $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
- return false;
- });
-
- $('.tab-content').on('mousedown', '.time-tangle', function(evt){
- activeTangle = $(this);
- activeTangle.addClass("active");
- tangleStartVal = +activeTangle.attr("data-milliseconds");
- tangleStartX = evt.pageX;
- tangleHasMoved = false;
- $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
- return false;
- });
-
$(document)
.mousemove(function(evt) {
if (activeTangle) {
@@ -1216,7 +1196,7 @@
.mouseup(function() {
if (activeTangle) {
- if(activeTangle.hasClass('slider-tangle')){
+ if(activeTangle.hasClass('slider-tangle')){//annotation
renderAnnotation();
refreshAnnotationDisplay(myMedia.getCurrentTime());
}
@@ -1226,6 +1206,16 @@
});
//chapters
+ $('.chapter-widget-info').on('mousedown', '.time-tangle', function(evt){
+ activeTangle = $(this);
+ activeTangle.addClass("active");
+ tangleStartVal = +activeTangle.attr("data-milliseconds");
+ tangleStartX = evt.pageX;
+ tangleHasMoved = false;
+ $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+ return false;
+ });
+
function updateRenderChapter(chapterData){
var segment = $('.chapter-segments li#'+chapterData.id),
wChapterSegmentWrap = $('.chapter-segments').width(),
@@ -1285,7 +1275,16 @@
updateChapterDuration(val, chapterBefore, chapterAfter);
});
-//annotations
+ //annotations
+ $('.tab-content').on('mousedown', '.time-tangle', function(evt){
+ activeTangle = $(this);
+ activeTangle.addClass("active");
+ tangleStartVal = +activeTangle.attr("data-milliseconds");
+ tangleStartX = evt.pageX;
+ tangleHasMoved = false;
+ $(this).parents('td').siblings('td').find(".time-tangle").addClass("deactivate");
+ return false;
+ });
$('.tab-content').on('valuechange', '.tangle-start', function(evt, val){
var max = currentSlider.slider('values')[1],
@@ -1334,21 +1333,10 @@
}
}
- //test
- $('.log-annotations').bind('click', function(e){
- e.preventDefault();
- console.log(annotations.length + ' annotations', annotations);
- currentSlider.slider( "values", 0, 55 );
- });
-
- $('.log-chapters').bind('click', function(e){
- e.preventDefault();
- console.log(chapters.length + ' chapitres',chapters);
- });
-
});//ready
-//Utilitaires
+/* Utilitys */
+
Array.prototype.move = function (old_index, new_index) {
if (new_index >= this.length) {
var k = new_index - this.length;
--- a/src/metadatacomposer/static/metadatacomposer/js/player.js Tue Jun 11 15:47:02 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/player.js Tue Jun 11 16:17:48 2013 +0200
@@ -16,25 +16,23 @@
myMedia,
$(".video-container"),
{
- width: 1000,
- height: 560,
autostart: true,
url_transform: function(src) {
return [{
type: "video/mp4",
- src: src.replace(/\.[\d\w]+$/,'.mp4').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
+ src: src.replace(/\.[\d\w]+$/,'.mp4')
}, {
type: "video/webm",
- src: src.replace(/\.[\d\w]+$/,'.webm').replace('rtmp://media.iri.centrepompidou.fr/ddc_player', 'http://media.iri.centrepompidou.fr')
+ src: src.replace(/\.[\d\w]+$/,'.webm')
}];
}
}
);
myMedia.on("timeupdate", function(t) {
- var progress = $(".progress-indicator"),
- pos = ($(".chapters-bar").width() - 2 * progress.width()) * t / myMedia.duration;
- progress.css("left",pos);
+ var pos = (100 * t / myMedia.duration) + "%";
+ $(".progress-indicator").css("left",pos);
+ $(".elapsed").css("width", pos);
});
myMedia.on("play", function() {
$(".play-button").addClass("pause");
@@ -43,9 +41,27 @@
$(".play-button").removeClass("pause");
});
+ function showAtMousePos(evt) {
+ var pos = evt.pageX - $(".timeline").offset().left;
+ $(".mouse-progress-indicator").css("left", pos);
+ return pos;
+ }
+
+ $(".timeline").mouseenter(function(e) {
+ $(".mouse-progress-indicator").show();
+ showAtMousePos(e);
+ }).mouseleave(function(e) {
+ $(".mouse-progress-indicator").hide();
+ }).mousemove(showAtMousePos)
+ .click(function(e) {
+ myMedia.setCurrentTime( showAtMousePos(e) * myMedia.duration / $(".timeline").width());
+ });
+
var tags = myProject.getTags().sortBy(function(t) {
return - t.getRelated("annotation").length;
- }).slice(0,12),
+ }).slice(0,20).sortBy(function(t) {
+ return t.title;
+ }),
tagTemplate = _.template('<li data-tag-id="<%- id %>" class="tag"><%- title %></li>'),
clickedTag = null,
lastTag = null;
@@ -54,18 +70,16 @@
$(".tags-title").mouseenter(function() {
$(".tags-list").stop().slideDown();
- });
- $(".tags").mouseleave(function() {
- $(".tags-list").stop().slideUp();
- });
-
- $("body").click(function() {
+ }).click(function() {
if (clickedTag) {
$(".found").removeClass("found");
clickedTag = null;
}
return false;
});
+ $(".tags").mouseleave(function() {
+ $(".tags-list").stop().slideUp();
+ });
function showTag(tagId) {
$(".found").removeClass("found");
@@ -84,7 +98,11 @@
}, function() {
showTag(clickedTag);
}).click(function() {
- clickedTag = lastTag;
+ if (clickedTag == lastTag) {
+ clickedTag = null
+ } else {
+ clickedTag = lastTag;
+ }
return false;
});
@@ -164,16 +182,7 @@
}
return false;
});
-
- $(".progress-indicator").draggable({
- axis: "x",
- containment: "parent",
- drag: function(e, ui) {
- var t = myMedia.duration * parseInt(ui.helper.css("left")) / ( $(".chapters-bar").width() - 2 * ui.helper.width() );
- myMedia.setCurrentTime(t);
- }
- });
-
+
var pictoTemplate = _.template(
'<li class="<%- type %>"><span class="picto"><a href="#"></a></span>'
+ '<span class="picto-title"><%- annotation.title %></span></li>'
@@ -263,7 +272,7 @@
annotationinfo.both.addClass("current");
- $(".chapters-bar").addClass("annotation-onscreen");
+ $(".timelines").addClass("annotation-onscreen");
var annotationDiv = $(".annotation-templates ." + annotationinfo.type + "-annotation").clone();
@@ -294,12 +303,14 @@
srcimg = slide.image,
imgel = $("<img>");
imgel.addClass("slideshow-image");
+ var wcont = 650, hcont = 452, wsrc = srcimg.width, hsrc = srcimg.height, scale = Math.min(1, Math.min(wcont/wsrc, hcont/hsrc)), h = hsrc * scale;
imgel.attr({
src: srcimg.src,
title: slide.title,
- alt: slide.title
+ alt: slide.title,
+ width: wsrc * scale,
+ height: h
});
- var wcont = 650, hcont = 452, wsrc = srcimg.width, hsrc = srcimg.height, scale = Math.min(1, Math.min(wcont/wsrc, hcont/hsrc)), h = hsrc * scale;
imgel.css({
opacity: 0,
"margin-top": (h < hcont ? Math.floor((hcont-h)/2)+"px": 0)
@@ -504,7 +515,7 @@
switch (annotationinfo.annotation.content.markup) {
case "html":
annotationDiv.find(".text-contents").html(text);
-/*
+
var ps = annotationDiv.find(".text-contents>p"),
groups = [],
last, group;
@@ -523,7 +534,7 @@
groups.forEach(function(g) {
$(g.master).replaceWith($('<div class="column-group">').append(g.contents));
});
-*/
+
break;
default:
annotationDiv.find(".text-contents").html(
@@ -558,22 +569,94 @@
}
return false;
});
+
+ function fullScreen() {
+ var isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
+ el = document.querySelector("body"),
+ requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
+ cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"];
+ if (isFull) {
+ for (var i = 0; i < cancelMethods.length; i++) {
+ if (typeof document[cancelMethods[i]] === "function") {
+ document[cancelMethods[i]]();
+ break;
+ }
+ }
+ } else {
+ for (var i = 0; i < requestMethods.length; i++) {
+ if (typeof el[requestMethods[i]] === "function") {
+ el[requestMethods[i]]();
+ break;
+ }
+ }
+ }
+ return false;
+ }
+
+ $(".full-screen").click(fullScreen);
+
+ $(".about").click(function() {
+ closeAnnotation();
+ var aboutBox = $(".annotation-templates .about-box").clone().appendTo($(".main-video"));
+ aboutBox.find(".close-annotation").click(closeAnnotation);
+ aboutBox.css({ top: Math.floor(($(".main-video").height() - aboutBox.height())/2)+"px" });
+ });
function closeAnnotation(e) {
currentAnnotation = null;
$(".chip, .pictolist li").removeClass("current");
- $(".chapters-bar").removeClass("annotation-onscreen");
+ $(".timelines").removeClass("annotation-onscreen");
$(".annotation audio, .annotation video").each(function() {
try {
this.pause();
- } catch(e) { }
+ } catch(err) { }
});
$(".main-video .annotation").hide().remove();
if (!!e) {
myMedia.play();
}
return false;
- }
+ }
+
+ var videoRatio = null;
+
+ function repositionElements() {
+ var videoel = $(".video-container video");
+ if (!videoRatio) {
+ videoRatio = videoel.width() / videoel.height();
+ }
+ if (!videoRatio) {
+ return;
+ }
+ var container = $(".main-video"),
+ ch = container.height(),
+ cw = container.width(),
+ vw = Math.min(cw, ch * videoRatio),
+ vh = vw / videoRatio,
+ dw = (cw - vw) / 2,
+ dh = (ch - vh) / 2;
+ videoel.css({
+ width: vw,
+ height: vh,
+ "margin-top": dh
+ });
+ $(".pictolist").css({
+ left: dw,
+ bottom: dh
+ });
+ }
+
+ $(".video-container video").on("loadedmetadata",repositionElements);
+
+ $(window).resize(repositionElements);
+
+ $(document).keydown(function(e) {
+ if (e.keyCode === 122) {
+ fullScreen();
+ return false;
+ }
+ });
+
});
};
\ No newline at end of file