--- a/integration/content.html Wed Dec 19 16:55:00 2012 +0100
+++ b/integration/content.html Mon Dec 17 18:19:36 2012 +0100
@@ -26,10 +26,29 @@
post_annotation : "testdata/post-test.php",
tag_page : "tag.html?tag=__TAG__"
};
+ if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
+ var res = window.localStorage.getItem("resolution") || "SD";
+ } else {
+ var res = "SD";
+ }
+ IriSP.video_url_transform = function(url) {
+ return url.replace(/([SH]D)\.[a-z0-9]+$/,res);
+ }
$(function() {
IriSP.contentplayer({
project_url: "http://theend-integ.ftinfo.fr/theend/ldt/cljson/id/" + project
});
+
+ $(".sdhdgroup").addClass(res);
+
+ $(".sdhdbtn").click(function() {
+ var newres = $(this).attr("title");
+ if (res !== newres) {
+ window.localStorage.setItem("resolution", newres);
+ document.location.reload();
+ }
+ return false;
+ });
});
</script>
@@ -77,7 +96,11 @@
<div class="container_hcentering">
<a id="btnInfo" class="btn" href="#" title="info"></a>
- <a id="btnSDHD" class="btn" href="#" title="SD/HD"></a>
+ <div class="sdhdgroup">
+ <a id="btnSD" class="sdhdbtn" href="#" title="SD"></a>
+ <div class="sdhdbtn sdhdsep"></div>
+ <a id="btnHD" class="sdhdbtn" href="#" title="HD"></a>
+ </div>
<div id="progressContainer" class="floatL">
--- a/integration/css/theend.css Wed Dec 19 16:55:00 2012 +0100
+++ b/integration/css/theend.css Mon Dec 17 18:19:36 2012 +0100
@@ -408,22 +408,50 @@
color: #ffffff;
}
-.btn {
+.btn, .sdhdbtn {
background: transparent url(../img/controls.png) no-repeat top left;
float: left;
+}
+
+.btn, .sdhdgroup {
margin: 0 16px;
}
-#btnSDHD {
+
+.sdhdgroup {
+ margin-top: 5px;
+ float: left;
+}
+
+.sdhdbtn {
+ height: 12px;
+}
+
+#btnSD {
+ width: 24px;
+}
+
+.SD #btnSD, .HD #btnSD:hover {
background-position: 0 0;
- width: 55px;
- height: 12px;
- margin-top: 5px;
}
-#btnSDHD:hover {
+.HD #btnSD {
background-position: 0 -12px;
- width: 55px;
- height: 12px;
-}
+}
+
+.sdhdsep {
+ background-position: -24px 0; width: 6px;
+}
+
+#btnHD {
+ width: 25px;
+}
+
+.SD #btnHD {
+ background-position: -30px 0;
+}
+.SD #btnHD:hover, .HD #btnHD {
+ background-position: -30px -12px;
+}
+
#btnBck {
background-position: -55px 0;
width: 16px;
--- a/integration/tag.html Wed Dec 19 16:55:00 2012 +0100
+++ b/integration/tag.html Mon Dec 17 18:19:36 2012 +0100
@@ -27,12 +27,32 @@
post_annotation : "testdata/post-test.php",
tag_page : "niv2_rv.html?tag=__TAG__"
};
+ if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
+ var res = window.localStorage.getItem("resolution") || "SD";
+ } else {
+ var res = "SD";
+ }
+ IriSP.video_url_transform = function(url) {
+ return url.replace(/([SH]D)\.[a-z0-9]+$/,res);
+ }
$(function() {
$("h1").text(tag);
+
IriSP.tagplayer({
tag : tag
});
+
+ $(".sdhdgroup").addClass(res);
+
+ $(".sdhdbtn").click(function() {
+ var newres = $(this).attr("title");
+ if (res !== newres) {
+ window.localStorage.setItem("resolution", newres);
+ document.location.reload();
+ }
+ return false;
+ });
});
</script>
@@ -80,7 +100,11 @@
<div class="container_hcentering">
<a id="btnInfo" class="btn" href="#" title="info"></a>
- <a id="btnSDHD" class="btn" href="#" title="SD/HD"></a>
+ <div class="sdhdgroup">
+ <a id="btnSD" class="sdhdbtn" href="#" title="SD"></a>
+ <div class="sdhdbtn sdhdsep"></div>
+ <a id="btnHD" class="sdhdbtn" href="#" title="HD"></a>
+ </div>
<div id="progressContainer" class="floatL">
--- a/src/theend/static/theend/css/theend.css Wed Dec 19 16:55:00 2012 +0100
+++ b/src/theend/static/theend/css/theend.css Mon Dec 17 18:19:36 2012 +0100
@@ -408,22 +408,50 @@
color: #ffffff;
}
-.btn {
+.btn, .sdhdbtn {
background: transparent url(../img/controls.png) no-repeat top left;
float: left;
+}
+
+.btn, .sdhdgroup {
margin: 0 16px;
}
-#btnSDHD {
+
+.sdhdgroup {
+ margin-top: 5px;
+ float: left;
+}
+
+.sdhdbtn {
+ height: 12px;
+}
+
+#btnSD {
+ width: 24px;
+}
+
+.SD #btnSD, .HD #btnSD:hover {
background-position: 0 0;
- width: 55px;
- height: 12px;
- margin-top: 5px;
}
-#btnSDHD:hover {
+.HD #btnSD {
background-position: 0 -12px;
- width: 55px;
- height: 12px;
-}
+}
+
+.sdhdsep {
+ background-position: -24px 0; width: 6px;
+}
+
+#btnHD {
+ width: 25px;
+}
+
+.SD #btnHD {
+ background-position: -30px 0;
+}
+.SD #btnHD:hover, .HD #btnHD {
+ background-position: -30px -12px;
+}
+
#btnBck {
background-position: -55px 0;
width: 16px;
--- a/src/theend/templates/theend/tag.html Wed Dec 19 16:55:00 2012 +0100
+++ b/src/theend/templates/theend/tag.html Mon Dec 17 18:19:36 2012 +0100
@@ -25,6 +25,28 @@
});
</script>
{% endblock %}
+
+ <script type="text/javascript">
+ if (typeof window.localStorage !== "undefined" && window.localStorage.getItem !== "undefined") {
+ var res = window.localStorage.getItem("resolution") || "SD";
+ } else {
+ var res = "SD";
+ }
+ IriSP.video_url_transform = function(url) {
+ return url.replace(/([SH]D)\.[a-z0-9]+$/,res);
+ }
+ $(function() {
+ $(".sdhdgroup").addClass(res);
+ $(".sdhdbtn").click(function() {
+ var newres = $(this).attr("title");
+ if (res !== newres) {
+ window.localStorage.setItem("resolution", newres);
+ document.location.reload();
+ }
+ return false;
+ });
+ });
+ </script>
{% endblock %}
@@ -72,7 +94,11 @@
<div class="container_hcentering">
<a id="btnInfo" class="btn" href="#" title="info"></a>
- <a id="btnSDHD" class="btn" href="#" title="SD/HD"></a>
+ <div class="sdhdgroup">
+ <a id="btnSD" class="sdhdbtn" href="#" title="SD"></a>
+ <div class="sdhdbtn sdhdsep"></div>
+ <a id="btnHD" class="sdhdbtn" href="#" title="HD"></a>
+ </div>
<div id="progressContainer" class="floatL">