☰

Zoom function for YouTube

YouTube video zoom feature

目前为 2020-09-10 提交的版本，查看 最新版本。

  1. "use strict";
  2. // ==UserScript==
  3. // @name            Zoom function for YouTube
  4. // @name:ja         YouTubeで動画をズーム
  5. // @description     YouTube video zoom feature
  6. // @description:ja  YouTubeの動画プレイヤーにズーム機能を追加します
  7. // @version         2.0.0
  8. // @include         /https?:\/\/www\.youtube\.com.*/
  9. // @author          sititou70
  10. // @namespace       https://github.com/sititou70/
  11. // @run-at          document-idle
  12. // ==/UserScript==
  13. (function () {
  14.     // consts
  15.     var SCRIPT_NAME = 'youtube video zoom';
  16.     var VIDEO_CONTAINER_SELECTOR = '#movie_player';
  17.     var VIDEO_SELECTOR = VIDEO_CONTAINER_SELECTOR + " video";
  18.     // functions
  19.     var getScaleFromVideo = function (video) {
  20.         var scale_string = video.style.transform.match(/scale\((.+?)\)/);
  21.         if (scale_string === null)
  22.             return 1;
  23.         var scale = parseFloat(scale_string[1]);
  24.         if (isNaN(scale))
  25.             return 1;
  26.         return scale;
  27.     };
  28.     var zoomVideoToRect = function (video, rect) {
  29.         var video_container = document.querySelector(VIDEO_CONTAINER_SELECTOR);
  30.         if (video_container === null)
  31.             return;
  32.         var video_container_rect = video_container.getBoundingClientRect();
  33.         var player_aspect_ratio = video_container_rect.width / video_container_rect.height;
  34.         var selected_aspect_ratio = rect.width / rect.height;
  35.         var fit_width = player_aspect_ratio < selected_aspect_ratio; // or height?
  36.         var scale = fit_width
  37.             ? video_container_rect.width / rect.width
  38.             : video_container_rect.height / rect.height;
  39.         var centering_offset = {
  40.             x: fit_width ? 0 : (video_container_rect.width / scale - rect.width) / 2,
  41.             y: fit_width
  42.                 ? (video_container_rect.height / scale - rect.height) / 2
  43.                 : 0,
  44.         };
  45.         video.style.transform = "scale(" + scale + ") translateX(" + (-rect.top_left.x + centering_offset.x) + "px) translateY(" + (-rect.top_left.y + centering_offset.y) + "px)";
  46.         video.style.transformOrigin = 'top left';
  47.         video.style.transition = 'all 0.3s ease';
  48.     };
  49.     var drag_start_position;
  50.     var handleDragStart = function (e) {
  51.         var video = e.target;
  52.         var video_rect = video.getBoundingClientRect();
  53.         var scale = getScaleFromVideo(video);
  54.         drag_start_position = {
  55.             x: (e.clientX - video_rect.x) / scale,
  56.             y: (e.clientY - video_rect.y) / scale,
  57.         };
  58.     };
  59.     var handleDragEnd = function (e) {
  60.         var video = e.target;
  61.         var video_rect = video.getBoundingClientRect();
  62.         var scale = getScaleFromVideo(video);
  63.         var drag_end_position = {
  64.             x: (e.clientX - video_rect.x) / scale,
  65.             y: (e.clientY - video_rect.y) / scale,
  66.         };
  67.         var top_left = {
  68.             x: Math.min(drag_start_position.x, drag_end_position.x),
  69.             y: Math.min(drag_start_position.y, drag_end_position.y),
  70.         };
  71.         var bottom_right = {
  72.             x: Math.max(drag_start_position.x, drag_end_position.x),
  73.             y: Math.max(drag_start_position.y, drag_end_position.y),
  74.         };
  75.         var selected_rect = {
  76.             top_left: top_left,
  77.             bottom_right: bottom_right,
  78.             width: bottom_right.x - top_left.x,
  79.             height: bottom_right.y - top_left.y,
  80.         };
  81.         if (selected_rect.width <= 10 || selected_rect.height <= 10)
  82.             return;
  83.         zoomVideoToRect(video, selected_rect);
  84.         video.click();
  85.     };
  86.     var setupZoomFeature = function () {
  87.         var video = document.querySelector(VIDEO_SELECTOR);
  88.         if (video === null)
  89.             return;
  90.         video.addEventListener('mousedown', handleDragStart);
  91.         video.addEventListener('mouseup', handleDragEnd);
  92.     };
  93.     var onKeyPress = function (e) {
  94.         var video = document.querySelector(VIDEO_SELECTOR);
  95.         if (video === null)
  96.             return;
  97.         if (e.key === 'r')
  98.             video.style.transform = '';
  99.     };
  100.     // main
  101.     var main = function () {
  102.         var document_observer = new MutationObserver(setupZoomFeature);
  103.         document_observer.observe(document.body, {
  104.             attributes: true,
  105.         });
  106.         document.addEventListener('keypress', onKeyPress);
  107.     };
  108.     console.log("[" + SCRIPT_NAME + "] loaded.");
  109.     main();
  110. })();