Youtube video crop

try to take over the world!
当前为 2017-05-07 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Youtube video crop
// @namespace    http://tampermonkey.net/
// @version      0.1
// @locale       en
// @description  try to take over the world!
// @author       You
// @match        *://www.youtube.com/watch?v=*
// @require      https://code.jquery.com/jquery-3.2.1.min.js
// @grant        none
// ==/UserScript==
(function () {
    'use strict';
    function injectCSS(css) {
        var styleTag = $('<style>' + css + '</style>');
        $('html > head').append(styleTag);
        console.log('injected css:', css);
    }
    injectCSS(
        '#_area_overlay{' +
        'display: none; position: absolute; pointer-events: none; ' +
        'top: 0: left: 0; z-index:10; ' +
        'background: rgba(255, 0, 0, 0.3); ' +
        '} ' +
        '._stupid_btn{'+
        'vertical-align: top; font-weight: bold; ' +
        'width: auto !important; padding-right: 5px; ' +
        '}'
    );

    // setup UI
    var overlay = $('<div id="_area_overlay"></div>');
    $('body').append(overlay);
    $('.ytp-right-controls').prepend('<button class="_stupid_btn ytp-button" title="Crop video" id="_btn_crop">Crop</button>');
    $('.ytp-right-controls').prepend('<button class="_stupid_btn ytp-button" title="Restore cropped video" id="_btn_uncrop" style="display:none">Uncrop</button>');
    var player = $('.video-stream');
    
    // area calculation
    var _is_down = false;
    var _area_updating = false;
    var sx,sy;
    var sx_,sy_;
    var ex,ey;
    sx = sy = ex = ey = sx_ = sy_ = 0;
    var scale = 1;
    $('#player').mousedown(function (e) {
        if (!_area_updating) return;
        _is_down = true;
        var vwidth = $('.video-stream').width();
        var vheight = player.height();
        var offset = $('.video-stream').offset();
        sx_ = (e.pageX - offset.left);
        sy_ = (e.pageY - offset.top);
        sx = ((100 / vwidth) * sx_);
        sy = ((100 / vheight) * sy_);
        overlay.css('top', e.pageY + 'px');
        overlay.css('left', e.pageX + 'px');
    });
    $('#player').mouseup(function (e) {
        if ((!_area_updating) || (!_is_down)) return;
        _is_down = false;
        _update_area();
    });
    $('#player').mousemove(function (e) {
        if ((!_area_updating) || (!_is_down)) return;
        var vwidth = $('.video-stream').width();
        var offset = $('.video-stream').offset();
        ex = (e.pageX - offset.left);
        ey = (e.pageY - offset.top);
        scale = (vwidth * 1) / (ex - sx_);
        overlay.css('width', (ex - sx_) + 'px');
        overlay.css('height', (ey - sy_) + 'px');
    });
    $('#player').mouseleave(function (e) {
        if ((!_area_updating) || (!_is_down)) return;
        _is_down = false;
        _update_area();
    });
    
    
    function scale_video(x, y, scale) {
        injectCSS('.video-stream{ transform: ' +
                  'translate(-50%, -50%) ' +
                  'scale(' + scale + ') ' +
                  'translate(50%, 50%) ' +
                  'translate(-' + x + '%, -' + y + '%)' +
                  '}');
    }
    function _update_area() {
        var player = $('.video-stream');
        var vwidth = player.width();
        var vheight = player.height();
        scale_video(sx, sy, scale);
        overlay.css('display', 'none');
        _area_updating = false;
    }
    
    $('#_btn_crop').click(function (e) {
        overlay.css('display', 'block');
        $('#_btn_uncrop').css('display', "inline");
        _area_updating = true;
    });
    
    $('#_btn_uncrop').click(function () {
        injectCSS('.video-stream{ transform:translate(-' + 0 + '%, ' + 0 + '%) scale(1) }');
        this.style.display = "none";
    });
}) ();