--- a/player/css/styles.css Tue Jun 25 13:34:53 2013 +0200
+++ b/player/css/styles.css Wed Jun 26 11:13:10 2013 +0200
@@ -85,6 +85,22 @@
background: #000000; font-family: 'OpenSans'; font-weight: 400;
}
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar:hover {
+ background: rgba(128,128,128,.2);
+}
+
+::-webkit-scrollbar-thumb {
+ background: rgba(128,128,128,.4); width: 10px; border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(128,128,128,.6);
+}
+
/* Top Bar */
.top-bar {
@@ -320,7 +336,7 @@
}
.annotation {
- position: absolute;
+ position: absolute; left: 50%;
}
.annotation-title {
@@ -332,7 +348,7 @@
}
.annotation {
- left: 45px; top: 800px; right: 35px;
+ top: 800px; width: 920px; margin-left: -455px;
transition: top 0.5s; -webkit-transition: top 0.5s;
}
@@ -343,13 +359,13 @@
/* Narrow annotations */
.narrow-annotation {
- left: 210px; right: 200px;
+ width: 590px; margin-left: -290px;
}
/* White annotations */
.white-annotation {
- background: #ffffff; max-height: 522px; overflow: auto;
+ background: #ffffff;
}
.white-annotation {
@@ -365,7 +381,7 @@
}
.white-annotation .annotation-title {
- font-size: 23px; margin: 24px 0;
+ font-size: 23px; margin: 24px; line-height: 24px;
}
/* Black annotations */
@@ -393,10 +409,13 @@
/* Text annotation */
-.text-contents {
+.text-contents, .link-contents {
font-family: Georgia, 'Times New Roman', serif;
- margin: 0 45px 35px; font-size: 15px;
-
+ overflow: auto;
+}
+
+.text-contents {
+ margin: 0 25px 35px; font-size: 15px; padding: 0 20px 0;
}
.text-contents p, .text-contents ul, .text-contents ol {
@@ -459,7 +478,7 @@
.link-contents {
font-family: Georgia, 'Times New Roman', serif;
- margin: 40px 80px 80px;
+ margin: 40px 60px 60px; padding: 0 20px 0;
}
.link-contents p {
--- a/player/index.html Tue Jun 25 13:34:53 2013 +0200
+++ b/player/index.html Wed Jun 26 11:13:10 2013 +0200
@@ -83,7 +83,7 @@
</ul>
</div>
- <div class="annotation text-annotation white-annotation">
+ <div class="annotation text-annotation white-annotation narrow-annotation">
<a href="#" class="close-annotation"></a>
<h2 class="annotation-title"></h2>
<div class="text-contents"></div>
--- a/player/js/player.js Tue Jun 25 13:34:53 2013 +0200
+++ b/player/js/player.js Wed Jun 26 11:13:10 2013 +0200
@@ -29,6 +29,14 @@
}
);
+ function preventRightClick(selector) {
+ selector.on("contextmenu", function() {
+ return false;
+ });
+ }
+
+ preventRightClick($(".video-container video"));
+
$(".media-duration").text(myMedia.duration);
myMedia.on("timeupdate", function(t) {
@@ -329,6 +337,7 @@
}).join("")
);
imgel.fadeTo(400, 1);
+ preventRightClick(imgel);
}
var nextImage = function() {
@@ -452,7 +461,7 @@
positionDiv();
}
});
- return;
+ break;
}
if (/^(https?:\/\/)?(www\.)?dailymotion/.test(src)) {
@@ -470,7 +479,7 @@
positionDiv();
}
});
- return;
+ break;
}
if (/^(https?:\/\/)?(www\.)?soundcloud\.com/.test(src)) {
@@ -490,7 +499,7 @@
positionDiv();
}
});
- return;
+ break;
}
var extension = (src.match(/\.([\d\w]+)$/) || ["",""])[1],
@@ -514,8 +523,9 @@
positionDiv();
});
+ preventRightClick(media);
+
annotationDiv.find(".media-frame").html(media);
- return;
break;
@@ -526,26 +536,6 @@
switch (annotationinfo.annotation.content.markup) {
case "html":
annotationDiv.find(".text-contents").html(text);
-
- var ps = annotationDiv.find(".text-contents>p"),
- groups = [],
- last, group;
- ps.each(function(i, e) {
- if (last && group && last.nextElementSibling === e) {
- group.contents.push(e);
- } else {
- group = {
- master: e,
- contents: [e.cloneNode(true)]
- }
- groups.push(group);
- }
- last = e;
- });
- groups.forEach(function(g) {
- $(g.master).replaceWith($('<div class="column-group">').append(g.contents));
- });
-
break;
default:
annotationDiv.find(".text-contents").html(
@@ -556,6 +546,10 @@
break;
}
annotationDiv.find(".text-contents a").attr("target","_blank");
+ annotationDiv.find(".text-contents").css({
+ "max-height":
+ $(".main-video").height() - 140
+ });
break;
@@ -565,12 +559,15 @@
annotationDiv.find(".link-contents").html(
annotationinfo.annotation.content.links.map(linkTemplate).join("")
- );
+ ).css({
+ "max-height":
+ $(".main-video").height() - 140
+ });
break;
}
- positionDiv(true);
+ positionDiv();
}