[Top][All Lists]
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[linterna-magica-commit] [223] Fixes for bugs #34465.
|
From: |
Ivaylo Valkov |
|
Subject: |
[linterna-magica-commit] [223] Fixes for bugs #34465. |
|
Date: |
Tue, 29 Nov 2011 13:12:00 +0000 |
Revision: 223
http://svn.sv.gnu.org/viewvc/?view=rev&root=linterna-magica&revision=223
Author: valkov
Date: 2011-11-29 13:11:59 +0000 (Tue, 29 Nov 2011)
Log Message:
-----------
Fixes for bugs #34465. The HD list was moved to the controls footer. For RTL
pages and LM translations, the controls are ordered from right to left - mainly
fixes for YouTube. The changes in r214 do not behave well with resolutions
lower or equal to 1024x768.
Revision Links:
--------------
http://svn.sv.gnu.org/viewvc/?view=rev&root=linterna-magica&revision=214
Ticket Links:
------------
http://savannah.gnu.org/bugs/?34465
Modified Paths:
--------------
trunk/data/style/template.css
trunk/src/lm_create_video_object.js
trunk/src/lm_interface_hd_links.js
trunk/src/lm_interface_player_web_buttons.js
trunk/src/lm_localisation.js
trunk/src/lm_player_button_functions.js
trunk/src/lm_site_youtube.js
Modified: trunk/data/style/template.css
===================================================================
--- trunk/data/style/template.css 2011-11-27 14:03:06 UTC (rev 222)
+++ trunk/data/style/template.css 2011-11-29 13:11:59 UTC (rev 223)
@@ -154,7 +154,10 @@
display: block !important;
bottom: 0px !important;
position: absolute !important;
- overflow: hidden !important;
+ /* Hides the HD links list. The HD list was */
+ /* moved to the controls footer, because of */
+ /* https://savannah.nongnu.org/bugs/?34465 */
+ /* overflow: hidden !important; */
text-align: center !important;
color: #333333 !important;
}
@@ -313,12 +316,20 @@
/* ^^^ Fix background: none in dailymotion */
div.linterna-magica-hd-links-list,
.linterna-magica-hd-links-list {
- width: auto !important;
+ /* The HD list is part of the controls */
+ /* footer, because of */
+ /* https://savannah.nongnu.org/bugs/?34465. */
+ /* The value for width was "auto", but */
+ /* most links are rendered on two lines, */
+ /* which is not what we want. At 16% it */
+ /* is fine with YouTube and Vimeo, not */
+ /* too wide. */
+ width: 16% !important;
height: auto !important;
/* ^^^Fix height and width in dailymotion:
The site sets them to */
/* 100% but the list shows partly under the
header */
- bottom: 25px !important;
- left: 53px !important;
+ bottom: -2px !important;
+ left: 100.5% !important;
overflow-y: auto !important;
/* Hide scrollbars for HD links in YouTube */
overflow-x: hidden !important;
Modified: trunk/src/lm_create_video_object.js
===================================================================
--- trunk/src/lm_create_video_object.js 2011-11-27 14:03:06 UTC (rev 222)
+++ trunk/src/lm_create_video_object.js 2011-11-29 13:11:59 UTC (rev 223)
@@ -140,77 +140,20 @@
// Create HD links
if (object_data.hd_links)
{
- var preferred_link =
+ var p =
this.compute_preferred_hd_link(object_data.hd_links);
// No link is calculated. Set to lowest.
- if (preferred_link == null || isNaN(preferred_link))
+ if (p == null || isNaN(p))
{
- preferred_link =
- object_data.hd_links[object_data.hd_links.length-1];
+ p = object_data.hd_links[object_data.hd_links.length-1];
}
+
+ object_data.preferred_link = p;
- var hd_wrapper = document.createElement("div");
- var hd_button = document.createElement("a");
- hd_button.setAttribute("href","#");
- hd_button.textContent = this._("HQ");
- hd_button.setAttribute("title", this._("Higher quality"));
- hd_button.setAttribute("id", "linterna-magica-switch-hd-"+id);
- hd_button.setAttribute("class", "linterna-magica-switch-hd");
-
- var hd_button_click_function = function(ev)
- {
- var el = this;
- self.show_or_hide_hd_links.apply(self, [ev, el]);
- };
-
- hd_button.addEventListener("click",
- hd_button_click_function, false);
-
- hd_wrapper.appendChild(hd_button);
-
- var hd_links = document.createElement("div");
- hd_links.setAttribute("id", "linterna-magica-hd-links-list-"+id);
- hd_links.setAttribute("class", "linterna-magica-hd-links-list");
- hd_links.style.setProperty("display","none","important");
-
- var ul = document.createElement("ul");
-
- for(var link=0; link<object_data.hd_links.length; link++)
- {
- var li = document.createElement("li");
- var button = document.createElement("a");
- button.setAttribute("href",object_data.hd_links[link].url);
- button.setAttribute("title", object_data.hd_links[link].more_info);
- button.textContent = object_data.hd_links[link].label;
-
- var button_click_function = function(ev)
- {
- var el = this;
- self.switch_to_hd_link.apply(self, [ev, el]);
- };
-
- button.addEventListener("click",
- button_click_function , false);
-
- // Preferred link
- if (link == preferred_link)
- {
- // Set the link in the interface
- this.select_hd_link_in_list(button,id);
-
- // Set the link for the player and download link.
- object_data.link = object_data.hd_links[link].url;
- dw_link.setAttribute("href",
- object_data.hd_links[link].url);
- }
-
- li.appendChild(button);
- ul.appendChild(li);
- }
- hd_links.appendChild(ul);
- hd_wrapper.appendChild(hd_links);
- header.appendChild(hd_wrapper);
+ // Set the link for the player and download link.
+ object_data.link = object_data.hd_links[p].url;
+ dw_link.setAttribute("href", object_data.hd_links[p].url);
}
header.appendChild(script_name);
Modified: trunk/src/lm_interface_hd_links.js
===================================================================
--- trunk/src/lm_interface_hd_links.js 2011-11-27 14:03:06 UTC (rev 222)
+++ trunk/src/lm_interface_hd_links.js 2011-11-29 13:11:59 UTC (rev 223)
@@ -105,39 +105,6 @@
{
hd_list.style.removeProperty("display");
- var top_offset = 0;
- var el = element;
-
- // Calculate the offset to the top of the window and
- // decrease the height of the list if needed. See
- // https://savannah.nongnu.org/bugs/index.php?34465
- while(el && !isNaN(el.offsetTop))
- {
- top_offset += el.offsetTop;
- el = el.offsetParent;
- }
-
- if (hd_list.clientHeight > top_offset)
- {
- // Move the HD list to the left so it is not over the
- // video. Epiphany (or WbKit keeps video plugins above
- // all).
- var w = parseInt(hd_list.clientWidth) + 5;
- hd_list.style.setProperty("left","-"+w+"px",
- "important");
-
- // Set the height of the HD list to the height of the
- // <ul> that holds all <li> elemens. Somehow the <ul>
- // has height but the div does not.
- var ul_height =
- hd_list.getElementsByTagName("ul")[0].clientHeight;
-
- hd_list.style.setProperty("height", ul_height+"px",
"important");
-
- // Align with the top line of LM
- hd_list.style.setProperty("top", "-2px", "important");
- }
-
var hd_list_blur_function = function(ev)
{
var timeout_function = function()
@@ -218,3 +185,94 @@
return element;
}
+
+// Creates the HD links button and list packed in a div
+LinternaMagica.prototype.create_hd_links_button = function(object_data)
+{
+ var id = object_data.linterna_magica_id;
+ var self = this;
+ var hd_links = this.create_hd_links_list(object_data);
+
+ var hd_wrapper = document.createElement("div");
+ hd_wrapper.setAttribute("id", "linterna-magica-hd-wrapper-"+id);
+
+ var hd_button = document.createElement("a");
+
+ hd_button.setAttribute("href","#");
+ hd_button.textContent = this._("HQ");
+ hd_button.setAttribute("title", this._("Higher quality"));
+ hd_button.setAttribute("id", "linterna-magica-switch-hd-"+id);
+ hd_button.setAttribute("class", "linterna-magica-switch-hd");
+
+ var hd_button_click_function = function(ev)
+ {
+ var el = this;
+ self.show_or_hide_hd_links.apply(self, [ev, el]);
+ };
+
+ hd_button.addEventListener("click",
+ hd_button_click_function, false);
+
+ hd_wrapper.appendChild(hd_button);
+ hd_wrapper.appendChild(hd_links);
+ return hd_wrapper;
+}
+
+// Creates the HD links list HTML structure
+LinternaMagica.prototype.create_hd_links_list = function(object_data)
+{
+ var id = object_data.linterna_magica_id;
+ var self = this;
+ var hd_links = document.createElement("div");
+
+ // Computed in create_video_object(). The download link have to be
+ // set there.
+ var preferred_link = object_data.preferred_link;
+
+ hd_links.setAttribute("id", "linterna-magica-hd-links-list-"+id);
+ hd_links.setAttribute("class", "linterna-magica-hd-links-list");
+ hd_links.style.setProperty("display","none","important");
+
+ var ul = document.createElement("ul");
+
+ for(var link=0; link<object_data.hd_links.length; link++)
+ {
+ var li = document.createElement("li");
+ var button = document.createElement("a");
+ button.setAttribute("href",object_data.hd_links[link].url);
+
+ if (object_data.hd_links[link].more_info)
+ {
+ button.setAttribute("title",
+ object_data.hd_links[link].more_info);
+ }
+
+ button.textContent = object_data.hd_links[link].label;
+
+ var button_click_function = function(ev)
+ {
+ var el = this;
+ self.switch_to_hd_link.apply(self, [ev, el]);
+ };
+
+ button.addEventListener("click",
+ button_click_function , false);
+
+ // Preferred link
+ if (link == preferred_link)
+ {
+ // Set the link in the interface
+ this.select_hd_link_in_list(button,id);
+
+ // Set the link for the player and download link.
+ object_data.link = object_data.hd_links[link].url;
+ // object_data.hd_links[link].url);
+ }
+
+ li.appendChild(button);
+ ul.appendChild(li);
+ }
+ hd_links.appendChild(ul);
+
+ return hd_links;
+}
Modified: trunk/src/lm_interface_player_web_buttons.js
===================================================================
--- trunk/src/lm_interface_player_web_buttons.js 2011-11-27 14:03:06 UTC
(rev 222)
+++ trunk/src/lm_interface_player_web_buttons.js 2011-11-29 13:11:59 UTC
(rev 223)
@@ -178,6 +178,68 @@
fullscreen_click_function, false);
controls.appendChild(fullscreen);
+ if (object_data.hd_links)
+ {
+ var hd_links = this.create_hd_links_button(object_data);
+ controls.appendChild(hd_links);
+
+ // For RTL pages and LM translations we order the controls
+ // from right to left.
+
+ // For RTL translations we are using Totem
+ // (LANGUAGE=ar_SA.utf8 totem) for reference. Any RTL LANGUAGE
+ // should do.
+
+ // For RTL pages it is needed, because otherwise in YouTube
+ // the HD links list is rendered at the right end of the
+ // screen, where it might not be visible.
+
+ if (this.get_document_direction() == "rtl" ||
+ this.languages[this.lang].__direction == "rtl")
+ {
+ controls.setAttribute("dir", "rtl");
+
+ var children = controls.childNodes;
+
+ var class_b = "linterna-magica-controls-buttons";
+ var class_hs = "linterna-magica-controls-horizontal-slider";
+ var hd_wrapper_id = "linterna-magica-hd-wrapper-"+id;
+
+ for(var b=0,l=children.length; b<l; b++)
+ {
+ var child = children[b];
+
+ var has_b_class =
+ this.object_has_css_class(child, class_b);
+
+ var has_hs_class =
+ this.object_has_css_class(child, class_hs);
+
+ var is_hd_wrapper = (child.hasAttribute("id") &&
+ child.getAttribute("id") ==
+ hd_wrapper_id) ? true : false;
+
+ if (has_b_class || has_hs_class)
+ {
+ child.style.setProperty("float", "right", "important");
+ }
+
+ if (is_hd_wrapper)
+ {
+ // HD list
+ // If the CSS changes the 100.5% value should be
+ // changed.
+ child.lastChild.style.setProperty("right",
+ "100.5%", "important");
+
+ // HD switch
+ child.firstChild.style.setProperty("float", "right",
+ "important");
+ }
+ }
+ }
+ }
+
return controls;
}
@@ -334,27 +396,31 @@
// The slider width is calculated from the object width.
//
- // We have 6 buttons (width + border +padding + margin).
+ // We have 5 (4) buttons (width + border +padding + margin).
//
// Remove the padding, margin, border for each slider (2): 2*x
// (padding + border + margin)
- //
+
+ var buttons = object_data.hd_links ? 5 : 4;
+
// The time slider uses 3/4 of the space
- var time_width = parseInt(((object_data.width - (4 * 21)) * 3/4)-12);
+ var time_width = parseInt(((object_data.width - (buttons * 21)) * 3/4)-12);
time_slider.style.setProperty("width", time_width+"px", "important");
time_slider.style.setProperty("position", "relative", "important");
var time_knob_move = null;
- if (this.languages[this.lang].__direction == "ltr" ||
- this.languages[this.lang].__direction !== "rtl")
+ var doc_dir = this.get_document_direction();
+
+ if (doc_dir == "rtl" ||
+ this.languages[this.lang].__direction == "rtl")
{
- time_knob_move = "left";
+ time_knob_move = "right";
}
- else if (this.languages[this.lang].__direction == "rtl")
+ else
{
- time_knob_move = "right";
+ time_knob_move = "left";
}
var time_knob = document.createElement("a");
@@ -456,27 +522,32 @@
// The slider width is calculated from the object width.
//
- // We have 6 buttons (width + border +padding + margin)
+ // We have 5 (4) buttons (width + border +padding + margin)
//
// Remove the padding, margin, border for each slider (2): 2 * x
// (padding + border + margin)
- //
+
+ var buttons = object_data.hd_links ? 5 : 4;
+
// The volume slider uses 1/4 of the space
- var volume_width = parseInt(((object_data.width - (4 * 21)) * 1/4)-12);
+ var volume_width = parseInt(((object_data.width -
+ (buttons * 21)) * 1/4)-12);
+
volume_slider.style.setProperty("width",
volume_width+"px",
"important");
var volume_knob_move = null;
- if (this.languages[this.lang].__direction == "ltr" ||
- this.languages[this.lang].__direction !== "rtl")
+ var doc_dir = this.get_document_direction();
+ if (doc_dir == "rtl" ||
+ this.languages[this.lang].__direction == "rtl")
{
- volume_knob_move = "left";
+ volume_knob_move = "right";
}
- else if (this.languages[this.lang].__direction == "rtl")
+ else
{
- volume_knob_move = "right";
+ volume_knob_move = "left";
}
var volume_knob = document.createElement("a");
Modified: trunk/src/lm_localisation.js
===================================================================
--- trunk/src/lm_localisation.js 2011-11-27 14:03:06 UTC (rev 222)
+++ trunk/src/lm_localisation.js 2011-11-29 13:11:59 UTC (rev 223)
@@ -92,3 +92,26 @@
this.env_lang = env_lang;
}
+
+// Get (guess) the language direction of the document (RTL/LTR)
+LinternaMagica.prototype.get_document_direction = function()
+{
+ var html = document.getElementsByTagName("html");
+
+ var dir = html[0].hasAttribute("dir") ?
+ html[0].getAttribute("dir") : null;
+
+ if (!dir)
+ {
+ var body = document.getElementsByTagName("body");
+ dir = body[0].hasAttribute("dir") ?
+ body[0].getAttribute("dir") : null;
+ }
+
+ if (!dir || (dir.toLowerCase() !== "rtl" &&
+ dir.toLowerCase() !== "ltr")) {
+ dir = "ltr";
+ }
+
+ return dir.toLowerCase();
+}
Modified: trunk/src/lm_player_button_functions.js
===================================================================
--- trunk/src/lm_player_button_functions.js 2011-11-27 14:03:06 UTC (rev
222)
+++ trunk/src/lm_player_button_functions.js 2011-11-29 13:11:59 UTC (rev
223)
@@ -696,14 +696,17 @@
}
var move = null;
- if (this.languages[this.lang].__direction == "ltr" ||
- this.languages[this.lang].__direction !== "rtl")
+
+ var doc_dir = this.get_document_direction();
+
+ if (doc_dir == "rtl" ||
+ this.languages[this.lang].__direction == "rtl")
{
- move = "left";
+ move = "right";
}
- else if (this.languages[this.lang].__direction == "rtl")
+ else
{
- move = "right";
+ move = "left";
}
var old_position = parseInt(knob.style.getPropertyValue(move));
Modified: trunk/src/lm_site_youtube.js
===================================================================
--- trunk/src/lm_site_youtube.js 2011-11-27 14:03:06 UTC (rev 222)
+++ trunk/src/lm_site_youtube.js 2011-11-29 13:11:59 UTC (rev 223)
@@ -161,9 +161,8 @@
more_info += " " + this._("Unkown encoding");
}
- link.label = link_data[1] + " " +label;
- link.more_info = link.label + " " + more_info;
-
+ link.label = link_data[1].split(/x/)[1] + "p " +label;
+ link.more_info = link_data[1] + " " +label+ " " + more_info;
if (!fmt_url_map[fmt_id])
{
this.log("LinternaMagica.create_youtube_links:\n"+
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [linterna-magica-commit] [223] Fixes for bugs #34465.,
Ivaylo Valkov <=