--- a/integration/css/edition.css Mon Nov 05 15:06:14 2012 +0100
+++ b/integration/css/edition.css Tue Nov 06 11:01:27 2012 +0100
@@ -23,6 +23,7 @@
background-repeat: no-repeat;
background-position: right 2px;
padding-right: 20px;
+ min-height: 20px;
}
.title-video-wrap a:hover{
text-decoration: none;
@@ -125,19 +126,12 @@
/* frise */
.frise{
height: 22px;
- overflow: hidden;
position: relative;
border: 1px solid #333333;
}
-.frise-segments,.frise-indications{
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
-}
-.frise-indications{
- z-index: 2;
+
+.frise-overflow {
+ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
}
.bloc-pvw .frise {
margin: 7px 5px 2px;
@@ -170,6 +164,10 @@
.frise-segment:last-child{
background-image: none;
}
+.frise-segment.active {
+ background-image: url(../img/pinstripe-purple.png);
+ background-repeat: repeat;
+}
.frise-indication{
height: 22px;
line-height: 22px;
@@ -185,7 +183,8 @@
margin-left: -15px;
}
.frise-position {
- width: 1px; margin-left: -0.5px; position: absolute; height: 100%; background: #FF00FC;
+ width: 1px; top: -8px; bottom: 0; margin-left: -0.5px; position: absolute;
+ z-index: 3; background: #FF00FC;
}
/* col-middle - bloc-segmentation */
.bloc-segmentation{
@@ -334,6 +333,10 @@
padding: 0 10px;
color: #FFF;
font-weight: 600;
+ display: none;
+}
+.empty-mode .tutorial {
+ display: block;
}
.tutorial h2{
padding-top: 16px;
@@ -343,10 +346,10 @@
.tutorial ol{
padding-left: 22px;
}
-.tutorial ol li:first-child{
+.tutorial li:first-child{
width: 324px;
}
-.tutorial ol li{
+.tutorial li{
list-style: decimal;
font-size: 14px;
margin-bottom: 16px;
@@ -359,51 +362,40 @@
min-height: 750px;
background: url(../img/bg-col.png) repeat-x 0 0 #e6e6e6;
}
-.col-left form{
+.left-head {
background: url(../img/bg-video-search.png) 0 0 repeat-x #906ebe;
height: 70px;
padding-left: 10px;
margin-bottom: 1px;
}
-.col-left form h2{
+.left-head h2{
padding-top: 8px;
margin-bottom: 12px;
color: #30036d;
font-size: 16px;
font-weight: 600;
}
-.col-left input[type=text]{
- width: 206px;
+.left-head input {
+ width: 222px;
font-size: 14px;
border: none;
height: 20px;
- padding: 0 20px 0 4px;
+ padding: 0 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
+ background: #FFF url(../img/zoom-icon.png) 214px 3px no-repeat;
}
-.col-left form p{
- position: relative;
- width: 230px;
-}
-.col-left input[type=text]::-webkit-input-placeholder{
+
+.col-left input::-webkit-input-placeholder{
color: #b48aed;
font-style: italic;
}
-.col-left input[type=text]:-moz-placeholder {
+.col-left input:-moz-placeholder {
color: #b48aed;
font-style: italic;
}
-.col-left input[type=submit]{
- position: absolute;
- right: 2px;
- width: 20px;
- top: 0;
- height: 20px;
- border: none;
- z-index: 2;
- background: #FFF url(../img/zoom-icon.png) 2px 3px no-repeat;
-}
+
.col-left .item-video:hover,
.col-left .item-video.active{
background: url(../img/arrow-item-video-sprite.png) right center no-repeat;
@@ -611,7 +603,16 @@
position: relative;
background: #333333;
}
-a.publier-button{
+.video-wait {
+ display: none;
+ position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+ background-color: rgba(120, 120, 140, .6);
+ background-image: url(../img/reel.gif);
+ background-position: center;
+ background-repeat: no-repeat;
+ z-index: 3;
+}
+.publier-button{
position: absolute;
width: 69px;
height: 67px;
@@ -620,13 +621,13 @@
top: 10px;
z-index: 4;
}
-a.publier-button:hover{
+.publier-button:hover{
background-position: 0 -67px;
}
-a.publier-button.disable{
+.publier-button.disable{
background: url(../img/publier-button-sprite.png) 0 -67px no-repeat;
}
-a.publier-button.disable:hover{
+.publier-button.disable:hover{
background-color: none;
}
@@ -644,6 +645,7 @@
background: -webkit-linear-gradient(left, #747474 50%, #B6B8B8 50%);
border-top: 1px solid #969696;
height: 4px;
+ position: relative; z-index: 5;
}
.Ldt-Slider {
@@ -660,7 +662,7 @@
.Ldt-Slider-Time {
position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8;
- font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -20px;
+ font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -14px;
display: none; text-align: center; font-weight: bold;
}
--- a/integration/edition.html Mon Nov 05 15:06:14 2012 +0100
+++ b/integration/edition.html Tue Nov 06 11:01:27 2012 +0100
@@ -121,13 +121,10 @@
</div><!-- header -->
<div class="content clearfix">
<div class="col-left">
- <form action="#" method="">
+ <div class="left-head">
<h2>Sélectionner les vidéos</h2>
- <p>
- <input type="text" name="" placeholder="Rechercher une vidéo" />
- <input type="submit" value="" />
- </p>
- </form>
+ <input type="text" name="" placeholder="Rechercher une vidéo" />
+ </div>
<ul class="list-video">
</ul>
@@ -150,6 +147,7 @@
<li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
</ol>
</div>
+ <div class="video-wait"></div>
<a class="publier-button" title="Publier" href="#"></a>
</div>
@@ -237,9 +235,11 @@
<div class="bloc-pvw">
<div class="frise">
- <div class="frise-indications">
- </div>
- <div class="frise-segments">
+ <div class="frise-overflow">
+ <div class="frise-segments">
+ </div>
+ <div class="frise-indications">
+ </div>
</div>
<div class="frise-position"></div>
@@ -282,9 +282,11 @@
<h2>Liste des segments</h2>
<div class="frise">
<p class="aucun-segment">Aucun segment</p>
- <div class="frise-indications">
- </div>
- <div class="frise-segments">
+ <div class="frise-overflow">
+ <div class="frise-segments">
+ </div>
+ <div class="frise-indications">
+ </div>
</div>
</div>
Binary file integration/img/reel.gif has changed
--- a/integration/js/editor.js Mon Nov 05 15:06:14 2012 +0100
+++ b/integration/js/editor.js Tue Nov 06 11:01:27 2012 +0100
@@ -1,5 +1,15 @@
+
+IriSP.hc_messages = {
+ duration_ : "Durée :",
+ edit_segment: "Éditer le segment",
+ segment_down: "Descendre le segment",
+ segment_up: "Remonter le segment",
+ delete_segment: "Supprimer le segment"
+}
+
IriSP.Hashcut = function(options) {
+
/* Load Media List */
var directory = new IriSP.Model.Directory(),
@@ -10,14 +20,14 @@
mashup = new IriSP.Model.Mashup(false, project),
mediatemplate = _.template('<li class="item-video" data-media-id="<%= id %>"><img src="<%= thumbnail %>" alt="<%= title %>" />'
+ '<span class="video-info"><span class="title-video"><%= title %></span><span class="author"><%= description %></span>'
- + '<span class="time-length">Durée : <span><%= duration.toString() %></span></span></span></li>'),
+ + '<span class="time-length"><%= IriSP.hc_messages.duration_ %> <span><%= duration.toString() %></span></span></span></li>'),
segmenttemplate = _.template('<li class="item-video" data-segment-id="<%= annotation.id %>" data-media-id="<%= annotation.getMedia().id %>">'
+ '<img src="<%= annotation.getMedia().thumbnail %>" alt="<%= annotation.getMedia().title %>" />'
+ '<span class="video-info"><span class="title-video"><%= annotation.getMedia().title %></span>'
+ '<span class="subtitle"><%= annotation.title %></span><span class="duration"><%= annotation.begin.toString() %> - <%= annotation.end.toString() %> (<%= annotation.getDuration().toString() %>)</span>'
- + '<ul class="tools"><li><a class="edit" href="#" title="Éditer le segment"></a></li><li><a class="bottom" href="#" title="Descendre le segment"></a></li>'
- + '<li><a class="top" href="#" title="Remonter le segment"></a></li><li><a class="delete" href="#" title="Supprimer le segment"></a></li></ul></span></li>'),
- viztemplate = _.template('<div class="frise-segment" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
+ + '<ul class="tools"><li><a class="edit" href="#" title="<%= IriSP.hc_messages.edit_segment %>"></a></li><li><a class="bottom" href="#" title="<%= IriSP.hc_messages.segment_down %>"></a></li>'
+ + '<li><a class="top" href="#" title="<%= IriSP.hc_messages.segment_up %>"></a></li><li><a class="delete" href="#" title="<%= IriSP.hc_messages.delete_segment %>"></a></li></ul></span></li>'),
+ viztemplate = _.template('<div class="frise-segment" data-segment-id="<%= segmentid %>" style="background-color:<%= color %>; left:<%= left %>%; width:<%= width %>%;"></div>'),
intervaltemplate = _.template('<span class="frise-indication" style="left:<%= left %>%;"><%= time.toString() %></span>'),
mediasegmenttemplate = _.template('<div class="media-segments-list"><div class="media-segment">'
+ '<div class="media-section media-segment-section" style="left:<%= left %>px; width:<%= width %>px; background:<%= annotation.getMedia().color %>"></div>'
@@ -79,7 +89,8 @@
var vizdata = {
left: k * t,
width: k * _s.duration,
- color: _s.getMedia().color
+ color: _s.getMedia().color,
+ segmentid: _s.annotation.id
}
vizhtml += viztemplate(vizdata);
t += _s.duration.milliseconds;
@@ -182,7 +193,6 @@
timeSlider.mousemove(function(_e) {
var _x = _e.pageX - timeSlider.offset().left,
_t = new IriSP.Model.Time(
- currentMedia ? currentMedia.duration * _x / timeSlider.width() : 0
);
timeTooltip.text(_t.toString()).css("left",_x);
});
@@ -366,9 +376,15 @@
mashupSegmentEnd,
mashupTimecode = 0,
mashupSeeking = false,
- mashupSeekdiv,
+ seekdiv = $(".video-wait"),
mashupTimedelta;
-
+
+ function showSeek() {
+ if (mashupSeeking) {
+ seekdiv.show();
+ }
+ }
+
function changeCurrentAnnotation() {
if (mashupTimecode >= mashup.duration) {
if (!mashup.paused) {
@@ -409,7 +425,7 @@
if (!mashup.paused) {
mashupCurrentMedia.play();
mashupSeeking = true;
-//TODO: _seekdiv.show();
+ setTimeout(showSeek,200);
}
mashup.trigger("timeupdate", new IriSP.Model.Time(mashupTimecode));
@@ -445,17 +461,16 @@
var addMode;
function setMedia(media) {
- $(".col-left .item-video").removeClass("active");
- $(".tutorial").hide();
- //TODO: Show Tutorial when Hashcut is empty
if (currentMedia) {
currentMedia.pause();
}
currentMedia = media;
if (currentMedia.elementType == "media") {
$("video").hide();
- $(".col-left .item-video[data-media-id='" + currentMedia.id + "']").addClass("active");
showSegmentation();
+ if (!currentMedia.loaded) {
+ seekdiv.show();
+ }
var currentvideo = $('#video_' + currentMedia.id);
if (!currentvideo.length) {
addMediaPlayer(currentMedia);
@@ -491,6 +506,7 @@
$(".annotation-media-title").text(this.getMedia().title);
$(".annotation-description").text(this.description);
setPointerToCurrentAnnotation();
+ highlightCurrentSegment();
}
});
}
@@ -655,6 +671,9 @@
// Binding UI Events and Mashup Playing to Media
media.on("loadedmetadata", function() {
+ if (media === currentMedia) {
+ seekdiv.hide();
+ }
mashup.checkLoaded();
});
@@ -701,7 +720,7 @@
media.seeking = false;
if (mashup === currentMedia && media === mashupCurrentMedia && mashupSeeking) {
mashupSeeking = false;
-//TODO: _seekdiv.hide();
+ seekdiv.hide();
}
});
@@ -821,6 +840,11 @@
$(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode");
return false;
}
+ function showEmpty() {
+ $("video").hide();
+ $(".col-middle").removeClass("pvw-mode segment-mode").addClass("empty-mode");
+ return false;
+ }
$(".tab-pvw").click(function() {
if (mashup.segments.length) {
@@ -836,17 +860,42 @@
}
function highlightCurrentSegment() {
- $(".organize-segments .item-video").removeClass("active");
+ $(".organize-segments .item-video, .col-left .item-video, .frise-segment").removeClass("active");
+ var segmentid = undefined;
if (currentMedia && currentSegment) {
- $(".item-video[data-segment-id='" + currentSegment.id + "']").addClass("active");
+ segmentid = currentSegment.id;
+ }
+ if (currentMedia === mashup && mashupCurrentAnnotation) {
+ segmentid = mashupCurrentAnnotation.annotation.id;
}
+ $(".item-video[data-segment-id='" + segmentid + "']").addClass("active");
+ var mediaid = undefined;
+ if (currentMedia) {
+ mediaid = currentMedia.id;
+ }
+ if (currentMedia === mashup && mashupCurrentMedia) {
+ mediaid = mashupCurrentMedia.id
+ }
+ $(".col-left .item-video[data-media-id='" + mediaid + "']").addClass("active");
}
- $(".organize-segments").sortable({
+ function hoverSegment() {
+ var segmentid = $(this).attr("data-segment-id");
+ $(".organize-segments .item-video, .frise-segment").removeClass("active");
+ $(".item-video[data-segment-id='" + segmentid + "'], .frise-segment[data-segment-id='" + segmentid + "']").addClass("active");
+ }
+
+ $(".frise")
+ .on("mouseover", ".frise-segment", hoverSegment)
+ .on("mouseout", ".frise-segment", highlightCurrentSegment)
+
+ $(".organize-segments")
+ .sortable({
stop : reorganizeMashup
- });
-
- $(".organize-segments").on("click", ".item-video", function(e) {
+ })
+ .on("mouseover", ".item-video", hoverSegment)
+ .on("mouseout", ".item-video", highlightCurrentSegment)
+ .on("click", ".item-video", function(e) {
var el = $(this),
segment = mashup.getAnnotationById(el.attr("data-segment-id"));
setMedia(mashup);
@@ -854,34 +903,33 @@
mashup.setCurrentTime(segment.begin);
}
return false;
- });
-
- $(".organize-segments").on("click", ".edit", function(e) {
+ })
+ .on("click", ".edit", function(e) {
var currentItem = $(this).parents(".item-video"),
media = project.getElement(currentItem.attr("data-media-id")),
segment = project.getElement(currentItem.attr("data-segment-id"));
currentSegment = segment;
setMedia(media);
return false;
- });
-
- $(".organize-segments").on("click", ".top", function(e){
+ })
+ .on("click", ".top", function(e){
var currentItem = $(this).parents(".item-video");
currentItem.insertBefore(currentItem.prev());
reorganizeMashup();
return false;
- });
-
- $(".organize-segments").on("click", ".bottom", function(e){
+ })
+ .on("click", ".bottom", function(e){
var currentItem = $(this).parents(".item-video");
currentItem.insertAfter(currentItem.next());
reorganizeMashup();
return false;
- });
-
- $(".organize-segments").on("click", ".delete", function(e){
+ })
+ .on("click", ".delete", function(e){
var id = $(this).parents(".item-video").attr("data-segment-id");
mashup.removeAnnotationById(id);
+ if (!mashup.segments.length) {
+ showEmpty();
+ }
return false;
});
@@ -972,4 +1020,11 @@
return false;
});
+ /* Changing Hashcut Title and description */
+
+ $("#hashcut-title").on("keyup change input paste", function() {
+ mashup.title = $(this).val();
+ $(".title-video-wrap a").text(mashup.title);
+ });
+
}
