Zoom function for YouTube

YouTube video zoom feature
目前為 2020-09-10 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
"use strict";
// ==UserScript==
// @name            Zoom function for YouTube
// @name:ja         YouTubeで動画をズーム
// @description     YouTube video zoom feature
// @description:ja  YouTubeの動画プレイヤーにズーム機能を追加します
// @version         2.0.0
// @include         /https?:\/\/www\.youtube\.com.*/
// @author          sititou70
// @namespace       https://github.com/sititou70/
// @run-at          document-idle
// ==/UserScript==
(function () {
    // consts
    var SCRIPT_NAME = 'youtube video zoom';
    var VIDEO_CONTAINER_SELECTOR = '#movie_player';
    var VIDEO_SELECTOR = VIDEO_CONTAINER_SELECTOR + " video";
    // functions
    var getScaleFromVideo = function (video) {
        var scale_string = video.style.transform.match(/scale\((.+?)\)/);
        if (scale_string === null)
            return 1;
        var scale = parseFloat(scale_string[1]);
        if (isNaN(scale))
            return 1;
        return scale;
    };
    var zoomVideoToRect = function (video, rect) {
        var video_container = document.querySelector(VIDEO_CONTAINER_SELECTOR);
        if (video_container === null)
            return;
        var video_container_rect = video_container.getBoundingClientRect();
        var player_aspect_ratio = video_container_rect.width / video_container_rect.height;
        var selected_aspect_ratio = rect.width / rect.height;
        var fit_width = player_aspect_ratio < selected_aspect_ratio; // or height?
        var scale = fit_width
            ? video_container_rect.width / rect.width
            : video_container_rect.height / rect.height;
        var centering_offset = {
            x: fit_width ? 0 : (video_container_rect.width / scale - rect.width) / 2,
            y: fit_width
                ? (video_container_rect.height / scale - rect.height) / 2
                : 0,
        };
        video.style.transform = "scale(" + scale + ") translateX(" + (-rect.top_left.x + centering_offset.x) + "px) translateY(" + (-rect.top_left.y + centering_offset.y) + "px)";
        video.style.transformOrigin = 'top left';
        video.style.transition = 'all 0.3s ease';
    };
    var drag_start_position;
    var handleDragStart = function (e) {
        var video = e.target;
        var video_rect = video.getBoundingClientRect();
        var scale = getScaleFromVideo(video);
        drag_start_position = {
            x: (e.clientX - video_rect.x) / scale,
            y: (e.clientY - video_rect.y) / scale,
        };
    };
    var handleDragEnd = function (e) {
        var video = e.target;
        var video_rect = video.getBoundingClientRect();
        var scale = getScaleFromVideo(video);
        var drag_end_position = {
            x: (e.clientX - video_rect.x) / scale,
            y: (e.clientY - video_rect.y) / scale,
        };
        var top_left = {
            x: Math.min(drag_start_position.x, drag_end_position.x),
            y: Math.min(drag_start_position.y, drag_end_position.y),
        };
        var bottom_right = {
            x: Math.max(drag_start_position.x, drag_end_position.x),
            y: Math.max(drag_start_position.y, drag_end_position.y),
        };
        var selected_rect = {
            top_left: top_left,
            bottom_right: bottom_right,
            width: bottom_right.x - top_left.x,
            height: bottom_right.y - top_left.y,
        };
        if (selected_rect.width <= 10 || selected_rect.height <= 10)
            return;
        zoomVideoToRect(video, selected_rect);
        video.click();
    };
    var setupZoomFeature = function () {
        var video = document.querySelector(VIDEO_SELECTOR);
        if (video === null)
            return;
        video.addEventListener('mousedown', handleDragStart);
        video.addEventListener('mouseup', handleDragEnd);
    };
    var onKeyPress = function (e) {
        var video = document.querySelector(VIDEO_SELECTOR);
        if (video === null)
            return;
        if (e.key === 'r')
            video.style.transform = '';
    };
    // main
    var main = function () {
        var document_observer = new MutationObserver(setupZoomFeature);
        document_observer.observe(document.body, {
            attributes: true,
        });
        document.addEventListener('keypress', onKeyPress);
    };
    console.log("[" + SCRIPT_NAME + "] loaded.");
    main();
})();
欢迎访问Greasy Fork镜像
