☰

RedGifs Embed Auto-hide Controls

A userscript that automatically hides RedGifs embed player controls and the cursor when the mouse is idle, restoring them on movement.

スクリプトをインストールするには、Tampermonkey, Greasemonkey や Violentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、 Tampermonkey や Violentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、Tampermonkey や Violentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、Tampermonkey や Userscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください
// ==UserScript==
// @name         RedGifs Embed Auto-hide Controls
// @namespace    http://tampermonkey.net/
// @version      1.6
// @description  A userscript that automatically hides RedGifs embed player controls and the cursor when the mouse is idle, restoring them on movement.
// @author       vexxowo
// @icon         https://www.google.com/s2/favicons?sz=64&domain=redgifs.com
// @match        https://www.redgifs.com/*
// @match        https://redgifs.com/*
// @license      MIT
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
  'use strict';

  const HIDE_DELAY = 2000; // ms of stillness before hiding

  const style = document.createElement('style');
  style.textContent = `
	.logo,
	.playerBottom,
	.download-svg,
    .sidebar {
      opacity: 0 !important;
      transition: opacity 0.3s ease !important;
      pointer-events: none !important;
    }
	body.rgf-active .logo,
	body.rgf-active .playerBottom,
	body.rgf-active .download-svg,
    body.rgf-active .sidebar {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    body:not(.rgf-active) {
      cursor: none !important;
    }
  `;
  document.head.appendChild(style);

  let timer;

  document.addEventListener('mousemove', () => {
    document.body.classList.add('rgf-active');
    clearTimeout(timer);
    timer = setTimeout(() => {
      document.body.classList.remove('rgf-active');
    }, HIDE_DELAY);
  });
})();