// ==UserScript==
// @name         Embed Youtube Take Screenshot
// @namespace    http://tampermonkey.net/
// @version      Beta
// @description  ...
// @author       None
// @match        https://www.youtube.com/embed/*
// @icon         https://www.svgrepo.com/show/111512/photo-camera.svg
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  const player = document.querySelector(".html5-video-player");

  function getPlayerTime(){
    const currentTime = player.getCurrentTime();
    const hour = Math.floor(currentTime/3600),
          min = Math.floor(currentTime%3600/60),
          sec = Math.floor(currentTime%60);
    return (0 < hour ? hour + "h" : "") + (0 < min ? (0 < hour && 10 > min ? "0" : "") + min + "m" : 0 < hour && 0 === min ? "00m" : "0m") + (10 > sec ? "0" : "") + sec + "s"
  }

  function cleanFilename(string){
    return string.replace(/[\\/:*?"<>|]+/g,"");
  }

  function takeScreenshot(){
    const videoData = player.getVideoData(),
          video = document.querySelector(".video-stream.html5-main-video"),
          canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d");

    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);

    let dataURL = canvas.toDataURL("image/png");
    const author = videoData.author;
    const title = videoData.title;
    const time = getPlayerTime();
    const filename = cleanFilename(`${author} - ${title} [${time}]`)
    console.log('filename', filename)

    canvas.toBlob((blob) => {
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = `${filename}.png`
      a.click();
      URL.revokeObjectURL(a.href);
    })
  }

  function createSvgButton (className, viewBox, paths, func) {
    const button = document.createElement('button'),
          svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

    button.className = "ytp-button";
    button.classList.add(`ytp-my-${className}`);

    svg.setAttributeNS(null, "viewBox", viewBox);
    svg.setAttributeNS(null, "height", "100%");
    svg.setAttributeNS(null, "width", "100%");

    for (var d of paths){
      const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
      path.setAttributeNS(null, "d", d);
      path.setAttributeNS(null, "fill", "#fff");
      svg.appendChild(path);
    }

    button.append(svg);
    button.addEventListener('click', takeScreenshot);
    return button;
  };

  const captureButton = createSvgButton('capture', '-97.5 -97.5 585.00 585.00' ,
  ['M365,95h-70.855l-15.1-40.267C276.85,48.878,271.253,45,265,45H125c-6.253,0-11.85,3.878-14.045,9.733 L95.855,95H25c-13.807,0-25,11.193-25,25v200c0,13.807,11.193,25,25,25h340c13.807,0,25-11.193,25-25V120 C390,106.193,378.807,95,365,95z M195,125c52.383,0,95,42.617,95,95s-42.617,95-95,95s-95-42.617-95-95S142.617,125,195,125z',
  'M130,220c0,35.841,29.159,65,65,65s65-29.159,65-65s-29.159-65-65-65S130,184.159,130,220z']); // SVG: https://www.svgrepo.com/svg/111512/photo-camera

  const rc = document.querySelector('.ytp-right-controls');
  rc.prepend(captureButton);

})();