--- a/player/css/styles.css Tue May 28 12:26:49 2013 +0200
+++ b/player/css/styles.css Wed May 29 17:05:34 2013 +0200
@@ -84,7 +84,7 @@
}
.tags-title {
- line-height: 40px; padding: 0 15px; font-size: 11px; color: #cc40c0;
+ line-height: 40px; padding: 0 15px; font-size: 11px; color: #B8155F;
font-family: 'Futura-Medium'; text-transform: uppercase;
}
@@ -97,20 +97,16 @@
padding: 10px 0; display: none;
}
-.tags:hover .tags-list {
- display: block;
-}
-
.tag {
color: #cccccc; padding: 5px 15px;
}
.tag:hover {
- color: #cc40c0; background: #202020;
+ color: #ffffff; background: #202020;
}
.tag.found {
- color: #cc40c0;
+ color: #ffffff;
}
/* Annotation colors */
@@ -144,30 +140,36 @@
.pictolist {
position: absolute;
- left: 20px; bottom: 115px;
+ left: 14px; bottom: 24px;
}
.pictolist li {
- height: 34px; margin-top: 12px; line-height: 34px; display: none;
+ line-height: 38px; opacity: 0; display: none; height: 0;
+ padding: 6px; width: 38px; overflow: hidden;
+ -webkit-transition: width 0.5s;
+ transition: width 0.5s;
+}
+
+.pictolist li.hover {
+ width: 400px;
}
.picto {
float: left; padding: 7px; background:black;
border-radius: 19px; cursor: pointer;
+ -webkit-transition: box-shadow 0.5s, background 0.5s;
+ transition: box-shadow 0.5s, background 0.5s;
}
.found .picto {
- box-shadow: 0 0 8px #ff00f0;
- border: 2px solid #800078; padding: 5px;
+ box-shadow: 0 0 8px #ffffff;
+ border: 1px solid #cccccc; padding: 6px;
}
.picto-title {
- margin-left: 10px; font-size: 12px; text-transform: uppercase;
- display: none; text-shadow: 0.3px 0.7px 0 rgba(0,0,0,.5), -0.3px -0.7px 0 rgba(200,200,200,.5); font-family: 'Futura-Medium';
-}
-
-.hover .picto-title {
- display: inline;
+ margin-left: 8px; font-size: 12px; text-transform: uppercase;
+ padding: 4px 6px; background: rgba(0, 0, 0, .5); text-shadow: 1px 1px 1px #000000;
+ font-family: 'Futura-Medium';
}
.picto a {
@@ -274,35 +276,62 @@
}
.annotation {
- left: 45px; top: 20px; right: 35px;
+ left: 45px; top: 800px; right: 35px;
+}
+
+.annotation-main:after {
+ content: "."; visibility: hidden; display: block; height: 1px; clear: both;
}
-/* Text annotation */
+/* Narrow annotations */
-.text-annotation,
-.link-annotation,
-.audio-annotation {
+.narrow-annotation {
+ left: 210px; right: 200px;
+}
+
+/* White annotations */
+
+.white-annotation {
background: #ffffff; max-height: 522px; overflow: auto;
}
-.text-annotation .close-annotation,
-.audio-annotation .close-annotation,
-.link-annotation .close-annotation {
+.white-annotation {
color: #000000;
}
-.text-annotation .close-annotation:hover,
-.audio-annotation .close-annotation:hover,
-.link-annotation .close-annotation:hover {
+.white-annotation .close-annotation:hover {
color: #666666;
}
-.text-annotation .annotation-title,
-.audio-annotation .annotation-title,
-.link-annotation .annotation-title {
+.white-annotation .annotation-title {
font-size: 23px; margin: 24px 0;
}
+/* Black annotations */
+
+.black-annotation .annotation-main {
+ position: relative; background: rgba(0,0,0,.7);
+}
+
+.black-annotation .annotation-title {
+ height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000;
+}
+
+.black-annotation .close-annotation {
+ color: #ffffff; margin-right: 10px;
+}
+
+.black-annotation .close-annotation:hover {
+ color: #cccccc;
+}
+
+.black-annotation p {
+ margin: 10px 25px 10px 15px;
+ font-size: 12px; color: #CCCCCC;
+}
+
+/* Text annotation */
+
.text-contents {
font-family: Georgia, 'Times New Roman', serif;
margin: 0 45px 35px;
@@ -376,33 +405,22 @@
/* Audio annotation */
.audio-annotation .media-description {
- font-family: Georgia, 'Times New Roman', serif;
- margin: 35px 45px; font-size: 15px;
+ margin: 25px 0 0; font-size: 15px;
+}
+
+.audio-annotation .annotation-main {
+ padding: 25px 0 15px;
}
.audio-annotation .media-frame {
- margin: 0 45px;
+ margin: 0 15px;
}
.audio-annotation p {
- margin-bottom: 10px;
+ margin: 10px 15px;
}
-/* Slideshow annotation */
-
-.slideshow-center,
-.video-center {
- position: relative; background: rgba(0,0,0,.7);
-}
-
-.slideshow-annotation .annotation-title,
-.video-annotation .annotation-title {
- height: 35px; line-height: 35px; color: #ffffff; font-size: 14px; background: #000000;
-}
-
-.slideshow-frame {
- float: left;
-}
+/* Video annotation */
.video-annotation .media-frame {
float: left; width: 650px; max-height: 487px;
@@ -412,6 +430,15 @@
width: 650px; max-height: 487px;
}
+.video-annotation .media-description {
+ max-height: 487px; overflow: auto;
+}
+
+/* Slideshow annotation */
+
+.slideshow-frame {
+ float: left;
+}
.slideshow-image {
max-width: 650px; max-height: 452px; margin: 0 auto; display: block;
}
@@ -419,6 +446,8 @@
.slideshow-play-pause {
float: left; padding: 10px 15px 11px;
background: #404040; cursor: pointer;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.slideshow-play-pause a {
@@ -438,41 +467,18 @@
clear: both; height: 35px; background: #000000;
}
-.slideshow-annotation .close-annotation,
-.video-annotation .close-annotation {
- color: #ffffff; margin-right: 10px;
-}
-
-.slideshow-annotation .close-annotation:hover,
-.video-annotation .close-annotation:hover {
- color: #cccccc;
-}
-
-.slideshow-annotation p,
-.video-annotation p {
- margin: 10px 25px 10px 15px;
- font-size: 12px; color: #CCCCCC;
-}
-
.slideshow-description {
max-height: 452px; overflow: auto;
}
-.video-annotation .media-description {
- max-height: 487px; overflow: auto;
-}
-
-.slideshow-center:after,
-.video-center:after {
- content: "."; visibility: hidden; display: block; height: 1px; clear: both;
-}
-
.slideshow-title {
line-height: 35px; margin: 0 15px; font-family: 'Futura-Medium'; font-size: 13px; color: #cccccc; float: left;
}
.slideshow-arrow {
position: absolute; top: 50%; margin-top: -22px; padding: 10px; cursor: pointer;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.slideshow-arrow a {
@@ -510,6 +516,8 @@
padding: 8px; border-radius: 15px;
background: #555555; cursor: pointer;
margin: 8px 0 0 15px;
+ -webkit-transition: background 0.5s;
+ transition: background 0.5s;
}
.play-button:hover {
@@ -527,6 +535,7 @@
.chapters-bar {
margin: 0 20px 0 60px; height: 45px; position: relative; cursor: pointer;
+ transition: opacity 0.5s;
}
.chapter {
@@ -538,6 +547,8 @@
margin: 0 -1px;
border-style: none solid; border-width: 1px;
border-color: #000000;
+ -webkit-transition: box-shadow 0.5s, background 0.5s;
+ transition: box-shadow 0.5s, background 0.5s;
}
.chapter.active .chapter-block {
@@ -545,7 +556,7 @@
}
.chapter.found .chapter-block {
- box-shadow: 0 0 20px rgba(255, 0, 240, .6) inset;
+ box-shadow: 0 0 20px rgba(255, 255, 255, .6) inset;
}
.annotation-onscreen .chapter-block {
@@ -553,14 +564,16 @@
}
.chapter-title {
- position: absolute; top: 53px; left: 50%; width: 240px; margin-left: -120px;
+ position: absolute; top: 53px; left: 50%; width: 300px; margin-left: -150px;
font-size: 9px; text-transform: uppercase;
- text-align: center; color: #909090; display: none;
+ text-align: center; color: #909090; opacity: 0;
font-family: 'Futura-Medium';
+ -webkit-transition: background 0.5s;
+ transition: opacity 0.5s;
}
.chapter.active .chapter-title {
- display: block;
+ opacity: 1;
}
.chip {
@@ -569,19 +582,31 @@
.chip-circle {
width: 11px; height: 11px; top: 17px; left: -5px; border-radius: 6px; position: absolute;
+ -webkit-transition: box-shadow 0.5s, opacity 0.5s;
+ transition: box-shadow 0.5s, opacity 0.5s;
+}
+
+.chip-pole {
+ position: absolute; top: 2px; left: 0; width: 0; height: 13px; border-left: 1px solid; display: none;
+}
+
+.chip.hover .chip-pole {
+ display: block;
}
.chip-title {
- position: absolute; top: 2px; left: 0; font-size: 9px; text-transform: uppercase;
- display: none; font-family: 'Futura-Medium'; width: 200px; border-left: 1px solid; padding: 0 3px 4px; line-height: 9px;
-}
-
-.left .chip-title {
- border-left: none; border-right: 1px solid; left: auto; right: 0; text-align: right;
+ position: absolute; top: 2px; left: 3px; font-size: 9px; line-height: 9px; height: 9px; text-transform: uppercase;
+ display: block; font-family: 'Futura-Medium'; width: 0; overflow: hidden;
+ -webkit-transition: width 0.5s;
+ transition: width 0.5s;
}
.chip.hover .chip-title {
- display: block;
+ width: 200px;
+}
+
+.chip.left .chip-title {
+ left: auto; right: 3px; text-align: right;
}
.annotation-onscreen .chip {
@@ -594,8 +619,8 @@
}
.found .chip-circle {
- box-shadow: 0 0 8px #ff00f0;
- border: 2px solid #800078; width: 9px; height: 9px;
+ box-shadow: 0 0 8px #ffffff;
+ border: 1px solid #cccccc; width: 9px; height: 9px;
}
.video .chip-circle {
@@ -634,13 +659,18 @@
right: -6px;
}
+.chapter-nav {
+ position: relative;
+}
+
.prev-chapter, .next-chapter {
+ position: absolute; z-index: 4;
width: 12px; height: 16px; margin: 8px 5px;
background: url(../img/sprites.png); cursor: pointer;
}
.next-chapter {
- float: right; background-position: -12px -144px;
+ right: 0; background-position: -12px -144px;
}
.next-chapter:hover {
@@ -652,7 +682,7 @@
}
.prev-chapter {
- float: left; background-position: 0 -144px;
+ left: 0; background-position: 0 -144px;
}
.prev-chapter:hover {
--- a/player/index.html Tue May 28 12:26:49 2013 +0200
+++ b/player/index.html Wed May 29 17:05:34 2013 +0200
@@ -48,13 +48,13 @@
<div class="annotation-templates">
<div class="annotations">
- <div class="annotation text-annotation">
+ <div class="annotation text-annotation white-annotation">
<a href="#" class="close-annotation">×</a>
<h2 class="annotation-title"></h2>
<div class="text-contents"></div>
</div>
- <div class="annotation link-annotation">
+ <div class="annotation link-annotation white-annotation narrow-annotation">
<a href="#" class="close-annotation">×</a>
<h2 class="annotation-title"></h2>
<div class="link-contents">
@@ -62,10 +62,10 @@
</div>
</div>
- <div class="annotation slideshow-annotation">
+ <div class="annotation slideshow-annotation black-annotation">
<a href="#" class="close-annotation">×</a>
<h2 class="annotation-title"></h2>
- <div class="slideshow-center">
+ <div class="annotation-main">
<div class="slideshow-frame">
<img class="slideshow-image" />
</div>
@@ -86,17 +86,19 @@
</div>
</div>
- <div class="annotation audio-annotation">
+ <div class="annotation audio-annotation black-annotation narrow-annotation">
<a href="#" class="close-annotation">×</a>
<h2 class="annotation-title"></h2>
- <div class="media-frame"></div>
- <div class="media-description"></div>
+ <div class="annotation-main">
+ <div class="media-frame"></div>
+ <div class="media-description"></div>
+ </div>
</div>
- <div class="annotation video-annotation">
+ <div class="annotation video-annotation black-annotation">
<a href="#" class="close-annotation">×</a>
<h2 class="annotation-title"></h2>
- <div class="video-center">
+ <div class="annotation-main">
<div class="media-frame">
</div>
<div class="media-description">
--- a/player/js/player.js Tue May 28 12:26:49 2013 +0200
+++ b/player/js/player.js Wed May 29 17:05:34 2013 +0200
@@ -50,11 +50,19 @@
$(".tags-list").html(tags.map(tagTemplate).join(""));
+ $(".tags-title").mouseenter(function() {
+ $(".tags-list").slideDown();
+ });
+ $(".tags").mouseleave(function() {
+ $(".tags-list").slideUp();
+ });
+
$("body").click(function() {
if (clickedTag) {
$(".found").removeClass("found");
clickedTag = null;
}
+ return false;
});
function showTag(tagId) {
@@ -100,6 +108,7 @@
var element = $(chapterTemplate(chapter));
element.click(function() {
myMedia.setCurrentTime(chapter.begin);
+ return false;
}).hover(function() {
hoveredChapter = element;
highlightChapter();
@@ -169,11 +178,13 @@
);
var chipTemplate = _.template(
- '<li class="chip <%- type %><%- left %>" style="left: <%- pos %>%"><span class="chip-circle">'
- + '</span><span class="chip-title"><%- annotation.title %></span></li>'
+ '<li class="chip <%- type %><%- left %>" style="left: <%- pos %>%"><div class="chip-circle">'
+ + '</div><div class="chip-pole"></div><div class="chip-title"><%- annotation.title %></div></li>'
);
- var annotations = myProject.getAnnotationsByTypeTitle("annotations");
+ var annotations = myProject.getAnnotationsByTypeTitle("annotations").sortBy(function(a) {
+ return a.begin;
+ });
var annotationinfos = annotations.map(function(annotation) {
var annotationinfo = {
@@ -203,6 +214,7 @@
annotationinfo.both = annotationinfo.picto.add(annotationinfo.chip);
annotationinfo.both.click(function() {
openAnnotation(annotationinfo);
+ return false;
})
.hover(function() {
annotationinfo.both.addClass("hover");
@@ -210,10 +222,18 @@
annotationinfo.both.removeClass("hover");
});
annotation.on("enter", function() {
- annotationinfo.picto.show();
+ annotationinfo.picto.show().animate({
+ height: "38px",
+ opacity: 1
+ });
});
annotation.on("leave", function() {
- annotationinfo.picto.hide();
+ annotationinfo.picto.animate({
+ height: 0,
+ opacity: 0
+ }, function() {
+ annotationinfo.picto.hide();
+ });
});
annotation.on("found-tags", function() {
annotationinfo.both.addClass("found");
@@ -246,6 +266,7 @@
var annotationDiv = $(".annotation-templates ." + annotationinfo.type + "-annotation").clone();
annotationDiv.appendTo($(".main-video"));
+ annotationDiv.animate({top: "20px"});
annotationDiv.find(".close-annotation").click(closeAnnotation);
annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
@@ -264,12 +285,15 @@
imgel.css("margin-top","");
var w = imgel.width(),
h = imgel.height();
- annotationDiv.find(".slideshow-center").css("height","");
+ annotationDiv.find(".annotation-main").css("height","");
annotationDiv.find(".slideshow-description").css("margin-left",w);
- var h2 = annotationDiv.find(".slideshow-center").height();
+ var h2 = annotationDiv.find(".annotation-main").height();
if (h < h2) {
imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
}
+ if (+imgel.css("opacity") !== 1) {
+ imgel.fadeTo(400, 1);
+ }
}
var showCurrentImage = function() {
@@ -290,7 +314,8 @@
var nextImage = function() {
currentslide = (currentslide + 1) % slides.length;
- showCurrentImage();
+ annotationDiv.find(".slideshow-image").fadeTo(400, 0, showCurrentImage);
+ return false;
}
var togglePlay = function() {
@@ -302,6 +327,7 @@
} else {
annotationDiv.find(".slideshow-play-pause").removeClass("pause");
}
+ return false;
}
var checkloaded = function() {
@@ -331,7 +357,7 @@
annotationDiv.find(".slideshow-next").click(nextImage);
annotationDiv.find(".slideshow-previous").click(function() {
currentslide = (currentslide ? currentslide : slides.length) - 1;
- showCurrentImage();
+ annotationDiv.find(".slideshow-image").fadeTo(400, 0, showCurrentImage);
});
annotationDiv.find(".slideshow-play-pause").click(togglePlay);
} else {
@@ -391,8 +417,8 @@
width: mediaW,
height: mediaH,
url: src,
- autoplay: +annotationinfo.annotation.content.autostart,
- color: "be4477",
+ autoplay: annotationinfo.annotation.content.autostart,
+ color: "B8155F",
portrait: false,
title: false,
byline: false
@@ -431,7 +457,7 @@
auto_play: annotationinfo.annotation.content.autostart,
show_artwork: false,
url: src,
- color: "63be6c"
+ color: "B8155F"
},
success: function(data) {
annotationDiv.find(".media-frame").html(data.html);