From e3186b84dc479d48a27d279a624d7ba695a19539 Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Sat, 27 Apr 2024 09:38:02 +0100 Subject: [PATCH 1/7] correct document picture-in-picture example --- .../web/api/document_picture-in-picture_api/using/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/document_picture-in-picture_api/using/index.md b/files/en-us/web/api/document_picture-in-picture_api/using/index.md index f1beffe2aa87719..1a0ce492a2504a6 100644 --- a/files/en-us/web/api/document_picture-in-picture_api/using/index.md +++ b/files/en-us/web/api/document_picture-in-picture_api/using/index.md @@ -73,7 +73,7 @@ The `width` and `height` options of `requestWindow()` set the Picture-in-Picture ```js async function togglePictureInPicture() { // Returns null if no pip window is currently open - if (!!window.documentPictureInPicture.window) { + if (!window.documentPictureInPicture.window) { // Open a Picture-in-Picture window. const pipWindow = await documentPictureInPicture.requestWindow({ width: videoPlayer.clientWidth, From 7506d34825518d52a2418613d8a2be3f7ffc2386 Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Sat, 27 Apr 2024 09:44:15 +0100 Subject: [PATCH 2/7] clarify example --- .../using/index.md | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/files/en-us/web/api/document_picture-in-picture_api/using/index.md b/files/en-us/web/api/document_picture-in-picture_api/using/index.md index 1a0ce492a2504a6..133b9a0ff849ee1 100644 --- a/files/en-us/web/api/document_picture-in-picture_api/using/index.md +++ b/files/en-us/web/api/document_picture-in-picture_api/using/index.md @@ -72,22 +72,24 @@ The `width` and `height` options of `requestWindow()` set the Picture-in-Picture ```js async function togglePictureInPicture() { - // Returns null if no pip window is currently open - if (!window.documentPictureInPicture.window) { - // Open a Picture-in-Picture window. - const pipWindow = await documentPictureInPicture.requestWindow({ - width: videoPlayer.clientWidth, - height: videoPlayer.clientHeight, - }); + // Early return if there's already a Picture-in-Picture window open + if (window.documentPictureInPicture.window) { + return; + } + + // Open a Picture-in-Picture window. + const pipWindow = await documentPictureInPicture.requestWindow({ + width: videoPlayer.clientWidth, + height: videoPlayer.clientHeight, + }); - // ... + // ... - // Move the player to the Picture-in-Picture window. - pipWindow.document.body.append(videoPlayer); + // Move the player to the Picture-in-Picture window. + pipWindow.document.body.append(videoPlayer); - // Display a message to say it has been moved - inPipMessage.style.display = "block"; - } + // Display a message to say it has been moved + inPipMessage.style.display = 'block'; } ``` From 8857ea237bae60ff7fa432fb3c4f1f1c06331990 Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Sat, 27 Apr 2024 09:46:01 +0100 Subject: [PATCH 3/7] fix linting issue Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web/api/document_picture-in-picture_api/using/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/document_picture-in-picture_api/using/index.md b/files/en-us/web/api/document_picture-in-picture_api/using/index.md index 133b9a0ff849ee1..71abd88c85a6188 100644 --- a/files/en-us/web/api/document_picture-in-picture_api/using/index.md +++ b/files/en-us/web/api/document_picture-in-picture_api/using/index.md @@ -89,7 +89,7 @@ async function togglePictureInPicture() { pipWindow.document.body.append(videoPlayer); // Display a message to say it has been moved - inPipMessage.style.display = 'block'; + inPipMessage.style.display = "block"; } ``` From b2816c927b6964ec4fd0fa96bd11b2868a6b28af Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Mon, 29 Apr 2024 08:15:56 +0100 Subject: [PATCH 4/7] update documentation with explicit window Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> --- .../web/api/document_picture-in-picture_api/using/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/document_picture-in-picture_api/using/index.md b/files/en-us/web/api/document_picture-in-picture_api/using/index.md index 71abd88c85a6188..95548011d089e3d 100644 --- a/files/en-us/web/api/document_picture-in-picture_api/using/index.md +++ b/files/en-us/web/api/document_picture-in-picture_api/using/index.md @@ -78,7 +78,7 @@ async function togglePictureInPicture() { } // Open a Picture-in-Picture window. - const pipWindow = await documentPictureInPicture.requestWindow({ + const pipWindow = await window.documentPictureInPicture.requestWindow({ width: videoPlayer.clientWidth, height: videoPlayer.clientHeight, }); From ef5d6c77618de4a8794c0f9e0dbd1af2bf57413e Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Mon, 29 Apr 2024 08:16:23 +0100 Subject: [PATCH 5/7] update documentation Co-authored-by: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> --- .../web/api/document_picture-in-picture_api/using/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/document_picture-in-picture_api/using/index.md b/files/en-us/web/api/document_picture-in-picture_api/using/index.md index 95548011d089e3d..cb5b3d2b6b7e76e 100644 --- a/files/en-us/web/api/document_picture-in-picture_api/using/index.md +++ b/files/en-us/web/api/document_picture-in-picture_api/using/index.md @@ -73,7 +73,7 @@ The `width` and `height` options of `requestWindow()` set the Picture-in-Picture ```js async function togglePictureInPicture() { // Early return if there's already a Picture-in-Picture window open - if (window.documentPictureInPicture.window) { + if (window.documentPictureInPicture.window != null) { return; } From 806e2d5adc90cf83e5b20014f8a24055a3b63b41 Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Wed, 8 May 2024 09:32:33 +0100 Subject: [PATCH 6/7] update documentation --- .../web/api/document_picture-in-picture_api/using/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/document_picture-in-picture_api/using/index.md b/files/en-us/web/api/document_picture-in-picture_api/using/index.md index cb5b3d2b6b7e76e..95548011d089e3d 100644 --- a/files/en-us/web/api/document_picture-in-picture_api/using/index.md +++ b/files/en-us/web/api/document_picture-in-picture_api/using/index.md @@ -73,7 +73,7 @@ The `width` and `height` options of `requestWindow()` set the Picture-in-Picture ```js async function togglePictureInPicture() { // Early return if there's already a Picture-in-Picture window open - if (window.documentPictureInPicture.window != null) { + if (window.documentPictureInPicture.window) { return; } From 036ba155cf685410345acf3c066d0c02e21a7b4e Mon Sep 17 00:00:00 2001 From: Josh Farrant Date: Wed, 8 May 2024 09:37:17 +0100 Subject: [PATCH 7/7] update incorrect link --- .../web/api/document_picture-in-picture_api/using/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/document_picture-in-picture_api/using/index.md b/files/en-us/web/api/document_picture-in-picture_api/using/index.md index 95548011d089e3d..611323af3e9dafd 100644 --- a/files/en-us/web/api/document_picture-in-picture_api/using/index.md +++ b/files/en-us/web/api/document_picture-in-picture_api/using/index.md @@ -8,7 +8,7 @@ page-type: guide This guide provides a walkthrough of typical usage of the {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}}. -> **Note:** You can see the featured demo in action at [Document Picture-in-Picture API Example](https://mdn.github.io/dom-examples/document-picture-in-picture/) (see the full [source code](https://github.com/chrisdavidmills/dom-examples/tree/main/document-picture-in-picture) also). +> **Note:** You can see the featured demo in action at [Document Picture-in-Picture API Example](https://mdn.github.io/dom-examples/document-picture-in-picture/) (see the full [source code](https://github.com/mdn/dom-examples/tree/main/document-picture-in-picture) also). ## Sample HTML