# HG changeset patch
# User veltr
# Date 1372326978 -7200
# Node ID f0e31d1c2f688b85cc4c4dcbb1c06ad37f0bcfe4
# Parent 7352c3d88d73fe738541baf2ed26833bbf0ed148
Moar pixelz 4 videoz
diff -r 7352c3d88d73 -r f0e31d1c2f68 src/metadatacomposer/static/metadatacomposer/css/styles_player.css
--- a/src/metadatacomposer/static/metadatacomposer/css/styles_player.css Wed Jun 26 18:21:38 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/css/styles_player.css Thu Jun 27 11:56:18 2013 +0200
@@ -336,7 +336,8 @@
}
.annotation {
- position: absolute; left: 50%;
+ position: absolute; top: 800px;
+ transition: all 0.5s; -webkit-transition: all 0.5s;
}
.annotation-title {
@@ -347,19 +348,22 @@
float: right; margin: 10px 10px 0 0; width: 11px; height: 10px; background-image: url(../img/sprites.png);
}
-.annotation {
- top: 800px; width: 920px; margin-left: -455px;
- transition: top 0.5s; -webkit-transition: top 0.5s;
-}
-
.annotation-main:after, .about-collaboration:after {
content: "."; visibility: hidden; display: block; height: 0; line-height: 0; clear: both;
}
-/* Narrow annotations */
+/* Annotation sizes */
+
+.link-annotation, .text-annotation, .audio-annotation {
+ left: 50%; width: 590px; margin-left: -290px;
+}
-.narrow-annotation {
- width: 590px; margin-left: -290px;
+.about-box, .slideshow-annotation {
+ left: 50%; width: 920px; margin-left: -455px;
+}
+
+.video-annotation {
+ left: 45px; right: 35px;
}
/* White annotations */
@@ -413,7 +417,7 @@
font-family: Georgia, 'Times New Roman', serif;
overflow: auto;
}
-
+
.text-contents {
margin: 0 25px 35px; font-size: 15px; padding: 0 20px 0;
}
@@ -504,15 +508,15 @@
/* Video annotation */
.video-annotation .media-frame {
- float: left; width: 650px; max-height: 487px;
+ margin-right: 250px;
}
.video-annotation video {
- width: 650px; max-height: 487px;
+ float: left;
}
.video-annotation .media-description {
- max-height: 487px; overflow: auto;
+ float: right; width: 250px; overflow: auto;
}
/* Slideshow annotation */
@@ -724,7 +728,8 @@
left: auto; right: 3px; text-align: right;
}
-.annotation-onscreen .chip {
+.annotation-onscreen .chip,
+.searching .chip-circle {
opacity: .3;
}
@@ -758,7 +763,7 @@
}
.found .chip-circle {
- background: #ffffff;
+ background: #ffffff; opacity: 1;
border: 2px solid; left: -6px; top: 14px; width: 9px; height: 9px;
}
diff -r 7352c3d88d73 -r f0e31d1c2f68 src/metadatacomposer/static/metadatacomposer/js/player.js
--- a/src/metadatacomposer/static/metadatacomposer/js/player.js Wed Jun 26 18:21:38 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/player.js Thu Jun 27 11:56:18 2013 +0200
@@ -86,6 +86,7 @@
}).click(function() {
if (clickedTag) {
$(".found").removeClass("found");
+ $(".timelines").removeClass("searching");
clickedTag = null;
}
return false;
@@ -98,10 +99,13 @@
$(".found").removeClass("found");
var tag = myProject.getElement(tagId);
if (tag) {
+ $(".timelines").addClass("searching");
tag.getRelated("annotation").forEach(function(a) {
a.trigger("found-tags");
});
$(".tag[data-tag-id="+tagId+"]").addClass("found");
+ } else {
+ $(".timelines").removeClass("searching");
}
lastTag = tagId;
}
@@ -293,10 +297,28 @@
annotationDiv.find(".close-annotation").click(closeAnnotation);
annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
-
- var positionDiv = function() {
+ annotationinfo.positionDiv = function() {
+ var mainH = $(".main-video").height()
+ switch (annotationinfo.type) {
+ case "video":
+ var mediaW = annotationDiv.find(".media-frame").width(),
+ mediaH = Math.floor(Math.min(mainH - 70, mediaW * 9 / 16));
+ annotationDiv.find("iframe, video").attr({
+ width: mediaW,
+ height: mediaH
+ });
+ annotationDiv.find(".media-description").css({
+ height: mediaH
+ });
+ break;
+ case "text":
+ annotationDiv.find(".text-contents").css({
+ "max-height": mainH - 140
+ });
+ break;
+ }
annotationDiv.css({
- top: Math.floor(($(".main-video").height() - annotationDiv.height())/2)+"px"
+ top: Math.floor((mainH - annotationDiv.height())/2)+"px"
});
}
@@ -409,11 +431,11 @@
);
var htmlTemplate = _.template(
- '<<%- type %> width="<%- width %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>'
+ '<<%- type %> width="<%- width %>" height="<%- height %>" controls="true" autoplay="<%- autoplay %>" src="<%- src %>"/>'
);
- var mediaW = (annotationinfo.type === "audio" ? "100%" : "650"),
- mediaH = (annotationinfo.type === "audio" ? "60" : "420");
+ var mediaW = (annotationinfo.type === "audio" ? "100%" : annotationDiv.find(".media-frame").width()),
+ mediaH = (annotationinfo.type === "audio" ? "60" : Math.floor(Math.min($(".main-video").height() - 70, mediaW * 9 / 16)));
annotationDiv.find(".media-description").html(
annotationinfo.annotation.description.split(/\n/gm).map(function(l) {
@@ -458,7 +480,7 @@
},
success: function(data) {
annotationDiv.find(".media-frame").html(data.html);
- positionDiv();
+ annotationinfo.positionDiv();
}
});
break;
@@ -471,12 +493,12 @@
data: {
format: "json",
maxwidth: mediaW,
- maxheight: 487,
+ maxheight: mediaH,
url: src
},
success: function(data) {
annotationDiv.find(".media-frame").html(data.html);
- positionDiv();
+ annotationinfo.positionDiv();
}
});
break;
@@ -496,7 +518,7 @@
},
success: function(data) {
annotationDiv.find(".media-frame").html(data.html);
- positionDiv();
+ annotationinfo.positionDiv();
}
});
break;
@@ -520,7 +542,7 @@
}));
media.on("loadedmetadata", function() {
- positionDiv();
+ annotationinfo.positionDiv();
});
preventRightClick(media);
@@ -546,9 +568,6 @@
break;
}
annotationDiv.find(".text-contents a").attr("target","_blank");
- annotationDiv.find(".text-contents").css({
- "max-height": $(".main-video").height() - 140
- });
break;
@@ -558,14 +577,12 @@
annotationDiv.find(".link-contents").html(
annotationinfo.annotation.content.links.map(linkTemplate).join("")
- ).css({
- "max-height": $(".main-video").height() - 140
- });
+ );
break;
}
- positionDiv();
+ annotationinfo.positionDiv();
}
@@ -600,7 +617,23 @@
}
$(".full-screen").click(fullScreen);
+ $(".top-bar").dblclick(fullScreen);
+ var fsel = document.querySelector("body"),
+ fsRequestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
+ fsCapable = false;
+
+ for (var i = 0; i < fsRequestMethods.length; i++) {
+ if (typeof fsel[fsRequestMethods[i]] === "function") {
+ fsCapable = true;
+ break;
+ }
+ }
+
+ if (!fsCapable) {
+ $(".full-screen").remove();
+ }
+
$(".about").click(function() {
closeAnnotation();
var aboutBox = $(".annotation-templates .about-box").clone().appendTo($(".main-video"));
@@ -650,6 +683,9 @@
left: dw,
bottom: dh
});
+ if (currentAnnotation) {
+ currentAnnotation.positionDiv();
+ }
}
$(".video-container video").on("loadedmetadata",repositionElements);
diff -r 7352c3d88d73 -r f0e31d1c2f68 src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html
--- a/src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html Wed Jun 26 18:21:38 2013 +0200
+++ b/src/metadatacomposer/templates/partial/metadatacomposer_partial_player.html Thu Jun 27 11:56:18 2013 +0200
@@ -49,12 +49,12 @@
{% include player_about %}
-