--- a/player/css/styles.css Wed Jun 26 11:35:56 2013 +0200
+++ b/player/css/styles.css Thu Jun 27 11:51:46 2013 +0200
@@ -336,7 +336,7 @@
}
.annotation {
- position: absolute; left: 50%;
+ position: absolute;
}
.annotation-title {
@@ -348,18 +348,26 @@
}
.annotation {
- top: 800px; width: 920px; margin-left: -455px;
- transition: top 0.5s; -webkit-transition: top 0.5s;
+ top: 800px;
+ transition: all 0.5s; -webkit-transition: all 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 */
@@ -504,15 +512,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 +732,8 @@
left: auto; right: 3px; text-align: right;
}
-.annotation-onscreen .chip {
+.annotation-onscreen .chip,
+.searching .chip-circle {
opacity: .3;
}
@@ -758,7 +767,7 @@
}
.found .chip-circle {
- background: #ffffff;
+ background: #ffffff; opacity: 1;
border: 2px solid; left: -6px; top: 14px; width: 9px; height: 9px;
}
--- a/player/index.html Wed Jun 26 11:35:56 2013 +0200
+++ b/player/index.html Thu Jun 27 11:51:46 2013 +0200
@@ -15,7 +15,7 @@
<script type="text/javascript" src="js/player.js"></script>
<script type="text/javascript">
$(function() {
- IriSP.player("data/rigoletto.json");
+ IriSP.player("http://176.31.235.78/ldt/aixweb/ldt/cljson/id/f3a96162-da44-11e2-97a7-002590a181b8");
});
</script>
</head>
@@ -83,13 +83,13 @@
</ul>
</div>
- <div class="annotation text-annotation white-annotation narrow-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 white-annotation narrow-annotation">
+ <div class="annotation link-annotation white-annotation">
<a href="#" class="close-annotation"></a>
<h2 class="annotation-title"></h2>
<div class="link-contents">
@@ -121,7 +121,7 @@
</div>
</div>
- <div class="annotation audio-annotation black-annotation narrow-annotation">
+ <div class="annotation audio-annotation black-annotation">
<a href="#" class="close-annotation"></a>
<h2 class="annotation-title"></h2>
<div class="annotation-main">
@@ -134,9 +134,9 @@
<a href="#" class="close-annotation"></a>
<h2 class="annotation-title"></h2>
<div class="annotation-main">
- <div class="media-frame">
+ <div class="media-description">
</div>
- <div class="media-description">
+ <div class="media-frame">
</div>
</div>
</div>
--- a/player/js/player.js Wed Jun 26 11:35:56 2013 +0200
+++ b/player/js/player.js Thu Jun 27 11:51:46 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);