Merge lp:~mpdeimos/nuvola-player/bug-1212167 into lp:nuvola-player/2.5.x

[Martin Pöhlmann]

Implements Bug #1212167: Back/forward buttons in UI (default off) for Google Play

[Jiří Janoušek (fenryxo)]

=== modified file 'data/nuvolaplayer/services/googleplay/integration.js'
35 + navigateBack.addEventListener('click', function() {window.history.back();});
45 + navigateFwd.addEventListener('click', function() {window.history.forward();});

Use Nuvola.triggerAction("back") and Nuvola.triggerAction("forward").

=== modified file 'data/nuvolaplayer/services/googleplay/settings.js'
98 + Nuvola.saveConfig();
99 + form.showReloadNotice();

Could it be possible to apply this setting live without form.showReloadNotice()? Nuvola.saveConfig() emits signal cmd="config-changed" in Integration.prototype.messageHandler. You can check for it to add/remove buttons instantly.

=== modified file 'data/nuvolaplayer/services/googleplay/integration.js'
48 + var navigationStack = [];

Could you rework your code to use the new actions API (see bug LP:1265290) and fall back to your navigationStack if(Nuvola.Action === undefined) for Nuvola Player <= 2.3?

- var back = new Nuvola.Action("back");
- var forward = new Nuvola.Action("forward");
- in Integration.prototype.messageHandler(cmd, param1, param2) check for signal ("action-changed", back.name/forward.name, "sensitive")

review: Needs Fixing

[lp:~mpdeimos/nuvola-player/bug-1212167]

786. By Martin Pöhlmann on 2014-01-10

Merged 2.3.0 and JS API release

787. By Martin Pöhlmann on 2014-01-12

Bug #1212167:
* Usage of new nuvola player APIs instead of navigation stack
* Dynamic activation of preferences

[Martin Pöhlmann (mpdeimos)]

Incorporated your ideas.

Some comments:

* The feature is disabled on pre 2.4 versions. I the navigation stack is a hack and I do not like to keep it even as compatibility code. Especially if the buttons are added to other services.

* I'm directly assigning this.naviagteBack.disabled again. The reason for not using the makeElement shorthand is, that this uses dom attributes and this means it will always be disabled (according to html spec, <button disable="anything"/> will disable the button).

* I'm exposing Nuvola.ACTION_CHANGED instead of using "action-changed"

* The JS API version should be bumped to 2.3 (have not done this)

* I think the other Google Play Service options can also be dynamically activated. I may add a ticket for this later.

review: Needs Resubmitting

[Martin Pöhlmann (mpdeimos)]

Forget the last two comments, just saw that this is already in trunk. Will update code according to latest trunk.

[lp:~mpdeimos/nuvola-player/bug-1212167]

788. By Martin Pöhlmann on 2014-01-12

Merged latest trunk

[Martin Pöhlmann (mpdeimos)]

Updated code to your latest trunk changes.

review: Needs Resubmitting

[Jiří Janoušek (fenryxo)]

> I'm directly assigning this.naviagteBack.disabled again. The reason for not using the makeElement shorthand is, that this uses dom attributes and this means it will always be disabled (according to html spec, <button disable="anything"/> will disable the button).

It is possible to use elm.removeAttribute(), but you can keep it your way.

> I'm exposing Nuvola.ACTION_CHANGED instead of using "action-changed"

In that case you have to define it for older versions.

integration.js:
/* Monkey patching */
if (Nuvola.ACTION_CHANGED === undefined) // @since JS API 2.3
    Nuvola.ACTION_CHANGED = "action-changed";

> The feature is disabled on pre 2.4 versions.

In that case it would be better to move as much code as possible to shared file /data/nuvolaplayer/js/main.js. What do you think about it?

main.js
-------

// FIXME: documentation; backClass, backStyles, forwardClass, forwardStyles optional
Nuvola.NavigationButtons = function(backClass, backStyles, forwardClass, forwardStyles)
{
    this.backAction = Nuvola.Action(Nuvola.NavigationButtons.BACK);
    this.forwardAction = Nuvola.Action(Nuvola.NavigationButtons.FORWARD);
    this.backButton = Nuvola.makeElement("button", null, "<");
    this.forwardButton = Nuvola.makeElement("button", null, ">");
    if (backClass)
        this.backButton.className = backClass;
    if (backStyles)
        Nuvola.css(this.backButton, backStyles);
    if (backClass)
        this.forwardButton.className = forwardClass;
    if (forwardStyles)
        Nuvola.css(this.forwardButton, forwardStyles);
}

