☰

Youtube video crop

Crop videos on youtube

  1. // ==UserScript==
  2. // @name         Youtube video crop
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1.2
  5. // @description  Crop videos on youtube
  6. // @locale       en
  7. // @author       You
  8. // @match        *://www.youtube.com/*
  9. // @require      https://code.jquery.com/jquery-3.2.1.min.js
  10. // @grant        none
  11. // ==/UserScript==
  12. (function () {
  13.     'use strict';
  14.     var DEBUG = false;
  15.     
  16.     function injectCSS(css) {
  17.         var styleTag = $('<style>' + css + '</style>');
  18.         $('html > head').append(styleTag);
  19.         console.log('injected css:', css);
  20.     }
  21.     injectCSS(
  22.         '#_area_overlay{' +
  23.         'display: none; position: absolute; pointer-events: none; ' +
  24.         'top: 0: left: 0; z-index:10; ' +
  25.         'background: rgba(255, 0, 0, 0.3); ' +
  26.         '} ' +
  27.         '._stupid_btn{'+
  28.         'vertical-align: top; font-weight: bold; ' +
  29.         'width: auto !important; '+
  30.         'padding-right: 5px; padding-left: 5px;' +
  31.         '}'
  32.     );
  33.     
  34.     var _is_down = false;
  35.     var _area_updating = false;
  36.     var sx,sy;
  37.     var sx_,sy_;
  38.     var ex,ey;
  39.     var scale = 1;
  40.     var overlay;
  41.     var _is_cropped = false;
  42.     
  43.     function scale_video(x, y, scale) {
  44.         injectCSS('.video-stream{ transform: ' +
  45.                   'translate(-50%, -50%) ' +
  46.                   'scale(' + scale + ') ' +
  47.                   'translate(50%, 50%) ' +
  48.                   'translate(-' + x + '%, -' + y + '%)' +
  49.                   '}');
  50.     }
  51.     function _update_area() {
  52.         var player = $('.video-stream');
  53.         var vwidth = player.width();
  54.         var vheight = player.height();
  55.         scale_video(sx, sy, scale);
  56.         overlay.css('display', 'none');
  57.         _area_updating = false;
  58.     }
  59.     
  60.     function setup_cropper(){
  61.         if(DEBUG) console.debug('Try setting up cropper.');
  62.         if( $('.video-stream').length == 0) return;
  63.         if(DEBUG) console.debug('Video stream found.');
  64.         overlay = $('#_area_overlay');
  65.         if(overlay.length > 0){
  66.             if(DEBUG) console.debug('Overlay already present.');
  67.         }else{
  68.             if(DEBUG) console.debug('Creating overlay.');
  69.             overlay = $('<div id="_area_overlay"></div>');
  70.             $('body').append(overlay);
  71.             
  72.             if(DEBUG) console.debug('Adding buttons.');
  73.             // we just assume if there is no overlay there are also no new buttons.
  74.             $('.ytp-right-controls').prepend('<button class="_stupid_btn ytp-button" title="Crop video" id="_btn_crop">Crop</button>');
  75.             
  76.             // area calculation
  77.             if(DEBUG) console.debug('Setting up area calulation event handler.');
  78.             sx = sy = ex = ey = sx_ = sy_ = 0;
  79.             $('#player').mousedown(function (e) {
  80.                 if (!_area_updating) return;
  81.                 _is_down = true;
  82.                 var vwidth = $('.video-stream').width();
  83.                 var vheight = $('.video-stream').height();
  84.                 var offset = $('.video-stream').offset();
  85.                 sx_ = (e.pageX - offset.left);
  86.                 sy_ = (e.pageY - offset.top);
  87.                 sx = ((100 / vwidth) * sx_);
  88.                 sy = ((100 / vheight) * sy_);
  89.                 overlay.css('top', e.pageY + 'px');
  90.                 overlay.css('left', e.pageX + 'px');
  91.             });
  92.             $('#player').mouseup(function (e) {
  93.                 if ((!_area_updating) || (!_is_down)) return;
  94.                 _is_down = false;
  95.                 _update_area();
  96.             });
  97.             $('#player').mousemove(function (e) {
  98.                 if ((!_area_updating) || (!_is_down)) return;
  99.                 var vwidth = $('.video-stream').width();
  100.                 var offset = $('.video-stream').offset();
  101.                 ex = (e.pageX - offset.left);
  102.                 ey = (e.pageY - offset.top);
  103.                 scale = (vwidth * 1) / (ex - sx_);
  104.                 overlay.css('width', (ex - sx_) + 'px');
  105.                 overlay.css('height', (ey - sy_) + 'px');
  106.             });
  107.             $('#player').mouseleave(function (e) {
  108.                 if ((!_area_updating) || (!_is_down)) return;
  109.                 _is_down = false;
  110.                 _update_area();
  111.             });
  112.             
  113.             // UI buttons
  114.             var btn = "#_btn_crop";
  115.             if(DEBUG){
  116.                 console.debug('Setting up UI button handler.');
  117.                 var button = $('<button id="_dbg_btn"><h2>CROP</h2></button>');
  118.                 $('#player').prepend(button);
  119.                 btn += ", #_dbg_btn";
  120.             }
  121.             
  122.             $(btn).click(function (e) {
  123.                 if(_is_cropped){
  124.                     injectCSS('.video-stream{ transform:translate(-' + 0 + '%, ' + 0 + '%) scale(1) }');
  125.                     _is_cropped = false;
  126.                     $(btn).text('Crop');
  127.                     return;
  128.                 }
  129.                 $(btn).text('Uncrop');
  130.                 overlay.css('display', 'block');
  131.                 _is_cropped = true;
  132.                 _area_updating = true;
  133.             });
  134.         }
  135.     }
  136.     addEventListener("spfdone", setup_cropper);
  137.     setup_cropper();
  138. }) ();