Video controls, though hidden, are still interactive when in PiP
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 23 Jul 2015 01:47:00 +0000 (01:47 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 23 Jul 2015 01:47:00 +0000 (01:47 +0000)
https://bugs.webkit.org/show_bug.cgi?id=147216
<rdar://problem/21012688>

Reviewed by Simon Fraser.

Explicitly add the PiP class to the controls container so that
we can hang a pointer-events: none off it.

* Modules/mediacontrols/mediaControlsiOS.css:
(video::-webkit-media-controls-panel.picture-in-picture): Add a pointer-events: none.
* Modules/mediacontrols/mediaControlsiOS.js:
(ControllerIOS.prototype.handlePresentationModeChange): Add/remove a PiP class
to the controls panel when necessary.

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

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

index ce17138..a89578b 100644 (file)
@@ -1,3 +1,20 @@
+2015-07-22  Dean Jackson  <dino@apple.com>
+
+        Video controls, though hidden, are still interactive when in PiP
+        https://bugs.webkit.org/show_bug.cgi?id=147216
+        <rdar://problem/21012688>
+
+        Reviewed by Simon Fraser.
+
+        Explicitly add the PiP class to the controls container so that
+        we can hang a pointer-events: none off it.
+
+        * Modules/mediacontrols/mediaControlsiOS.css:
+        (video::-webkit-media-controls-panel.picture-in-picture): Add a pointer-events: none.
+        * Modules/mediacontrols/mediaControlsiOS.js:
+        (ControllerIOS.prototype.handlePresentationModeChange): Add/remove a PiP class
+        to the controls panel when necessary.
+
 2015-07-22  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r187196.
index b6d3454..9d0cf35 100644 (file)
@@ -175,6 +175,10 @@ video::-webkit-media-controls-panel.paused {
     opacity: 1;
 }
 
+video::-webkit-media-controls-panel.picture-in-picture {
+    pointer-events: none;
+}
+
 video::-webkit-media-controls-rewind-button,
 audio::-webkit-media-controls-rewind-button,
 video::-webkit-media-controls-panel .mute-box,
index dc518e0..75abff5 100644 (file)
@@ -588,6 +588,7 @@ ControllerIOS.prototype = {
 
         switch (presentationMode) {
             case 'inline':
+                this.controls.panel.classList.remove(this.ClassNames.pictureInPicture);
                 this.controls.panelContainer.classList.remove(this.ClassNames.pictureInPicture);
                 this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.hidden);
                 this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.pictureInPicture);
@@ -597,6 +598,7 @@ ControllerIOS.prototype = {
                 this.controls.pictureInPictureButton.classList.remove(this.ClassNames.returnFromPictureInPicture);
                 break;
             case 'picture-in-picture':
+                this.controls.panel.classList.add(this.ClassNames.pictureInPicture);
                 this.controls.panelContainer.classList.add(this.ClassNames.pictureInPicture);
                 this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.pictureInPicture);
                 this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.hidden);
@@ -609,6 +611,7 @@ ControllerIOS.prototype = {
                 this.controls.pictureInPictureButton.classList.add(this.ClassNames.returnFromPictureInPicture);
                 break;
             default:
+                this.controls.panel.classList.remove(this.ClassNames.pictureInPicture);
                 this.controls.panelContainer.classList.remove(this.ClassNames.pictureInPicture);
                 this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.pictureInPicture);
                 this.controls.inlinePlaybackPlaceholderTextTop.classList.remove(this.ClassNames.pictureInPicture);