Nuvola.NavigationButtons.BACK = "back";
Nuvola.NavigationButtons.FORWARD = "forward";

// FIXME: documentation
Nuvola.NavigationButtons.prototype.update = function(name)
{
    var button = this[name + "Button"];
    var action = this[name + "Action"];
    if (button && action)
        button.disabled = !action.sensitive;
}

// FIXME: documentation
Nuvola.NavigationButtons.prototype.prepend = function(parent)
{
    if (!parent)
        return false;
    return this.insert(parent, parent.firstChild)
}

// FIXME: documentation
Nuvola.NavigationButtons.prototype.insert = function(parent, nextChild)
{

    if (!parent || !nextChild || this.parent)
        return false;

    var firstChild = parent.firstChild;
    parent.insertBefore(this.forwardButton, nextChild);
    parent.insertBefore(this.backButton, nextChild);
    this.parent = parent;
    return true;
}

// FIXME: documentation
Nuvola.NavigationButtons.prototype.append = function(parent)
{
    if (!parent || this.parent)
        return false;

    var firstChild = parent.firstChild;
    parent.appendChild(this.forwardButton);
    parent.appendChild(this.backButton);
    this.parent = parent;
    return true;
}

// FIXME: documentation
Nuvola.NavigationButtons.prototype.remove = function()
{
    if (!this.parent)
        return false;

    this.parent.removeChild(this.forwardButton);
    this.parent.removeChild(this.backButton);
    this.parent = undefined;
    return true;
}

// FIXME: documentation
Nuvola.css = function(elm, styles)
{
    for (var style in styles)
        elm.style[style] = styles[style];
}

integration.js
--------------

/* ...

review: Needs Fixing

[Jiří Janoušek (fenryxo)]

Also, add yourself to the list of copyright holders at the top of integration.js.

[Martin Pöhlmann (mpdeimos)]

Resubmited. Some thoughts:

I know about removeElement, but this requires to 1) create the attributes object conditionally 2) use addElement/removeElement on update. This way it is much simpler.

The whole navigation bar integration is now a separate object in main.js as you suggested. This keeps code much simpler and reusable across services (I might also have a look at amazon and bandcamp integration). In the end I decided against taking your proposal as-is:
 * Creating the element will be handled by the service integration. There are lots of corner cases where you might wish to add some extra stuff. So just pass the back/forward button elements to the constructor.
 * I did not like feeding the integration object with message handler callbacks. Hence I've completely rewritten message handling for JS API 2.3 onwards. main.js defines a default message handler Nuvola.onMessageReceived that dispatches messages to handlers registered with Nuvola.onMessageReceived.addHandler(). Now the service integration as well the navigation button can register separate handlers. Pre JS API 2.3 will just override Nuvola.onMessageReceived as before, so this shouldn't be a problem (and navigation buttons are not available there anyways). I alo had to disable throwing exceptions in the message handler of the service integration, but using logging instead. Should yield the same result anyways.
 * The integration can be disabled either by calling deconstruct or setEnabled(false). The latter will just manipulate the element style to be hidden (used for google).
* Integration for navigation buttons is enabled by default.

Minor:
* Nuvola.Action and Nuvola.NavigationMuttonIntegration are wrapped in additional curly brackets to indicate that they are separate objects and support readability.
* I'm not sure if my integration code somehow messes with hide googleplus controls (searchbar is not stretched 100%). Hence I've adjusted the CSS there. Related: I'm not sure if the code below /* Fix bar dimensions */ is actually doing something and whether it can be removed.

review: Needs Resubmitting

[lp:~mpdeimos/nuvola-player/bug-1212167]

789. By Martin Pöhlmann on 2014-01-14

Bug #1212167:
* Moved navigation button to main.js
* Rewritten messageHandler
* Fixed search bar style

[Jiří Janoušek (fenryxo)]

FYI, I was in hospital last seven days. I'll take a look at your changes ASAP.

[Martin Pöhlmann (mpdeimos)]

Take the time to recover. This thingy can wait.

[Jiří Janoušek (fenryxo)]

