Add PiP pollyfill #1902

avelad · 2019-04-29T08:32:41Z

Add PiP pollyfill for Safari

Based in https://github.com/gbentaieb/pip-polyfill

avelad · 2019-04-29T08:35:14Z

Currently the PR has errors, but I need some guidance for resolve it.

[WARNING] No changes detected, skipping. Use --force to override.
[INFO] Generating Closure dependencies...
[INFO] Linting JavaScript...
[WARNING] No changes detected, skipping. Use --force to override.
[INFO] Linting HTML...
[WARNING] No changes detected, skipping. Use --force to override.
[INFO] Checking that the build files are complete...
[INFO] Checking the tests for type errors...
[WARNING] No changes detected, skipping. Use --force to override.
/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:57: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
if (this.webkitPresentationMode &&
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:57: ERROR - dangerous use of the global this object
if (this.webkitPresentationMode &&
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:58: ERROR - dangerous use of the global this object
this.webkitPresentationMode !== 'picture-in-picture') {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:65: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
if (!this.$pictureInPictureElement) {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:71: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "webkitPresentationMode" on type "Element"
if (video.webkitPresentationMode &&
^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:72: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "webkitPresentationMode" on type "Element"
video.webkitPresentationMode === 'picture-in-picture') {
^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:73: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
this.pictureInPictureElement = video;
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:83: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
if (value === this.$pictureInPictureElement) return;
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:86: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
this.$pictureInPictureElement.removeEventListener(
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:94: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
this.$pictureInPictureElement.addEventListener(
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:110: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "disablePictureInPicture" on type "NamedNodeMap"
this.attributes.disablePictureInPicture ||
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:110: ERROR - dangerous use of the global this object
this.attributes.disablePictureInPicture ||
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:111: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "webkitSupportsPresentationMode" on type "HTMLVideoElement"
!this.webkitSupportsPresentationMode('picture-in-picture')
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:111: ERROR - dangerous use of the global this object
!this.webkitSupportsPresentationMode('picture-in-picture')
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:111: ERROR - Property webkitSupportsPresentationMode never defined on HTMLVideoElement
!this.webkitSupportsPresentationMode('picture-in-picture')
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:117: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "webkitSetPresentationMode" on type "HTMLVideoElement"
this.webkitSetPresentationMode('picture-in-picture');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:117: ERROR - dangerous use of the global this object
this.webkitSetPresentationMode('picture-in-picture');
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:117: ERROR - Property webkitSetPresentationMode never defined on HTMLVideoElement
this.webkitSetPresentationMode('picture-in-picture');
^^^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:125: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "webkitSetPresentationMode" on type "Element"
document.pictureInPictureElement.webkitSetPresentationMode('inline');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:125: ERROR - Property webkitSetPresentationMode never defined on Element
document.pictureInPictureElement.webkitSetPresentationMode('inline');
^^^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:128: ERROR - Violation: Throwing non-Error types or Error itself is not allowed; throw shaka.util.Error instead.
throw new DOMException(
^^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:128: ERROR - Function DOMException: called with 2 argument(s). Function requires at least 0 argument(s) and no more than 0 argument(s).
throw new DOMException(
^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:146: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
if (this.webkitPresentationMode === 'picture-in-picture') {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:146: ERROR - dangerous use of the global this object
if (this.webkitPresentationMode === 'picture-in-picture') {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:146: ERROR - Property webkitPresentationMode never defined on this
if (this.webkitPresentationMode === 'picture-in-picture') {
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:151: ERROR - dangerous use of the global this object
this.addEventListener('webkitpresentationmodechanged', webkitListener);
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:154: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillEnter" on type "HTMLVideoElement"
if (this.$pipPolyfillEnter) {
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:154: ERROR - dangerous use of the global this object
if (this.$pipPolyfillEnter) {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:155: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillEnter" on type "HTMLVideoElement"
this.$pipPolyfillEnter[callback] = webkitListener;
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:155: ERROR - dangerous use of the global this object
this.$pipPolyfillEnter[callback] = webkitListener;
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:157: ERROR - dangerous use of the global this object
this.$pipPolyfillEnter = {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:164: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
if (this.webkitPresentationMode === 'inline') {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:164: ERROR - dangerous use of the global this object
if (this.webkitPresentationMode === 'inline') {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:164: ERROR - Property webkitPresentationMode never defined on this
if (this.webkitPresentationMode === 'inline') {
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:165: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
if (this.$pipPreviousPresentationMode === 'picture-in-picture') {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:165: ERROR - dangerous use of the global this object
if (this.$pipPreviousPresentationMode === 'picture-in-picture') {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:170: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
document.pictureInPictureElement = this;
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:172: ERROR - dangerous use of the global this object
this.$pipPreviousPresentationMode = this.webkitPresentationMode;
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:172: ERROR - dangerous use of the global this object
this.$pipPreviousPresentationMode = this.webkitPresentationMode;
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:172: ERROR - Property webkitPresentationMode never defined on this
this.$pipPreviousPresentationMode = this.webkitPresentationMode;
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:175: ERROR - dangerous use of the global this object
this.addEventListener('webkitpresentationmodechanged', webkitListener);
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:176: ERROR - dangerous use of the global this object
this.$pipPreviousPresentationMode = this.webkitPresentationMode;
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:176: ERROR - dangerous use of the global this object
this.$pipPreviousPresentationMode = this.webkitPresentationMode;
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:176: ERROR - Property webkitPresentationMode never defined on HTMLVideoElement
this.$pipPreviousPresentationMode = this.webkitPresentationMode;
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:179: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillLeave" on type "HTMLVideoElement"
if (this.$pipPolyfillLeave) {
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:179: ERROR - dangerous use of the global this object
if (this.$pipPolyfillLeave) {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:180: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillLeave" on type "HTMLVideoElement"
this.$pipPolyfillLeave[callback] = webkitListener;
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:180: ERROR - dangerous use of the global this object
this.$pipPolyfillLeave[callback] = webkitListener;
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:182: ERROR - dangerous use of the global this object
this.$pipPolyfillLeave = {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:196: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillEnter" on type "HTMLVideoElement"
if (name === 'enterpictureinpicture' && this.$pipPolyfillEnter) {
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:196: ERROR - dangerous use of the global this object
if (name === 'enterpictureinpicture' && this.$pipPolyfillEnter) {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:197: ERROR - dangerous use of the global this object
this.removeEventListener(
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:199: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillEnter" on type "HTMLVideoElement"
this.$pipPolyfillEnter[callback],
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:199: ERROR - dangerous use of the global this object
this.$pipPolyfillEnter[callback],
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:201: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillEnter" on type "HTMLVideoElement"
delete this.$pipPolyfillEnter[callback];
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:201: ERROR - dangerous use of the global this object
delete this.$pipPolyfillEnter[callback];
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:202: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillLeave" on type "HTMLVideoElement"
} else if (name === 'leavepictureinpicture' && this.$pipPolyfillLeave) {
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:202: ERROR - dangerous use of the global this object
} else if (name === 'leavepictureinpicture' && this.$pipPolyfillLeave) {
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:203: ERROR - dangerous use of the global this object
this.removeEventListener(
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:205: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillLeave" on type "HTMLVideoElement"
this.$pipPolyfillLeave[callback],
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:205: ERROR - dangerous use of the global this object
this.$pipPolyfillLeave[callback],
^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:207: ERROR - Violation: Using properties of unknown types is not allowed; add an explicit type to the variable.
The property "$pipPolyfillLeave" on type "HTMLVideoElement"
delete this.$pipPolyfillLeave[callback];
^^^^^^^^^^^^^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:207: ERROR - dangerous use of the global this object
delete this.$pipPolyfillLeave[callback];
^^^^

63 error(s), 0 warning(s), 91.4% typed
[ERROR] Build failed

joeyparrish · 2019-04-29T15:39:38Z

There seems to be no license information in the repository you're pulling from, and much of the code looks verbatim. So I'm not sure that I can accept this without a clear license from the author.

But it should be fairly easy to implement from scratch with a link to the Apple docs on this functionality.

The compiler issue is caused by the lack of annotations on the methods you're patching over. For example, @this is used to tell the compiler what the type of this will be when the function is called. You'll find examples of this in our other polyfills.

avelad · 2019-04-29T18:59:53Z

Ok, tomorrow I'll rewrite the polyfill from scratch. I hope it can be introduced in version 2.5

avelad · 2019-04-30T13:17:09Z

I have updated the implementation. But I have 4 error that i can not fix...

[WARNING] No changes detected, skipping. Use --force to override.
[INFO] Generating Closure dependencies...
[INFO] Linting JavaScript...
[INFO] Linting HTML...
[WARNING] No changes detected, skipping. Use --force to override.
[INFO] Checking that the build files are complete...
[INFO] Checking the tests for type errors...
[WARNING] No changes detected, skipping. Use --force to override.
/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:123: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
          if (this.webkitPresentationMode === 'picture-in-picture') {
              ^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:142: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
          if (this.webkitPresentationMode === 'inline') {
              ^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:143: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
            if (this.polyfillPreviousPresentationMode ===
                ^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:149: ERROR - Violation: Failed to infer type of "this"; please be explicit or use bind!
            document.pictureInPictureElement = this;
                                               ^^^^

4 error(s), 0 warning(s), 91.4% typed
[ERROR] Build failed

Can you help me to correct it?

joeyparrish · 2019-04-30T16:20:00Z

Can you help me to correct it?

Absolutely! I'd be happy to help. I'll leave specific comments on the changes. Thank you for working on this!

externs/pictureinpicture.js

lib/polyfill/pip.js

avelad

I updated the code, but i have 6 errors...

[WARNING] No changes detected, skipping. Use --force to override.
[INFO] Generating Closure dependencies...
[INFO] Linting JavaScript...
[WARNING] No changes detected, skipping. Use --force to override.
[INFO] Linting HTML...
[WARNING] No changes detected, skipping. Use --force to override.
[INFO] Checking that the build files are complete...
[INFO] Checking the tests for type errors...
[WARNING] No changes detected, skipping. Use --force to override.
/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:109: ERROR - actual parameter 1 of shaka.polyfill.PiP.getProxyEnterPiPEvent_ does not match formal parameter
found   : (EventListener|function(Event): (boolean|undefined)|null)
required: (EventListener|null)
          shaka.polyfill.PiP.getProxyEnterPiPEvent_(listener);
                                                    ^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:114: ERROR - actual parameter 1 of shaka.polyfill.PiP.getProxyLeavePiPEvent_ does not match formal parameter
found   : (EventListener|function(Event): (boolean|undefined)|null)
required: (EventListener|null)
          shaka.polyfill.PiP.getProxyLeavePiPEvent_(listener);
                                                    ^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:130: ERROR - actual parameter 1 of shaka.polyfill.PiP.getProxyEnterPiPEvent_ does not match formal parameter
found   : (EventListener|function(Event): (boolean|undefined)|null)
required: (EventListener|null)
          shaka.polyfill.PiP.getProxyEnterPiPEvent_(listener);
                                                    ^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:135: ERROR - actual parameter 1 of shaka.polyfill.PiP.getProxyLeavePiPEvent_ does not match formal parameter
found   : (EventListener|function(Event): (boolean|undefined)|null)
required: (EventListener|null)
          shaka.polyfill.PiP.getProxyLeavePiPEvent_(listener);
                                                    ^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:209: ERROR - EventListener expressions are not callable
      listener();
      ^^^^^^^^^^

/home/avelad/workspace/pull-request/shaka-player/lib/polyfill/pip.js:225: ERROR - EventListener expressions are not callable
      listener();
      ^^^^^^^^^^

6 error(s), 0 warning(s), 91.4% typed
[ERROR] Build failed

@joeyparrish , Do you have any idea how to solve it? I have tried many things but none has worked

The functionality works without problem in Safari.

lib/polyfill/pip.js

avelad · 2019-05-01T09:55:57Z

lib/polyfill/pip.js

+    /**
+     * polyfill document.pictureInPictureEnabled
+     */
+    document.pictureInPictureEnabled = true;


I have tried and the API it in both MSE and src = so I have not seen any reason for this to not be true.

lib/polyfill/pip.js

joeyparrish · 2019-05-01T14:56:47Z

lib/polyfill/pip.js

+    /**
+     * polyfill document.pictureInPictureEnabled
+     */
+    document.pictureInPictureEnabled = true;


Okay, sounds good.

lib/polyfill/pip.js

joeyparrish · 2019-05-01T15:04:55Z

lib/polyfill/pip.js

+/**
+ * Get the proxy webkitpresentationmodechanged event.
+ *
+ * @param {EventListener} listener


I think the compiler error is because addEventListener has a more complex signature that you would think. It accepts more than just EventListener, so the argument passed here could have other types, as well.

Could you listen to the webkit events all the time and dispatch equivalent standard events when they are seen? Like we do in the fullscreen polyfill?

Is not the same case than fullscreen. In fullscreen polyfill the event is trigger over the document. In this case, the event is trigger over the video element. I'll try to find another solution.

If the only remaining issue is the compiler error on the parameter type here, you could just extend it.

Try this:

@param {EventListener|function(Event): (boolean|undefined)} listener

joeyparrish · 2019-05-01T18:56:23Z

lib/polyfill/pip.js

+    if (videoElement.webkitPresentationMode === 'picture-in-picture') {
+      // keep track of the pipElement
+      document.pictureInPictureElement = videoElement;
+      listener();


Here you'll need to call listener(event) with the event, since the compiler expects an argument. But if the listener is looking at event.type for some reason, it might get confused by seeing a type it didn't listen for.

I think this is another good argument for redispatching events.

avelad · 2019-05-01T19:05:17Z

I updated the implementacion without compiler issues and working in safari.

joeyparrish · 2019-05-01T19:14:40Z

lib/polyfill/pip.js

+  /** @type {HTMLMediaElement} */
+  let polyfillPictureInPictureElement = null;
+
+  let polyfillEnterpictureinpicture = null;


I think we may be avoiding compiler errors by leaving out types. I appreciate all the work you've done on this, though, and I know the compiler can be a pain sometimes. I think perhaps we should merge this PR as-is and I will work on some follow-up changes. Would that be alright?

For me it's ok!
Thanks for your revision, I really appreciate it and it help to another PR in coming.

shaka-bot · 2019-05-01T19:27:16Z

All tests passed!

avelad · 2019-05-03T17:43:10Z

@joeyparrish , any news about this merge?

joeyparrish · 2019-05-03T17:50:20Z

Sorry, we've been busy wrapping up other things. I'm merging now, and I'll work on a that little bit of cleanup after that. Thanks for your contribution!

joeyparrish · 2019-05-03T20:41:01Z

I've experimented a bit and found a much simpler way to manage the events. It turns out that you can listen on document in the capturing phase to avoid having to shim the listeners on the video elements.

Follow-up to #1902 Change-Id: I760d0006c4cbd7c3aad2ce96801259b578269195

By listening to events on document in the capturing phase, we can avoid complex event shims on HTMLVideoElement. By monitoring global PiP state on the document, we can get rid of the getter and setter for the document's PiP element, as well. Follow-up on PR #1902 Change-Id: Ib5f5d0c7c735124a438901c5bb15e034ab10b996

joeyparrish · 2019-05-07T18:41:12Z

@avelad, I've just merged the last of my changes to your polyfill. Thanks again for working on this! It's great to see Safari and iOS getting so many useful features beyond merely "src= playback".

Add PiP pollyfill

2fa25f5

Update implementation

d09bb4a

joeyparrish requested changes Apr 30, 2019

View reviewed changes

Alvaro Velad added 6 commits May 1, 2019 11:19

Update externs

cc57532

Update some styles

f71fab7

Remove redundant check

4aa0909

Simplify get pictureInPictureElement

4943326

Move polyfillPictureInPictureElement to local variable

c228b2f

Update addEventListener and addEventListener implementation

4b9c48e

avelad commented May 1, 2019

View reviewed changes

joeyparrish reviewed May 1, 2019

View reviewed changes

Return early if webkitSupportsPresentationMode not supported

ce8b12d

joeyparrish requested changes May 1, 2019

View reviewed changes

Update updatePictureInPictureElementInDocument_

b3b684a

joeyparrish reviewed May 1, 2019

View reviewed changes

Solve the final issues

bd33ad8

joeyparrish reviewed May 1, 2019

View reviewed changes

joeyparrish approved these changes May 1, 2019

View reviewed changes

joeyparrish merged commit caa34ca into shaka-project:master May 3, 2019

shaka-bot pushed a commit that referenced this pull request May 3, 2019

Rename PiP polyfill to PiPWebkit

e3b4957

Follow-up to #1902 Change-Id: I760d0006c4cbd7c3aad2ce96801259b578269195

avelad deleted the pip-polyfill branch March 16, 2022 16:00

github-actions bot added the status: archived Archived and locked; will not be updated label Jul 25, 2023

github-actions bot locked as resolved and limited conversation to collaborators Jul 25, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add PiP pollyfill #1902

Add PiP pollyfill #1902

avelad commented Apr 29, 2019

avelad commented Apr 29, 2019

joeyparrish commented Apr 29, 2019

avelad commented Apr 29, 2019

avelad commented Apr 30, 2019

joeyparrish commented Apr 30, 2019

avelad left a comment

avelad May 1, 2019

joeyparrish May 1, 2019

joeyparrish May 1, 2019

avelad May 1, 2019

joeyparrish May 1, 2019

joeyparrish May 1, 2019

avelad May 1, 2019

joeyparrish May 1, 2019

avelad commented May 1, 2019

joeyparrish May 1, 2019

avelad May 2, 2019

shaka-bot commented May 1, 2019

avelad commented May 3, 2019

joeyparrish commented May 3, 2019

joeyparrish commented May 3, 2019

joeyparrish commented May 7, 2019

Add PiP pollyfill #1902

Add PiP pollyfill #1902

Conversation

avelad commented Apr 29, 2019

avelad commented Apr 29, 2019

joeyparrish commented Apr 29, 2019

avelad commented Apr 29, 2019

avelad commented Apr 30, 2019

joeyparrish commented Apr 30, 2019

avelad left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

avelad commented May 1, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

shaka-bot commented May 1, 2019

avelad commented May 3, 2019

joeyparrish commented May 3, 2019

joeyparrish commented May 3, 2019

joeyparrish commented May 7, 2019