mpris: Make forward/backward insensitive when unavailable

Media notifications currently always show the forward and backward
buttons as clickable, regardless of whether the corresponding action
is available or not. Media players usually address this by rendering
controls insensitive in this case, so do the same here.

https://bugzilla.gnome.org/show_bug.cgi?id=773884

data/theme/gnome-shell-high-contrast.css

@@ -912,6 +912,8 @@ StScrollBar {
     padding-right: 18px; }
   .message-media-control:last-child:rtl {
     padding-left: 18px; }
+  .message-media-control:insensitive {
+    color: #999999; }
 
 .media-message-cover-icon {
   icon-size: 48px !important; }

data/theme/gnome-shell-sass

@@ -1 +1 @@
-Subproject commit a172894788ec73c82be9aa6d29243809fdb0111d
+Subproject commit 671023a8b333f027d8c88fca9963b11581c10a70

data/theme/gnome-shell.css

@@ -912,6 +912,8 @@ StScrollBar {
     padding-right: 18px; }
   .message-media-control:last-child:rtl {
     padding-left: 18px; }
+  .message-media-control:insensitive {
+    color: #8e8e80; }
 
 .media-message-cover-icon {
   icon-size: 48px !important; }

js/ui/mpris.js

@@ -36,6 +36,8 @@ const MprisPlayerIface = '<node> \
   <method name="PlayPause" /> \
   <method name="Next" /> \
   <method name="Previous" /> \
+  <property name="CanGoNext" type="b" access="read" /> \
+  <property name="CanGoPrevious" type="b" access="read" /> \
   <property name="CanPlay" type="b" access="read" /> \
   <property name="Metadata" type="a{sv}" access="read" /> \
   <property name="PlaybackStatus" type="s" access="read" /> \
@@ -57,7 +59,7 @@ const MediaMessage = new Lang.Class({
         this._icon = new St.Icon({ style_class: 'media-message-cover-icon' });
         this.setIcon(this._icon);
 
-        this.addMediaControl('media-skip-backward-symbolic',
+        this._prevButton = this.addMediaControl('media-skip-backward-symbolic',
             Lang.bind(this, function() {
                 this._player.previous();
             }));
@@ -67,7 +69,7 @@ const MediaMessage = new Lang.Class({
                 this._player.playPause();
             }));
 
-        this.addMediaControl('media-skip-forward-symbolic',
+        this._nextButton = this.addMediaControl('media-skip-forward-symbolic',
             Lang.bind(this, function() {
                 this._player.next();
             }));
@@ -82,6 +84,10 @@ const MediaMessage = new Lang.Class({
         Main.panel.closeCalendar();
     },
 
+    _updateNavButton: function(button, sensitive) {
+        button.reactive = sensitive;
+    },
+
     _update: function() {
         this.setTitle(this._player.trackArtists.join(', '));
         this.setBody(this._player.trackTitle);
@@ -99,6 +105,9 @@ const MediaMessage = new Lang.Class({
         let iconName = isPlaying ? 'media-playback-pause-symbolic'
                                  : 'media-playback-start-symbolic';
         this._playPauseButton.child.icon_name = iconName;
+
+        this._updateNavButton(this._prevButton, this._player.canGoPrevious);
+        this._updateNavButton(this._nextButton, this._player.canGoNext);
     }
 });
 
@@ -139,10 +148,18 @@ const MprisPlayer = new Lang.Class({
         this._playerProxy.PlayPauseRemote();
     },
 
+    get canGoNext() {
+        return this._playerProxy.CanGoNext;
+    },
+
     next: function() {
         this._playerProxy.NextRemote();
     },
 
+    get canGoPrevious() {
+        return this._playerProxy.CanGoPrevious;
+    },
+
     previous: function() {
         this._playerProxy.PreviousRemote();
     },