> Creating the element will be handled by the service integration.

Ok.

> Hence I've completely rewritten message handling for JS API 2.3 onwards.

So significant change is not acceptable for minor update of JavaScript API. However, I will take it into account during designing of JS API 3.0.

> Nuvola.Action and Nuvola.NavigationMuttonIntegration are wrapped in additional curly brackets to indicate that they are separate objects and support readability.

Nice :-)

> I'm not sure if my integration code somehow messes with hide googleplus controls

Yes, your changes broke the fix bar dimensions code. However, the feature has been just removed from trunk.

278 + * Copyright 2014 Martin Pöhlmann <http://mpdeimos.com>

Please use your contact e-mail instead of a website.

381 + // Otherwise, if not yet integrated and disabled, do nothing.
382 + if (Nuvola.config.navigationButtons !== true)
383 + {
384 + return;
385 + }

The button should be enabled by default, so condition Nuvola.config.navigationButtons === false has to be used to allow Nuvola.config.navigationButtons to be undefined (the default value).

review: Needs Fixing

[Martin Pöhlmann (mpdeimos)]

Thanks for the review, here are few comments/questions before I start to rework.

> > Hence I've completely rewritten message handling for JS API 2.3 onwards.
>
> So significant change is not acceptable for minor update of JavaScript API.

As I've said, the modification should be fully backwards compatible and not break existing services. Just in case a service wants to use the button integration, it has to register a handler instead of overriding it.
However, I can understand your concerns. Depending on your plans for 3.0 I would opt for the following:

* Wait with the whole implementation till 3.0 (I'm also ok with that)
* Move implementation back to gMusic (assuming that there will no other services to follow till 3.0 release?)
* Doing a mixture with keeping the implementation in main.js and passing the callbacks from the service integration side. However, I am not sure if it is worth if 3.0 contains JS API changes (see next question).

> However, I will take it into account during designing of JS API 3.0.

Is 3.0 planned to be JS-backwards compatible?
I haven't found code for 3.0 yet, when do you plan to push the branch to LP?

> > Nuvola.Action and Nuvola.NavigationMuttonIntegration are wrapped in
> additional curly brackets to indicate that they are separate objects and
> support readability.
>
> Nice :-)
>
> > I'm not sure if my integration code somehow messes with hide googleplus
> controls
>
> Yes, your changes broke the fix bar dimensions code. However, the feature has
> been just removed from trunk.

I'll merge trunk when starting to rework, so will see what happened to this.

> 278 + * Copyright 2014 Martin Pöhlmann <http://mpdeimos.com>
>
> Please use your contact e-mail instead of a website.

I was a bit picky about adding my gmail addy, because of spam :)

>
> 381 + // Otherwise, if not yet integrated and disabled, do nothing.
> 382 + if (Nuvola.config.navigationButtons !== true)
> 383 + {
> 384 + return;
> 385 + }
>
> The button should be enabled by default, so condition
> Nuvola.config.navigationButtons === false has to be used to allow
> Nuvola.config.navigationButtons to be undefined (the default value).

True, good catch. Dealing with undefined (besides null) is a bit strange for a Java/C# guy like me :)

[Jiří Janoušek (fenryxo)]

> Is 3.0 planned to be JS-backwards compatible? I haven't found code for 3.0 yet, when do you plan to push the branch to LP?

JS API 3.0 won't be backward compatible. It will be part of Nuvola Player 3.0 - a new codebase written from scratch on top of WebKit2Gtk (the second generation of WebKitGtk). There is no code yet of NP 3.0, I'm starting with a utility library first. Meanwhile, series 2.x is still open for new not so intrusive features like your in-page buttons.

[lp:~mpdeimos/nuvola-player/bug-1212167]

790. By Martin Pöhlmann on 2014-03-02

Merged trunk

791. By Martin Pöhlmann on 2014-03-02

Resolved minor comments from review

792. By Martin Pöhlmann on 2014-03-02

Removed generic message handler implementation from main.js

[Martin Pöhlmann (mpdeimos)]

Applied your review comments. Most of the changes result from removing the message handler code from main.js

review: Needs Resubmitting

[Jiří Janoušek (fenryxo)]

Great :-) There is only one issue left: the search button covers the +Name text https://db.tt/fPWCl4K2

