☰

Greasy Fork is available in English.

Video Zoom Controls with Upscaling and Pan

Allows zooming in and out on any video playing within the browser with keys z (zoom in) and x (zoom out), with upscaling for better picture quality, and panning with Shift + A, W, S, D. Press Shift + R to reset zoom and pan.

// ==UserScript==
// @name         Video Zoom Controls with Upscaling and Pan
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Allows zooming in and out on any video playing within the browser with keys z (zoom in) and x (zoom out), with upscaling for better picture quality, and panning with Shift + A, W, S, D. Press Shift + R to reset zoom and pan.
// @author       Your Name
// @match        *://*/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // Function to zoom the video
    function zoomVideo(video, scaleFactor) {
        const currentScale = parseFloat(video.dataset.scale) || 1;
        const newScale = currentScale * scaleFactor;
        video.style.transform = `scale(${newScale}) translate(${video.dataset.panX}px, ${video.dataset.panY}px)`;
        video.dataset.scale = newScale;
    }

    // Function to pan the video
    function panVideo(video, deltaX, deltaY) {
        const panX = parseFloat(video.dataset.panX) || 0;
        const panY = parseFloat(video.dataset.panY) || 0;
        video.dataset.panX = panX + deltaX;
        video.dataset.panY = panY + deltaY;
        zoomVideo(video, 1); // Reset zoom to apply pan
    }

    // Function to reset zoom and pan
    function resetZoomAndPan(video) {
        video.dataset.scale = 1;
        video.dataset.panX = 0;
        video.dataset.panY = 0;
        zoomVideo(video, 1); // Reset zoom and pan
    }

    // Apply image-rendering property for better quality
    const style = document.createElement('style');
    style.innerHTML = `
        video {
            image-rendering: optimizeQuality; /* You can change this to 'crisp-edges' or other values for different interpolation */
        }
    `;
    document.head.appendChild(style, {nonce: 'Trusted Type Policy'});

    // Event listener for keypress
    document.addEventListener('keypress', function(event) {
        if (event.shiftKey && event.key === 'Z') {
            // Zoom in when Shift + Z keys are pressed
            const videos = document.querySelectorAll('video');
            videos.forEach(video => zoomVideo(video, 1.02)); // You can adjust the zoom factor here
        } else if (event.shiftKey && event.key === 'X') {
            // Zoom out when Shift + X keys are pressed
            const videos = document.querySelectorAll('video');
            videos.forEach(video => zoomVideo(video, 0.98)); // You can adjust the zoom factor here
        }
    });

    // Event listener for Shift + A, W, S, D keys for panning
    document.addEventListener('keydown', function(event) {
        const deltaX = event.key === 'A' ? -10 : event.key === 'D' ? 10 : 0;
        const deltaY = event.key === 'W' ? -10 : event.key === 'S' ? 10 : 0;

        if (deltaX !== 0 || deltaY !== 0) {
            // Pan when Shift + A, W, S, or D keys are pressed
            const videos = document.querySelectorAll('video');
            videos.forEach(video => panVideo(video, deltaX, deltaY)); // You can adjust the pan speed here
        } else if (event.shiftKey && event.key === 'R') {
            // Reset zoom and pan when Shift + R keys are pressed
            const videos = document.querySelectorAll('video');
            videos.forEach(video => resetZoomAndPan(video));
        }
    });

    // Store original zoom level when video is first loaded
    document.addEventListener('DOMContentLoaded', function() {
        const videos = document.querySelectorAll('video');
        videos.forEach(video => {
            video.dataset.scale = 1;
            video.dataset.panX = 0;
            video.dataset.panY = 0;
        });
    });
})();