Mobile Video Seek Gesture

좌우 스와이프 제스처로 모바일 브라우저에서 동영상 탐색 기능 제공
目前為 2025-01-23 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name         Mobile Video Seek Gesture
// @namespace    http://tampermonkey.net/
// @version      2.4
// @description  좌우 스와이프 제스처로 모바일 브라우저에서 동영상 탐색 기능 제공
// @author       사용자
// @license      MIT
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let video = null;
    let startX = 0;
    let initialTime = 0;
    let overlay = null;
    let seeking = false;

    function addGestureControls() {
        video = document.querySelector('video');
        if (video && !video.hasAttribute('data-gesture-added')) {
            video.addEventListener('touchstart', onTouchStart);
            video.addEventListener('touchmove', onTouchMove);
            video.addEventListener('touchend', onTouchEnd);
            video.setAttribute('data-gesture-added', 'true');
            createOverlay();
        }
    }

    function createOverlay() {
        overlay = document.createElement('div');
        overlay.style.position = 'absolute';
        overlay.style.top = '50%';
        overlay.style.left = '50%';
        overlay.style.transform = 'translate(-50%, -50%)';
        overlay.style.padding = '10px 20px';
        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        overlay.style.color = '#fff';
        overlay.style.fontSize = '18px';
        overlay.style.textAlign = 'center';
        overlay.style.borderRadius = '8px';
        overlay.style.zIndex = '9999';
        overlay.style.display = 'none';
        video.parentElement.appendChild(overlay);
    }

    function onTouchStart(e) {
        if (!video) return;
        startX = e.touches[0].clientX;
        initialTime = video.currentTime;
        seeking = true;
        overlay.style.display = 'block';
    }

    function onTouchMove(e) {
        if (!seeking || !video) return;
        let deltaX = e.touches[0].clientX - startX;
        let timeChange = deltaX * 0.05;

        let newTime = Math.max(0, initialTime + timeChange);
        video.currentTime = newTime;

        let timeChangeFormatted = formatTimeChange(timeChange);
        overlay.innerHTML = `
            ${formatCurrentTime(newTime)}<br>
            (${timeChange >= 0 ? '+' : ''}${timeChangeFormatted})
        `;
    }

    function onTouchEnd() {
        seeking = false;
        overlay.style.display = 'none';
    }

    function formatCurrentTime(seconds) {
        let absSeconds = Math.abs(seconds);
        let hours = Math.floor(absSeconds / 3600);
        let minutes = Math.floor((absSeconds % 3600) / 60);
        let secs = Math.floor(absSeconds % 60);

        if (hours > 0) {
            return `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${secs < 10 ? '0' : ''}${secs}`;
        } else {
            return `${minutes < 10 ? '0' : ''}${minutes}:${secs < 10 ? '0' : ''}${secs}`;
        }
    }

    function formatTimeChange(seconds) {
        let sign = seconds < 0 ? '-' : ''; // 음수 표시
        let absSeconds = Math.abs(seconds);
        let hours = Math.floor(absSeconds / 3600);
        let minutes = Math.floor((absSeconds % 3600) / 60);
        let secs = Math.floor(absSeconds % 60);
        let fraction = Math.round((absSeconds % 1) * 100);

        if (absSeconds >= 3600) {
            return `${sign}${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${secs < 10 ? '0' : ''}${secs}`;
        } else if (absSeconds >= 60) {
            return `${sign}${minutes < 10 ? '0' : ''}${minutes}:${secs < 10 ? '0' : ''}${secs}`;
        } else {
            return `${sign}${secs < 10 ? '0' : ''}${secs}.${fraction < 10 ? '0' : ''}${fraction}`;
        }
    }

    window.addEventListener('load', addGestureControls);
    document.addEventListener('DOMNodeInserted', addGestureControls);
})();