☰

TwitchPiPButton

Add a PiP button to twitch streams.

// ==UserScript==
// @name        TwitchPiPButton
// @description Add a PiP button to twitch streams.
// @version     1.3
// @match       *://www.twitch.tv/*
// @copyright   2020+, Marcus Zhou
// @namespace   https://greasyfork.org/users/695707
// ==/UserScript==

function enterPictureInPicture() {
  document.querySelector("video")
    .requestPictureInPicture()
    .catch(error => {
      console.log(error);
    });
}

function injectPipBtn() {
  try {
    if (document.querySelector("button#_injectPipBtn") !== null) return;

    const actionContainer = document.querySelector(".player-controls__right-control-group");

    if (!actionContainer) {
      return; // Try again later.
    }

    const enterPipBtnDiv = document.createElement("div");
    enterPipBtnDiv.classList.add("sc-AxjAm");
    enterPipBtnDiv.classList.add("ScAttachedTooltipWrapper-v8mg6d-0");
    enterPipBtnDiv.classList.add("dLtTlU");
    enterPipBtnDiv.innerHTML = `
<button id="_injectPipBtn" class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"><span class="tw-button-icon__icon"><div style="width: 2rem; height: 2rem;"><div class="ScIconLayout-sc-1bgeryd-0 kbOjdP tw-icon"><div class="ScAspectRatio-sc-1sw3lwy-1 dNNaBC tw-aspect"><div class="ScAspectSpacer-sc-1sw3lwy-0 gkBhyN"></div><svg width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px" class="ScIconSVG-sc-1bgeryd-1 cMQeyU"><g><path d="M 15.832031 5.832031 L 9.167969 5.832031 L 9.167969 10.832031 L 15.832031 10.832031 Z M 17.5 2.5 L 2.5 2.5 C 1.582031 2.5 0.832031 3.25 0.832031 4.167969 L 0.832031 15.832031 C 0.832031 16.75 1.582031 17.484375 2.5 17.484375 L 17.5 17.484375 C 18.417969 17.484375 19.167969 16.75 19.167969 15.832031 L 19.167969 4.167969 C 19.167969 3.25 18.417969 2.5 17.5 2.5 Z M 17.5 15.839844 L 2.5 15.839844 L 2.5 4.148438 L 17.5 4.148438 Z M 17.5 15.839844 "/></g></svg></div></div></div></span></button>
<div class="ScAttachedTooltip-v8mg6d-1 jouePo tw-tooltip" data-a-target="tw-tooltip-label" role="tooltip" direction="tw-tooltip--up">Picture-in-Picture</div>
`;

    const insertOffset = actionContainer.childNodes.length - 1;
    actionContainer.insertBefore(enterPipBtnDiv, actionContainer.childNodes[insertOffset]);
    
    document.querySelector("#_injectPipBtn").addEventListener("click", enterPictureInPicture);

    console.log("[TwitchPiPButton] Injected PiP Button.");
  } catch (err) {
    console.error("[TwitchPiPButton] " + err);
  }
}

setInterval(injectPipBtn, 1000);