Cкрипт для Steam: Раскрытие на полный экран видео 2Х клику + скрытие панели воспроизведения если курсор не двигается
Чтобы удобнее смотреть видео игр при ознакомлении.
Ранее приходилось целиться в мелкую кнопку в углу видео каждый раз.
Делал для себя, программировать не умею, но с помощью ChatGPT получилось 😁, результатом решил поделиться с вами.
Установка через расширение для браузера Tampermonkey
Скопируйте и добавьте в панели расширения:
// ==UserScript==
// @name Steam - Двойной клик для полноэкранного режима + Скрытие UI и курсора в полноэкранном режиме с задержкой
// @namespace yourNamespace
// @version 3.1
// @description Скрытие UI и курсора в полноэкранном режиме с задержкой и управление полноэкранным режимом через двойной клик на плеер
// @author 333hronos + ChatGPT
// @match *://store.steampowered.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=steampowered.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
let cursorIdleTimeout;
let isFullScreen = false; // Флаг полноэкранного режима
// Функция для скрытия UI видео с плавной анимацией
function hideUI(controlOverlay, titleBar) {
if (controlOverlay) {
controlOverlay.style.transition = 'bottom 0.25s ease';
controlOverlay.style.bottom = '-35px'; // Скрываем панель
}
if (titleBar) {
titleBar.style.transition = 'top 0.25s ease';
titleBar.style.top = '-50px'; // Скрываем заголовок
}
}
// Функция для показа UI видео
function showUI(controlOverlay, titleBar) {
if (controlOverlay) {
controlOverlay.style.transition = 'bottom 0.25s ease';
controlOverlay.style.bottom = '0px'; // Показываем панель
}
if (titleBar) {
titleBar.style.transition = 'top 0.25s ease';
titleBar.style.top = '0px'; // Показываем заголовок
}
}
// Функция для скрытия курсора
function hideCursor() {
document.body.style.cursor = 'none'; // Скрываем курсор
}
// Функция для показа курсора
function showCursor() {
document.body.style.cursor = 'auto'; // Показываем курсор
}
// Функция для обработки полноэкранного режима
function handleFullScreenChange() {
const controlOverlay = document.querySelector('.html5_video_overlay');
const titleBar = document.querySelector('.html5_video_titlebar_ctn');
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
if (!isFullScreen) {
isFullScreen = true;
if (controlOverlay || titleBar) {
showUI(controlOverlay, titleBar); // Показываем UI сразу, когда переходим в полноэкранный режим
// Запускаем таймер для скрытия UI и курсора после бездействия
cursorIdleTimeout = setTimeout(() => {
hideUI(controlOverlay, titleBar);
hideCursor(); // Скрываем курсор
}, 2500);
}
}
} else {
if (isFullScreen) {
isFullScreen = false;
clearTimeout(cursorIdleTimeout); // Сбрасываем таймер
showUI(controlOverlay, titleBar); // Показываем UI, если не в полноэкранном режиме
showCursor(); // Показываем курсор
}
}
}
// Функция для переключения в полноэкранный режим по двойному клику
function toggleFullScreen(event) {
const videoElement = event.currentTarget;
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (videoElement.requestFullscreen) {
videoElement.requestFullscreen();
} else if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
} else if (videoElement.webkitRequestFullscreen) {
videoElement.webkitRequestFullscreen();
} else if (videoElement.msRequestFullscreen) {
videoElement.msRequestFullscreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
// Найти кнопку полноэкранного режима внутри видео и вызвать ее клик
const fullscreenButton = videoElement.querySelector('.fullscreen_button');
if (fullscreenButton) {
fullscreenButton.click();
}
}
// Функция для отслеживания видео на странице
function trackVideos() {
const videoElements = document.querySelectorAll('.highlight_player_item.highlight_movie');
videoElements.forEach((videoElement) => {
const videoPlayer = videoElement.querySelector('video');
const controlOverlay = videoElement.querySelector('.html5_video_overlay');
const titleBar = videoElement.querySelector('.html5_video_titlebar_ctn');
if (videoPlayer && (controlOverlay || titleBar)) {
// Отслеживаем событие переключения в полноэкранный режим через двойной клик
videoElement.addEventListener('dblclick', (event) => {
toggleFullScreen(event); // Переключаем в полноэкранный режим
});
// Обрабатываем изменение полноэкранного режима для каждого видео
document.addEventListener('fullscreenchange', handleFullScreenChange);
document.addEventListener('webkitfullscreenchange', handleFullScreenChange);
document.addEventListener('mozfullscreenchange', handleFullScreenChange);
document.addEventListener('MSFullscreenChange', handleFullScreenChange);
// Отслеживаем движение курсора для этого видео
videoElement.addEventListener('mousemove', () => {
if (isFullScreen && (controlOverlay || titleBar)) {
clearTimeout(cursorIdleTimeout); // Сбрасываем таймер
showUI(controlOverlay, titleBar); // Показываем UI при движении курсора
showCursor(); // Показываем курсор
cursorIdleTimeout = setTimeout(() => {
hideUI(controlOverlay, titleBar); // Скрываем UI
hideCursor(); // Скрываем курсор
}, 2000); // После бездействия скрываем UI и курсор
}
});
}
});
}
// Проверка всех видео на странице
trackVideos();
// Добавляем интервал для проверки новых видео
setInterval(trackVideos, 1000); // Каждые 1 секунду проверяем
})();
Видео корректно переключается на высококачественное, при открытии на весь экран двойным кликом. Так же, как это срабатывает при нажатии на кнопку полноэкранного режима.
8 комментариев