It might be necessary to reintroduce queueFixBarDimensions() function removed in commit 807 to set proper searchField.style.width = bar.clientWidth - {all bar elements except for search element}.offsetWidth. Or you can propose alternate solution.

http://bazaar.launchpad.net/~fenryxo/nuvola-player/trunk/revision/807

review: Needs Fixing

[Martin Pöhlmann (mpdeimos)]

Hm, I'm not able to get into the state you showed. Tried several times, also with chrome web application (including the nav buttons).

This screenshot shows (almost) exactly the same size as yours (I've my cache cleared)
https://copy.com/lBiQzFfRyeUjoMoi

Any ideas?

Offtopic: I can also apply the 'hide g+ stuff' simply by calling document.getElementById("gb").firstChild.firstChild.style.display="none"
and there are no further visual glitches.
If one wants to "stretch" the searchbar, it works with:
document.getElementById("gbq").parentNode.style.width="100%";
document.getElementById("gbq").parentNode.style.setProperty("margin-right", "30px", "important");

review: Needs Information

[Jiří Janoušek (fenryxo)]

> Hm, I'm not able to get into the state you showed.

This issue might occur only in a specific WebKit version - I use libwebkitgtk-3.0-0 1.8.1. Could you add extra space (30px?) after the search button?

> I can also apply the 'hide g+ stuff'

I don't want to reintroduce this feature again.

[lp:~mpdeimos/nuvola-player/bug-1212167]

793. By Martin Pöhlmann on 2014-03-14

Adjusted query bar width if webkit dows not support flexible boxes

794. By Martin Pöhlmann on 2014-03-14

merged trunk

[Martin Pöhlmann (mpdeimos)]

Seems like older webkit implementations do not support flexible boxes. The good thing is that google has already some compatibility code, so adding a margin in case flexible boxes are not avail will suffice.

Ready for review.

review: Needs Resubmitting

[Jiří Janoušek (fenryxo)]

> queryBarFirstChild.style.marginRight = "85px";

I don't like that hard-coded value. Would it be possible to calculate it using offsetWidth property of the buttons?

review: Needs Information

[Martin Pöhlmann (mpdeimos)]

I'll have a look after the weekend.

review: Needs Fixing

[lp:~mpdeimos/nuvola-player/bug-1212167]

795. By Martin Pöhlmann on 2014-03-14

calculating margin dynamically

[Martin Pöhlmann (mpdeimos)]

Fixed (internet connection on the highway was better than I thought)

review: Needs Resubmitting

[Jiří Janoušek (fenryxo)]

Approved. Could you subscribe to the development mailing list at https://launchpad.net/~nuvola-player-devel ? I will send there information about JS API 3.0.

review: Approve

=== modified file 'data/nuvolaplayer/js/main.js'
--- data/nuvolaplayer/js/main.js	2014-01-12 10:44:36 +0000
+++ data/nuvolaplayer/js/main.js	2014-03-14 16:57:37 +0000
@@ -1,5 +1,6 @@
 /*
- * Copyright 2011-2012 Jiří Janoušek <[e-mail]>
+ * Copyright 2011-2014 Jiří Janoušek <[e-mail]>
+ * Copyright 2014 Martin Pöhlmann <[e-mail]>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are met: 
@@ -264,42 +265,6 @@
 	}
 	
 	/**
-	 * Creates new Action object.
-	 * 
-	 * @param name   action name [string]
-	 */
-	Nuvola.Action = function(name)
-	{
-		this.name = name;
-	}
-	
-	/**
-	 * Manipulates with action property
-	 * 
-	 * @param name     action name [string]
-	 * @param value    undefined to get the current value or a new value to set the new value
-	 */
-	Nuvola.Action.prototype.prop = function(name, value)
-	{
-		if (value === undefined)
-			return Nuvola.getActionProperty(this.name, name);
-		
-		if (name != "sensitive")
-			throw new Error("Property '" + name + "' is read-only.");
-		
-		Nuvola.updateAction(this.name, value);
-	}
-	
-	/**
-	 * Triggers action
-	 */
-	Nuvola.Action.prototype.trigger = function()
-	{
-		return Nuvola.triggerAction(this.name);
-	}
-	
-	
-	/**
 	 * Add getter/setter for object's property.
 	 * 
 	 * @param klass    class constructor
@@ -314,11 +279,6 @@
 	}
 	
 	/**
-	 * @property Nuvola.Action.sensitive   whether the action is enabled [bool]
-	 */
-	Nuvola.addProperty(Nuvola.Action, "sensitive");
-	
-	/**
 	 * Adds CSS style sheet
 	 * 
 	 * @since                 Nuvola JS API 2.3
@@ -355,6 +315,133 @@
 		}
 		return false;
 	}
+	
+	/**
+	 * class Nuvola.Action
+	 * 
+	 * Wrapper object for accessing and triggering GTKActions
+	 *
+	 * @since          Nuvola JS API 2.3
+	 */
+	{
+		/**
+		 * Creates new Action object.
+		 * 
+		 * @param name   action name [string]
+		 */
+		Nuvola.Action = function(name)
+		{
+			this.name = name;
+		}
+	
+		/**
+		 * Manipulates with action property
+		 * 
+		 * @param name     action name [string]
+		 * @param value    undefined to get the current value or a new value to set the new value
+		 */
+		Nuvola.Action.prototype.prop = function(name, value)
+		{
+			if (value === undefined)
+				return Nuvola.getActionProperty(this.name, name);
+		
+			if (name != "sensitive")
+				throw new Error("Property '" + name + "' is read-only.");
+		
+			Nuvola.updateAction(this.name, value);
+		}
+	
+		/**
+		 * Triggers action
+		 */
+		Nuvola.Action.prototype.trigger = function()
+		{
+			return Nuvola.triggerAction(this.name);
+		}
+	
+		/**
+		 * @property Nuvola.Action.sensitive   whether the action is enabled [bool]
+		 */
+		Nuvola.addProperty(Nuvola.Action, "sensitive");
+	}
+	
+	/**
+	 * class Nuvola.NavigationButtonIntegration
+	 * 
+	 * Support object for integrating and handling navigation buttons.
+	 * This class requires that Nuvola.onMessageReceived is not overridden by the service integration. 
+	 *
+	 * @since          Nuvola JS API 2.3
+	 */
+	{
+		/**
+		 * Creates a new NavigationButtonIntegration instance.
+		 *
+		 * @param backButton      the back button [Element]
+		 * @param forwardButton   the forward button [Element]
+		 */
+		Nuvola.NavigationButtonIntegration = function(backButton, forwardButton)
+		{
+			this.backButton = backButton;
+			this.backAction = new Nuvola.Action(Nuvola.NavigationButtonIntegration.BACK);
+			this.backButtonDisplayEnabled = this.backButton.style.display;
+			this.setSensitivity(this.backButton, this.backAction);
+			this.backButton.addEventListener('click', this.backAction.trigger.bind(this.backAction));
+			
+			this.forwardButton = forwardButton;
+			this.forwardAction = new Nuvola.Action(Nuvola.NavigationButtonIntegration.FORWARD);
+			this.forwardButtonDisplayEnabled = this.forwardButton.style.display;
+			this.setSensitivity(this.forwardButton, this.forwardAction);
+			this.forwardButton.addEventListener('click', this.forwardAction.trigger.bind(this.forwardAction));
+		}
+		
+		/** @private Prefix for navigation back button and back action. */
+		Nuvola.NavigationButtonIntegration.BACK = "back";
+	
+		/** @private Prefix for navigation forward button and action. */
+		Nuvola.NavigationButtonIntegration.FORWARD = "forward";
+		
+		/** Enables or disables the buttons by toggling style.display 'hidden'. */
+		Nuvola.NavigationButtonIntegration.prototype.setEnabled = function(enabled)
+		{
+			if (enabled)
+			{
+				this.backButton.style.display = this.backButtonDisplayEnabled;
+				this.forwardButton.style.display = this.forwardButtonDisplayEnabled;
+			}
+			else
+			{
+				this.backButton.style.display = 'none';
+				this.forwardButton.style.display = 'none';
+			}
+		}
+		
+		/** Sets the enabled state of a navigation button according to the action sensitivity. Override for custom behavior. */
+		Nuvola.NavigationButtonIntegration.prototype.setSensitivity = function(button, action)
+		{
+			button.disabled = !action.sensitive;
+		}
+		
+		/** Handles action changes to adjust the sensitivity state of the buttons. Returns true if the message was handled. */
+		Nuvola.NavigationButtonIntegration.prototype.onMessageReceived = function(message, action, property)
+		{
+			if (message !== Nuvola.ACTION_CHANGED && property !== "sensitive")
+			{
+				return false;
+			}
+			
+			var button = this[action + "Button"];
+			var action = this[action + "Action"];
+			
+			if (button === undefined || action === undefined)
+			{
+				return false;
+			}
+			
+			this.setSensitivity(button, action);
+			return true;
+		}
+	}
 
 // Immediately call the anonymous function with Nuvola JS API main object as an argument.
 // Note that "this" is set to the Nuvola JS API main object.

=== modified file 'data/nuvolaplayer/services/googleplay/integration.js'
--- data/nuvolaplayer/services/googleplay/integration.js	2014-03-07 20:42:27 +0000
+++ data/nuvolaplayer/services/googleplay/integration.js	2014-03-14 16:57:37 +0000
@@ -1,5 +1,6 @@
 /*
- * Copyright 2011-2012 Jiří Janoušek <[e-mail]>
+ * Copyright 2011-2014 Jiří Janoušek <[e-mail]>
+ * Copyright 2014 Martin Pöhlmann <http://mpdeimos.com>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are met: 
@@ -25,7 +26,6 @@
 /* Anonymous function is used not to pollute environment */
 (function(Nuvola){
 	var ACTIVITY_INTERVAL = 15*60*1000;
-	console.debug(Nuvola);
 	if (Nuvola.libVersion && Nuvola.warn)
 	{
 		var gst = Nuvola.libVersion("gstreamer");
@@ -208,7 +208,7 @@
 	 * Command handler
 	 * @param cmd command to execute
 	 */
-	Integration.prototype.messageHandler = function(cmd)
+	Integration.prototype.messageHandler = function(cmd, param1, param2)
 	{
 		if (cmd === Nuvola.CONFIG_CHANGED)
 		{
@@ -217,6 +217,12 @@
 			return;
 		}
 		
+		// Return if navigation buttons are enabled and can handle this event.
+		if (this.navigationButtons !== undefined && this.navigationButtons.onMessageReceived(cmd, param1, param2) === true)
+		{
+			return;
+		}
+		
 		/* SJBpost is an internal Google Music JavaScript function */
 		var buttons = document.querySelector("#player .player-middle");
 		if (buttons)
@@ -229,7 +235,7 @@
 			var prev_song = null;
 			var next_song = null;
 		}
-			
+		
 		try{
 			switch(cmd){
 			case Nuvola.ACTION_PLAY:
@@ -261,7 +267,7 @@
 				// Other commands are not supported
 				throw {"message": "Not supported."};
 			}
-			console.log(this.name + ": comand '" + cmd + "' executed.");
+			console.log(this.name + ": comand '" + cmd + "' handled.");
 		}
 		catch(e){
 			// API expects exception to be a string!
@@ -284,12 +290,13 @@
 			var callback = Nuvola.bind(this, this.simulateActivity);
 			this.simulateActivityTimeout = setTimeout(callback, ACTIVITY_INTERVAL);
 		}
-		
-		if (Nuvola.config.simulateActivity !== true && this.simulateActivityTimeout !== undefined)
+		else if (Nuvola.config.simulateActivity !== true && this.simulateActivityTimeout !== undefined)
 		{
 			window.clearTimeout(this.simulateActivityTimeout);
 			this.simulateActivityTimeout = undefined;
 		}
+
+		this.integrateNavigationButtons();
 	}
 	
 	Integration.prototype.simulateActivity = function(){
@@ -301,6 +308,66 @@
 		}
 	}
 	
+	Integration.prototype.integrateNavigationButtons = function(){
+		// This feature is disabled on pre 2.4.0
+		if (Nuvola.NavigationButtonIntegration === undefined)
+		{
+			return;
+		}
+
+		// If the navigation buttons are already integrated, adjust enablement state.
+		if (this.navigationButtons !== undefined)
+		{
+			this.navigationButtons.setEnabled(Nuvola.config.navigationButtons !== false);
+			return;
+		}
+		
+		// Otherwise, if not yet integrated and disabled, do nothing.
+		if (Nuvola.config.navigationButtons === false)
+		{
+			return;
+		}
+		
+		var queryBar = document.getElementById("gbq2");
+		if (!queryBar)
+		{
+			console.log("Could not find the query bar.");
+			return;
+		}
+		
+		var queryBarFirstChild = queryBar.firstChild;
+		
+		var navigateBack = Nuvola.makeElement("button", null, "<");
+		navigateBack.className = "button small vertical-align";
+		navigateBack.style.float = "left";
+		navigateBack.style.marginRight = "0px";
+		navigateBack.style.borderTopRightRadius = "2px";
+		navigateBack.style.borderBottomRightRadius = "2px";
+		queryBar.insertBefore(navigateBack, queryBarFirstChild);
+		
+		var navigateForward = Nuvola.makeElement("button", null, ">");
+		navigateForward.className = "button small vertical-align";
+		navigateForward.style.float = "left";
+		navigateForward.style.marginRight = "15px";
+		navigateForward.style.borderLeft = "none";
+		navigateForward.style.borderTopLeftRadius = "2px";
+		navigateForward.style.borderLeftRightRadius = "2px";
+		queryBar.insertBefore(navigateForward, queryBarFirstChild);
+		
+		// If webkit browser does not support flexible boxes, we have to add a right margin
+		// to the right of the query bar with width of the buttons (incl. margin)
+		if (!("flex" in document.body.style || "-webkit-flex" in document.body.style))
+		{
+			var buttonWidth = navigateBack.offsetWidth
+				+ navigateForward.offsetWidth 
+				+ parseInt(navigateForward.style.marginRight);
+			queryBarFirstChild.style.marginRight = buttonWidth + "px";
+
+			window.dispatchEvent(new Event('resize')); // force update in google script
+		}
+
+		this.navigationButtons = new Nuvola.NavigationButtonIntegration(navigateBack, navigateForward);
+	}
 	
 	Integration.prototype.getThumbs = function()
 	{

=== modified file 'data/nuvolaplayer/services/googleplay/settings.js'
--- data/nuvolaplayer/services/googleplay/settings.js	2014-02-25 16:56:13 +0000
+++ data/nuvolaplayer/services/googleplay/settings.js	2014-03-14 16:57:37 +0000
@@ -28,6 +28,17 @@
 var _ = Nuvola.gettext;
 var form = Nuvola.getSettingsForm();
 
+if (Nuvola.NavigationButtonIntegration !== undefined)
+{
+	form.append(new Nuvola.Checkbox(_("Integrate navigation buttons"),
+		Nuvola.config.navigationButtons !== false,
+		function(){
+			Nuvola.config.navigationButtons = this.checked;
+			Nuvola.saveConfig();
+		}
+	));
+}
+
 form.append(new Nuvola.Checkbox(_("Don't stop playback due to inactivity"),
 	Nuvola.config.simulateActivity === true,
 	function()

=== modified file 'src/nuvola/core/jsapi.vala'
--- src/nuvola/core/jsapi.vala	2014-02-03 18:20:19 +0000
+++ src/nuvola/core/jsapi.vala	2014-03-14 16:57:37 +0000
@@ -510,7 +510,7 @@
 	}
 	
 	/**
-	 * Loads service's own configuration to the main object, implementation of Nuvola.loadConfig()
+	 * Loads service's own configuration to the main object, implementation of Nuvola.reloadConfig()
 	 */
 	static unowned JS.Value load_config_func(Context ctx, JS.Object function, JS.Object self, JS.Value[] args, out unowned JS.Value exception){
 		exception = null;
@@ -870,6 +870,7 @@
 			o_set_string(ctx, object_this, "ACTION_THUMBS_DOWN", Actions.THUMBS_DOWN);
 			o_set_string(ctx, object_this, "ACTION_FAVORITE", Actions.FAVORITE);
 			o_set_string(ctx, object_this, "CONFIG_CHANGED", CONFIG_CHANGED_MESSAGE);
+			o_set_string(ctx, object_this, "ACTION_CHANGED", ACTION_CHANGED_MESSAGE);
 			o_set_number(ctx, object_this, "API_VERSION", (double)API_VERSION);
 			o_set_number(ctx, object_this, "API_VERSION_MINOR", (double)API_VERSION_MINOR);
 			o_set_number(ctx, object_this, "VERSION_MAJOR", (double)Config.VERSION_MAJOR);