Telegram | Fix fullscreen without custom controls

fix fullscreen mode for videos without custom controls

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name            Telegram | Fix fullscreen without custom controls
// @namespace       https://greasyfork.org/users/821661
// @version         1.1
// @description     fix fullscreen mode for videos without custom controls
// @author          hdyzen
// @match           https://web.telegram.org/a/*
// @grant           none
// @license         GPL-3.0-only
// ==/UserScript==

const stl = `
    .VideoPlayer:fullscreen video { 
        max-height: unset !important; 
    } 
    .VideoPlayer:fullscreen > :first-child { 
        width: 100% !important; 
        height: 100% !important; 
    }
`;

document.addEventListener("mousedown", async (ev) => {
    const fullscreen = ev.target.closest(".Button.fullscreen");
    if (!fullscreen) return;

    ev.stopImmediatePropagation();

    if (document.fullscreenElement) {
        document.exitFullscreen();
        return;
    }

    const player = document.querySelector(".MediaViewerSlide--active .VideoPlayer");
    if (!player) return;

    await player.requestFullscreen();

    const video = player.querySelector("video");
    setTimeout(() => video.removeAttribute("controls"), 100);
});

document.head.insertAdjacentHTML("beforeend", `<style>${stl}</style>`);