# HG changeset patch # User veltr # Date 1369839934 -7200 # Node ID e8faf97d2a4089527107c4ed8114f70306a02ed7 # Parent d708a1da0ea2da3ced5f05ffa04f78423aed7f7a Added some fun transitions diff -r d708a1da0ea2 -r e8faf97d2a40 player/css/styles.css --- 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 { diff -r d708a1da0ea2 -r e8faf97d2a40 player/index.html --- 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 @@
-
+
×

-
+
×

@@ -62,10 +62,10 @@
-
+
×

-
+
@@ -86,17 +86,19 @@
-
+
×

-
-
+
+
+
+
-
+
×

-
+
diff -r d708a1da0ea2 -r e8faf97d2a40 player/js/player.js --- 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( - '
  • ' - + '<%- annotation.title %>
    • ' + '
  • ' + + '
    <%- annotation.title %>
    • ' ); - 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);