Youtube Subtitles Edit

A script for changing the ugly ass youtube subtitles on CC. May make it so you can select your own subtitle look later on.

// ==UserScript==
// @name         Youtube Subtitles Edit
// @namespace    http://tampermonkey.net/
// @version      0.7
// @description  A script for changing the ugly ass youtube subtitles on CC. May make it so you can select your own subtitle look later on.
// @author       Dildoer the Cocknight
// @match        *youtube.com/watch*
// @match        *youtube.com/embed*
// @match        https://www.youtube.com/watch*
// @match        https://www.youtube.com/embed*
// @require     https://code.jquery.com/jquery-1.11.0.min.js
// @require     https://code.jquery.com/ui/1.11.4/jquery-ui.js
// @grant        none
// ==/UserScript==
/* jshint -W097 */


//note - my website (therealnig.ga) got hijacked so the manual selector is no longer working! If you want to edit your subs you'll have to do it manually within the script below!

    //vars for my CSS stuff later, will set it so I can change these with a modal selector eventually
    var backgroundcolor = 'transparent'
    var textcolor = 'yellow'
    var fontsize = 150 //goes by Percent- 100% is the default!
    var fontfam = 'Special Elite'
    var textshadow = 'rgba(34, 34, 34, 0.498039) 0px 0px 4px, rgba(34, 34, 34, 0.498039) 0px 0px 4px, rgba(34, 34, 34, 0.498039) 0px 0px 4px, rgba(34, 34, 34, 0.498039) 0px 0px 4px'
 
    // Tells you that the script is working and it picked up the video.
console.log("Video detected - Youtube Subtitles Editor Enabled!")
   
//adds a spacer so we can add from google fonts
var spacer = fontfam.replace(/ /g, "+");
 
    //Gives JQUERYUI.css and a few aditional fonts, gonna add a selector in there later to choose from Google fonts
    $('head').append('<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Orbitron|Oleo+Script|' + spacer + '|Permanent+Marker|,">');
    $('head').append('<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">');
    
 
    //initial css style for the subtitles; gotta change that shit later on
    $('head').append('<style> .captions-text { color:' + textcolor + '!important;  text-shadow:' + textshadow + '!important; font-family:' + fontfam + '!important; background-color:' + backgroundcolor + '!important; font-size:' + fontsize + '%!important; } </style>');
    //creates the menu option in jquery to open the modal for our subtitle customizer
    $('body').append('<div id="dialog" title="Subtitle Edit Menu" <div id="editcontent"> Background: <br> <input class="subBackground" value="transparent"> <br> Text color: <br> <input class="subColor" value="yellow"> </div></div>');
    $('#ytp-main-menu-id').append('<div class="ytp-menuitem" aria-haspopup="true" role="menuitem" tabindex="0"><div class="ytp-menuitem-label"><div><span>Subtitle Editor</span></div></div><button class="ytp-menuitem-content" id="opener">Edit</button></div>');
 

   
        //ui scripts...
       
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 500
      },
      hide: {
        effect: "explode",
        duration: 500
      }
    });
 
    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });