twitch_clips_download_button

twitch_clips_download_button.js

// ==UserScript==
// @name     twitch_clips_longclickdown
// @version  1
// @grant    none
// @match    *://www.twitch.tv/*/clip/*
// @match    *://clips.twitch.tv/*
// @run-at   document-end
// @grant    GM_addStyle
// ==/UserScript==

GM_addStyle(`
  .btn_download {
    width:30px;
    height:30px;
  }  
  .btn_download:hover {
    background-color:rgba(255,255,255,0.1);
    border-radisu:3px;
  }
  .btn_download .tw-icon__svg {
    transform: rotate(90deg) scale(0.7);
    color:white;
  }
`);

// console.log(document.querySelector('.video-player'));
const TIMEOUT = 5;


setTimeout(() => {
  
  // if (videoUrl) {
    let playerWrapper = document.querySelector('.video-player'),
        videoUrl = playerWrapper.querySelector('video').currentSrc;
  
    let setupIcon = document.querySelector('button[data-a-target="player-settings-button"]'),
        setupIconParent = setupIcon.parentNode.parentNode.parentNode.parentNode,
        setupIconSibling = setupIconParent.childNodes[0].nextSibling
 
    console.log(`download url : ${videoUrl}`);
  
    var btn = document.createElement("button"); 
    var btn_in = `
      <svg class="tw-icon__svg" width="100%" height="100%" version="1.1" viewBox="0 0 20 20" x="0px" y="0px">
        <g>
          <path d="M4 16V4H2v12h2zM13 15l-1.5-1.5L14 11H6V9h8l-2.5-2.5L13 5l5 5-5 5z"></path>
        </g>
      </svg>
    `;
  
    btn.innerHTML = btn_in;
    btn.classList.add('btn_download');
  
    setupIconParent.insertBefore(btn, setupIconSibling);

    btn.addEventListener('click', () => {
      open(videoUrl);
    });
  
}, TIMEOUT * 1000);

click event => create btn