Youtube Thumbnail Button

Coloca um botão para ver thumbnail de um video do youtube

当前为 2020-12-10 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Youtube Thumbnail Button
  3. // @namespace https://greasyfork.org/users/715485
  4. // @version 0.1
  5. // @description Coloca um botão para ver thumbnail de um video do youtube
  6. // @author Luiz-lp
  7. // @icon https://upload.wikimedia.org/wikipedia/commons/4/4c/YouTube_icon.png
  8. // @match *://*.youtube.com/*
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14. const textStyle = `
  15. .thumbnail-button {
  16. background-color: var(--yt-spec-10-percent-layer);
  17. color: var(--yt-spec-text-secondary);
  18. border-radius: 2px;
  19. padding: var(--yt-button-padding);
  20. margin: auto var(--ytd-subscribe-button-margin, 4px);
  21. white-space: nowrap;
  22. font-size: var(--ytd-tab-system_-_font-size);
  23. font-weight: var(--ytd-tab-system_-_font-weight);
  24. letter-spacing: var(--ytd-tab-system_-_letter-spacing);
  25. text-transform: var(--ytd-tab-system_-_text-transform);
  26. display: flex;
  27. flex-direction: row;
  28. cursor: pointer;
  29. }
  30. .thumbnail-text {
  31. --yt-formatted-string-deemphasize-color: var(--yt-spec-text-secondary);
  32. --yt-formatted-string-deemphasize_-_margin-left: 4px;
  33. --yt-formatted-string-deemphasize_-_display: initial;
  34. }`;
  35. let currentUrl = document.location.href;
  36. let isPlaylist = currentUrl.includes("playlist");
  37.  
  38. css();
  39.  
  40. init(10);
  41.  
  42. locationChange();
  43.  
  44. function init(times) {
  45. for (let i = 0; i < times; i++) {
  46. setTimeout(delButton, 500 * i);
  47. setTimeout(findPanel, 500 * i);
  48. }
  49. }
  50.  
  51. function delButton() {
  52. if (!isPlaylist) return;
  53. document.querySelectorAll("#analytics-button.thumbnail-panel").forEach(panel => {
  54. panel.classList.remove("thumbnail-panel");
  55. panel.querySelector(".thumbnail-button").remove();
  56. });
  57. }
  58.  
  59. function findPanel() {
  60. if (isPlaylist) return;
  61. document.querySelectorAll("#analytics-button:not(.thumbnail-panel)").forEach(panel => {
  62. panel.classList.add("thumbnail-panel");
  63. addButton(panel);
  64. });
  65. }
  66.  
  67. function addButton(panel) {
  68. // button
  69. const button = document.createElement("div");
  70. button.classList.add("thumbnail-button");
  71. button.addEventListener("click", onClick);
  72. // text
  73. const text = document.createElement("span");
  74. text.classList.add("thumbnail-text");
  75. text.innerHTML = "Thumbnail";
  76. // append
  77. panel.insertBefore(button, panel.firstElementChild);
  78. button.appendChild(text);
  79. }
  80.  
  81. function onClick() {
  82. var m = currentUrl.match(/(?:watch\?.*v=|\/v\/)([\w\-=]+)/);
  83. var current_id = m[1];
  84. var url = "http://img.youtube.com/vi/"+ current_id +"/maxresdefault.jpg";
  85. window.open(url);
  86. }
  87.  
  88. function css() {
  89. const style = document.createElement("style");
  90. style.type = "text/css";
  91. style.innerHTML = textStyle;
  92. document.head.appendChild(style);
  93. }
  94.  
  95. function locationChange() {
  96. const observer = new MutationObserver(mutations => {
  97. mutations.forEach(() => {
  98. if (currentUrl !== document.location.href) {
  99. currentUrl = document.location.href;
  100. isPlaylist = currentUrl.includes("playlist");
  101. init(10);
  102. }
  103. });
  104. });
  105. const target = document.body;
  106. const config = { childList: true, subtree: true };
  107. observer.observe(target, config);
  108. }
  109.  
  110. })();