☰

Twitch PiP button

Add picutre in picture button to twitch.tv player. Only for macOS 10.12+

目前为 2016-11-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Twitch PiP button
  3. // @namespace   https://github.com/valera5505
  4. // @description Add picutre in picture button to twitch.tv player. Only for macOS 10.12+
  5. // @author      Valery Kirichenko
  6. // @homepage    https://github.com/valera5505/twitch-pip-button
  7. // @match       *://www.twitch.tv/*
  8. // @match       *://player.twitch.tv/*
  9. // @version     1.1
  10. // @grant       none
  11. // ==/UserScript==
  12.  
  13. var playerReady = setInterval(function() {
  14. 	if (document.querySelector("div.player-buttons-right")) {
  15. 		clearInterval(playerReady);
  16. 		var css = document.createElement("link");
  17. 		css.rel = "stylesheet";
  18. 		css.href = "https://cdn.rawgit.com/valera5505/twitch-pip-button/master/style.css";
  19. 		document.getElementsByTagName("head")[0].appendChild(css);
  20.  
  21. 		var btn = document.createElement("button");
  22. 		btn.className = "player-button";
  23. 		btn.type = "button";
  24. 		btn.style = "display: inline-block";
  25. 		btn.id = "pip-button";
  26. 		btn.innerHTML = '<span class="icon-1"></span>';
  27. 		btn.style.padding = "1px 5px 1em";
  28.  
  29. 		document.querySelector("div.player-buttons-right").insertBefore(btn, document.querySelector("button.player-button--fullscreen"));
  30. 		btn.addEventListener("click", function() {
  31. 			document.querySelector("video").webkitSetPresentationMode('picture-in-picture');
  32. 		});
  33. 	}
  34. }, 100);