# HG changeset patch # User cavaliet # Date 1370960268 -7200 # Node ID b5f44489096e9799aaee0a6d5749c832b3bc818a # Parent a56fad1ada355fa555d01b9756017a3a146529e5 add modif from integration and player diff -r a56fad1ada35 -r b5f44489096e integration/css/style.css --- a/integration/css/style.css Tue Jun 11 15:47:02 2013 +0200 +++ b/integration/css/style.css Tue Jun 11 16:17:48 2013 +0200 @@ -75,6 +75,7 @@ .table td{vertical-align: middle;} .table td td{padding: 1px; border: none;} .table td td a{width: 12px;display: block;} +.table th.copy-url{width: 135px;} .config-slideshow{color: #FFF;} .config-slideshow form{background-color: #34495e; padding: 4px 0; margin: 0; overflow: hidden; line-height: 28px;} .config-slideshow form label{display: inline-block; padding-left: 10px;} diff -r a56fad1ada35 -r b5f44489096e src/metadatacomposer/static/metadatacomposer/css/style.css --- a/src/metadatacomposer/static/metadatacomposer/css/style.css Tue Jun 11 15:47:02 2013 +0200 +++ b/src/metadatacomposer/static/metadatacomposer/css/style.css Tue Jun 11 16:17:48 2013 +0200 @@ -55,8 +55,8 @@ .chapter-widget table td{} .chapter-widget textarea:focus{height: 100px;} .chapitre-cut-wrap{position: relative; height: 70px; margin-bottom: 10px;} -.btn-cut-chapter{height:40px;position: absolute;top: 20px;left: 11px; width: 40px;} -.indicateur-chapter, .indicateur-annotation{z-index:999; left:10px; width: 1px; height: 100%;background-color: #000; position: absolute;} +.btn-cut-chapter{height:40px;position: absolute;top: 20px;left: 1px; width: 40px;} +.indicateur-chapter, .indicateur-annotation{z-index:999; left:0; width: 1px; height: 100%;background-color: #000; position: absolute;} .chapter-segments {overflow:hidden; width: 100%; height: 20px; margin: 0; position: relative;} .chapter-segments li{position: absolute; top: 0; cursor:pointer; float: left; list-style: none; line-height: 20px; height: 20px; text-align: center; overflow: hidden;} .list-chapter-wrap, .list-annotation-wrap, .section{background-color: #F5F5F5; border: 1px solid #E5E5E5;} @@ -76,25 +76,23 @@ .table td td{padding: 1px; border: none;} .table td td a{width: 12px;display: block;} .table th.copy-url{width: 135px;} -.config-diaporama{color: #FFF;} -.config-diaporama form{background-color: #34495e; padding: 4px 0; margin: 0; overflow: hidden; line-height: 28px;} -.config-diaporama form label{display: inline-block; padding-left: 10px;} -.config-diaporama form input{margin-bottom: 0;} +.config-slideshow{color: #FFF;} +.config-slideshow form{background-color: #34495e; padding: 4px 0; margin: 0; overflow: hidden; line-height: 28px;} +.config-slideshow form label{display: inline-block; padding-left: 10px;} +.config-slideshow form input{margin-bottom: 0;} .edit-annotation-text textarea{max-width: 446px;} -.wysiwyg-wrap{overflow: hidden; } +.wysiwyg-wrap{overflow: hidden; padding: 0 0 2px 2px; } .ui-slider-handle.ui-state-default.ui-corner-all{border-radius: 0;} .edit-annotation-html textarea{max-width: 446px;width:446px; } .close-tab{vertical-align: super; margin-left: 8px; color: #c0392b; cursor: pointer; font-size: 12px; line-height: 14px;} .close-tab:hover{color:#2c3e50;} .html-apercu{overflow: auto; margin-top: 10px;} -.input-image-url{display: none;} .slider-duration.ui-slider.ui-slider-horizontal.ui-widget.ui-widget-content.ui-corner-all{ background: #202020;} .timeline-annotations-wrap{position: relative;background-color: #202020;} .timeline-annotations{width: 460px;height: auto; position: relative; margin: 0; padding-top: 4px;} .timeline-annotations li{display: block; width: 460px;height: 12px; position: relative; padding-bottom: 4px;} .timeline-annotations .annotation{cursor: pointer; display:block; text-decoration:none; color:#000; text-align:center; font-size : 10px; overflow: hidden; line-height: 12px; width: 10px; height: 12px; background-color: #c0392b; position: absolute; top:0px;} -.timeline-annotations .annotation span, .timeline-annotations .annotation i{display: none;} -.timeline-annotations .annotation:hover span, +.annotation:hover span, .annotation.editing span, .annotation.editing i{display: inline;} ul.tagit{margin-left: 10px;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;} @@ -103,7 +101,6 @@ .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-decoration: none;line-height:20px; color:#202020;display: inline-block; background-color: #589; height: 20px; padding: 0 4px; } -.list-current-annotations a span{display: none;} .list-current-annotations a:hover span{display: inline-block;} .annotation-audio-content textarea{max-width: 206px;} .annotation-links-content .links-form:nth-child(n+2){border-top:1px solid; padding-top: 20px;} @@ -111,16 +108,31 @@ td.begin, td.duration, td.end{max-width: 40px;} td.image-slideshow-row img{width: 60px; height: 60px;} .project-title-editor input{margin-bottom: 0;} -#templates{display: none;} .title-slideshow-row{word-wrap: break-word;width: 76px;} .title-slideshow-row input{width: 70px;} .description-slideshow-row{word-wrap: break-word; width: 180px; } .description-slideshow-row span{max-height: 100px; display: inline-block; overflow: auto;} .description-slideshow-row textarea{width: 164px; max-width: 164px; height: 100px;} -.label-modify-video, .label-add-video{display: none;} + +a.open-tab{text-shadow:none;} +a.open-tab:hover{background-color: #E6E6E6;} +.open-tab.video{background-color: #BE4477;} +.open-tab.text{background-color:#5E90CB;} +.open-tab.slideshow{background-color:#F69058;} +.open-tab.audio{background-color:#63BE6C;} +.open-tab.links{background-color:#8985BB;} + +.input-image-url, +.annotation span, .annotation i, +.label-modify-video, .label-add-video, +#templates, +.list-current-annotations a span, +.alert-message, +.alert, +.links-rows .help-inline{display: none;} + .shadow {background-color: #54D0ED !important;} -.alert-message{display: none;} -.alert{display: none;} + /* Tangle */ .time-tangle {color: #2c3e50; cursor: w-resize; position: relative;border-bottom: 1px dashed #2c3e50;} .time-tangle:hover, @@ -130,13 +142,6 @@ .time-tangle.deactivate:hover {border: none; color: #2c3e50;} .time-tangle.deactivate:hover:after {display: none;} -a.open-tab{text-shadow:none;} -a.open-tab:hover{background-color: #E6E6E6;} -.open-tab.video{background-color: #BE4477;} -.open-tab.text{background-color:#5E90CB;} -.open-tab.slideshow{background-color:#F69058;} -.open-tab.audio{background-color:#63BE6C;} -.open-tab.links{background-color:#8985BB;} .loader { background: url(../img/loader.gif) center no-repeat; background-size: 25px 25px; diff -r a56fad1ada35 -r b5f44489096e src/metadatacomposer/static/metadatacomposer/css/styles_player.css --- 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; } /* */ diff -r a56fad1ada35 -r b5f44489096e src/metadatacomposer/static/metadatacomposer/js/edition.js --- 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').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; diff -r a56fad1ada35 -r b5f44489096e src/metadatacomposer/static/metadatacomposer/js/player.js --- 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('
  • <%- title %>
    • '), 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( '
  • ' + '<%- annotation.title %>
    • ' @@ -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 = $(""); 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($('
    ').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 diff -r a56fad1ada35 -r b5f44489096e src/metadatacomposer/templates/metadatacomposer_edit.html --- a/src/metadatacomposer/templates/metadatacomposer_edit.html Tue Jun 11 15:47:02 2013 +0200 +++ b/src/metadatacomposer/templates/metadatacomposer_edit.html Tue Jun 11 16:17:48 2013 +0200 @@ -80,10 +80,7 @@
    - - +
    @@ -124,7 +121,6 @@
    @@ -154,236 +150,18 @@ +
    -
    - -
    - -
    -
    -
    - - -
    -
    - - - - - - - - - - - - - - - - -
    DébutDuréeFin
    4:204:204:20
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    - -
    -

    Liens

    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - - - - -
    URLTitre du lienActions
    - - -
    - - -
    -
    -
    - -
    - -
    -

    Son

    -
    -
    -
    -
    -
    - -
    - -
    -
    -
    - -
    - -
    -
    -
    -
    -
    - - -
    -

    Vidéo

    - - Ajouter une vidéo - - -
    -
    -
    - - - - - - - - - - - - - - - - - - - - -
    TitreTitre de la vidéo Azerty
    Date14 / 05 / 2016
    Durée25 m 35 s
    DescriptionLorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem iste blanditiis ducimus sint nemo aspernatur rem hic facere culpa dolore quis itaque magni voluptates aliquid veritatis non harum quo libero.
    -
    -
    - - -
    -

    Html

    -
    -
    -
    - - -
    -
    - Aperçu -
    -
    -
    - - - -
    -

    Texte

    -
    -
    -
    - -
    -
    - - -
    -

    Diaporama

    - - Ajouter une image - - -
    -
    -
    -
    - -
    - - -
    -
    -
    - - sec -
    -
    -
    -
    -
    - - - - - - - - - - - - - - - - - -
    AperçuTitreDescriptionActions
    Titre annotation 1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aliquid non placeat consequuntur fugit minima. - - - - - - - - - -
    -
    -
    -
    - -
    - + @@ -427,9 +205,9 @@
    + - - @@ -558,21 +318,21 @@

    Diaporama

    Ajouter une image - +
    -
    -
    +
    +
    - +
    - - sec + + sec
    @@ -587,8 +347,7 @@ Actions - - +
    @@ -610,9 +369,7 @@ Actions - - - + Ajouter un lien @@ -626,17 +383,21 @@ - @@ -728,10 +471,10 @@

    Modifier le chapitre

    - - - - + + + +
    @@ -754,8 +497,8 @@
    - - + +
    diff -r a56fad1ada35 -r b5f44489096e src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html --- a/src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html Tue Jun 11 15:47:02 2013 +0200 +++ b/src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html Tue Jun 11 16:17:48 2013 +0200 @@ -1,4 +1,3 @@ - {% load static %} {% load absurl %}
    @@ -6,23 +5,33 @@

    Tags

      + + + +

      -
      +
        -
        -
        -
          -
            -
            -
            -
            +
            +
            +
            +
            +
            +
            +
            +
              +
                +
                +
                +
                +
                @@ -31,21 +40,32 @@
                - +
                + +

                À propos des Webdocs

                +

                Une collaboration

                +
                  +
                • + Logo du Festival d’Art Lyrique d’Aix-en-Provence +

                  Festival d’Art Lyrique d’Aix-en-Provence

                  +
                  • +
                • + Logo de l’Institut de Recherche et d’Innovation +

                  Institut de Recherche et d’Innovation

                  +
                  • +
                +

                -

                -
                -

                @@ -69,7 +89,6 @@
                -

                @@ -78,7 +97,6 @@
                -

                @@ -88,8 +106,7 @@
                -
                - +