DEV Community: Juwan Petty

Picture-in-Picture API 🖼

Juwan Petty — Sun, 15 Mar 2020 20:32:13 +0000

If you want to see the Picture-in-Picture in action, here's a CodePen link to try it out.

Picture-in-Picture allows users to pop a video out into a floating window that always stays on top of others windows, so that they can keep watching it, while interacting with other sites, or applications.

With the Picture-in-Picture API, developers can control Picture-in-Picture for video elements on websites.

For better specificity and in a real world example, I recommend sticking with getElementById() but in this example querySelectorAl() works fine.

const video = document.querySelectorAll("video")[0];
const button = document.querySelector("button");

Feature Detection

Because Picture-in-Picture isn't fully supported and some browsers handle implementation differently, it's a great idea to check that the API is in fact supported in the user's browser.

We can then hide or disable the video button if Picture in Picture is not supported.

button.hidden =
  !document.pictureInPictureEnabled || video.disablePictureInPicture;

Entering Picture-in-Picture

To enter Picture-in-Picture, we first need to respond to a user's click, so we'll wrap our code around an addEventListener that listens for a click on the button element.

Inside the event listener, we call requestPictureInPicture() on the video element, however we don't just stop there. requestPictureInPicture() returns a promise, so in case the video fails to go into Picture-in-Picture mode, we can catch that error, and either perform another action or log the error to the console.

video.requestPictureInPicture().catch(error => {
  // Video failed to enter Picture-in-Picture mode.
});

Leaving Picture-in-Picture

Because we also want to handle leaving Picture-in-Picture mode, we're going to wrap our code inside the event listener with an if statement. If there is no element in Picture-in-Picture mode yet, we can go ahead and request it, otherwise if there is an element in Picture-in-Picture mode and we click the button, we'll want to exit Picture-in-Picture mode.

To actually handle leaving Picture-in-Picture, we call document.exitPictureInPicture() and add on a catch block to capture any errors that may occur, and log them out to the user.

button.addEventListener("click", () => {
  if (!document.pictureInPictureElement) {
    video.requestPictureInPicture().catch(error => {
      // Video failed to enter Picture-in-Picture mode.
    });
  } else {
    document.exitPictureInPicture().catch(error => {
      // Video failed to leave Picture-in-Picture mode.
    });
  }
});

Listening to Picture-in-Picture Events

Because there are many ways a browser may allow users to enter and exit Picture-in-Picture mode, we're given two events that detect these changes: enterpictureinpicture and leavepictureinpicture. With these events, we could update the text on the button depending on whether the user is in Picture-in-Picture mode or not.

video.addEventListener("enterpictureinpicture", event => {
  // Video entered Picture-in-Picture.
  button.textContent = "Leave Picture-in-Picture";
});

video.addEventListener("leavepictureinpicture", event => {
  // Video left Picture-in-Picture.
  button.textContext = "Enter Picture-in-Picture";
});

Browser Support

Picture-in-Picture API is currently sitting at 29.31% as of this writing. While it's supported mainly by popular browsers, these browsers may each handle the implementation a little different.

Resources

Want to chat? 🗣

— Find me on my website / Twitter / Instagram 🔥

Web Share API

Juwan Petty — Tue, 25 Feb 2020 00:05:17 +0000

Web Share API

If you want to see the Web Share API in action, here's a CodePen link to try it out.

The Web Share API gives web apps the ability to share data like: links, text, and files, just like you would in a native app.

Some requirements

Before you can add this API on your own web project, there are two major things to note:

Your website has to be served over HTTPS. The API also works when running your site on a localhost server, so you will still be able to test it locally.
Can only be invoked in response to a user action, such as a button click event

Using the Web Share API

To start using the Web Share API, pass an object to the promise-based share() method on the navigator object. Each property on the object is optional. However, the object you pass must contain at least one of the following properties: title, text, url or files to work without throwing an error.

navigator
  .share({
    title,
    text,
    url
  })
  .then(() => {
    console.log("");
  })
  .catch(error => {
    console.log(error);
  });

Sharing a link with text

To share a link with text, we call the navigator.share() method and pass an object that contains at least one of the following fields:

url: A string representing the link you want to share (here you can grab the page URL).
title: A string representing the title of the data you want to share (here you can grab the page title).
text: A string representing any text you want to include.

So if we wanted to share this natively:

url: '<Github repo name>',
title: "Web Share API",
text: "Sent with the Web Share API"

The implementation would look like this:

navigator
  .share({
    title: "Web Share API",
    text: "Sent with the Web Share API",
    url: "<Github repo name>"
  })
  .then(() => {
    console.log("Shared successfully.");
  })
  .catch(error => {
    console.log("There was an error sharing:", error);
  });

Remember, the Web Share API isn't supported on all browsers so we're going to check to see if it's supported on the user's browser:

if (navigator.share) {
  navigator
    .share({
      title: "Web Share API",
      text: "Sent with the Web Share API",
      url: "<Github repo name>"
    })
    .then(() => {
      console.log("Shared successfully.");
    })
    .catch(error => {
      console.log("There was an error sharing:", error);
    });
} else {
  console.log("The Web Share API is not supported in your browser.");
}

And because the API can only be triggered by a click event, we're going to wrap all our code around a button trigger:

button.addEventListener("click", event => {
  if (navigator.share) {
    navigator
      .share({
        title: "Web Share API",
        text: "Sent with the Web Share API",
        url: "<Github repo name>"
      })
      .then(() => {
        console.log("Shared successfully.");
      })
      .catch(error => {
        console.log("There was an error sharing:", error);
      });
  } else {
    console.log("The Web Share API is not supported in your browser.");
  }
});

And voilà! Try out the demo of the Web Share API!

Browser Support

This Web Share API is currently only supported in Chrome for Android, and Safari for desktop and iOS. It's also an experimental API at the time of writing this, so expect some behavior to change in the future.

Resources

prefers-color-scheme 🌗

Juwan Petty — Sat, 15 Feb 2020 04:47:23 +0000

If you want to see an example of prefers-color-scheme in action, here's a CodePen link.

prefers-color-scheme is a CSS media query that detects the current theme preference of the user's operating system.

@media (prefers-color-scheme: dark) {
  .element {
    background: black;
    color: white;
  }
}

The prefers-color-scheme media query has two values that you can specify: light and dark. These values allow you to customize the theme of the page with CSS depending on the user's preference.

light: Indicates that the user has notified the system that they prefer a page that has a light theme (dark text on light background).

dark: Indicates that the user has notified the system that they prefer a page that has a dark theme (light text on dark background).

/* Light mode */
@media (prefers-color-scheme: light) {
  .element {
    background: white;
    color: black;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .element {
    background: black;
    color: white;
  }
}

For the scenario where a user has no preference, you can pass no-preference to add a "default" theme to the page.

Browser Support

At the time of writing this post, browser support for prefers-color-scheme sits at 78% with Edge and Opera Mini along with other mobile browsers not supporting the CSS media query.