[iOS Media] Airplay button should be blue when active
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 2 Mar 2015 23:57:49 +0000 (23:57 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 2 Mar 2015 23:57:49 +0000 (23:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=142193

Reviewed by Brent Fulgham.

Add a blue form of the Airplay button that is used
when we are actively displaying on another screen.

* Modules/mediacontrols/mediaControlsiOS.css:
(video::-webkit-media-controls-wireless-playback-picker-button):
(video::-webkit-media-controls-wireless-playback-picker-button:active):
(video::-webkit-media-controls-wireless-playback-picker-button.playing):
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS.prototype.updateWirelessPlaybackStatus):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@180906 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebCore/ChangeLog
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css
Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

index bed786f..0dd05ce 100644 (file)
@@ -1,3 +1,20 @@
+2015-03-02  Dean Jackson  <dino@apple.com>
+
+        [iOS Media] Airplay button should be blue when active
+        https://bugs.webkit.org/show_bug.cgi?id=142193
+
+        Reviewed by Brent Fulgham.
+
+        Add a blue form of the Airplay button that is used
+        when we are actively displaying on another screen.
+
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (video::-webkit-media-controls-wireless-playback-picker-button):
+        (video::-webkit-media-controls-wireless-playback-picker-button:active):
+        (video::-webkit-media-controls-wireless-playback-picker-button.playing):
+        * Modules/mediacontrols/mediaControlsiOS.js:
+        (ControllerIOS.prototype.updateWirelessPlaybackStatus):
+
 2015-03-02  Brent Fulgham  <bfulgham@apple.com>
 
         Move scroll animating functions from ScrollAnimator to ScrollController
index 5ddf894..b3b110c 100644 (file)
@@ -272,7 +272,7 @@ video::-webkit-media-controls-fullscreen-button:active {
 audio::-webkit-media-controls-wireless-playback-picker-button,
 video::-webkit-media-controls-wireless-playback-picker-button {
     background-size: 21px 18px;
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDA2NTYwQzlBNUFGMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDA2NTYwQ0FBNUFGMTFFNDhCNDZEQ0MzRUNBRkEzRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3QTlEQUNEMEE1QUMxMUU0OEI0NkRDQzNFQ0FGQTNFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MDY1NjBDOEE1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsGo4wwAAAE9SURBVHja7JYxbsIwFIZtIjFkyYTEwMhUiZmdA/QCOQE3YGPkBh2ZOiNxAAY2ZlaGDt06McCAhHj8T7WrCKXIcewoSO9J35DIfv5kJ7+slVKkXqT0S8oSkW6tpNYksiIrsiIrsiIrsiIrsiJbItuJ0DgDK9CLIU6/G0uqLqgu2JieO5AG6kt/X0AIWfNJfRYak3nWbZSdP4haFq2SReXg9o8sM22FLGoCLk9EmSt4DybryB5khSYjcHSce+Lxhbmp+QmrrO888BsMCov1zTuq0YPj7ct5vuex+OxK6elUWtdDNAFrT1ELZ3G3CdmPmqKWZVRZ1CyQqGUWRZajx0RQSFnO5jyoLGoMzoFFLZzRkyCyqCH4iSRq4ax+qyVrcvAQWdTC6/S8ZM11b9uQKLlcK6tc95qCMzwp87oLMABmUMEzVAChcAAAAABJRU5ErkJggg==');
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWZJREFUeNpiYWBg+M8wRAATwxACLDDG////GQerIxkZGf8PuZAddeyoY0cdO+rYUceOOnbUsaOOHXXskHQssO3JD8TrgFh0UDsW6EA2ILUOiAOBeDOQzzUoHQt0GKinMQ+InaBC5kA8Cyo+6EK2Doij0cRA/DZqhu5/SBfsPwO5GOqofzCzsOBMCs2HmUOZY6HR/hOPQ0H4DxD7Uc2xROJLQMyPZIguEH8gUu8XkHokvaDMd4JE+4lW+BiIZZAsk4CK/afADFDxdp9o/WRGCzmhgjV2SMFMZBRRzEBqObRoIgeAks46aJlM86JrMiizUFgCgTLlDNLLLdKiv4LMqMeFK0iynwSH+kGLIGo6FlQ2R1PVsdD0+ZXKDoVhUBntRJUMBswIKqBGCbQEoAVgg2Y4LYoyGLSZtx1aHtIS8APxRkLNSiYCzb01QKxCp7a1CqFmJROB5p4dnTsDoLyxHFqWYwCAAAMAXS6KZKmsGPwAAAAASUVORK5CYII=');
     -webkit-order: 3;
 }
 
@@ -288,7 +288,14 @@ video::-webkit-media-controls-wireless-playback-picker-button {
 
 audio::-webkit-media-controls-wireless-playback-picker-button:active,
 video::-webkit-media-controls-wireless-playback-picker-button:active {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTlDMDY1NzlBNUJFMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTlDMDY1N0FBNUJFMTFFNDhCNDZEQ0MzRUNBRkEzRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1OUMwNjU3N0E1QkUxMUU0OEI0NkRDQzNFQ0FGQTNFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1OUMwNjU3OEE1QkUxMUU0OEI0NkRDQzNFQ0FGQTNFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtpJfI0AAAFESURBVHjaYvwPBAxDBDAxDCHAgsRmHMTu/D/kQnbUsaOOHXXsqGNHHTvq2FHHjjp21LFD1bH8QLwOiEUHu2PZoA4NBOLNQMw1WB0L6mnMA2InKN8ciGdRswdCTcfWAXE0mhiI30a9zg0CMFCAo4H433/cIJNC88GAGiHrBI1+fNE9GYj9qJkM/hOBL0FzOwzoQjMUGwF7mIF4GVQ9DIAy3wki7cVIBoTAYyCWQYoaCajYfwrMEAXi+8RqZiRzQAYUKvugOZ5UcBmIbYH4Iz1KA1CULifToaQkHao4lhqZBZQpZ9DasRVAnEmlUjMRah5J5Syx2A+I//ynLvgHLaOJcgOxIWsOTafMVG5LoFfRFCcDFVo0SrA0frQodSyombedFs09LM3KjYTsYSLg4zXQkKUHIBiDTATSkh2dOwN48wZAgAEAbPX73MzEV24AAAAASUVORK5CYII=');
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAU1JREFUeNpi/A8EDEMEMDEMIcCCxGYcxO78P+RCdtSxo44ddeyoY0cdO+rYUceOOnbUsUPVsfxAvA6IRQe7Y9mgDg0E4s1AzDVYHQvqacwDYico3xyIZ1GzB0JNx9YBcTSaGIjfRr3ODQIwUICjgfjff9wgk0LzwYAaIesEjX580T0ZiP2omQz+E4EvQXM7DOhCMxQbAXuYgXgZVD0MgDLfCSLtJTnNPgFiLyD+COVLAPE2NMfjA9xQ9TJQ/jcg9gXiB6SMG5CTW0GhsgHJYmKBDNTBtlBPvwZiRVqWBqAoXQ4tmsgBxCYdqjiWGpkFlCln0NqxFUCcSaVSMxFqHk0cCwrNFipXz21YKhKKHWsOTafMVHYsehVNsWNVaNEowdL40aLUsaBm3nZaNPewNCs3ErKHiYCP10BDlh6AYAwyEUhLdnTuDODNGwABBgCho8gNeNsIzwAAAABJRU5ErkJggg==');
+}
+
+audio::-webkit-media-controls-wireless-playback-picker-button.playing,
+video::-webkit-media-controls-wireless-playback-picker-button.playing {
+    opacity: 1;
+    mix-blend-mode: normal;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWRJREFUeNpikQ37/59hiAAmhiEEWJDYjAPhgEcrCauRC2f4P+RCdtSxo44ddeyoY0cdO+rYUceOOnbUsUPVsfxAvA6IRQe7Y9mgDg0E4s1AzDVYHQvqacwDYico3xyIZ1GzB0JNx9YBcTSaGIjfNtgcC3JUPQ65CiDOHCyOdYJGP77ongzEfhSnMxLHDS4DsS0Qf4TydYH4MLQEIAS+ArEl1AwGaObbB03bVA/ZJ0DsheRQCSDeRqRDQYAbql4Gyv8GxL5A/ICUcQNycisoVDYgWUwskIE6GBY7rx+tZFCkZZplBuLlpEQfGtCFlsVs9Mhg1MgsoEw5g9aOpVoxBASJUPNo4lhQaLZQuXpukwvHqEgodqw5NJ0yU9mx4Coa6GAnajlWhRaNEvTGD9DBWpQ6FtTM206L5h6WZuVGoINFyXUsyMdroCFLDwCOQaCDuUh1LKy5Z0fnzgA4bwAdjDVvAAQYAKnHNWwjWYklAAAAAElFTkSuQmCC');
 }
 
 /* ================== OPTIMIZED FULLSCREEN BUTTON ====================== */
index f85cbef..f382d8b 100644 (file)
@@ -141,8 +141,10 @@ ControllerIOS.prototype = {
             this.controls.inlinePlaybackPlaceholder.setAttribute('aria-label', deviceType + ", " + deviceName);
 
             this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.hidden);
+            this.controls.wirelessTargetPicker.classList.add(this.ClassNames.playing);
         } else {
             this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.hidden);
+            this.controls.wirelessTargetPicker.classList.remove(this.ClassNames.playing);
         }
     },